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

svn-commit at lists.omniti.com svn-commit at lists.omniti.com
Thu Jun 11 18:46:51 EDT 2009


Author: umar
Date: 2009-06-11 18:46:51 -0400 (Thu, 11 Jun 2009)
New Revision: 751

Added:
   trunk/ui/web/htdocs/drawing_board.php
Modified:
   trunk/ui/web/htdocs/css/style.css
   trunk/ui/web/htdocs/graph_panel.inc
   trunk/ui/web/htdocs/js/recon.js
Log:
adding permalink for graphs, probably needs some styling, and does not account for granularity matching yet, refs #100

Modified: trunk/ui/web/htdocs/css/style.css
===================================================================
--- trunk/ui/web/htdocs/css/style.css	2009-06-11 15:20:00 UTC (rev 750)
+++ trunk/ui/web/htdocs/css/style.css	2009-06-11 22:46:51 UTC (rev 751)
@@ -750,6 +750,15 @@
 height:400px;
 width:780px;
 }
+#drawing_board {
+margin:0 auto;
+height:400px;
+width:780px;
+}
+#drawing_board div.plot-area {
+height:400px;
+width:780px;
+}
 #StreamingModalContainer div.plot-area{
 height:400px;
 width:780px;

Added: trunk/ui/web/htdocs/drawing_board.php
===================================================================
--- trunk/ui/web/htdocs/drawing_board.php	                        (rev 0)
+++ trunk/ui/web/htdocs/drawing_board.php	2009-06-11 22:46:51 UTC (rev 751)
@@ -0,0 +1,92 @@
+<?php
+$otype = $_GET['otype'];
+$id = $_GET['id'];
+$start = $_GET['start'];
+$end = $_GET['end'];
+$gran = $_GET['gran'];
+?>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Reconnoiter Viewer</title>
+<link href="css/style.css" rel="stylesheet" type="text/css" />
+<link href="css/datepicker.css" rel="stylesheet" type="text/css" />
+<link href="css/colorpicker.css" rel="stylesheet" type="text/css" />
+<link rel="icon" type="image/vnd.microsoft.icon" href="images/favicon.ico" />
+<script>document.domain='omniti.com';</script>
+<script src="js/htmlentities.js"></script>
+<script src="js/json2.js"></script>
+<script src="js/jquery.min.js"></script>
+<script src="js/jquery.flot.js"></script>
+<script src="js/jquery.jeditable.pack.js"></script>
+<script src="js/ui.core.min.js"></script>
+<script src="js/ui.sortable.min.js"></script>
+<script src="js/jquery.cookie.js" type="text/javascript"></script>
+<script src="js/jquery.treeview.js" type="text/javascript"></script>
+<script src="js/jquery.treeview.async.js" type="text/javascript"></script>
+<script src="js/eye/datepicker.js" type="text/javascript"></script>
+<script src="js/eye/eye.js" type="text/javascript"></script>
+<script src="js/eye/utils.js" type="text/javascript"></script>
+<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/eye/datepicker.js" type="text/javascript"></script>
+<script src="js/eye/colorpicker.js" type="text/javascript"></script>
+<script src="js/eye/eye.js" type="text/javascript"></script>
+<script src="js/eye/utils.js" type="text/javascript"></script>
+<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>
+
+<!-- color picker -->
+<link rel="stylesheet" href="css/colorpicker.css">
+<script type="text/javascript" src="js/colorpicker.js"></script>
+
+<!-- Import jQuery and SimpleModal source files -->
+
+<script src='js/jquery.simplemodal.js' type='text/javascript'></script>
+
+<!-- Confirm JS and CSS files -->
+<script src='js/confirm.js' type='text/javascript'></script>
+<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
+
+<!-- IE 6 hacks -->
+<!--[if lt IE 7]>
+<link type='text/css' href='css/confirm_ie.css' rel='stylesheet' media='screen' />
+<![endif]-->
+
+</head>
+
+<body style="background:none;">
+
+<div id="streambox" style="display:none"></div>	
+<div id="drawing_board"></div>
+
+<script type="text/javascript">
+
+var otype = <?php echo "\"$otype\"";?>;
+var id = <?php echo "\"$id\"";?>;
+
+var start = <?php echo "\"$start\"";?>;
+if(start) {
+	  start = new Date(parseInt(start));
+	  start = start.toUTCString();
+}
+else start=time_window_to_seconds('2w');
+
+var end = <?php echo "\"$end\"";?>;
+if(end) {
+	end = new Date(parseInt(end));
+	end = end.toUTCString();
+}
+else end = "";
+
+var gran = <?php echo "\"$gran\"";?>;
+
+worksheet.zoom_inpage('drawing_board', id, start, end);
+
+</script>
+
+</body>
+</html>

Modified: trunk/ui/web/htdocs/graph_panel.inc
===================================================================
--- trunk/ui/web/htdocs/graph_panel.inc	2009-06-11 15:20:00 UTC (rev 750)
+++ trunk/ui/web/htdocs/graph_panel.inc	2009-06-11 22:46:51 UTC (rev 751)
@@ -52,6 +52,9 @@
         }, { }); 
 }
 
+function update_permalink(id, start, end, gran){
+ $("#gpermalink a").attr("href", "drawing_board.php?otype=graph&id="+id+"&start="+start+"&end="+end+"&gran="+gran);
+}
 
 function graph_stream_data() {
 
@@ -112,6 +115,7 @@
     $(".stream-log").attr("style", "display:none;");
   }
   current_graph_id = id;
+  update_permalink(current_graph_id, "", "", "");
   fetch_graph_info(current_graph_id);
 }
 var recurse = 0;
@@ -323,7 +327,7 @@
   }
   return -1;
 }
-
+//this function works on the maingraph dom element, which is used througout in graph editing
 function refresh_graph_from_json(j) {
   graphinfo = j;
   if(graphinfo.stacks == undefined) graphinfo.stacks = Array();
@@ -377,6 +381,7 @@
 <span class="blankGraph">New Blank</span>
 <span class="streamData ">Stream Data</span>
 <span class="editGraph">Edit Graph</span>
+<span class="permalink" id="gpermalink"><a href="">Link</a></span>
 
 <h2 id="graphTitle"></h2>
 <!-- date range box -->
@@ -453,9 +458,13 @@
                 $("#graph_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
                 $("#graph_widgetCalendar").slideUp("slow");
                 $("#graph_datetool .datechoice").removeClass("selected");
+
+		//start here will be in seconds
                 displayinfo.start = time_windows[$(this).html()];
                 displayinfo.end = '';
                 $(this).addClass("selected");
+		var cdate = new Date();
+		update_permalink(graphinfo.id, parseInt(cdate.getTime() - displayinfo.start*1000), "", "");
                 maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: '', type: graphinfo.type});
                 return false;
         });
@@ -474,6 +483,7 @@
                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
                         displayinfo.start = start.toUTCString();
                         displayinfo.end = end.toUTCString();
+			update_permalink(graphinfo.id, parseInt(start.getTime()), parseInt(end.getTime()), "");
                         maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: displayinfo.start, end: displayinfo.end, type: graphinfo.type});
                         $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
                 }

Modified: trunk/ui/web/htdocs/js/recon.js
===================================================================
--- trunk/ui/web/htdocs/js/recon.js	2009-06-11 15:20:00 UTC (rev 750)
+++ trunk/ui/web/htdocs/js/recon.js	2009-06-11 22:46:51 UTC (rev 751)
@@ -1,4 +1,7 @@
 //global objects to use for calling plot_ifram_data from stream
+//in addition to setting these to a div object and a initial value for the dirty bit, 
+//you will also need to have a hidden div tag to use to insert the remote javascript
+// calls in an iframe, for example streambox for worksheets
 var stream_object;
 var stream_dirty;
 
@@ -315,12 +318,13 @@
             this.each(function(i) { $(this).ReconGraphRefresh(options); });
             return this;
           }
+	  
           var o = this.data('__recon');
           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>');
-	  
+
           data = {'cnt':this.graphinfo.cnt,
                           'start':this.graphinfo.start,
                           'end':this.graphinfo.end,
@@ -730,7 +734,7 @@
           stream_dirty=false;
         }
       }
-    });
+	});
 
     $.getJSON("json/graph/info/" + graph_id,
       function(g) {
@@ -787,6 +791,59 @@
     return o;
   }
 
+  function zoom_inpage(divid, id, start, end) {
+
+$.getJSON("json/graph/info/" + id, function (ginfo) {
+              var streaming = false;
+	      plot_graph = $('#'+divid);
+	      stream_graph = plot_graph;
+	      plot_graph.ReconGraph({graphid: ginfo.id, type: ginfo.type});
+	      plot_graph.ReconGraphRefresh({graphid: ginfo.id, start: start, end: end, stacks: ginfo.stacks});
+
+var dtool =  $("<div id='mini_ws_datetool'>");
+    dtool.append('<div class="zoom"> \
+                <dl> \
+                        <dt>Zoom:</dt> \
+                        <dd><a href="#" class="first datechoice">1d</a></dd> \
+                        <dd><a href="#" class="datechoice">2d</a></dd> \
+                        <dd><a href="#" class="datechoice">1w</a></dd> \
+                        <dd><a href="#" class="datechoice">2w</a></dd> \
+                        <dd><a href="#" class="datechoice">4w</a></dd> \
+                        <dd><a href="#" class="datechoice">1y</a></dd> \
+                </dl>\
+                 </div>\
+                  </div>');
+
+var mheader = $("<div id='stream-header'>").append(dtool);
+    mheader.append("<span class='zoomStream'>Stream Data</span><br>");
+    plot_graph.prepend(mheader);
+    plot_graph.append("<div class='stream-log' style='display:none'></div>");
+    $(".zoomStream").click(function() {
+      if(!streaming) {
+        streaming = true;
+        $(".zoomStream").html('Streaming!').fadeIn('slow');
+        $(".stream-log").removeAttr("style").html("stream log_");
+        stream_data(ginfo.id);
+      }
+      else if(streaming) {
+        streaming = false;
+        $('#streambox').html('');
+        $(".zoomStream").html('Stream Data').fadeIn('slow');
+        $(".stream-log").attr("style", "display:none;");
+        plot_graph.ReconGraphRefresh({graphid: ginfo.id, stacks: ginfo.stacks});
+      }
+    }); //end stream click function
+
+$("#mini_ws_datetool .datechoice").click(function(){
+      $(".datechoice").removeClass("selected");
+      $(this).addClass("selected");
+      plot_graph.ReconGraphRefresh({graphid: ginfo.id, stacks: ginfo.stacks, start: time_window_to_seconds($(this).html()), end: ''});
+      return false;
+    });
+
+    });//end json call
+
+  }
   function zoom_modal (id, gtype) {
 
   if(id) $.getJSON("json/graph/info/" + id, function (ginfo) {
@@ -1021,6 +1078,7 @@
     lock: lock_wforms,
     unlock: unlock_wforms,
     zoom: zoom_modal,
+    zoom_inpage: zoom_inpage,
     stream: stream_data,
     islocked: function () { return locked; }
   };



More information about the Reconnoiter-devel mailing list