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