Improved formatting and display of data in server status monitor

Storx · Dec 14, 2012 · 9775d29 · 9775d29
1 parent 19437c4
commit 9775d29
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 55 deletions.
diff --git a/js/jqplot/plugins/jqplot.byteFormatter.js b/js/jqplot/plugins/jqplot.byteFormatter.js
@@ -0,0 +1,37 @@
+/* global PMA_messages */
+(function($) {
+    "use strict";
+    var formatByte = function (val, index) {
+        var units = [
+            PMA_messages.strB,
+            PMA_messages.strKiB,
+            PMA_messages.strMiB,
+            PMA_messages.strGiB,
+            PMA_messages.strTiB,
+            PMA_messages.strPiB,
+            PMA_messages.strEiB
+        ];
+        while (val >= 1024 && index <= 6) {
+            val /= 1024;
+            index++;
+        }
+        var format = '%.1f';
+        if (Math.floor(val) === val) {
+            format = '%.0f';
+        }
+        return $.jqplot.sprintf(
+            format + ' ' + units[index], val
+        );
+    };
+    $.jqplot.byteFormatter = function (index) {
+        index = index || 0;
+        return function (format, val) {
+            if (typeof val === 'number') {
+                val = parseFloat(val, 10) || 0;
+                return formatByte(val, index);
+            } else {
+                return String(val);
+            }
+        };
+    };
+})(jQuery);
diff --git a/js/server_status_monitor.js b/js/server_status_monitor.js
@@ -261,13 +261,13 @@ AJAX.registerOnload('server_status_monitor.js', function() {
             'swap': {
                 title: PMA_messages['strSystemSwap'],
                 series: [
-                    { label: PMA_messages['strUsedSwap'], fill:true, stackSeries: true},
                     { label: PMA_messages['strCachedSwap'], fill:true, stackSeries: true},
+                    { label: PMA_messages['strUsedSwap'], fill:true, stackSeries: true},
                     { label: PMA_messages['strFreeSwap'], fill:true, stackSeries: true}
                 ],
                 nodes: [
-                    { dataPoints: [{ type: 'memory', name: 'SwapUsed' }], valueDivisor: 1024 },
                     { dataPoints: [{ type: 'memory', name: 'SwapCached' }], valueDivisor: 1024 },
+                    { dataPoints: [{ type: 'memory', name: 'SwapUsed' }], valueDivisor: 1024 },
                     { dataPoints: [{ type: 'memory', name: 'SwapFree' }], valueDivisor: 1024 }
                 ],
                 maxYLabel: 0
@@ -1134,11 +1134,30 @@ AJAX.registerOnload('server_status_monitor.js', function() {
                 }
             },
             highlighter: {
-            show: true,
-            showTooltip: false
+                show: true,
+                showTooltip: true,
+                tooltipAxes: 'y',
+                useAxesFormatters: true
             }
         };
 
+        if (settings.title === PMA_messages['strSystemCPUUsage']) {
+            settings.axes.yaxis.tickOptions = {
+                formatString: "%d %%"
+            };
+        } else if (settings.title === PMA_messages['strSystemMemory']
+            || settings.title === PMA_messages['strSystemSwap']
+        ) {
+            settings.stackSeries = true;
+            settings.axes.yaxis.tickOptions = {
+                formatter: $.jqplot.byteFormatter(2) // MiB
+            };
+        } else if (settings.title === PMA_messages['strTraffic']) {
+            settings.axes.yaxis.tickOptions = {
+                formatter: $.jqplot.byteFormatter(1) // KiB
+            };
+        }
+
         settings.series = chartObj.series;
 
         if ($('#' + 'gridchart' + runtime.chartAI).length == 0) {
@@ -1204,37 +1223,9 @@ AJAX.registerOnload('server_status_monitor.js', function() {
         });
 
         $('#gridchart' + runtime.chartAI).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
-
-            if (neighbor != null) {
-                if ($('#tooltip_box').length) {
-                    $('#tooltip_box')
-                        .css({
-                            left: ev.pageX + 15,
-                            top: ev.pageY + 15,
-                            padding:'5px'
-                        })
-                        .fadeIn();
-                }
-                var xVal = new Date(Math.ceil(neighbor.data[0]));
-                var xValHours = xVal.getHours();
-                (xValHours < 10) ? (xValHours = "0" + xValHours) : "";
-
-                var xValMinutes = xVal.getMinutes();
-                (xValMinutes < 10) ? (xValMinutes = "0" + xValMinutes) : "";
-
-                var xValSeconds = xVal.getSeconds();
-                (xValSeconds < 10) ? (xValSeconds = "0" + xValSeconds) : "";
-
-                xVal = xValHours + ":" + xValMinutes + ":" + xValSeconds;
-                var s = '<b>' + xVal + '<br/>' + neighbor.data[1] + '</b>';
-
-                $('#tooltip_box').html(s);
-            }
-
             if (! drawTimeSpan) {
                 return;
             }
-
             if (selectionStartX != undefined) {
                 $('#selection_box')
                     .css({
@@ -1244,26 +1235,7 @@ AJAX.registerOnload('server_status_monitor.js', function() {
             }
         });
 
-
-        $('#gridchart' + runtime.chartAI).bind('jqplotMouseEnter', function(ev, gridpos, datapos, neighbor, plot) {
-            if ($('#tooltip_box').length) {
-                tooltipBox.remove();
-            }
-            tooltipBox = $('<div style="z-index:1000;height:40px;position:absolute;background-color:#FFFFFD;opacity:0.8;filter:alpha(opacity=80);">');
-            $(document.body).append(tooltipBox);
-            tooltipBox
-                .attr({id: 'tooltip_box'})
-                .css({
-                    top: ev.pageY + 15,
-                    left: ev.pageX + 15
-                })
-                .fadeIn();
-        });
-
         $('#gridchart' + runtime.chartAI).bind('jqplotMouseLeave', function(ev, gridpos, datapos, neighbor, plot) {
-            if ($('#tooltip_box').length) {
-                tooltipBox.remove();
-            }
             drawTimeSpan = false;
         });
 
@@ -1488,8 +1460,8 @@ AJAX.registerOnload('server_status_monitor.js', function() {
                 // update chart options
                 elem.chart['axes']['xaxis']['max'] = runtime.xmax;
                 elem.chart['axes']['xaxis']['min'] = runtime.xmin;
-                elem.chart['axes']['yaxis']['max'] = Math.ceil(elem.maxYLabel*1.2);
-                elem.chart['axes']['yaxis']['tickInterval'] = Math.ceil(elem.maxYLabel*1.2)/5;
+                elem.chart['axes']['yaxis']['max'] = Math.ceil(elem.maxYLabel*1.1);
+                elem.chart['axes']['yaxis']['tickInterval'] = Math.ceil(elem.maxYLabel*1.2/5);
                 i++;
 
                 if (runtime.redrawCharts) {

diff --git a/server_status_monitor.php b/server_status_monitor.php
@@ -398,9 +398,7 @@
  */
 $header   = $response->getHeader();
 $scripts  = $header->getScripts();
-$scripts->addFile('server_status_monitor.js');
 $scripts->addFile('jquery/jquery.tablesorter.js');
-$scripts->addFile('server_status_sorter.js');
 $scripts->addFile('jquery/jquery.json-2.2.js');
 $scripts->addFile('jquery/jquery.sortableTable.js');
 $scripts->addFile('jquery/timepicker.js');
@@ -417,8 +415,13 @@
 $scripts->addFile('jqplot/plugins/jqplot.dateAxisRenderer.js');
 $scripts->addFile('jqplot/plugins/jqplot.highlighter.js');
 $scripts->addFile('jqplot/plugins/jqplot.cursor.js');
+$scripts->addFile('jqplot/plugins/jqplot.byteFormatter.js');
 $scripts->addFile('date.js');
 
+$scripts->addFile('server_status_monitor.js');
+$scripts->addFile('server_status_sorter.js');
+
+
 /**
  * start output
  */