Merge branch 'devel' of h1dev:/srv/APKPM/
authorDobrica Pavlinusic <dpavlin@rot13.org>
Wed, 13 Apr 2011 09:23:32 +0000 (09:23 +0000)
committerDobrica Pavlinusic <dpavlin@rot13.org>
Wed, 13 Apr 2011 09:23:32 +0000 (09:23 +0000)
templates/gnuplot.html.ep
templates/index.html.ep
templates/layouts/angular.html.ep [new file with mode: 0644]
templates/user.html.ep [new file with mode: 0644]
web_ui.pl

index 65435a4..3e1e50d 100644 (file)
@@ -1,4 +1,7 @@
 % layout 'default';
+
+% if ( ! param('hide') ) {
+
 <%= form_for gnuplot => begin %>
  <%= text_area 'sql', cols => 80, rows => 5 %>
  <br>with <%= select_field with => [qw(dots points steps lines)], 'dots' %>
@@ -6,8 +9,12 @@
  <%= submit_button 'execute' %>
  <%= check_box 'include_gnuplot' => 1, title => 'include gnuplot dump' %>
 <% end %>
+
+% }
+
 % if ( $img ) {
 <img src="<%= $img %>">
 % }
+
 <pre><%= $gnuplot %></pre>
 
index 5b53b22..bc4f85a 100644 (file)
@@ -2,8 +2,8 @@
 % title 'Gearman demo';
 
 <ul>
+<li><a href="/user">Search for user</a> and show LDAP and ADSL stats
 <li><a href="/gearman.html#ping/127.0.0.1">Gearman</a> web interface
-<li><%= link_to 'CRM' => 'CRM.html' %> search with tabular output
 <li><a href="/redis.html">last poll stats</a>
 </ul>
 
diff --git a/templates/layouts/angular.html.ep b/templates/layouts/angular.html.ep
new file mode 100644 (file)
index 0000000..505ca7e
--- /dev/null
@@ -0,0 +1,8 @@
+<!doctype html>
+<html xmlns:ng="http://angularjs.org">
+ <head>
+  <title><%= title %></title>
+  <script src="http://code.angularjs.org/angular-0.9.12.min.js" ng:autobind></script>
+ </head>
+ <body><%= content %></body>
+</html>
diff --git a/templates/user.html.ep b/templates/user.html.ep
new file mode 100644 (file)
index 0000000..937b8f2
--- /dev/null
@@ -0,0 +1,155 @@
+% layout 'angular';
+
+  <script>
+    function CRM($xhr) {
+      var self = this;
+   
+      this.fetch = function() {
+       self.clear();
+        if ( ! self.args ) 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;
+        });
+      };
+   
+      this.clear = function() {
+        self.url = null;
+        self.code = null;
+        self.response = null;
+       self.selected_username = null;
+       self.gnuplot_sql = null;
+       self.ldap = null;
+      };
+
+       this.columns = [
+               'USERNAME',
+               'BROJ',
+               'USLUGA',
+               'IP_MANAGEMENT',
+               'IP_VOICE',
+               'KOLOKACIJA',
+               'OPT82'
+       ];
+
+      this.keys = function(h) {
+             if ( angular.isArray(h) ) h = h[0];
+            var keys = [];
+            for(i in h) if (h.hasOwnProperty(i))
+            {
+              keys.push(i);
+            }
+            return keys;
+      };
+
+       this.select = function(crm) {
+               console.log( 'crm = ',crm );
+               self.selected_username = crm.USERNAME;
+               self.gnuplot_sql = null;
+               $xhr('JSON'
+                       , '/g/LDAP_search/' + self.selected_username + '?callback=JSON_CALLBACK'
+                       , function(code, response) {
+                               console.debug( code, response );
+                               self.ldap = response;
+                               self.gnuplot_sql = '/gnuplot?hide=1;with=points;sql=select timestamp,snrtx,attntx,pwrtx,pwrrx,attnrx,snrrx from adsl where username = \'' + response[0].cn + '\' order by timestamp desc limit 100';
+                       }
+               );
+       };
+
+    }
+
+    CRM.$inject = ['$xhr'];
+  </script>
+
+<style type="text/css">
+#columns {
+       position: fixed;
+       top: 0;
+       right: 0;
+       z-index: 10;
+       background: #eee;
+}
+
+#columns > span {
+       float: right;
+}
+
+#columns ul {
+       display: none;
+}
+
+#columns:hover ul {
+       display: block;
+}
+
+table {
+       border-collapse:collapse;
+}
+
+th {
+       border-bottom: 2px solid gray;
+}
+
+th, td {
+       border-left: 1em solid white;
+       border-right: 1em solid white;
+}
+
+.zebra {
+       background: #eee;
+}
+
+</style>
+
+  <div ng:controller="CRM">
+   <form ng:submit="fetch()">
+    <input type="hidden" name="function_name" value="CRM_search"      size="20"/>
+    <label for="args">username:
+    <input type="text" name="args"     placeholder="test" size="10"/>
+    </label>
+    <input type="submit" ng:click="fetch()" value="search">
+    <input type="reset"  ng:click="clear()" value="clear">
+
+    <b ng:show="url && ! code">loading {{url}}</b>
+    <b ng:show="response">{{response.length}} results for <tt>{{args}}</tt></b>
+   </form>
+
+<div id="columns" ng:show="response">
+<span>Add columns</span>
+<ul>
+<li ng:repeat="c in keys(response)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
+</ul>
+</div>
+
+    <table ng:show="response">
+    <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'">
+       <td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
+    </tr>
+    </table>
+
+    <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">
+
+  <div ng:show="selected_username">
+
+    <tt>{{selected_username}}</tt>
+
+    <ul ng:show="ldap">
+    <li ng:repeat="c in keys(ldap)"><tt>{{c}}</tt> {{ldap[0][c]}}</li>
+    </ul>
+
+    <ng:include src="gnuplot_sql" ng:show="gnuplot_sql">
+
+  </div>
+
+    <input type=checkbox name=debug value=1>
+    <pre ng:show=debug>
+url={{url}}
+code={{code}}
+response={{response}}
+username={{username}}
+    </pre>
+  </div>
index 2c70fd4..22d4455 100755 (executable)
--- a/web_ui.pl
+++ b/web_ui.pl
@@ -116,18 +116,38 @@ warn "# $sql -> $name";
        my $png = "$dir/gnuplot/$name"; # FIXME
 
        my @c = @{ $ret->{columns} };
-       warn "first column not timestamp" unless $c[0] eq 'timestamp';
 
        my $gnuplot = qq|
 set terminal png
 set output '$png'
+|;
+
+       my $del; # delimiter between date and time
+
+       if ( $ret->{rows}->[0]->[0] =~ m/(\d{4}-\d{2}-\d{2})(.)?(\d{2}:\d{2}:\d{2})?/ ) {
+
+               my ( $date,$time );
+               ( $date, $del, $time ) = ( $1,$2,$3 );
+
+               my $fmt = '%Y-%m-%d';
+               $fmt   .= 'T' if $del;
+               $fmt   .= '%H:%M:%S' if $time;
+
+               my $format_x = $time ? '%d %H:%M' : '%Y-%m-%d';
+               $gnuplot .= qq|
 
 set xdata time
-set timefmt "%Y-%m-%dT%H:%M:%S"
-set format x "%H:%M\\n%d"
+set timefmt "$fmt"
+
+set format x "$format_x"
+set xtics nomirror rotate by -90
 
 |;
 
+       } else { 
+               warn "first column not timestamp";
+       }
+
        my $plot = 'plot ';
        my $with = $self->param('with') || 'dots';
        foreach my $i ( 1 .. $#{ $ret->{rows}->[0] } ) {
@@ -140,7 +160,7 @@ set format x "%H:%M\\n%d"
 
                foreach my $row ( @{ $ret->{rows} } ) {
                        my $date = $row->[0];
-                       $date =~ s/ /T/g;
+                       $date =~ s/\Q$del\E/T/g if $del;
                        $date =~ s/\.\d+//;
                        $gnuplot .= join(" ", $date, $row->[$i])."\n";
                }
@@ -170,4 +190,11 @@ get '/_redis' => sub {
        _render_jsonp( $self, Mojo::JSON->new->encode({ status => $status }) );
 };
 
+get '/user' => sub {
+       my $self = shift;
+
+       $self->render('user');
+};
+
+
 app->start;