"Fossies" - the Fresh Open Source Software Archive

Member "ganglia-web-3.7.2/inspect_graph.php" (12 Oct 2015, 13635 Bytes) of package /linux/www/ganglia-web-3.7.2.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) PHP source code syntax highlighting (style: standard) with prefixed line numbers and code folding option. Alternatively you can here view or download the uninterpreted source code file. For more information about "inspect_graph.php" see the Fossies "Dox" file reference documentation and the latest Fossies "Diffs" side-by-side code changes report: 3.7.1_vs_3.7.2.

    1 <?php
    2 include_once "./eval_conf.php";
    3 ?>
    4 <script language="javascript" type="text/javascript" src="<?php print $conf['jquery_flot_base_path']; ?>.min.js"></script>
    5 <script language="javascript" type="text/javascript" src="<?php print $conf['jquery_flot_base_path']; ?>.crosshair.min.js"></script>
    6 <script language="javascript" type="text/javascript" src="<?php print $conf['jquery_flot_base_path']; ?>.stack.min.js"></script>
    7 <script language="javascript" type="text/javascript" src="js/jquery.multiselect.js"></script>
    8 <script language="javascript" type="text/javascript" src="js/jquery.multiselect.filter.js"></script>
    9 <script language="javascript" type="text/javascript" src="<?php print $conf['jquery_flot_base_path']; ?>.selection.min.js"></script>
   10 <script language="javascript" type="text/javascript" src="<?php print $conf['jquery_flot_base_path']; ?>.time.min.js"></script>
   11 <script language="javascript" type="text/javascript" src="js/jquery.flot.events.js"></script>
   12 <script type="text/javascript" src="js/create-flot-graphs.js"></script>
   13 
   14 <div id="inspect_graph_container"></div>
   15 
   16 <?php
   17 include_once "./eval_conf.php";
   18 
   19 $dataurl = "graph.php?" . $_SERVER['QUERY_STRING'];
   20 $refresh_interval = $conf['default_refresh'];
   21 ?>
   22 
   23 <script>
   24 $(function () {
   25   var refresh_timer = null;
   26   var first_time = true;
   27   var VALUE_SEPARATOR = " :: ";
   28   var plot = null;
   29   var zooming = false;
   30   var graphContainer = $("#inspect_graph_container");
   31   var placeHolder = null;
   32   var graphControls = null;
   33   var spacer = null;
   34   var selectSeries = null;
   35   var selectLine = null;
   36   var selectStack = null;
   37   var tooltip = null;
   38   var lastUpdate = 0;
   39 
   40   function zeroOutMissing(dataset, index) {
   41     if (dataset.data == null || index < 0)
   42       return;
   43 
   44     for (var i = 0; i <= index; i++) {
   45       if (dataset.data[i][1] == "NaN")
   46     dataset.data[i][1] = 0;
   47     }
   48   }
   49 
   50   function lastUpdateIndex(datasets) {
   51     var index = 0;
   52     $.each(datasets, function(key, dataset) {
   53       if (dataset.data == null)
   54     return;
   55 
   56       for (var i = dataset.data.length - 1; 
   57        i >= 0 && i > index; 
   58        i--) {
   59     if (dataset.data[i][1] != "NaN") {
   60       index = i;
   61       break;
   62     } 
   63       }
   64     });
   65     return index;
   66   }
   67 
   68   function resize() {
   69     var popupDialog = $("#popup-dialog");
   70     placeHolder.height(popupDialog.height() -
   71                graphControls.height() - 
   72                spacer.height());
   73     graphContainer.width(popupDialog.width() - 20);
   74   }
   75 
   76   $("#popup-dialog").bind("dialogresizestop.inspect", 
   77               function() {
   78                 resize();
   79                 plot.resize();
   80                 plotAccordingToChoices();
   81               });
   82   $("#popup-dialog").bind("dialogclose.inspect", 
   83               function(event) {
   84                 $(this).unbind(".inspect");
   85                             if (refresh_timer) {
   86                   clearTimeout(refresh_timer);
   87                   refresh_timer = null;
   88                 }
   89               });
   90 
   91   graphContainer.append('<div id="placeholder" style="overflow:hidden"></div><div id="spacer" style="height:5px;"></div><div id="graphcontrols"></div>');
   92   spacer = graphContainer.find("#spacer");
   93     
   94   var datasets = []; // global array of dataset objects {label, data, color}
   95   var graph_title = null;
   96 
   97   placeHolder = graphContainer.find("#placeholder");
   98   placeHolder.bind("plothover", hoverHandler);
   99   placeHolder.bind("plotselected", selectRangeHandler);
  100     
  101   var dataurl = '<?php print $dataurl; ?>';
  102   var refresh_interval = '<?php print $refresh_interval; ?>';
  103 
  104   graphControls = graphContainer.find("#graphcontrols");
  105   var series_select = '<select id="select_series" name="select_series" multiple="multiple"></select>';
  106   // Add multi-select menu to controls
  107   graphControls.append(series_select);
  108     
  109   selectSeries = graphControls.find("#select_series");
  110   selectSeries.multiselect({
  111     height: 250,
  112     position : {
  113       my: "right bottom",
  114       at: "left top"
  115     },
  116     checkAll: function(event, ui) {
  117       plotAccordingToChoices();
  118     },
  119     uncheckAll: function(event, ui) {
  120       plotAccordingToChoices();
  121     },
  122     click: function(event, ui) {
  123       plotAccordingToChoices();
  124     }
  125     }).multiselectfilter();
  126   $(".ui-multiselect-menu").draggable();
  127 
  128   var html = '<span id="gopt" style="margin-left:10px;"><input type="radio" id="line" name="gopt"/><label style="font-size:0.825em;" for="line">Line</label><input type="radio" id="stack" name="gopt"/><label style="font-size:0.825em" for="stack">Stack</label></span>';
  129   html += '<input id="resetzoom" type="button" style="font-size:0.825em;" value="Reset zoom"/>';
  130 
  131   // Add option buttons to controls 
  132   graphControls.append(html);
  133   
  134   graphControls.find("#gopt").buttonset();
  135   selectLine = graphControls.find("#line");
  136   selectLine.button().click(function() {
  137     plotAccordingToChoices();
  138   });
  139   selectStack = graphControls.find("#stack");
  140   selectStack.button().click(function() {
  141     plotAccordingToChoices();
  142   });
  143   var resetZoomElem = graphControls.find("#resetzoom");
  144   resetZoomElem.button();
  145   resetZoomElem.click(function () {
  146     delete plotOpt.xaxis.min;
  147     delete plotOpt.xaxis.max;
  148     delete plotOpt.yaxis.min;
  149     delete plotOpt.yaxis.max;
  150     zooming = false;
  151     plotAccordingToChoices();  
  152   });
  153   var plotOpt =  {
  154     lines: { show: true, fill: false },
  155     points: { show: false },
  156     crosshair: { mode: "x" },
  157     xaxis: { mode: "time", timezone: "browser" },
  158     yaxis: {tickFormatter: suffixFormatter},
  159     selection: { mode: "xy" },
  160     legend: {show : false},
  161     grid: { hoverable: true, autoHighlight: true },
  162     series: {stack: null}
  163   };
  164 
  165   // then fetch the data with jQuery
  166   function onDataReceived(series) {
  167     datasets = series;
  168 
  169     var stacked = false;
  170     var series_labels = 
  171       selectSeries.children("option").map(function(){
  172       var text = $(this).text();
  173       var label = text;
  174       if (text.indexOf(VALUE_SEPARATOR) != -1)
  175         label = text.split(VALUE_SEPARATOR)[0];
  176       return label;
  177     });
  178     var series_options = selectSeries.children("option").map(function(){
  179     return $(this);
  180       });
  181 
  182     var start_time = Number.MAX_VALUE;
  183     var end_time = 0;
  184 
  185     // Determine point index corresponding to last update
  186     // Typically the dataset will have trailing NaNs that 
  187     // should be ignored
  188     lastUpdate = lastUpdateIndex(datasets);
  189 
  190     var i = 0;
  191     $.each(datasets, function(key, dataset) {
  192       if (dataset.data == null)
  193     return;
  194 
  195       start_time = Math.min(dataset.data[0][0], start_time);
  196       end_time = Math.max(dataset.data[dataset.data.length - 1][0], 
  197               end_time);
  198 
  199       // Explicity delete the stack attribute if it exists because stacking
  200       // is controlled locally. The incoming datasets will contain a 
  201       // stack attribute if they were generated from a stacked graph.
  202       if ("stack" in dataset) {
  203     delete dataset.stack;
  204     stacked = true;
  205       }
  206 
  207       if ((graph_title == null) && ("graph_title" in dataset))
  208         $("#popup-dialog").dialog('option', 'title', dataset.graph_title);
  209 
  210       if (typeof dataset.color == 'undefined')
  211     dataset.color = i;
  212 
  213       i++;
  214 
  215       var current_value = dataset.data[lastUpdate][1];
  216       if (current_value != "NaN")
  217     current_value = formattedSiVal(current_value, 2);
  218       else
  219         current_value = "";
  220       var seriesIndex = $.inArray(dataset.label, series_labels);
  221       if (seriesIndex == -1) {
  222     var option = $('<option/>', 
  223       {value: key, 
  224        text: dataset.label +
  225           VALUE_SEPARATOR +
  226           current_value});
  227     option.attr('selected', 'selected');
  228     option.appendTo(selectSeries);
  229     var colorBox = '<div style="border:1px solid #ccc;padding:1px;display:inline-block;"><div style="width:4px;height:0;border:5px solid ' + dataset.color + ';overflow:hidden"></div></div>';
  230     option.data("pre_checkbox_html", colorBox);
  231       } else {
  232     var option = series_options[seriesIndex];
  233     var label = series_labels[seriesIndex] + 
  234       VALUE_SEPARATOR + 
  235       current_value;
  236     option.text(label);
  237       }
  238     });
  239       
  240     selectSeries.multiselect('refresh');
  241 
  242     if (first_time) {
  243       var gopt = stacked ? selectStack : selectLine;
  244       gopt.attr("checked", "checked");
  245       gopt.button("refresh");
  246 
  247       if (($("#popup-dialog").dialog("option", "height") == "auto") ||
  248       ($("#popup-dialog").dialog("option", "width") == "auto")) {
  249     $("#popup-dialog").dialog("option", "height", 500);
  250     $("#popup-dialog").dialog("option", "width", 800);
  251       }
  252       resize();
  253       first_time = false;
  254     }
  255 
  256     $.ajax({
  257       url: "get_overlay_events.php?start=" + (start_time/1000) + "&end=" + (end_time/1000),
  258       method: 'GET',
  259       dataType: 'json',
  260       success: onEventsReceived
  261     });
  262   }
  263 
  264   function onEventsReceived(overlay_events) {
  265     var events = [];
  266     $.each(overlay_events, function(key, val) {
  267     var event = {};
  268     event['min'] = val['start_time'] * 1000;
  269     event['max'] = val['end_time'] * 1000;
  270     event['eventType'] = 'info';
  271     event['title'] = val['summary'];
  272     event['description'] = val['description'];
  273     events[events.length] = event;
  274       });
  275 
  276     var event_types = {};
  277     event_types["info"] = {eventType: "info", 
  278                            level: 1,
  279                            icon: {image: "img/red-pointer.png", 
  280                                   width: 10, 
  281                                   height: 10}};
  282                 
  283     plotOpt.events = {
  284       levels: 1,
  285       data: events,
  286       types: event_types,
  287       xaxis: 1
  288     };
  289 
  290     plotAccordingToChoices();
  291 
  292     if ((!zooming) && (dataurl.indexOf("&r=custom") == -1))
  293       refresh_timer = setTimeout(refresh, refresh_interval * 1000);
  294   }
  295   
  296   $.ajax({
  297     url: dataurl,
  298     method: 'GET',
  299     dataType: 'json',
  300     success: onDataReceived
  301   });
  302 
  303   function utcTimeStr(tstamp) {
  304     var date = new Date(tstamp);
  305 
  306     var month = date.getUTCMonth() + 1;
  307     if ( month < 10 )
  308       month = "0" + month;
  309     var day = date.getUTCDate();
  310     if ( day < 10 )
  311       day = "0" + day;
  312     var hr = date.getUTCHours();
  313     if (hr < 10)
  314       hr = "0" + hr; 
  315     var min = date.getUTCMinutes();
  316     if (min < 10)
  317       min = "0" + min; 
  318     var sec = date.getUTCSeconds();
  319     if (sec < 10)
  320       sec = "0" + sec; 
  321     return date.getUTCFullYear() + "-" + month + "-" + day + " " + hr + ":" + min + ":" + sec;
  322   }
  323 
  324   function showTooltip(x, y, contents) {
  325     tooltip = $('<div id="tooltip">' + contents + '</div>').css( {
  326       position: 'absolute',
  327       display: 'none',
  328       'z-index': 2000,
  329       top: y + 5,
  330       left: x + 5,
  331       border: '1px solid #fdd',
  332       padding: '2px',
  333       'background-color': '#fee',
  334       opacity: 0.80
  335     }).appendTo("body").fadeIn(200);
  336   }
  337 
  338   function formattedSiVal(val, places) {
  339     if (val >= 1000000000) {
  340       return (val / 1000000000).toFixed(places) + " G";
  341     }
  342     if (val >= 1000000) {
  343       return (val / 1000000).toFixed(places) + " M";
  344     }
  345     if (val >= 1000) {
  346       return (val / 1000).toFixed(places) + " k";
  347     }
  348         
  349     return (val/1).toFixed(places);
  350   }
  351   
  352   function suffixFormatter(val, axis) {
  353     var tickd = axis.tickDecimals;
  354     if (tickd <= 0) {
  355       tickd = 1;
  356     }
  357         
  358     return formattedSiVal(val, tickd);
  359   }
  360 
  361   function selectRangeHandler(event, ranges) {
  362     if ($("#event_tooltip")[0])
  363       return;
  364 
  365     var plotRanges = ranges;
  366 
  367     if (plotRanges.xaxis.to - plotRanges.xaxis.from < 0.00001)
  368       plotRanges.xaxis.to = plotRanges.xaxis.from + 0.00001;
  369     if (plotRanges.yaxis.to - plotRanges.yaxis.from < 0.00001)
  370       plotRanges.yaxis.to = plotRanges.yaxis.from + 0.00001;
  371 
  372     plotOpt.xaxis.min = plotRanges.xaxis.from;
  373     plotOpt.xaxis.max = plotRanges.xaxis.to;
  374     plotOpt.yaxis.min = plotRanges.yaxis.from;
  375     plotOpt.yaxis.max = plotRanges.yaxis.to;
  376 
  377     zooming = true;
  378     plotAccordingToChoices();
  379   }
  380 
  381   function hoverHandler(event, pos, item) {
  382     if (item) {
  383       if (tooltip != null)
  384     tooltip.remove();
  385       var y = formattedSiVal(item.datapoint[1], 2);
  386       showTooltip(item.pageX, 
  387           item.pageY,
  388           item.series.label + " at " + 
  389           (new Date(item.datapoint[0])).toLocaleString() + 
  390           " = " + y);
  391     } else {
  392       if (tooltip != null)
  393     tooltip.remove();
  394     }
  395   }
  396 
  397   function refresh() {
  398     $.ajax({
  399       url: dataurl,
  400       method: 'GET',
  401       dataType: 'json',
  402       success: onDataReceived});
  403   }
  404 
  405   function updatePlotOptions() {
  406     plot.getOptions().events.data = plotOpt.events.data;
  407     if (zooming) {
  408       plot.getOptions().xaxes[0].min = plotOpt.xaxis.min;
  409       plot.getOptions().xaxes[0].max = plotOpt.xaxis.max;
  410       plot.getOptions().yaxes[0].min = plotOpt.yaxis.min;
  411       plot.getOptions().yaxes[0].max = plotOpt.yaxis.max;
  412     } else {
  413       delete plot.getOptions().xaxes[0].min;
  414       delete plot.getOptions().xaxes[0].max;
  415       delete plot.getOptions().yaxes[0].min;
  416       delete plot.getOptions().yaxes[0].max;
  417     }
  418     plot.getOptions().series.stack = plotOpt.series.stack;
  419     plot.getOptions().series.lines.fill = plotOpt.lines.fill;
  420   }
  421 
  422   function plotAccordingToChoices() {
  423     var stack = selectStack.prop('checked');
  424 
  425     var selected_series = selectSeries.multiselect("getChecked").map(function(){return this.value}).get();
  426     var data = [];
  427     for (var i = 0; i < selected_series.length; i++) {
  428       var dataset = datasets[selected_series[i]];
  429       data.push(dataset);
  430       // The Flot stack plugin does not handle missing data correctly
  431       if (stack)
  432     zeroOutMissing(dataset, lastUpdate);
  433     }
  434 
  435     plotOpt.lines.fill = stack;
  436     plotOpt.series.stack = stack ? 1 : null;
  437 
  438     if (plot == null) {
  439       plot = $.plot(placeHolder, data, plotOpt);
  440     } else {
  441       plot.clearEvents();
  442       plot.clearSelection();
  443       updatePlotOptions(); // must precede call to setData()
  444       plot.setData(data);
  445       plot.setupGrid();
  446       plot.draw();
  447     }
  448   }
  449 });
  450 </script>