root/ui/web/htdocs/graph_panel.inc

Revision 4dcbc5b6f4df6a6759763a9fbeae5d808fc5d696, 18.1 kB (checked in by Umar Farooq <umar@omniti.com>, 5 years ago)

forgetting a graph that is currently displayed redirects to a blank graph
refs #90

  • Property mode set to 100644
Line 
1 <script type="text/javascript" src="js/eye/datepicker.js"></script>
2 <script type="text/javascript" src="js/eye/colorpicker.js"></script>
3 <script type="text/javascript" src="js/eye/eye.js"></script>
4 <script type="text/javascript" src="js/eye/utils.js"></script>
5 <script type="text/javascript" src="js/jquery.timers.js"></script>
6 <script type="text/javascript" src="js/jquery.ajaxmanager.js" ></script>
7 <script type="text/javascript">
8 <!--
9 var maingraph;
10 var current_graph_id = '';
11 var debug_graph_edit = false;
12 var graphinfo= {};
13 var displayinfo = { start : 14*86400, cnt: '', end: '' };
14 var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333')
15 var color_sel = 0;
16 var locked = true;
17 var gstreaming = false;
18
19 function graph_locked(warning) {               
20   if(locked) {
21     modal_warning("Graph Locked!", warning);
22     return locked;
23   }
24   return locked;
25 }
26
27 function lock_forms() {
28         $("input[@name='math1']").attr("disabled", "true");
29         $("input[@name='math2']").attr("disabled", "true");
30         $("input[@name='view']").attr("disabled", "true");
31         $("input[@class='graphType']").attr("disabled", "true");
32         $("select[@name='derive']").attr("disabled", "true");
33
34         $("h2#graphTitle").unbind();
35         $(".datatitle").unbind();
36 }
37
38 function unlock_forms() {
39
40         $("input[@name='math1']").removeAttr("disabled");
41         $("input[@name='math2']").removeAttr("disabled");
42         $("input[@name='view']").removeAttr("disabled");
43         $("input[@class='graphType']").removeAttr("disabled");
44         $("select[@name='derive']").removeAttr("disabled");
45
46         $("h2#graphTitle").editable(function(value, settings) {
47            graphinfo.title = value;
48            update_current_graph(false);
49            return(value);
50            }, { });
51
52         $(".datatitle").editable(function(value, settings) {     
53            graphinfo.datapoints[$(".datatitle").index(this)].name = value;
54            update_current_graph(true);
55            return(value);
56         }, { });
57 }
58
59
60 function graph_stream_data() {
61
62 polltime = 5000;
63 time_width = 50000;
64 stream_object = maingraph;
65 stream_dirty = false;
66 maingraph.ReconGraphPrepareStream(time_width, polltime);
67
68
69 sids = "";
70 var sidneed = new Object();
71 for(var i=0; i<graphinfo.datapoints.length; i++) {
72     if(graphinfo.datapoints[i].sid) {
73       sidneed[graphinfo.datapoints[i].sid] = polltime;
74     }
75 }
76 for(var sid in sidneed) {
77     sids+= "/"+sid+"@"+sidneed[sid];
78 }
79
80 maingraph.everyTime(1000, function() {
81     if(!gstreaming) {   
82        $('#gstreambox').html('');
83        maingraph.stopTime();
84     }
85     else {
86     if(stream_dirty){
87         maingraph.ReconGraphPlotPoints();     
88         stream_dirty=false;
89    }
90 }
91 });
92
93 //console.log("sids requestd from noit server = ", sids);
94
95 $('#gstreambox').html('<iframe src="http://bob.office.omniti.com/data'+sids+'"></iframe>');
96
97 }
98 function set_current_graph_id(id) {
99   $(".rememberGraph").fadeOut('fast');
100   if(id!='')  {
101     graphinfo.saved = true;
102     locked = true;
103     gstreaming = false;
104     lock_forms();
105     $(".editGraph").html('Edit Graph').fadeIn('slow');   
106     $('#gstreambox').html('');
107     $(".streamData").html('Stream Data').fadeIn('slow');
108     $(".stream-log").attr("style", "display:none;");
109   }
110   else {       
111     locked = false;
112     unlock_forms();   
113     $(".editGraph").html('Editing!').fadeIn('slow');
114     $('#gstreambox').html('');
115     $(".streamData").html('Stream Data').fadeIn('slow');
116     $(".stream-log").attr("style", "display:none;");
117   }
118   current_graph_id = id;
119   fetch_graph_info(current_graph_id);
120 }
121 var recurse = 0;
122 function update_current_graph(redraw, f) {
123   if(recurse > 0) return;
124   gstreaming = false;
125   $('#gstreambox').html('');
126   $(".streamData").html('Stream Data').fadeIn('slow');
127   $(".stream-log").attr("style", "display:none;");
128
129   var str = JSON.stringify(graphinfo);
130   if(debug_graph_edit) $("#payload").html(str);
131   $.post("json/graph/store",
132          {'json':str},
133          function(d) {
134            recurse++;
135            graphinfo.id = current_graph_id = d.id;
136            
137            if(d.error) $("#gtool-error").html(d.error).fadeIn('fast');
138            else $("#gtool-error").fadeOut('fast');     
139            if(graphinfo.id && graphinfo.saved != true &&
140               $(".rememberGraph:visible").length == 0) {
141               graphinfo.saved=false;
142              $(".rememberGraph").html('"Remember" this graph.').fadeIn('slow');
143              $(".rememberGraph").click(function() {
144                graphinfo.saved = true;
145                update_current_graph(false, function(r) {
146                  if(r.error) {
147                    graphinfo.saved = false;
148                     $("#gtool-error").html(r.error).fadeIn('fast');
149                  }
150                  else $(".rememberGraph").html('Remebered').fadeOut('slow');
151                });
152              });
153            }
154            if(redraw && maingraph) maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type});
155            if(f) f(d);
156            recurse--;
157          }, 'json');
158 }
159 function graph_add_datapoint(d) {
160   if(!graph_locked("Click 'Edit Graph' to unlock.")){
161     if(d.axis == undefined) { d.axis = 'l'; }
162     if(d.name == undefined) { d.name = d.target + '`' + d.metric_name; }
163     graphinfo.datapoints.push(d);
164     gtool_add_datapoint(d);
165     update_current_graph(true);
166   }
167 }
168 function gtool_add_guide() {
169   var d = {};
170   d.metric_type = 'guide';
171   graphinfo.datapoints.push(d);
172   gtool_add_datapoint(d);
173   update_current_graph(true);
174 }
175
176 function gtool_add_datapoint(d) {
177   var o;
178   if(d.metric_type == 'guide') {
179     o = $("#guideeditor").clone();
180   }
181   else {
182     o = $("#datapointeditor").clone();
183   }
184   recurse++;
185  
186   if(d.color == null) {
187     d.color = color_pool[color_sel];
188     color_sel = (color_sel + 1) % color_pool.length;
189   }
190   o.find('.colorPickerHolder').ColorPicker({
191     flat: true,
192     color: '#ffffff',
193     onSubmit: (function(dpo,dp) {
194       var cs = dpo.find('.colorSelector');
195       return function(hsb, hex, rgb) {
196         dp.color = '#' + hex;
197         cs.css('border', '1px solid ' + dp.color);
198         cs.find('div').css('backgroundColor', dp.color)
199                       .css('opacity', 0.2);
200         cs.parent().find('.colorPickerHolder').stop().animate({height:0},500);
201         update_current_graph(true);
202       }
203     })(o,d)
204   });
205   o.find('.colorPickerHolder > div').css('position', 'absolute');
206   o.find('.colorSelector').css('border', '1px solid ' + d.color);
207   o.find('.colorSelector div').css('backgroundColor', d.color)
208                               .css('opacity',
209                                    (d.opacity == null) ? 0.2 : d.opacity);
210   o.find('.colorSelector').bind('click', function() {
211     if(!locked){
212         var activecp = $(this).parent().find('.colorPickerHolder');
213         var h = activecp.height();
214         $("#gtool #dataPoints .colorPickerHolder").filter(function(index) {
215              return ($(this) != activecp);
216         }).stop().animate({height:0}, 0);;
217         $(this).parent().find('.colorPickerHolder').stop().animate({height: h != 0 ? 0 : 173}, 500);
218     }
219   });
220
221   o.find(d.axis == "l" ? ".axisl" : ".axisr").addClass("axison");
222   o.find("span.axis").click(function(){
223     if(!locked) {
224        $(this).siblings().removeClass("axison");
225        $(this).addClass("axison");
226        d.axis = $(this).hasClass("axisl") ? "l" : "r";
227        update_current_graph(true);
228     }
229   });
230   if(!d.hidden){o.find('input[@name="view"]').attr("checked","checked");}
231   o.find('input[@name="view"]').change(function(){
232     d.hidden = !($(this).attr("checked"));
233     update_current_graph(true);
234   }).change();
235
236   o.find('.deletedatapoint').click(function(){
237     if(!locked){
238        for(var i=0; i<graphinfo.datapoints.length; i++) {
239          if(graphinfo.datapoints[i] == d) {
240            graphinfo.datapoints.splice(i,1);
241            break;
242          }
243        }
244        update_current_graph(true);
245        refresh_graph_from_json(graphinfo);
246        }
247     return false;
248   });
249
250   if(d.metric_type == 'text') {
251     o.find('tr.mathbox').remove();
252     o.find('select[@name="derive"]').val('false');
253   }
254   else {
255     if(d.derive){
256       o.find('select[@name="derive"]').val(d.derive);
257     }
258     o.find('select[@name="derive"]').change(function(){
259       d.derive = $(this).find(":selected").val();
260       update_current_graph(true);
261     }).change();
262
263     o.find('input[@name="math1"]').val(d.math1);
264     o.find('input[@name="math1"]').change(function(){
265       d.math1 = $(this).val();
266       update_current_graph(true);
267     });
268     o.find('input[@name="math2"]').val(d.math2);
269     o.find('input[@name="math2"]').change(function(){
270       d.math2 = $(this).val();
271       update_current_graph(true);
272     });
273   }
274
275   o.find(".datatitle").html(d.name);
276  
277
278   recurse--;
279   $("#gtool #dataPoints").append(o.children());
280 }
281 function refresh_graph_from_json(j) {
282   graphinfo = j;
283   if(graphinfo.datapoints == undefined) graphinfo.datapoints = Array();
284   $("h2#graphTitle").html(graphinfo.title ? graphinfo.title : 'Graph Title (click to edit)');
285
286   $("input[@name='graphtype']:checked").removeAttr("checked");
287   $("input[@name='graphtype']")
288     .filter(function(i){return $(this).val() == graphinfo.type;})
289     .attr("checked","checked");
290   $("#dataPoints").empty();
291   for(var i=0; i<graphinfo.datapoints.length; i++) {
292     gtool_add_datapoint(graphinfo.datapoints[i]);
293   }
294   if(maingraph) {
295     if(graphinfo.id)
296       maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type});
297     else
298       maingraph.ReconGraphReset();
299   }
300 }
301 function fetch_graph_info(id) {
302   graphinfo.id = id;
303   if(id) $.getJSON("json/graph/info/" + id, refresh_graph_from_json);
304   else refresh_graph_from_json({});
305   $("span.blankGraph").click(function() {
306     if(graphinfo.saved) set_current_graph_id('');
307     else if(graphinfo.saved!=undefined && graphinfo.saved==false) {
308          confirm("I will forget the current graph.  Are you sure?", function() {
309              $.getJSON('json/graph/forget/' + graphinfo.id,
310                function (r) {
311                  if(r.error) {
312                    $("#gtool-error").html(r.error).fadeIn('fast');
313                  }
314                  else set_current_graph_id('');
315                });
316
317          });
318     }
319     return false;
320   });
321 }
322 -->
323 </script>
324 <!--<p><a href="">username</a> / <a href="#">worksheet</a></p>-->
325 <p/>
326 <span class="rememberGraph"></span>
327 <span class="blankGraph">New Blank</span>
328 <span class="streamData ">Stream Data</span>
329 <span class="editGraph">Edit Graph</span>
330
331 <h2 id="graphTitle"></h2>
332 <!-- date range box -->
333 <script type="text/javascript">
334 $(document).ready(function(){
335
336         lock_forms();
337
338         var time_windows = { '2d' : 86400*2,
339                               '1w' : 86400*7,
340                               '2w' : 86400*14,
341                               '4w' : 86400*28,
342                               '1y' : 86400*365,
343                             };
344         var state = false;
345
346         $(".editGraph").click(function() {             
347                 if(locked){
348                     locked = false;                 
349                     unlock_forms();
350                     $(".editGraph").html('Editing!').fadeIn('slow');
351                 }
352                 else if(!locked){
353                     locked = true;     
354                     lock_forms();
355                     $(".editGraph").html('Edit Graph').fadeIn('slow');
356                     if(gstreaming) {
357                       gstreaming = false;
358                       $('#gstreambox').html('');
359                       $(".streamData").html('Stream Data').fadeIn('slow');
360                       $(".stream-log").attr("style", "display:none;");
361                       update_current_graph(true);
362                       }
363                 }
364         });
365
366
367         $(".streamData").click(function() {
368
369                if(!graph_locked("Unlock by clicking 'Edit Graph'.") && graphinfo.id) {           
370                     if(!gstreaming) {
371                         gstreaming = true;
372                         $(this).html('Streaming!').fadeIn('slow');
373                         $(".stream-log").removeAttr("style").html("stream log_");
374                         graph_stream_data();
375                     }
376                     else if(gstreaming) {
377                         gstreaming = false;
378                         $('#gstreambox').html('');
379                         $(this).html('Stream Data').fadeIn('slow');
380                         $(".stream-log").attr("style", "display:none;");
381                         update_current_graph(true);
382                     }
383                 }
384         });
385         $("#graph_datetool .btn-slide").click(function(){
386                 $("#graph_widgetCalendar").stop().animate({
387                      height: state ? 0 :
388                        $('#graph_widgetCalendar div.datepicker').get(0).offsetHeight
389                   }, 500);
390                 state = !state;
391                 $(this).toggleClass("active");
392                 return false;
393         });
394         $("#graph_datetool .datechoice").click(function(){
395                 $("#graph_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
396                 $("#graph_widgetCalendar").slideUp("slow");
397                 $("#graph_datetool .datechoice").removeClass("selected");
398                 displayinfo.start = time_windows[$(this).html()];
399                 displayinfo.end = '';
400                 $(this).addClass("selected");
401                 maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: '', type: graphinfo.type});
402                 return false;
403         });
404         $('#graph_widgetCalendar').DatePicker({
405                 flat: true,
406                 format: 'Y/m/d',
407                 date: [new Date(), new Date()],
408                 calendars: 3,
409                 mode: 'range',
410                 starts: 1,
411                 onChange: function(formated) {
412                         var dates;
413                         dates = formated[0].split('/');
414                         var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
415                         dates = formated[1].split('/');
416                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
417                         displayinfo.start = start.toUTCString();
418                         displayinfo.end = end.toUTCString();
419                         maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: displayinfo.start, end: displayinfo.end, type: graphinfo.type});
420                         $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
421                 }
422         });
423         $(".graphType").change(function(){
424                 graphinfo.type = $(this).val();
425                 update_current_graph(true);
426         });
427         $("#gtool-error").click(function(){
428           $("#gtool-error").fadeOut("slow");
429         });
430         $("span.addGuide").click(function() {
431           if(!locked){
432             gtool_add_guide();
433           }
434         });
435         set_current_graph_id('');
436         maingraph = $('<div></div>').attr("id", "maingraph").ReconGraph({graphid: graphinfo.id, width: 780, height: 400});
437         $("#maingraphHolder").append(maingraph);
438 });
439 </script>
440
441 <div id="graph_datetool">
442         <div class="zoom">
443                 <dl>
444                         <dt>Zoom:</dt>
445                         <dd><a href="#" class="first datechoice">2d</a></dd>
446                         <dd><a href="#" class="datechoice">1w</a></dd>
447                         <dd><a href="#" class="selected datechoice">2w</a></dd>
448                         <dd><a href="#" class="datechoice">4w</a></dd>
449                         <dd><a href="#" class="datechoice">1y</a></dd>
450                 </dl>
451         </div>
452         <div class="range">
453                 <dl>
454                         <dt>Date Range:</dt>
455                         <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
456                 </dl>
457         </div>
458 <br/>
459         <div id="graph_widgetCalendar" class="widgetCalendar"></div>
460 </div>
461                        
462 <!-- confirm box -->
463 <div id="confirm" style="display:none">
464         <a href="#" title="Close" class="modalCloseX modalClose">x</a>
465         <div class="header"><span>Confirm</span></div>
466         <p class="message"></p>
467         <div class="buttons">
468                 <div class="no modalClose">No</div><div class="yes">Yes</div>
469         </div>
470 </div>
471 <div id="gstreambox" style="display:none"></div>
472
473 <div>
474         <div id="maingraphHolder">
475         </div>
476         <div class='stream-log' style='display:none'></div>
477         <form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;">
478         <fieldset>
479         <legend style="display:none;">View</legend>
480         <label for="std_view"><input class="graphType" type="radio" name="graphtype" id="std_view" value="standard"/> Standard View</label> &nbsp;&nbsp;&nbsp;
481         <label for="stacked_view"><input class="graphType" type="radio" name="graphtype" id="stacked_view" value="stacked" /> Stack Left Axis</label>
482         </fieldset>
483         </form>
484        
485 </div>
486 <div style="float:right"><span class="addGuide">Add Guide</span></div>
487 <br style="clear:right" />
488 <div class="error"><p class="error" id="gtool-error"></p></div>
489 <table id="gtool">
490         <tr>
491                 <th></th>
492                
493                 <th class="data">Data Points</th>
494                 <th>Color</th>
495                 <th>Derivative</th>
496                 <th>Axis</th>
497                 <th></th>
498                 <th></th>
499         </tr>
500         <tbody id="dataPoints">
501         </tbody>
502 </table>
503
504 <div style="display:none">
505 <form id="hiddeneditor">
506         <table>
507         <tbody id="guideeditor">
508         <tr>
509                 <td><input name="view" type="checkbox" value="1" /></td>
510                 <td class="data datatitle"></td>
511                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
512                 <td></td>
513                 <td></td>
514                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
515                 <td class="math">math</td>
516         </tr>
517         <tr class="mathbox">
518                 <td colspan="7">
519                 <div>
520                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
521                 </div>
522                 <div>
523                         <label for="math">Percentile</label> <input name="math2" type="text" value="" style="width:380px;" />
524                 </div>
525                 </td>
526         </tr>
527         </tbody>
528         <tbody id="datapointeditor">
529         <tr>
530                 <td><input name="view" type="checkbox" value="1"/></td>
531                 <td class="data datatitle"></td>
532                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
533                 <td><select name="derive"><option value="false">no</option><option value="derive">derive</option><option value="counter">counter</option></select></td>
534                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
535                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
536                 <td class="math">math</td>
537         </tr>
538         <tr class="mathbox">
539                 <td colspan="7">
540                 <div>
541                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
542                 </div>
543                 <div>   
544                         <label for="math">Source Math</label> <input name="math2" type="text" value="" style="width:380px;" />
545                 </div>
546                 </td>
547         </tr>
548         </tbody>
549         </table>
550 </form>
551 </div>
552
553 <div id="payload">
554 </div>
Note: See TracBrowser for help on using the browser.