Fold cpu and memory usage into one component
This commit is contained in:
Johannes Zellner
@@ -1,142 +0,0 @@
|
||||
<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 === 0) return 'app.graphs.period.live';
|
||||
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: 0, label: t(trKeyFromPeriod(0)) },
|
||||
{ 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;
|
||||
let gMetricStream = null;
|
||||
|
||||
async function liveRefresh() {
|
||||
gMetricStream = await systemModel.getMetricStream();
|
||||
gMetricStream.onerror = (error) => console.log('event stream error:', error);
|
||||
gMetricStream.onmessage = (message) => {
|
||||
const data = JSON.parse(message.data);
|
||||
if (!data.cpu[0]) return; // value can be null if no previous value
|
||||
gGraph.data.labels.push(moment(data.cpu[1]*1000).format('hh:mm'));
|
||||
gGraph.data.datasets[0].data.push(data.cpu[0]);
|
||||
gGraph.update('none'); // disables animation
|
||||
};
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
busy.value = true;
|
||||
|
||||
const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
|
||||
if (error) return console.error(error);
|
||||
|
||||
const labels = result.cpu.map(v => {
|
||||
return moment(v[1]*1000).format('hh:mm');
|
||||
});
|
||||
|
||||
const data = result.cpu.map(v => v[0]); // already scaled to cpu*100
|
||||
|
||||
if (gMetricStream) {
|
||||
gMetricStream.close();
|
||||
gMetricStream = null;
|
||||
}
|
||||
if (gGraph) gGraph.destroy();
|
||||
gGraph = new Chart(graph.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [{
|
||||
label: 'CPU',
|
||||
data: data,
|
||||
pointRadius: 0,
|
||||
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
autoSkip: true, // skip tick labels as needed
|
||||
autoSkipPadding: 20, // padding between ticks
|
||||
maxRotation: 0, // don't rotate the labels
|
||||
maxTicksLimit: 15 // max tick labels to show
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
callback: (value) => {
|
||||
return `${value}%`;
|
||||
},
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
min: 0,
|
||||
max: result.cpuCount * 100,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
axis: 'x'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
busy.value = false;
|
||||
|
||||
if (period.value === 0) liveRefresh();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refresh();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Section :title="$t('system.cpuUsage.title')">
|
||||
<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>
|
||||
@@ -1,131 +0,0 @@
|
||||
<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 systemMemory = {};
|
||||
let gGraph = null;
|
||||
|
||||
async function refresh() {
|
||||
busy.value = true;
|
||||
|
||||
const [error, result] = await systemModel.getMetrics({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
|
||||
if (error) return console.error(error);
|
||||
|
||||
const labels = result.memory.map(v => {
|
||||
return moment(v[1]*1000).format('hh:mm');
|
||||
});
|
||||
|
||||
const data = result.memory.map(v => {
|
||||
return (v[0] / 1024 / 1024 / 1024).toFixed(2);
|
||||
});
|
||||
|
||||
const giB = 1024 * 1024 * 1024;
|
||||
const quarterGiB = 0.25 * giB;
|
||||
const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
|
||||
const roundedMemoryGiB = (roundedMemory / giB).toFixed(2);
|
||||
|
||||
const graphData = {
|
||||
labels,
|
||||
datasets: [{
|
||||
label: 'Memory',
|
||||
data: data,
|
||||
pointRadius: 0,
|
||||
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true
|
||||
}]
|
||||
};
|
||||
const options = {
|
||||
plugins: {
|
||||
legend: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
autoSkip: true, // skip tick labels as needed
|
||||
autoSkipPadding: 20, // padding between ticks
|
||||
maxRotation: 0 // don't rotate the labels
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
callback: (value) => {
|
||||
return `${value} GiB`;
|
||||
},
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
min: 0,
|
||||
max: roundedMemoryGiB,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
axis: 'x'
|
||||
}
|
||||
};
|
||||
|
||||
if (gGraph) gGraph.destroy();
|
||||
gGraph = new Chart(graph.value, { type: 'line', data: graphData, options: options });
|
||||
|
||||
busy.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const [error, result] = await systemModel.memory();
|
||||
if (error) return console.error(error);
|
||||
systemMemory = result;
|
||||
|
||||
await refresh();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Section :title="$t('system.systemMemory.title')">
|
||||
<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>
|
||||
@@ -0,0 +1,243 @@
|
||||
<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 === 0) return 'app.graphs.period.live';
|
||||
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: 0, label: t(trKeyFromPeriod(0)) },
|
||||
{ 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 busy = ref(false);
|
||||
const period = ref(6);
|
||||
const cpuGraphNode = useTemplateRef('cpuGraphNode');
|
||||
const memoryGraphNode = useTemplateRef('memoryGraphNode');
|
||||
|
||||
let systemMemory = {};
|
||||
let cpuGraph = null;
|
||||
let memoryGraph = null;
|
||||
let metricStream = null;
|
||||
|
||||
async function liveRefresh() {
|
||||
metricStream = await systemModel.getMetricStream();
|
||||
metricStream.onerror = (error) => console.log('event stream error:', error);
|
||||
metricStream.onmessage = (message) => {
|
||||
const data = JSON.parse(message.data);
|
||||
|
||||
// value can be null if no previous value
|
||||
if (data.cpu[0]) {
|
||||
cpuGraph.data.labels.push(moment(data.cpu[1]*1000).format('hh:mm'));
|
||||
cpuGraph.data.datasets[0].data.push(data.cpu[0]);
|
||||
cpuGraph.update('none');
|
||||
}
|
||||
|
||||
if (data.memory[0]) {
|
||||
memoryGraph.data.labels.push(moment(data.memory[1]*1000).format('hh:mm'));
|
||||
memoryGraph.data.datasets[0].data.push((data.memory[0] / 1024 / 1024 / 1024).toFixed(2));
|
||||
memoryGraph.update('none');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
busy.value = true;
|
||||
|
||||
const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
|
||||
if (error) return console.error(error);
|
||||
|
||||
// cpu
|
||||
const cpuLabels = result.cpu.map(v => {
|
||||
return moment(v[1]*1000).format('hh:mm');
|
||||
});
|
||||
|
||||
const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100
|
||||
|
||||
const cpuGraphData = {
|
||||
labels: cpuLabels,
|
||||
datasets: [{
|
||||
label: 'CPU',
|
||||
data: cpuData,
|
||||
pointRadius: 0,
|
||||
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true
|
||||
}]
|
||||
};
|
||||
|
||||
const cpuGraphOptions = {
|
||||
plugins: {
|
||||
legend: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
autoSkip: true, // skip tick labels as needed
|
||||
autoSkipPadding: 20, // padding between ticks
|
||||
maxRotation: 0, // don't rotate the labels
|
||||
maxTicksLimit: 15, // max tick labels to show
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
callback: (value) => {
|
||||
return `${value}%`;
|
||||
},
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
min: 0,
|
||||
max: result.cpuCount * 100,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
axis: 'x'
|
||||
}
|
||||
};
|
||||
|
||||
if (cpuGraph) cpuGraph.destroy();
|
||||
cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
|
||||
|
||||
// memory
|
||||
const memoryLabels = result.memory.map(v => {
|
||||
return moment(v[1]*1000).format('hh:mm');
|
||||
});
|
||||
|
||||
const memoryData = result.memory.map(v => {
|
||||
return (v[0] / 1024 / 1024 / 1024).toFixed(2);
|
||||
});
|
||||
|
||||
const giB = 1024 * 1024 * 1024;
|
||||
const quarterGiB = 0.25 * giB;
|
||||
const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
|
||||
const roundedMemoryGiB = (roundedMemory / giB).toFixed(2);
|
||||
|
||||
const memoryGraphData = {
|
||||
labels: memoryLabels,
|
||||
datasets: [{
|
||||
label: 'Memory',
|
||||
data: memoryData,
|
||||
pointRadius: 0,
|
||||
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true
|
||||
}]
|
||||
};
|
||||
|
||||
const memoryGraphOptions = {
|
||||
plugins: {
|
||||
legend: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
autoSkip: true, // skip tick labels as needed
|
||||
autoSkipPadding: 20, // padding between ticks
|
||||
maxRotation: 0, // don't rotate the labels
|
||||
maxTicksLimit: 15, // max tick labels to show
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
callback: (value) => {
|
||||
return `${value} GiB`;
|
||||
},
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
min: 0,
|
||||
max: roundedMemoryGiB,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
axis: 'x'
|
||||
}
|
||||
};
|
||||
|
||||
if (memoryGraph) memoryGraph.destroy();
|
||||
memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });
|
||||
|
||||
busy.value = false;
|
||||
|
||||
if (metricStream) {
|
||||
metricStream.close();
|
||||
metricStream = null;
|
||||
}
|
||||
|
||||
if (period.value === 0) liveRefresh();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const [error, result] = await systemModel.memory();
|
||||
if (error) return console.error(error);
|
||||
|
||||
systemMemory = result;
|
||||
|
||||
await refresh();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Section :title="$t('system.graphs.title')">
|
||||
<template #header-buttons>
|
||||
<SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
|
||||
</template>
|
||||
<div class="graphs">
|
||||
<div style="position: relative; width: 400px; height: 200px;">
|
||||
<label>{{ $t('system.cpuUsage.title') }}</label>
|
||||
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
||||
<canvas v-show="!busy" ref="cpuGraphNode"></canvas>
|
||||
</div>
|
||||
|
||||
<div style="position: relative; width: 400px; height: 200px;">
|
||||
<label>{{ $t('system.systemMemory.title') }}</label>
|
||||
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
||||
<canvas v-show="!busy" ref="memoryGraphNode"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.graphs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user