metrics: add a high mark for the cpu and memory app graphs

dashboard/src/components/GraphItem.vue

@@ -5,6 +5,9 @@ import moment from 'moment-timezone';
 import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 import Chart from 'chart.js/auto';
 import { prettyDecimalSize } from 'pankow/utils';
+import annotationPlugin from 'chartjs-plugin-annotation';
+
+Chart.register(annotationPlugin);
 
 const LIVE_REFRESH_INTERVAL_MSECS = 500;
 const LIVE_REFRESH_HISTORY_MSECS = 5*60*1000; // last 5 mins
@@ -28,11 +31,12 @@ const props = defineProps({
     validator: (val) => Array.isArray(val) && val.every(item => typeof item === 'string')
   },
   yscale: String, // cpu, memory
-  memory: Object,
-  cpu: Object,
+  memory: Number,
+  cpuCount: Number,
+  highMark: Number,
 });
 
-function createGraphOptions({ yscale, period, displayLegend }) {
+function createGraphOptions({ yscale, period, displayLegend, highMark }) {
   const now = Date.now();
 
   return {
@@ -50,6 +54,18 @@ function createGraphOptions({ yscale, period, displayLegend }) {
             return `${datasetLabel}: ${yscale.ticks.callback(tooltipItem.raw.y)}`;
           }
         }
+      },
+      annotation: {
+        annotations: {
+          high: {
+            display: highMark !== null,
+            type: 'line',
+            yMin: highMark,
+            yMax: highMark,
+            borderColor: 'rgb(75, 192, 192)',
+            borderWidth: 0.5
+          }
+        }
       }
     },
     scales: {
@@ -87,7 +103,7 @@ function transformData(data) {
   const x = data[1]*1000; // convert to msecs
   let y;
   if (props.yscale === 'memory') {
-    y = yscaleUnit === 'GiB' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] / 1024 / 1024).toFixed(2);
+    y = yscaleUnit === 'GiB' ? data[0] / 1024 / 1024 / 1024 : data[0] / 1024 / 1024;
   } else { // in non-memory case, for relative values like cpu, if null make it 0
     y = data[0] || 0;
   }
@@ -146,19 +162,20 @@ function onPeriodChanged() {
   // CPU and Memory graph have known min/max set and auto-scaling gets disabled
   // Disk and Network graphs auto-scale the y values.
 
-  let yscale = null;
+  let yscale = null, highMark = null;
 
   if (props.yscale === 'cpu') {
     yscale = {
       type: 'linear',
       min: 0,
-      max: 4 * 100,
+      max: props.cpuCount * 100,
       ticks: {
-        callback: (value) => `${value.toFixed(2)}%`,
+        callback: (value) => `${value.toFixed(2).replace('.00', '')}%`,
         maxTicksLimit: 6 // max tick labels to show
       },
       beginAtZero: true,
     };
+    if (props.highMark) highMark = props.highMark * 100;
   } else if (props.yscale === 'memory') {
     const giB = 1024 * 1024 * 1024;
     const roundedMemoryGiB = Math.ceil(props.memory / giB);
@@ -179,6 +196,8 @@ function onPeriodChanged() {
       beginAtZero: true,
       stacked: true,
     };
+
+    if (props.highMark) highMark = yscaleUnit === 'GiB' ? props.highMark/giB : props.highMark/(1024*1024);
   } else if (props.yscale === 'disk') {
     yscale = {
       type: 'linear',
@@ -206,7 +225,7 @@ function onPeriodChanged() {
   }
 
   // this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
-  const graphOptions = createGraphOptions({ yscale, period: props.period, displayLegend: props.datasetLabels.length > 1 });
+  const graphOptions = createGraphOptions({ yscale, period: props.period, displayLegend: props.datasetLabels.length > 1, highMark });
 
   if (!graph) {
     graph = new Chart(graphNode.value, { type: 'line', data, options: graphOptions });