jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

graphs: remove dep on periods

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-07-03 11:30:31 +02:00
parent 5c9d323fe9
commit e64cc325d7
1 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/SystemMetrics.vue
+19 -19
View File
@@ -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 () => {
<template>
<Section :title="$t('system.graphs.title')">
<template #header-buttons>
<SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-key="id" option-label="label"/>
<SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/>
</template>
<div class="graphs">