graphs: make top level div and clean the timer

dashboard/src/components/GraphItem.vue

@@ -2,7 +2,7 @@
 <script setup>
 
 import moment from 'moment-timezone';
-import { onMounted, useTemplateRef, watch } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 import Chart from 'chart.js/auto';
 import { prettyDecimalSize } from 'pankow/utils';
 
@@ -216,6 +216,10 @@ onMounted(async function () {
     await onPeriodChanged();
 });
 
+onUnmounted(async function () {
+  if (liveRefreshIntervalId) clearInterval(liveRefreshIntervalId);
+});
+
 defineExpose({
   setData,
   pushData,
@@ -224,9 +228,11 @@ defineExpose({
 </script>
 
 <template>
-  <label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
-  <div class="graph">
-    <canvas ref="graphNode"></canvas>
+  <div>
+    <label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
+    <div class="graph">
+      <canvas ref="graphNode"></canvas>
+    </div>
   </div>
 </template>
 

dashboard/src/components/SystemMetrics.vue

@@ -14,7 +14,7 @@ import GraphItem from './GraphItem.vue';
 const systemModel = SystemModel.create();
 
 const periods = [
-  { hours: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
   { hours: 1,     label: t('app.graphs.period.1h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
   { hours: 6,     label: t('app.graphs.period.6h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
   { hours: 12,    label: t('app.graphs.period.12h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
@@ -60,8 +60,6 @@ async function liveRefresh() {
   };
 }
 
-// CPU and Memory graph have known min/max set and auto-scaling gets disabled
-// Disk and Network graphs auto-scale the y values.
 async function onPeriodChange() {
   if (metricStream) {
     metricStream.close();

dashboard/src/components/app/Graphs.vue

@@ -52,7 +52,6 @@ async function liveRefresh() {
     const data = JSON.parse(message.data);
 
     cpuGraphItem.value.pushData(data.cpu);
-    console.log(data.cpu);
     memoryGraphItem.value.pushData(data.memory);
     diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
     networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);