root/ui/web/htdocs/graph_panel.inc

Revision 45a812e5fddeed3282ec4aad51fd3c4759df25fa, 17.6 kB (checked in by Umar Farooq <umar@omniti.com>, 5 years ago)

refers to ref#[83] refreshGraph now only processes most current ajax request

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