Changeset 2f419952f26b44b72a3e237c5aea5d3cf9af86c9

Show
Ignore:
Timestamp:
01/06/09 22:00:19 (5 years ago)
Author:
Umar Farooq <umar@omniti.com>
git-committer:
Umar Farooq <umar@omniti.com> 1231279219 +0000
git-parent:

[8757d86b3c1ca1f54cdab1e7b2ba21d9a42e42d1]

git-author:
Umar Farooq <umar@omniti.com> 1231279219 +0000
Message:

streaming graphs in graph viewer and worksheets after zoom, still hardcoded to one graph, and button for removing graphs from worksheets

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • ui/web/htdocs/.htaccess

    rcee63b8 r2f41995  
    77RewriteRule ^json/worksheet/store$ worksheet_store.php [PT,QSA] 
    88RewriteRule ^json/worksheet/search$ worksheet_search_json.php [PT,QSA] 
     9RewriteRule ^json/worksheet/deletegraph/([^/]+)/([^/]+)$ worksheet_graph_delete.php?wid=$1&gid=$2 [PT,QSA] 
    910RewriteRule ^json/graph/info/([^/]*)$ graph_info.php?id=$1 [PT,QSA] 
    1011RewriteRule ^json/graph/store$ graph_store.php [PT,QSA] 
  • ui/web/htdocs/css/style.css

    r4b269cd r2f41995  
    680680width:780px; 
    681681} 
     682#StreamingModalContainer div.plot-area{ 
     683height:400px; 
     684width:780px; 
     685} 
    682686#maingraph div.plot-area div.centered { 
    683687display:table-cell; 
     
    783787padding:0 4px; 
    784788} 
     789span.zoomClose { 
     790border:1px solid #DDDDDD; 
     791float:right; 
     792margin-left:4px; 
     793padding:0 4px; 
     794font-weight: bold; 
     795color:#660000; 
     796} 
    785797span.streamData { 
    786798border:1px solid #DDDDDD; 
     
    791803color:#660000; 
    792804} 
     805span.zoomStream { 
     806border:1px solid #DDDDDD; 
     807float:right; 
     808margin-left:4px; 
     809padding:0 4px; 
     810font-weight: bold; 
     811color:#660000; 
     812} 
    793813span.editGraph { 
    794814border:1px solid #DDDDDD; 
     
    807827color:#660000; 
    808828} 
    809  
     829span.deleteWorksheetGraph { 
     830border: 1px solid #DDDDDD; 
     831margin: 10px; 
     832float: right; 
     833font-weight: bold; 
     834color:#660000; 
     835
     836span.zoomGraph { 
     837border: 1px solid #DDDDDD; 
     838margin: 10px; 
     839float: right; 
     840font-weight: bold; 
     841color:#660000; 
     842
    810843span.rememberGraph { 
    811844border:1px solid #DDDDDD; 
  • ui/web/htdocs/graph_panel.inc

    rcfde64a r2f41995  
    33<script type="text/javascript" src="js/eye/eye.js"></script> 
    44<script type="text/javascript" src="js/eye/utils.js"></script> 
     5<script type="text/javascript" src="js/jquery.timers.js"></script> 
    56<script type="text/javascript"> 
    67<!-- 
     
    1314var color_sel = 0; 
    1415var locked = true; 
    15 var streaming = false; 
     16var gstreaming = false; 
    1617                 
    1718function lock_forms() { 
     
    4748} 
    4849 
    49 function plot_iframe_data(uuid, metric_name, ydata, xdata) { 
    50 maingraph.ReconGraphPlotPoint(uuid, metric_name, xdata, ydata); 
    51 
    52  
    53  
    54 function stream_data() { 
    55  
    56 maingraph.modal({ 
    57   containerId: 'StreamingModalContainer', 
    58   close: 'true', 
    59   overlayCss: { 
    60     backgroundColor: '#000000', 
    61     cursor: 'wait' 
    62   }, 
    63   containerCss: { 
    64    backgroundColor: '#FFFFFF', 
    65    left: '30%', 
    66    top: '10%', 
    67    border: '2px solid #000000', 
    68    padding: '5px' 
    69   }, 
     50 
     51function graph_stream_data() { 
     52 
     53stream_object = maingraph; 
     54stream_dirty = false; 
     55maingraph.ReconGraphClear(); 
     56 
     57sids = "";  
     58for(var i=0; i<graphinfo.datapoints.length; i++) { 
     59    sids+= graphinfo.datapoints[i].sid+","; 
     60
     61 
     62maingraph.everyTime(1000, function() { 
     63    if(!gstreaming) {   maingraph.stopTime();} 
     64    else { 
     65    if(stream_dirty){ 
     66        maingraph.ReconGraphPlotPoints();      
     67        stream_dirty=false; 
     68   } 
     69
    7070}); 
    71  
    72 maingraph.ReconGraphClear(); 
    73 $('#streambox').html('<iframe src="http://bob.office.omniti.com/data"></iframe>'); 
    74 //$('#streambox').html('<iframe src="http://postgres83dev.office.omniti.com/reconnoiter/chunked.html"></iframe>'); 
     71//var tstep = 0; 
     72//maingraph.everyTime(250, function () { tstep++; plot_iframe_data(1179, 'allocator_requests', tstep*tstep, tstep*250000);}); 
     73 
     74$('#gstreambox').html('<iframe src="http://bob.office.omniti.com/data"></iframe>'); 
    7575 
    7676} 
     
    8080    graphinfo.saved = true; 
    8181    locked = true; 
    82     streaming = false; 
     82    gstreaming = false; 
    8383    lock_forms(); 
    8484    $(".editGraph").html('Edit Graph').fadeIn('slow');     
     
    9696function update_current_graph(redraw, f) { 
    9797  if(recurse > 0) return; 
    98  
    99   streaming = false; 
     98  gstreaming = false; 
    10099  $(".streamData").html('Stream Data').fadeIn('slow'); 
    101100 
     
    294293<span class="blankGraph">New Blank</span> 
    295294<span class="editGraph">Edit Graph</span> 
    296 <span class="streamData">Stream Data</span> 
     295<span class="streamData ">Stream Data</span> 
    297296<h2 id="graphTitle"></h2> 
    298297<!-- date range box --> 
     
    325324 
    326325        $(".streamData").click(function() { 
    327                if(!locked) {             
    328                     if(!streaming) { 
    329                         streaming = true; 
    330                         stream_data(); 
    331                         $(".streamData").html('Streaming!').fadeIn('slow'); 
     326 
     327               if(!locked && graphinfo.id) {             
     328                    if(!gstreaming) { 
     329                        gstreaming = true; 
     330                        $(this).html('Streaming!').fadeIn('slow'); 
     331                        graph_stream_data(); 
    332332                    } 
    333                     else if(streaming) { 
    334                         streaming = false; 
    335                         $(".streamData").html('Stream Data').fadeIn('slow'); 
     333                    else if(gstreaming) { 
     334                        gstreaming = false; 
     335                        $('#gstreambox').html(''); 
     336                        $(this).html('Stream Data').fadeIn('slow'); 
    336337                        update_current_graph(true); 
    337338                    } 
     
    424425        </div> 
    425426</div> 
    426 <div id="streambox" style="display:none"></div> 
     427<div id="gstreambox" style="display:none"></div> 
    427428 
    428429<div> 
  • ui/web/htdocs/js/recon.js

    r4b269cd r2f41995  
     1//global objects to use for calling plot_ifram_data from stream 
     2var stream_object; 
     3var stream_dirty; 
     4 
     5//set the global streaming object to the local ReconGraph object to use, 
     6// and init,update the global streaming boolean to then call this from a server 
     7function plot_iframe_data(uuid, metric_name, ydata, xdata) { 
     8  stream_object.ReconGraphAddPoint(uuid, metric_name, xdata, ydata); 
     9  stream_dirty = true; 
     10} 
    111 
    212function dump(arr,level) { 
     
    129139        }, 
    130140      clear: 
    131         function () { 
    132             for(var i=0; i<ddata.length;i++) {              
     141        function () {                       
     142            if(this.flot_plot) { 
     143                for(var i=0; i<ddata.length;i++) {                  
    133144                    ddata[i].data = []; 
    134             } 
    135            this.flot_plot.setData({});        
    136            this.flot_plot.setupGrid(); 
    137            this.flot_plot.draw();                          
    138            return this; 
     145                }                
     146                this.flot_plot.setData({});        
     147                this.flot_plot.setupGrid(); 
     148                this.flot_plot.draw();                          
     149            }            
     150            return this; 
    139151        }, 
    140      plotPoint: 
     152     AddPoint: 
    141153        function (uuid, metric_name, xdata, ydata) { 
    142154            tdata = [xdata, ydata.toString()]; 
     
    169181                    } //end if ydata was a number 
    170182                } //end if the uuid and metric_name match 
    171             } //end for each dataset 
    172             this.flot_plot = $.plot(dplaceholder, ddata, doptions); 
     183            } //end for each dataset         
    173184            return this; 
     185        }, 
     186    PlotPoints: 
     187        function () { 
     188            this.flot_plot = $.plot(dplaceholder, ddata, doptions); 
     189            return this; 
    174190        }, 
    175191    refresh: 
     
    220236          ddata = r.data; 
    221237          var plot = this.flot_plot = $.plot(placeholder, r.data, r.options); 
    222  
    223238          var hovering; 
    224239          placeholder.bind("plothover", function (event, pos, item) { 
     
    288303              ReconGraphMacro: ReconGraph.macro, 
    289304              ReconGraphClear: ReconGraph.clear, 
    290               ReconGraphPlotPoint: ReconGraph.plotPoint 
     305              ReconGraphAddPoint: ReconGraph.AddPoint, 
     306              ReconGraphPlotPoints: ReconGraph.PlotPoints 
    291307              }); 
    292308})(jQuery); 
     
    389405    (function(graphid, li) { 
    390406        return function() { 
     407            confirm("I will forget the current graph.  Are you sure?", function(){ 
    391408          $.getJSON('json/graph/forget/' + graphid, 
    392409            function (r) { 
     
    396413              } 
    397414            }); 
     415                });              
    398416          return false; 
    399417        } 
    400     })(g.graphid, li) 
    401   ); 
     418    })(g.graphid, li) 
     419           ); 
    402420  var ul = $('<ul/>'); 
    403421  ul.append($('<li/>').html(g.last_update)); 
  • ui/web/htdocs/worksheet_panel.inc

    r416627d r2f41995  
    22<script type="text/javascript" src="js/eye/eye.js"></script> 
    33<script type="text/javascript" src="js/eye/utils.js"></script> 
     4<script type="text/javascript" src="js/jquery.timers.js"></script> 
    45<script type="text/javascript"> 
    56<!-- 
     
    89var wsinfo = {}; 
    910var locked = true; 
     11var streaming = false; 
     12var stream_graph; 
     13 
     14function stream_data() { 
     15  stream_object = stream_graph; 
     16  stream_dirty = false; 
     17  stream_graph.ReconGraphClear(); 
     18 
     19//setup functionality so that every second check if we are streaming and dirty, plot if true 
     20  stream_graph.everyTime(1000, function() { 
     21    if(!streaming) {   stream_graph.stopTime();} 
     22    else { 
     23      if(stream_dirty){ 
     24        stream_graph.ReconGraphPlotPoints();      
     25        stream_dirty=false; 
     26      } 
     27    } 
     28  }); 
     29  $('#streambox').html('<iframe src="http://bob.office.omniti.com/data"></iframe>'); 
     30} 
    1031 
    1132function lock_wforms() { 
     
    3556                  } 
    3657              }); 
     58 
     59  $("ul#worksheet-graphs > li >div").each( 
     60  function(i) {  
     61                    var g = { start: ws_displayinfo.start, 
     62                      end: ws_displayinfo.end, 
     63                      cnt: ws_displayinfo.cnt, 
     64                      graphid:  $(this).attr("id")  
     65                    }; 
     66                     
     67                    $(this).prepend("<span style='display:none'; class='zoomGraph' id='Zoom-"+$(this).attr('id')+"'>Zoom</span>"); 
     68                    $(this).prepend("<span style='display:none'; class='deleteWorksheetGraph' id='Remove-"+$(this).attr('id')+"'>Remove</span>"); 
     69 
     70                    $("#Remove-"+$(this).attr('id')).click( function() { 
     71                      $.getJSON('json/worksheet/deletegraph/' + wsinfo.id + '/' + g.graphid, 
     72                        function(r) { if(r.error) { alert(r.error); } }); 
     73                        load_worksheet(wsinfo.id); 
     74                    }); 
     75 
     76                    $("#Zoom-"+$(this).attr('id')).click( function() { 
     77 
     78                      stream_graph = $('<div></div>').ReconGraph({graphid: g.graphid}); 
     79 
     80                      var smod = stream_graph.modal({ 
     81                        containerId: 'StreamingModalContainer', 
     82                        close: 'true', 
     83                        overlayCss: { 
     84                        backgroundColor: '#000000', 
     85                        cursor: 'wait' 
     86                        }, 
     87                        containerCss: { 
     88                        backgroundColor: '#FFFFFF', 
     89                        left: '30%', 
     90                        top: '10%', 
     91                        border: '2px solid #000000', 
     92                        padding: '5px' 
     93                        }, 
     94                      }); 
     95 
     96                      stream_graph.ReconGraphRefresh({graphid: g.graphid}); 
     97                      stream_graph.prepend("<span class='zoomStream'>Stream Data</span>"); 
     98                      stream_graph.prepend("<span class='zoomClose'>x</span>"); 
     99 
     100                      $(".zoomClose").click(function() { 
     101                        streaming = false;                         
     102                        $('#streambox').html(''); 
     103                        smod.close(); 
     104                      }); 
     105                      $(".zoomStream").click(function() { 
     106                        if(!streaming) { 
     107                           streaming = true; 
     108                           $(".zoomStream").html('Streaming!').fadeIn('slow'); 
     109                           stream_data(); 
     110                        } 
     111                        else if(streaming) { 
     112                           streaming = false; 
     113                           $('#streambox').html(''); 
     114                           $(".zoomStream").html('Stream Data').fadeIn('slow'); 
     115                           stream_graph.ReconGraphRefresh({graphid: g.graphid}); 
     116                        } 
     117                      }); //end stream click function                       
     118 
     119                    }); //end zoom click function 
     120 
     121                    $(this).mouseover(                   
     122                       function() {  
     123                         $(this).attr("style", "outline: 1px solid #DDDDDD;");  
     124                         $("#Zoom-"+$(this).attr('id')).removeAttr("style"); 
     125                         $("#Remove-"+$(this).attr('id')).removeAttr("style"); 
     126                    } 
     127                    );  
     128  }); //end for each graph in the list 
     129 
     130  $("ul#worksheet-graphs > li >div").each( 
     131  function(i) { $(this).mouseout(  
     132                 function() {  
     133                    $(this).removeAttr("style");  
     134                    $("#Zoom-"+$(this).attr('id')).attr("style", "display:none;"); 
     135                    $("#Remove-"+$(this).attr('id')).attr("style", "display:none;"); 
     136                 } 
     137); }); 
     138 
    37139}            
    38140 
     
    64166  wsinfo.id = r.sheetid; 
    65167  wsinfo.title = r.title; 
     168  wsinfo.graphs = new Array(); 
     169 
    66170  var ul = $("ul#worksheet-graphs"); 
    67171  $("h2#worksheetTitle").html(r.title); 
     
    76180    ul.append($('<li/>').append(o)); 
    77181    o.ReconGraphRefresh(); 
     182    wsinfo.graphs.push(o.attr("id")); 
    78183  } 
    79184  ul.sortable("refresh"); 
     
    81186function add_graph_to_worksheet(graphid) { 
    82187  if(!locked){ 
     188    for(var i = 0; i < wsinfo.graphs.length; i++) { 
     189      if(wsinfo.graphs[i]==graphid) { 
     190         alert("Worksheets cannot have dusplicate graphs!"); 
     191         return; 
     192      } 
     193    }   
    83194    var g = { start: ws_displayinfo.start, 
    84195              end: ws_displayinfo.end, 
     
    233344  <ul id="worksheet-graphs" /> 
    234345  <br style="clear:left" /> 
    235 </div>                   
     346</div>   
     347<div id="streambox" style="display:none"></div>  
    236348<div style="display:none"> 
    237349        <div id="maingraph-template"> 
  • ui/web/lib/Reconnoiter_DB.php

    r416627d r2f41995  
    414414    return $row; 
    415415  } 
     416  function deleteWorksheetGraph($ws_id, $graphid) { 
     417    $sth = $this->db->prepare("delete from prism.saved_worksheets_dep  
     418                                      where sheetid=? and graphid=?"); 
     419    $sth->execute(array($ws_id, $graphid)); 
     420  } 
    416421  function deleteGraph($id) { 
    417422    $sth = $this->db->prepare("delete from prism.saved_graphs