[Reconnoiter-devel] [reconnoiter commit] r763 - in trunk/ui/web/htdocs: . css js

svn-commit at lists.omniti.com svn-commit at lists.omniti.com
Fri Jun 19 18:57:41 EDT 2009


Author: umar
Date: 2009-06-19 18:57:40 -0400 (Fri, 19 Jun 2009)
New Revision: 763

Modified:
   trunk/ui/web/htdocs/css/style.css
   trunk/ui/web/htdocs/graph_panel.inc
   trunk/ui/web/htdocs/index.php
   trunk/ui/web/htdocs/js/jquery.flot.js
   trunk/ui/web/htdocs/js/recon.js
Log:
add some code for new streaming controls refs #146, allow for graph aggregation refs #130, and fixes nasty stacking error when removing a datapoint that was once stacked

Modified: trunk/ui/web/htdocs/css/style.css
===================================================================
--- trunk/ui/web/htdocs/css/style.css	2009-06-19 20:07:13 UTC (rev 762)
+++ trunk/ui/web/htdocs/css/style.css	2009-06-19 22:57:40 UTC (rev 763)
@@ -908,6 +908,14 @@
 font-weight: bold;
 color:#660000;
 }
+span.stream_controls {
+border:1px solid #DDDDDD;
+float:right;
+margin-left:4px;
+padding:0 4px;
+font-weight: bold;
+color:#660000;
+}
 span.zoomStream {
 border:1px solid #DDDDDD;
 float:right;

Modified: trunk/ui/web/htdocs/graph_panel.inc
===================================================================
--- trunk/ui/web/htdocs/graph_panel.inc	2009-06-19 20:07:13 UTC (rev 762)
+++ trunk/ui/web/htdocs/graph_panel.inc	2009-06-19 22:57:40 UTC (rev 763)
@@ -62,7 +62,42 @@
 	 $(".streamData").html('Stream Data').fadeIn('slow');
 	 $(".stream-log").attr("style", "display:none;");
 }
+//overlay mode: stackadd=false: we just add new stacks for any the incoming graph has
+//stack mode: stackadd=trule, push new stacks onto matching stack indexes, else append
+function aggregate_graph(id, stackadd) {
+  if(!graph_locked("Click 'Edit Graph' to unlock.")){
+	 if(id) $.getJSON("json/graph/info/" + id, function(g) {
 
+	 	var max_old = (graphinfo.datapoints.length) ?  graphinfo.datapoints.length : 0;
+
+	 	for(var i=0; i<g.datapoints.length; i++) {
+			graphinfo.datapoints.push(g.datapoints[i]);
+  		}  	 
+
+		//we must use indexes for datapoints that are updated
+		for(var i=0; i<g.stacks.length; i++) {
+		  for(var j=0; j<g.stacks[i].length; j++) {
+		    g.stacks[i][j] += max_old;
+		  }
+		}
+
+		if(stackadd) {
+		  for(var i=0; i<g.stacks.length; i++){
+		  	  if(graphinfo.stacks[i]) graphinfo.stacks[i] = graphinfo.stacks[i].concat(g.stacks[i]);
+			  else graphinfo.stacks.push(g.stacks[i]);
+		  }			  
+		}	
+		else {
+		   for(var i=0; i<g.stacks.length; i++){
+		   	   graphinfo.stacks.push(g.stacks[i]);
+		   }
+		}  	
+		update_current_graph(true);
+		refresh_graph_from_json(graphinfo);
+              });
+  }
+}
+
 function set_current_graph_id(id) {
   $(".rememberGraph").fadeOut('fast');
   if(id!='')  {
@@ -87,7 +122,7 @@
 function update_current_graph(redraw, f) {
   if(recurse > 0) return;
   stop_streaming_graph();
-
+  if(graphinfo.id) update_graph_permalink(current_graph_id, "", "", "");
   var str = JSON.stringify(graphinfo);
   if(debug_graph_edit) $("#payload").html(str);
   $.post("json/graph/store",
@@ -225,12 +260,20 @@
            graphinfo.datapoints.splice(i,1);
 	   var si = find_in_stacks(i);
 	   if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1);
+
+	   //we must decrement the datapoint indexes in the stack array as well
+	   for(var k=0; k<graphinfo.stacks.length; k++) {
+	     for(var j=0; j<graphinfo.stacks[k].length; j++) {
+               if(graphinfo.stacks[k][j]>i) graphinfo.stacks[k][j]-=1;
+	     }
+	   }	   
+
            break;
          }
+       }          
+          update_current_graph(true);
+     	  refresh_graph_from_json(graphinfo);
        }
-       update_current_graph(true);
-       refresh_graph_from_json(graphinfo);
-       }
     return false;
   });
 

Modified: trunk/ui/web/htdocs/index.php
===================================================================
--- trunk/ui/web/htdocs/index.php	2009-06-19 20:07:13 UTC (rev 762)
+++ trunk/ui/web/htdocs/index.php	2009-06-19 22:57:40 UTC (rev 763)
@@ -34,6 +34,7 @@
 <script src="js/jquery.timers.js" type="text/javascript"></script>
 <script src="js/jquery.ajaxq-0.0.1.js" type="text/javascript"></script>
 <script src="js/recon.js" type="text/javascript"></script>
+<script src="js//jquery.ui-1.5.2/ui/jquery.ui.all.js"></script>
 <script type="text/javascript">
 <!--
 recon_realtime_hostname = '<?php echo $db->realtime_config('hostname'); ?>';

Modified: trunk/ui/web/htdocs/js/jquery.flot.js
===================================================================
--- trunk/ui/web/htdocs/js/jquery.flot.js	2009-06-19 20:07:13 UTC (rev 762)
+++ trunk/ui/web/htdocs/js/jquery.flot.js	2009-06-19 22:57:40 UTC (rev 763)
@@ -947,13 +947,10 @@
 	
         function draw() {
             drawGrid();
-	    
-	    var b_series = null;
-
-            for (var i = 0; i < series.length; i++) {
-		    var daindex = findLowerInStacks(i);
-		    if(daindex>-1)  b_series = series[daindex];	    		
-
+	    for (var i = 0; i < series.length; i++) {
+		var b_series = null;
+		var daindex = findLowerInStacks(i);
+		if(daindex>-1)  b_series = series[daindex];	    		
                 drawSeries(series[i], b_series);
             }
         }

Modified: trunk/ui/web/htdocs/js/recon.js
===================================================================
--- trunk/ui/web/htdocs/js/recon.js	2009-06-19 20:07:13 UTC (rev 762)
+++ trunk/ui/web/htdocs/js/recon.js	2009-06-19 22:57:40 UTC (rev 763)
@@ -355,6 +355,7 @@
           if(o == null) return this;
           this.graphinfo = $.extend({}, o.graphinfo, options||{});
           var url = "flot/graph/settings/" + this.graphinfo.graphid;
+	  
           this.find(".plot-area")
               .html('<div class="centered"><div class="loading">&nbsp;</div></div>');
 
@@ -640,11 +641,37 @@
         }
     })(g.graphid, li)
 	    );
+  var add = $('<a href="#"/>');
+  add.html('stack');
+  add.click(
+    (function(graphid) {
+        return function() {
+	    aggregate_graph(graphid, true);
+          return false;
+        }
+     })(g.graphid)
+  );
+
+  var addover = $('<a href="#"/>');
+  addover.html('overlay');
+  addover.click(
+    (function(graphid) {
+        return function() {
+	    aggregate_graph(graphid, false);
+          return false;
+        }
+     })(g.graphid)
+  );
+
   var ul = $('<ul/>');
   ul.append($('<li/>').html(g.last_update));
   ul.append($('<li/>').append(edit));
   ul.append($('<li/>').append(del));
-  li.append($('<div class="graphlist-title"/>').html(g.title)).append(ul);
+  ul.append($('<li/>').append(add));
+  ul.append($('<li/>').append(addover));
+  gtitle = $('<div class="graphlist-title"/>').html(g.title);
+  
+  li.append(gtitle).append(ul);
 }
 function ws_for_edit(li, ws, params) {
   var add = $('<a href="#"/>');
@@ -722,6 +749,13 @@
   return 86400*2;
 }
 
+function get_stream_controls() {
+    play_pause = $("<div class='play_pause'>PLAY</div>");
+    stop = $("<div class='stopstream'>STOP</div>");
+    stream_controls = $("<span class='stream_controls'></div>").append(play_pause).append(stop);
+    return stream_controls;
+}
+
 //call this function when you wish to stream a graph
 //graphid: the id, used to retrieve the graph's metric to request
 //stream_graph: the dom element to update with the stream
@@ -906,28 +940,58 @@
                   </div>');
 
     var mheader = $("<div id='stream-header'>").append(dtool);
-    mheader.append("<span class='streamData'>Stream Data</span><br/>");
+    stream_controls = get_stream_controls();
+    mheader.append(stream_controls);
+    mheader.append("<br/>");
+
     stream_graph.prepend(mheader);
-    stream_graph.append('<div id="streambox" style="display:none"></div>');
+    stream_graph.append("<div id='streambox' style='display:none'></div>");
     stream_graph.append("<div class='stream-log' style='display:none'></div>");
 
-    $(".streamData").click(function() {
-     if(!ginpage_streaming){
-        ginpage_streaming = true;
-        $(this).html('Streaming!').fadeIn('slow');
-        $(".stream-log").removeAttr("style").html("stream log_");
-        stream_data(ginfo.id, stream_graph, $('#streambox'));
-      }
-      else if(ginpage_streaming){
+    $(".stopstream").click(function() {
+	if(ginpage_streaming){
         ginpage_streaming = false;
         streaming = false;
+        $(".play_pause").html('PLAY');
         $('#streambox').html('');
-        $(this).html('Stream Data').fadeIn('slow');
         $(".stream-log").attr("style", "display:none;");
         stream_graph.ReconGraphRefresh({graphid: ginfo.id, stacks: ginfo.stacks});
-      }
-    }); //end stream click function
+	}
+     });
 
+    $(".play_pause").click(function() {
+     if(!ginpage_streaming){
+        ginpage_streaming = true;
+        $(this).html('PAUSE');
+        $(".stream-log").removeAttr("style").html("stream log_");
+        stream_data(ginfo.id, stream_graph, $('#streambox'));
+     }
+     else if(ginpage_streaming) {
+	 if($(this).html() == 'PLAY') {
+             $(this).html('PAUSE');	     
+	     //this is where we start streaming again after a pause
+	      stream_graph.everyTime(2000, function() {
+		      if(!streaming) {
+			  streambox.html('');
+			  $(".stream-log").attr("style", "display:none;");
+			  stream_graph.stopTime();
+		      }
+		      else {
+			  if(stream_dirty){
+			      stream_graph.ReconGraphPlotPoints();
+			      stream_dirty=false;
+			  }
+		      }
+		  });
+	 }
+	 else if($(this).html() == 'PAUSE') {
+	     $(this).html('PLAY');
+	     //this is where we pause for a bit
+	     stream_graph.stopTime();
+	 }
+     }
+   }); 
+
 $("#mini_ws_datetool .datechoice").click(function(){
    if(!ginpage_streaming) {
       $(".datechoice").removeClass("selected");



More information about the Reconnoiter-devel mailing list