diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue index 15ab0e58d..3686501a3 100644 --- a/dashboard/src/components/SystemMetrics.vue +++ b/dashboard/src/components/SystemMetrics.vue @@ -15,17 +15,17 @@ import { prettyDecimalSize } from 'pankow/utils'; const systemModel = SystemModel.create(); const periods = [ - { id: 0, label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' }, - { id: 1, label: t('app.graphs.period.1h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' }, - { id: 6, label: t('app.graphs.period.6h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' }, - { id: 12, label: t('app.graphs.period.12h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' }, - { id: 24, label: t('app.graphs.period.24h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' }, - { id: 24*7, label: t('app.graphs.period.7d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' }, - { id: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' }, + { hours: 0, label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm 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' }, + { hours: 24, label: t('app.graphs.period.24h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' }, + { hours: 24*7, label: t('app.graphs.period.7d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' }, + { hours: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' }, ]; const busy = ref(false); -const period = ref(0); +const period = ref(periods[0]); const cpuGraphNode = useTemplateRef('cpuGraphNode'); const memoryGraphNode = useTemplateRef('memoryGraphNode'); const networkGraphNode = useTemplateRef('networkGraphNode'); @@ -172,7 +172,7 @@ function createGraphOptions({ yscale, realtime }) { }, tooltip: { callbacks: { - title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(periods.find((p) => p.id === period.value).tooltipFormat), + title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(period.value.tooltipFormat), label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y) } } @@ -181,7 +181,7 @@ function createGraphOptions({ yscale, realtime }) { x: { // we used to use 'time' type but it relies on the data to generate ticks. we may not have data for our time periods type: 'linear', - min: now - (period.value === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.value*60*60*1000), + min: now - (period.value.hours === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.value.hours*60*60*1000), max: now, ticks: { autoSkip: true, // skip tick labels as needed @@ -189,8 +189,8 @@ function createGraphOptions({ yscale, realtime }) { maxRotation: 0, // don't rotate the labels count: 7, // tick labels to show. anything more than 7 will not work for "7 days" callback: function (value) { - if (period.value === 0) return `${5-(value-this.min)/60000}min`; - return moment(value).format(periods.find((p) => p.id === period.value).format); + if (period.value.hours === 0) return `${5-(value-this.min)/60000}min`; + return moment(value).format(period.value.format); }, stepSize: realtime ? 60*1000 : null // // for realtime graph, generate steps of 1min and appropriate tick text }, @@ -211,7 +211,7 @@ function createGraphOptions({ yscale, realtime }) { // 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() { - const metrics = await getMetrics(period.value); + const metrics = await getMetrics(period.value.hours); ///////////// CPU Graph const cpuGraphData = { @@ -236,7 +236,7 @@ async function onPeriodChange() { }, beginAtZero: true, }; - const cpuGraphOptions = createGraphOptions({ yscale: cpuYscale, realtime: period.value === 0 }); + const cpuGraphOptions = createGraphOptions({ yscale: cpuYscale, realtime: period.value.hours === 0 }); if (!cpuGraph) { cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions }); @@ -290,7 +290,7 @@ async function onPeriodChange() { stacked: true, }; - const memoryGraphOptions = createGraphOptions({ yscale: memoryYscale, realtime: period.value === 0 }); + const memoryGraphOptions = createGraphOptions({ yscale: memoryYscale, realtime: period.value.hours === 0 }); if (!memoryGraph) { memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions }); @@ -337,7 +337,7 @@ async function onPeriodChange() { stacked: false, }; - const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value === 0 }); + const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value.hours === 0 }); if (!diskGraph) { diskGraph = new Chart(diskGraphNode.value, { type: 'line', data: diskGraphData, options: diskGraphOptions }); @@ -384,7 +384,7 @@ async function onPeriodChange() { stacked: false, }; - const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value === 0 }); + const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value.hours === 0 }); if (!networkGraph) { networkGraph = new Chart(networkGraphNode.value, { type: 'line', data: networkGraphData, options: networkGraphOptions }); @@ -407,7 +407,7 @@ async function onPeriodChange() { metricStream = null; } - if (period.value === 0) liveRefresh(); + if (period.value.hours === 0) liveRefresh(); } onMounted(async () => { @@ -437,7 +437,7 @@ onUnmounted(async () => {