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

Add timeframe selector in cpu and memory graphs

Browse Source
This commit is contained in:
Johannes Zellner
2025-05-21 09:09:12 +02:00
parent 8e205207b0
commit 6e21f19bd5
3 changed files with 82 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
dashboard/src/components/CpuUsage.vue
View File

@@ -1,17 +1,45 @@
<script setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef } from 'vue';
import Chart from 'chart.js/auto';
import moment from 'moment-timezone';
import { SingleSelect, Spinner } from 'pankow';
import Section from './Section.vue';
import SystemModel from '../models/SystemModel.js';
const systemModel = SystemModel.create();
function trKeyFromPeriod(period) {
if (period === 6) return 'app.graphs.period.6h';
if (period === 12) return 'app.graphs.period.12h';
if (period === 24) return 'app.graphs.period.24h';
if (period === 24*7) return 'app.graphs.period.7d';
if (period === 24*30) return 'app.graphs.period.30d';
return '';
}
const periods = [
{ id: 6, label: t(trKeyFromPeriod(6)) },
{ id: 12, label: t(trKeyFromPeriod(12)) },
{ id: 24, label: t(trKeyFromPeriod(24)) },
{ id: 24*7, label: t(trKeyFromPeriod(24*7)) },
{ id: 24*30, label: t(trKeyFromPeriod(24*30)) },
];
const graph = useTemplateRef('graph');
const period = ref(6);
const busy = ref(true);
let gGraph = null;
async function refresh() {
busy.value = true;
const [error, result] = await systemModel.graphs({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
if (error) return console.error(error);
@@ -21,7 +49,8 @@ async function refresh() {
const data = result.cpu.map(v => v[0]); // already scaled to cpu*100
new Chart(graph.value, {
if (gGraph) gGraph.destroy();
gGraph = new Chart(graph.value, {
type: 'line',
data: {
labels,
@@ -67,6 +96,8 @@ async function refresh() {
}
}
});
busy.value = false;
}
onMounted(async () => {
@@ -77,6 +108,13 @@ onMounted(async () => {
<template>
<Section :title="$t('system.cpuUsage.title')">
<div style="position: relative; width: 100%; height: 200px;"><canvas ref="graph"></canvas></div>
<template #header-buttons>
<SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
</template>
<div style="position: relative; width: 400px; height: 200px;">
<div style="text-align: center" v-if="busy"><Spinner/></div>
<canvas v-show="!busy" ref="graph"></canvas>
</div>
</Section>
</template>

44
dashboard/src/components/MemoryUsage.vue
View File

@@ -1,18 +1,46 @@
<script setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef } from 'vue';
import Chart from 'chart.js/auto';
import moment from 'moment-timezone';
import { SingleSelect, Spinner } from 'pankow';
import Section from './Section.vue';
import SystemModel from '../models/SystemModel.js';
const systemModel = SystemModel.create();
let systemMemory = {};
function trKeyFromPeriod(period) {
if (period === 6) return 'app.graphs.period.6h';
if (period === 12) return 'app.graphs.period.12h';
if (period === 24) return 'app.graphs.period.24h';
if (period === 24*7) return 'app.graphs.period.7d';
if (period === 24*30) return 'app.graphs.period.30d';
return '';
}
const periods = [
{ id: 6, label: t(trKeyFromPeriod(6)) },
{ id: 12, label: t(trKeyFromPeriod(12)) },
{ id: 24, label: t(trKeyFromPeriod(24)) },
{ id: 24*7, label: t(trKeyFromPeriod(24*7)) },
{ id: 24*30, label: t(trKeyFromPeriod(24*30)) },
];
const graph = useTemplateRef('graph');
const period = ref(6);
const busy = ref(true);
let systemMemory = {};
let gGraph = null;
async function refresh() {
busy.value = true;
const [error, result] = await systemModel.graphs({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
if (error) return console.error(error);
@@ -73,7 +101,10 @@ async function refresh() {
}
};
new Chart(graph.value, { type: 'line', data: graphData, options: options });
if (gGraph) gGraph.destroy();
gGraph = new Chart(graph.value, { type: 'line', data: graphData, options: options });
busy.value = false;
}
onMounted(async () => {
@@ -88,6 +119,13 @@ onMounted(async () => {
<template>
<Section :title="$t('system.systemMemory.title')">
<div style="position: relative; width: 100%; height: 200px;"><canvas ref="graph"></canvas></div>
<template #header-buttons>
<SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
</template>
<div style="position: relative; width: 400px; height: 200px;">
<div style="text-align: center" v-if="busy"><Spinner/></div>
<canvas v-show="!busy" ref="graph"></canvas>
</div>
</Section>
</template>