omd top: add color to tooltip

sni · Jan 29, 2025 · 3f7e95c · 3f7e95c
1 parent 0125228
commit 3f7e95c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 31 deletions.
diff --git a/plugins/plugins-available/omd/root/omd_top-3.20.2.css b/plugins/plugins-available/omd/root/omd_top-3.20.2.css
@@ -1,24 +1,9 @@
-TABLE {
+DIV.legend TABLE {
     width: auto !important;
 }
 
-table.tooltip {
-    border-collapse: collapse;
-}
-
-table.tooltip .var {
-    font-weight: bold;
-    border-left: 1px solid grey;
-    padding-left: 5px;
-}
-
-table.tooltip .val {
-    text-align: right;
-    font-weight: bold;
-}
-
-table.tooltip .date {
-    padding-right: 5px;
+TD.legendColorBox > DIV {
+    border: none !important;
 }
 
 #raw_top {

diff --git a/plugins/plugins-available/omd/root/omd_top-3.20.2.js b/plugins/plugins-available/omd/root/omd_top-3.20.2.js
@@ -119,19 +119,22 @@ function fetchTopDataDo() {
     });
 }
 
-function _getTooltipFromSeries(date, series, index, unit, skipEmpty, toFixed) {
-    var tooltip = "<table class='tooltip'><tr><td class='date'>"+date+"</td>";
+function _getTooltipFromSeries(date, plot, index, unit, skipEmpty, toFixed) {
+    var tooltip = "<table class='tooltip body'><tr><td class='date'>"+date+"</td>";
     var x = 0;
+    var series = plot.getData();
     jQuery.each(series, function(i, s) {
         if(!skipEmpty || s.data[index][1] != 0) {
             x++;
-            var val = s.data[index][1];
+            var color = s.color;
+            var val   = s.data[index][1];
             if(toFixed != undefined) { val = Number(val).toFixed(toFixed); }
             if(x > 1) {
                 tooltip += "<tr><td></td>";
             }
-            tooltip += "<td class='var'>"+s.label + ":</td>";
-            tooltip += "<td class='val'>"+_ifNotNull(val, unit)+"</td></tr>";
+            tooltip += "<td class='border-l px-1 borderDark'><div class='w-3 h-3' style='background-color:"+color+";'></div></td>";
+            tooltip += "<td class=''>"+s.label + ":</td>";
+            tooltip += "<td class=''>"+_ifNotNull(val, unit)+"</td></tr>";
         }
     });
     tooltip += "</table>";

diff --git a/plugins/plugins-available/omd/templates/omd_top.tt b/plugins/plugins-available/omd/templates/omd_top.tt
@@ -99,7 +99,7 @@ jQuery().ready(function() {
     jQuery('#load_graph').bind("plothover", function (event, pos, item) {
         if (item) {
             var date    = _dateString(item.datapoint[0]);
-            var tooltip = _getTooltipFromSeries(date, load_series, item.dataIndex);
+            var tooltip = _getTooltipFromSeries(date, load_plot, item.dataIndex);
             // place next to mouse position
             var pos = mouseRelativePosition();
             jQuery("#tooltip").html(tooltip)

diff --git a/plugins/plugins-available/omd/templates/omd_top_details.tt b/plugins/plugins-available/omd/templates/omd_top_details.tt
@@ -319,13 +319,13 @@ jQuery().ready(function() {
                 var d = _dateString(item.datapoint[0]);
                 var tooltip;
                 var offsetY = 0;
-                if(e == '#load_graph')    { tooltip = _getTooltipFromSeries(d, load_series,    item.dataIndex                )};
-                if(e == '#cpu_graph')     { tooltip = _getTooltipFromSeries(d, cpu_series,     item.dataIndex,  "%"          )};
-                if(e == '#mem_graph')     { tooltip = _getTooltipFromSeries(d, mem_series,     item.dataIndex, "MB"          )};
-                if(e == '#swap_graph')    { tooltip = _getTooltipFromSeries(d, swap_series,    item.dataIndex, "MB"          )};
-                if(e == '#pcpu_graph')    { tooltip = _getTooltipFromSeries(d, pcpu_series,    item.dataIndex,  "%", true, 1 )};
-                if(e == '#pmem_graph')    { tooltip = _getTooltipFromSeries(d, pmem_series,    item.dataIndex,  "%", true, 1 ); offsetY = 100; };
-                if(e == '#gearman_graph') { tooltip = _getTooltipFromSeries(d, gearman_series, item.dataIndex                ); offsetY = 100; };
+                if(e == '#load_graph')    { tooltip = _getTooltipFromSeries(d, plots.load,    item.dataIndex                )};
+                if(e == '#cpu_graph')     { tooltip = _getTooltipFromSeries(d, plots.cpu,     item.dataIndex,  "%"          )};
+                if(e == '#mem_graph')     { tooltip = _getTooltipFromSeries(d, plots.mem,     item.dataIndex, "MB"          )};
+                if(e == '#swap_graph')    { tooltip = _getTooltipFromSeries(d, plots.swap,    item.dataIndex, "MB"          )};
+                if(e == '#pcpu_graph')    { tooltip = _getTooltipFromSeries(d, plots.pcpu,    item.dataIndex,  "%", true, 1 )};
+                if(e == '#pmem_graph')    { tooltip = _getTooltipFromSeries(d, plots.pmem,    item.dataIndex,  "%", true, 1 ); offsetY = 100; };
+                if(e == '#gearman_graph') { tooltip = _getTooltipFromSeries(d, plots.gearman, item.dataIndex                ); offsetY = 100; };
                 // place next to mouse position
                 var pos = mouseRelativePosition();
                 jQuery("#tooltip").html(tooltip)