public/user.html

   1 <!doctype html>
   2 <html xmlns:ng="http://angularjs.org">
   3  <script src="http://code.angularjs.org/angular-0.9.17.min.js" ng:autobind></script>
   4  <body>
   5   <script>
   6     function user($xhr,$resource,$log) {
   7         var self = this;
   8
   9         self.r = {};
  10
  11         self.r.CRM_search = $resource('/g/CRM_search/:username', {username:'@search_username'});
  12         self.CRM_search = function(username) {
  13                 if ( ! username ) username = self.search_username;
  14                 $log.info( 'CRM_search', username );
  15                 self.clear();
  16                 self.message.CRM = 'search for '+username;
  17                 self.r.CRM_search.query({username: username}, function(CRM) {
  18                         self.CRM = CRM;
  19                         $log.info( 'CRM', CRM )
  20                         if ( ! CRM.length ) {
  21                                 self.message.CRM = 'no results';
  22                                 return;
  23                         }
  24                         self.message.CRM = null;
  25                         if ( CRM.length == 1 ) {
  26                                 self.selected_username = CRM[0].USERNAME;
  27                                 $log.info( 'auto-selected ', self.selected_username );
  28                         }
  29                 });
  30         };
  31
  32         self.r.LDAP_search = $resource('/g/LDAP_search/:username', {username:'@selected_username'});
  33         self.LDAP_search = function(username) {
  34                 if ( self.selected_username == username ) {
  35                         $log.error("LDAP_search - not changed", username);
  36                         return;
  37                 }
  38
  39                 if ( ! username ) username = self.selected_username;
  40
  41                 if ( ! username ) {
  42                         self.message.LDAP = 'no username';
  43                         return;
  44                 }
  45                 $log.info( 'LDAP_search', username );
  46                 self.clear_LDAP();
  47                 self.selected_username = username;
  48                 self.message.LDAP = 'search '+username;
  49                 self.r.LDAP_search.query({ username: username }, function(LDAP) {
  50                         self.LDAP = LDAP;
  51                         $log.info( 'LDAP', LDAP );
  52                         if ( self.LDAP.length == 0 ) {
  53                                 self.message.LDAP ='no results for '+username;
  54                                 return;
  55                         }
  56                         self.cpe.parser = LDAP[0]._cpe_parser;
  57                         self.cpe.table_name  = 'cpe_' + LDAP[0]._cpe_parser;
  58                         self.username = LDAP[0].cn;
  59                         self.message.LDAP = null;
  60                         $log.info( 'cpe', self.cpe );
  61                 });
  62         };
  63         self.$watch('selected_username', self.LDAP_search );
  64
  65         self.gnuplot_draw = function(h_cols) {
  66                 $log.info( 'gnuplot_draw', h_cols );
  67                 if (h_cols.length) {
  68                         self.gnuplot.cols = h_cols;
  69                 } else {
  70                         $log.warn("no columns for gnuplot");
  71                         return;
  72                 }
  73
  74                 self.message.gnuplot = 'redrawing '+h_cols.join(' ');
  75
  76                 var cols = [ 'timestamp' ];
  77                 for ( var i = 0; i < h_cols.length; i++ ) {
  78                         cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
  79                 }
  80 console.debug( cols );
  81                 self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
  82
  83                 $log.info( 'gnuplot', self.gnuplot );
  84                 self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
  85
  86         };
  87
  88         self.r.table = $resource('/table/:table');
  89         self.table_update = function () {
  90                 if ( ! self.username || ! self.cpe.table_name ) return;
  91                 self.message.table = self.username + ' loading from ' + self.cpe.table_name;
  92                 self.r.table.get({ username: self.username, table: self.cpe.table_name, limit: self.cpe.limit }, function(table) {
  93                         $log.info( 'table', table );
  94                         self.cpe.table = table;
  95                         self.message.table = table.rows.length == 0 ? 'no results' : null;
  96
  97                         if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
  98                                 self.gnuplot_draw( h_cols );
  99                         } else {
 100                                 self.message.gnuplot = 'no graph for ' + self.cpe.parser;
 101                         }
 102                 });
 103         };
 104         self.$watch('username', self.table_update );
 105
 106         this.clear = function() {
 107                 $log.info('clear');
 108                 self.CRM = null;
 109                 this.clear_LDAP();
 110         }
 111
 112         this.clear_LDAP = function() {
 113                 $log.info('clear_LDAP');
 114                 self.LDAP = null;
 115                 self.selected_username = null;
 116                 self.gnuplot = {};
 117                 self.cpe = { limit: 1 };
 118         };
 119
 120         self.message = {};
 121
 122         self.$watch('selected_username', function() {
 123                 if ( self.selected_username == null ) self.clear_LDAP();
 124         });
 125
 126         self.clear();
 127         self.cpe_limit = self.cpe.limit;
 128         self.$watch('cpe_limit', function() {
 129                 $log.info( 'limit', self.cpe.limit = self.cpe_limit );
 130                 self.table_update();
 131         });
 132
 133         this.columns = [
 134                 'USERNAME',
 135                 'BROJ',
 136                 'USLUGA',
 137                 'IP_MANAGEMENT',
 138                 'IP_VOICE',
 139                 'KOLOKACIJA',
 140                 'OPT82'
 141         ];
 142
 143         this.cpe_hash = {
 144                 'Davolink': [ 'Max_down', 'Max_up' ],
 145                 'EasyGateway': [ 'upstreamCurrRate', 'upstreamMaxRate', 'upstreamNoiseMargin' ],
 146         };
 147
 148       this.keys = function(h) {
 149              if ( angular.isArray(h) ) h = h[0];
 150              var keys = [];
 151              for(i in h) if (h.hasOwnProperty(i))
 152              {
 153                keys.push(i);
 154              }
 155              return keys;
 156       };
 157
 158     }
 159
 160     user.$inject = ['$xhr','$resource','$log'];
 161
 162 // http://jsfiddle.net/gronky/cLEck/
 163 angular.formatter('include', {
 164     parse: function(apply, value, list) {
 165         angular.Array[apply ? 'add' : 'remove'](list, value);
 166         return apply;
 167     },
 168     format: function(apply, value, list) {
 169         return angular.Array.indexOf(list, value) != -1;
 170     },
 171 });
 172
 173   </script>
 174
 175 <style type="text/css">
 176 #columns {
 177         position: fixed;
 178         top: 0;
 179         right: 0;
 180         z-index: 10;
 181         background: #eee;
 182 }
 183
 184 #columns > span {
 185         float: right;
 186 }
 187
 188 #columns ul {
 189         display: none;
 190 }
 191
 192 #columns:hover ul {
 193         display: block;
 194 }
 195
 196 table {
 197         border-collapse:collapse;
 198 }
 199
 200 th {
 201         border-bottom: 2px solid gray;
 202 }
 203
 204 th, td {
 205         border-left: 1em solid white;
 206         border-right: 1em solid white;
 207 }
 208
 209 .zebra {
 210         background: #eee;
 211 }
 212
 213 #message {
 214         padding: 3px;
 215         background: #ff8;
 216
 217         margin-left: 1em;
 218         position: fixed;
 219 }
 220
 221 #gnuplot_cols {
 222         float: right;
 223         background: #eee;
 224         padding: 0.5em;
 225 }
 226
 227 #gnuplot_cols li {
 228         list-style-type: none;
 229 }
 230
 231
 232 </style>
 233
 234   <div ng:controller="user">
 235
 236    <form ng:submit="CRM_search()">
 237     <label for="args">username:
 238     <input type="text" name="search_username" placeholder="test" size="10" ng:required />
 239     </label>
 240     <input type="submit" value="search in CRM">
 241     <input type="reset"  ng:click="clear()" value="clear">
 242
 243     <span id="message" ng:show="message.$size()" ng:click="message={}" title="click to close">
 244       <div ng:repeat="(category,status) in message" ng:show="status"><b>{{category}}</b> {{status}}</div>
 245     </span>
 246
 247    </form>
 248
 249 <div id="columns" ng:show="CRM">
 250 <span>Add columns</span>
 251 <ul>
 252 <li ng:repeat="c in keys(CRM)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
 253 </ul>
 254 </div>
 255
 256     <table ng:show="CRM">
 257     <tr>
 258         <th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
 259     </tr>
 260     <tr ng:repeat="u in CRM" ng:click="LDAP_search(u.USERNAME)" ng:class-even="'zebra'">
 261         <td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
 262     </tr>
 263     </table>
 264
 265     <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">
 266
 267   <div ng:show="selected_username">
 268
 269     <h2><tt>{{selected_username}}</tt> LDAP entry</h2>
 270
 271     <ul ng:show="LDAP">
 272      <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
 273     </ul>
 274
 275     <ul ng:show="cpe.table" id="gnuplot_cols">
 276      <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
 277      <li ng:repeat="(k,v) in cpe.table.rows[0][cpe.table.hash_col]">
 278         <label>
 279         <input type="checkbox" name="gnuplot_cols" ng:format="include:k:gnuplot.cols" ng:change="$log.debug(gnuplot_cols)">
 280         {{k}} <tt>{{v}}</tt>
 281         </label>
 282      </li>
 283      <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
 284     </ul>
 285
 286     <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message.gnuplot = null" ></ng:include>
 287
 288     <h2 ng:show="cpe.table_name">{{cpe.table_name}} {{username}}</h2>
 289
 290     <table ng:show="cpe.table">
 291      <tr>
 292       <th ng:repeat="c in cpe.table.columns">{{c}}</th>
 293      </tr>
 294      <tr ng:repeat="r in cpe.table.rows" ng:class-even="'zebra'">
 295       <td ng:repeat="v in r">{{v}}</td>
 296      </tr>
 297      <tr>
 298       <td colspan="{{cpe.table.columns.length}}">
 299       limit:
 300         <label>1<input name="cpe_limit" type="radio" value=1></label>
 301         &middot; &middot; &middot;
 302         <label>5<input name="cpe_limit" type="radio" value=5></label>
 303         &middot; &middot; &middot;
 304         <label>10<input name="cpe_limit" type="radio" value=10></label>
 305       </td>
 306     </tr>
 307     </table>
 308
 309   </div>
 310
 311     <input type=checkbox name=debug value=1>
 312     <pre ng:show=debug>
 313 CRM={{CRM}}
 314 LDAP={{LDAP}}
 315 cpe={{cpe}}
 316 gnuplot={{gnuplot}}
 317     </pre>
 318   </div>
 319  </body>
 320 </html>