<!doctype html>
<html xmlns:ng="http://angularjs.org">
- <script src="http://code.angularjs.org/angular-0.9.12.min.js" ng:autobind></script>
+ <script src="http://code.angularjs.org/angular-0.9.17.min.js" ng:autobind></script>
<body>
<script>
- function CRM($xhr) {
- var self = this;
+ function user($xhr,$resource,$log) {
+ var self = this;
- this.fetch = function() {
- self.clear();
- if ( ! self.args ) {
- self.message = 'Enter part of username to search';
- return;
- }
- self.url = '/g/' + self.function_name + '/' + self.args + '?callback=JSON_CALLBACK';
- $xhr('JSON', self.url, function(code, response) {
- self.code = code;
- self.response = response;
- self.message = response.length + ' results for <tt>'+self.args+'</tt>';
- });
- self.message = 'loading '+self.url;
- };
+ self.r = {};
+
+ self.r.CRM_search = $resource('/g/CRM_search/:username', {username:'@search_username'});
+ self.CRM_search = function(username) {
+ if ( ! username ) username = self.search_username;
+ $log.info( 'CRM_search', username );
+ self.clear();
+ self.message.CRM = 'search for '+username;
+ self.r.CRM_search.query({username: username}, function(CRM) {
+ self.CRM = CRM;
+ $log.info( 'CRM', CRM )
+ if ( ! CRM.length ) {
+ self.message.CRM = 'no results';
+ return;
+ }
+ self.message.CRM = null;
+ if ( CRM.length == 1 ) {
+ self.selected_username = CRM[0].USERNAME;
+ $log.info( 'auto-selected ', self.selected_username );
+ }
+ });
+ };
+
+ self.r.LDAP_search = $resource('/g/LDAP_search/:username', {username:'@selected_username'});
+ self.LDAP_search = function(username) {
+ if ( self.selected_username == username ) {
+ $log.error("LDAP_search - not changed", username);
+ return;
+ }
+
+ if ( ! username ) username = self.selected_username;
+
+ if ( ! username ) {
+ self.message.LDAP = 'no username';
+ return;
+ }
+ $log.info( 'LDAP_search', username );
+ self.clear_LDAP();
+ self.selected_username = username;
+ self.message.LDAP = 'search '+username;
+ self.r.LDAP_search.query({ username: username }, function(LDAP) {
+ self.LDAP = LDAP;
+ $log.info( 'LDAP', LDAP );
+ if ( self.LDAP.length == 0 ) {
+ self.message.LDAP ='no results for '+username;
+ return;
+ }
+ self.cpe.parser = LDAP[0]._cpe_parser;
+ self.cpe.table_name = 'cpe_' + LDAP[0]._cpe_parser;
+ self.username = LDAP[0].cn;
+ self.message.LDAP = null;
+ $log.info( 'cpe', self.cpe );
+ });
+ };
+ self.$watch('selected_username', self.LDAP_search );
+
+ self.gnuplot_draw = function(h_cols) {
+ $log.info( 'gnuplot_draw', h_cols );
+ if (h_cols.length) {
+ self.gnuplot.cols = h_cols;
+ } else {
+ $log.warn("no columns for gnuplot");
+ return;
+ }
+
+ self.message.gnuplot = 'redrawing '+h_cols.join(' ');
+
+ var cols = [ 'timestamp' ];
+ for ( var i = 0; i < h_cols.length; i++ ) {
+ cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
+ }
+console.debug( cols );
+ self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
+
+ $log.info( 'gnuplot', self.gnuplot );
+ self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
+
+ };
+
+ self.r.table = $resource('/table/:table');
+ self.table_update = function () {
+ if ( ! self.username || ! self.cpe.table_name ) return;
+ self.message.table = self.username + ' loading from ' + self.cpe.table_name;
+ self.r.table.get({ username: self.username, table: self.cpe.table_name, limit: self.cpe.limit }, function(table) {
+ $log.info( 'table', table );
+ self.cpe.table = table;
+ self.message.table = table.rows.length == 0 ? 'no results' : null;
+
+ if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
+ self.gnuplot_draw( h_cols );
+ } else {
+ self.message.gnuplot = 'no graph for ' + self.cpe.parser;
+ }
+ });
+ };
+ self.$watch('username', self.table_update );
- this.clear = function() {
- self.url = null;
- self.code = null;
- self.response = null;
- self.selected_username = null;
- self.gnuplot = {};
- self.ldap = null;
- self.message = null;
- };
+ this.clear = function() {
+ $log.info('clear');
+ self.CRM = null;
+ this.clear_LDAP();
+ }
+
+ this.clear_LDAP = function() {
+ $log.info('clear_LDAP');
+ self.LDAP = null;
+ self.selected_username = null;
+ self.gnuplot = {};
+ self.cpe = { limit: 1 };
+ };
+
+ self.message = {};
+
+ self.$watch('selected_username', function() {
+ if ( self.selected_username == null ) self.clear_LDAP();
+ });
+
+ self.clear();
+ self.cpe_limit = self.cpe.limit;
+ self.$watch('cpe_limit', function() {
+ $log.info( 'limit', self.cpe.limit = self.cpe_limit );
+ self.table_update();
+ });
this.columns = [
'USERNAME',
this.cpe_hash = {
'Davolink': [ 'Max_down', 'Max_up' ],
-// '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' ],
-// 'EasyGateway':
+ 'EasyGateway': [ 'upstreamCurrRate', 'upstreamMaxRate', 'upstreamNoiseMargin' ],
};
this.keys = function(h) {
return keys;
};
- this.select = function(crm) {
- console.log( 'crm = ',crm );
- self.selected_username = crm.USERNAME;
- self.gnuplot = {};
- $xhr('JSON'
- , '/g/LDAP_search/' + self.selected_username + '?callback=JSON_CALLBACK'
- , function(code, response) {
- console.debug( code, response );
- if ( ! response[0] ) {
- self.message = 'no user ' + self.selected_username + ' in LDAP';
- return;
- }
- self.ldap = response;
- self._cpe_parser = response[0]._cpe_parser;
- self.username = response[0].cn;
- self.cpe = {
- parser: self._cpe_parser,
- table: 'cpe_' + self._cpe_parser,
- };
-
- $xhr('JSON', '/table/' + self.cpe.table + '?username='+self.username+';callback=JSON_CALLBACK', function( code, table ) {
- self.cpe.rows = table.rows;
- self.message = 'loaded cpe_'+self.cpe.parser+' rows';
- });
- self.message = 'loading cpe_'+self.cpe.parser+' rows...';
-
- if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
- var cols = [ 'timestamp' ];
- for ( var i = 0; i < h_cols.length; i++ ) {
- cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
- }
-console.debug( cols );
- self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
-
- console.info( 'gnuplot', self.gnuplot );
- self.message = 'generating ADSL graph for '+self.username;
- self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
- } else {
- self.message = 'no graph defined for ' + self.cpe.parser;
- }
+ }
- }
- );
- self.message = 'LDAP search for '+self.selected_username;
- };
+ user.$inject = ['$xhr','$resource','$log'];
- }
+// http://jsfiddle.net/gronky/cLEck/
+angular.formatter('include', {
+ parse: function(apply, value, list) {
+ angular.Array[apply ? 'add' : 'remove'](list, value);
+ return apply;
+ },
+ format: function(apply, value, list) {
+ return angular.Array.indexOf(list, value) != -1;
+ },
+});
- CRM.$inject = ['$xhr'];
</script>
<style type="text/css">
position: fixed;
}
+#gnuplot_cols {
+ float: right;
+ background: #eee;
+ padding: 0.5em;
+}
+
+#gnuplot_cols li {
+ list-style-type: none;
+}
+
+
</style>
- <div ng:controller="CRM">
+ <div ng:controller="user">
- <form ng:submit="fetch()">
- <input type="hidden" name="function_name" value="CRM_search" size="20"/>
- <label for="args">CRM username:
- <input type="text" name="args" placeholder="test" size="10"/>
+ <form ng:submit="CRM_search()">
+ <label for="args">username:
+ <input type="text" name="search_username" placeholder="test" size="10" ng:required />
</label>
- <input type="submit" ng:click="fetch()" value="search">
+ <input type="submit" value="search in CRM">
<input type="reset" ng:click="clear()" value="clear">
- <span id="message" ng:show="message">{{message | html}}</span>
+ <span id="message" ng:show="message.$size()" ng:click="message={}" title="click to close">
+ <div ng:repeat="(category,status) in message" ng:show="status"><b>{{category}}</b> {{status}}</div>
+ </span>
</form>
-<div id="columns" ng:show="response">
+<div id="columns" ng:show="CRM">
<span>Add columns</span>
<ul>
-<li ng:repeat="c in keys(response)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
+<li ng:repeat="c in keys(CRM)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
</ul>
</div>
- <table ng:show="response">
+ <table ng:show="CRM">
<tr>
<th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
</tr>
- <tr ng:repeat="u in response" ng:click="select(u)" ng:class-even="'zebra'">
+ <tr ng:repeat="u in CRM" ng:click="LDAP_search(u.USERNAME)" ng:class-even="'zebra'">
<td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
</tr>
</table>
<h2><tt>{{selected_username}}</tt> LDAP entry</h2>
- <ul ng:show="ldap">
- <li ng:repeat="c in keys(ldap)"><tt>{{c}}</tt> {{ldap[0][c]}}</li>
+ <ul ng:show="LDAP">
+ <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
</ul>
- <div ng:show="cpe.rows">
- <h2>{{cpe.table}} {{username}}</h2>
- <pre>{{cpe.rows[0]}}</pre>
- </div>
+ <ul ng:show="cpe.table" id="gnuplot_cols">
+ <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
+ <li ng:repeat="(k,v) in cpe.table.rows[0][cpe.table.hash_col]">
+ <label>
+ <input type="checkbox" name="gnuplot_cols" ng:format="include:k:gnuplot.cols" ng:change="$log.debug(gnuplot_cols)">
+ {{k}} <tt>{{v}}</tt>
+ </label>
+ </li>
+ <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
+ </ul>
- <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'">
- <pre ng:show="gnuplot.sql">{{gnuplot.sql}}</pre>
+ <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message.gnuplot = null" ></ng:include>
+
+ <h2 ng:show="cpe.table_name">{{cpe.table_name}} {{username}}</h2>
+
+ <table ng:show="cpe.table">
+ <tr>
+ <th ng:repeat="c in cpe.table.columns">{{c}}</th>
+ </tr>
+ <tr ng:repeat="r in cpe.table.rows" ng:class-even="'zebra'">
+ <td ng:repeat="v in r">{{v}}</td>
+ </tr>
+ <tr>
+ <td colspan="{{cpe.table.columns.length}}">
+ limit:
+ <label>1<input name="cpe_limit" type="radio" value=1></label>
+ · · ·
+ <label>5<input name="cpe_limit" type="radio" value=5></label>
+ · · ·
+ <label>10<input name="cpe_limit" type="radio" value=10></label>
+ </td>
+ </tr>
+ </table>
</div>
<input type=checkbox name=debug value=1>
<pre ng:show=debug>
-{{self}}
+CRM={{CRM}}
+LDAP={{LDAP}}
+cpe={{cpe}}
+gnuplot={{gnuplot}}
</pre>
</div>
</body>
projects / APKPM.git / blobdiff