public/user.html

   1 <!doctype html>
   2 <html xmlns:ng="http://angularjs.org">
   3  <script src="http://code.angularjs.org/angular-0.9.12.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.selected_username = username;
  41                 self.LDAP = {};
  42                 self.cpe = {};
  43                 self.gnuplot = {};
  44                 self.r.LDAP_search.query({ username: username }, function(LDAP) {
  45                         self.LDAP = LDAP;
  46                         $log.info( 'LDAP', LDAP );
  47                         self.cpe = {
  48                                 parser: LDAP[0]._cpe_parser,
  49                                 table: 'cpe_' + LDAP[0]._cpe_parser,
  50                         };
  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) self.gnuplot.cols = h_cols;
  60                 var cols = [ 'timestamp' ];
  61                 for ( var i = 0; i < h_cols.length; i++ ) {
  62                         cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
  63                 }
  64 console.debug( cols );
  65                 self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
  66
  67                 $log.info( 'gnuplot', self.gnuplot );
  68                 self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
  69
  70         };
  71
  72         self.r.table = $resource('/table/:table');
  73         self.$watch('username', function() {
  74                 if ( ! self.username || ! self.cpe.table ) return;
  75                 self.r.table.get({ username: self.username, table: self.cpe.table }, function(table) {
  76                         $log.info( 'table', table );
  77                         self.cpe.rows = table.rows;
  78
  79                         if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
  80                                 self.gnuplot_draw( h_cols );
  81                         } else {
  82                                 self.message = 'no graph defined for ' + self.cpe.parser;
  83                         }
  84                 });
  85         });
  86
  87       this.clear = function() {
  88         self.CRM = null;
  89         self.LDAP = null;
  90         self.selected_username = null;
  91         self.gnuplot = {};
  92         self.cpe = {};
  93         self.message = null;
  94       };
  95
  96         this.columns = [
  97                 'USERNAME',
  98                 'BROJ',
  99                 'USLUGA',
 100                 'IP_MANAGEMENT',
 101                 'IP_VOICE',
 102                 'KOLOKACIJA',
 103                 'OPT82'
 104         ];
 105
 106         this.cpe_hash = {
 107                 'Davolink': [ 'Max_down', 'Max_up' ],
 108 //              'Davolink': [ 'select timestamp,h->\'Max_down\' as Max_down,h->\'Max_up\' as Max_up from cpe_Davolink where username = \'', '\' order by timestamp desc limit 100' ],
 109 //              'EasyGateway':
 110         };
 111
 112       this.keys = function(h) {
 113              if ( angular.isArray(h) ) h = h[0];
 114              var keys = [];
 115              for(i in h) if (h.hasOwnProperty(i))
 116              {
 117                keys.push(i);
 118              }
 119              return keys;
 120       };
 121
 122     }
 123
 124     user.$inject = ['$xhr','$resource','$log'];
 125   </script>
 126
 127 <style type="text/css">
 128 #columns {
 129         position: fixed;
 130         top: 0;
 131         right: 0;
 132         z-index: 10;
 133         background: #eee;
 134 }
 135
 136 #columns > span {
 137         float: right;
 138 }
 139
 140 #columns ul {
 141         display: none;
 142 }
 143
 144 #columns:hover ul {
 145         display: block;
 146 }
 147
 148 table {
 149         border-collapse:collapse;
 150 }
 151
 152 th {
 153         border-bottom: 2px solid gray;
 154 }
 155
 156 th, td {
 157         border-left: 1em solid white;
 158         border-right: 1em solid white;
 159 }
 160
 161 .zebra {
 162         background: #eee;
 163 }
 164
 165 #message {
 166         padding: 3px;
 167         background: #ff8;
 168
 169         margin-left: 1em;
 170         position: fixed;
 171 }
 172
 173 </style>
 174
 175   <div ng:controller="user">
 176
 177    <form ng:submit="CRM_search()">
 178     <label for="args">username:
 179     <input type="text" name="search_username" placeholder="test" size="10" ng:required />
 180     </label>
 181     <input type="submit" value="search in CRM">
 182     <input type="reset"  ng:click="clear()" value="clear">
 183
 184     <span id="message" ng:show="message">{{message | html}}</span>
 185
 186    </form>
 187
 188 <div id="columns" ng:show="CRM">
 189 <span>Add columns</span>
 190 <ul>
 191 <li ng:repeat="c in keys(CRM)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
 192 </ul>
 193 </div>
 194
 195     <table ng:show="CRM">
 196     <tr>
 197         <th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
 198     </tr>
 199     <tr ng:repeat="u in CRM" ng:click="LDAP_search(u.USERNAME)" ng:class-even="'zebra'">
 200         <td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
 201     </tr>
 202     </table>
 203
 204     <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">
 205
 206   <div ng:show="selected_username">
 207
 208     <h2><tt>{{selected_username}}</tt> LDAP entry</h2>
 209
 210     <ul ng:show="LDAP">
 211      <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
 212     </ul>
 213
 214     <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'" ></ng:include>
 215
 216     <h2 ng:show="cpe.table">{{cpe.table}} {{username}}</h2>
 217     <div ng:show="cpe.rows">
 218      <pre>{{cpe.rows[0]}}</pre>
 219     </div>
 220
 221   </div>
 222
 223     <input type=checkbox name=debug value=1>
 224     <pre ng:show=debug>
 225 CRM={{CRM}}
 226 LDAP={{LDAP}}
 227 cpe={{cpe}}
 228 gnuplot={{gnuplot}}
 229     </pre>
 230   </div>
 231  </body>
 232 </html>