Girish Ramakrishnan
320 lines
9.4 KiB
Vue
320 lines
9.4 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, onUnmounted, 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();
|
|
|
|
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' },
|
|
];
|
|
|
|
const busy = ref(false);
|
|
const period = ref(0);
|
|
const cpuGraphNode = useTemplateRef('cpuGraphNode');
|
|
const memoryGraphNode = useTemplateRef('memoryGraphNode');
|
|
|
|
let systemMemory = {};
|
|
let systemCpus = {};
|
|
let cpuGraph = null;
|
|
let memoryGraph = null;
|
|
let metricStream = null;
|
|
|
|
const LIVE_REFRESH_INTERVAL_MSECS = 500;
|
|
const LIVE_REFRESH_HISTORY_MSECS = 5*60*1000; // last 5 mins
|
|
|
|
function pruneGraphData(dataset, options) {
|
|
while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our tme window
|
|
dataset.data.shift();
|
|
}
|
|
}
|
|
|
|
async function liveRefresh() {
|
|
|
|
metricStream = await systemModel.getMetricStream(LIVE_REFRESH_INTERVAL_MSECS);
|
|
metricStream.onerror = (error) => console.log('event stream error:', error);
|
|
metricStream.onmessage = (message) => {
|
|
const data = JSON.parse(message.data);
|
|
|
|
if (data.cpu[0]) { // since cpu% is relative, value can be null if no previous value
|
|
cpuGraph.data.datasets[0].data.push({
|
|
x: data.cpu[1] * 1000, // cpuGraph.options.scales.x.max can be used for window edge, if we don't trust server timestamps . but using server timestamps handles network lags better
|
|
y: data.cpu[0]
|
|
});
|
|
|
|
pruneGraphData(cpuGraph.data.datasets[0], cpuGraph.options);
|
|
cpuGraph.update('none');
|
|
}
|
|
|
|
memoryGraph.data.datasets[0].data.push({
|
|
x: data.memory[1] * 1000,
|
|
y: (data.memory[0] / 1024 / 1024 / 1024).toFixed(2)
|
|
});
|
|
pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
|
|
|
|
memoryGraph.data.datasets[1].data.push({
|
|
x: data.swap[1] * 1000,
|
|
y: (data.swap[0] / 1024 / 1024 / 1024).toFixed(2)
|
|
});
|
|
pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);
|
|
|
|
memoryGraph.update('none');
|
|
};
|
|
// advances the time window by 500ms. this is independent of incoming data
|
|
metricStream.intervalId = setInterval(function () {
|
|
cpuGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
|
|
cpuGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
|
|
cpuGraph.update('none');
|
|
|
|
memoryGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
|
|
memoryGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
|
|
memoryGraph.update('none');
|
|
}, LIVE_REFRESH_INTERVAL_MSECS);
|
|
}
|
|
|
|
async function getMetrics(hours) {
|
|
if (hours === 0) return { cpuData: [], memoryData: [], swapData: [] };
|
|
|
|
const [error, result] = await systemModel.getMetrics({ fromSecs: hours * 60 * 60, intervalSecs: 300 });
|
|
if (error) return console.error(error);
|
|
|
|
// time is converted to msecs . cpu is already scaled to cpu*100
|
|
const cpuData = result.cpu.map(v => { return { x: v[1]*1000, y: v[0] };});
|
|
|
|
const memoryData = result.memory.map(v => {
|
|
return {
|
|
x: v[1]*1000,
|
|
y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
|
|
};
|
|
});
|
|
|
|
const swapData = result.swap.map(v => {
|
|
return {
|
|
x: v[1]*1000,
|
|
y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
|
|
};
|
|
});
|
|
|
|
return { cpuData, memoryData, swapData };
|
|
}
|
|
|
|
function createGraphOptions({ yscale, realtime }) {
|
|
const now = Date.now();
|
|
|
|
return {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(periods.find((p) => p.id === period.value).tooltipFormat)
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
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),
|
|
max: now,
|
|
ticks: {
|
|
autoSkip: true, // skip tick labels as needed
|
|
autoSkipPadding: 20, // padding between ticks
|
|
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);
|
|
},
|
|
stepSize: realtime ? 60*1000 : null // // for realtime graph, generate steps of 1min and appropriate tick text
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false,
|
|
},
|
|
},
|
|
y: yscale,
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'nearest',
|
|
axis: 'x'
|
|
}
|
|
};
|
|
}
|
|
|
|
async function refresh() {
|
|
const { cpuData, memoryData, swapData } = await getMetrics(period.value);
|
|
|
|
const cpuGraphData = {
|
|
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 cpuYscale = {
|
|
type: 'linear',
|
|
min: 0,
|
|
max: systemCpus.length * 100,
|
|
ticks: {
|
|
callback: (value) => `${value}%`,
|
|
maxTicksLimit: 6 // max tick labels to show
|
|
},
|
|
beginAtZero: true,
|
|
};
|
|
const cpuGraphOptions = createGraphOptions({ yscale: cpuYscale, realtime: period.value === 0 });
|
|
|
|
if (!cpuGraph) {
|
|
cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
|
|
} else {
|
|
cpuGraph.data = cpuGraphData;
|
|
cpuGraph.options = cpuGraphOptions;
|
|
cpuGraph.update('none');
|
|
}
|
|
|
|
const giB = 1024 * 1024 * 1024;
|
|
const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
|
|
const roundedSwap = Math.ceil(systemMemory.swap / giB) * giB;
|
|
|
|
const memoryGraphData = {
|
|
datasets: [{
|
|
label: 'RAM',
|
|
data: memoryData,
|
|
stack: 'memory+swap',
|
|
pointRadius: 0,
|
|
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
|
borderWidth: 1,
|
|
tension: 0.4,
|
|
showLine: true,
|
|
fill: true,
|
|
color: '#9ad0f5'
|
|
},{
|
|
label: 'Swap',
|
|
data: swapData,
|
|
stack: 'memory+swap',
|
|
pointRadius: 0,
|
|
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
|
borderWidth: 1,
|
|
tension: 0.4,
|
|
showLine: true,
|
|
fill: true,
|
|
color: '#ffb1c1'
|
|
}]
|
|
};
|
|
|
|
const memoryYscale = {
|
|
type: 'linear',
|
|
min: 0,
|
|
max: (roundedMemory + roundedSwap)/ giB,
|
|
ticks: {
|
|
stepSize: 1,
|
|
autoSkip: true, // skip tick labels as needed
|
|
autoSkipPadding: 20, // padding between ticks
|
|
callback: (value) => `${value} GiB`,
|
|
maxTicksLimit: 8 // max tick labels to show
|
|
},
|
|
beginAtZero: true,
|
|
stacked: true,
|
|
};
|
|
|
|
const memoryGraphOptions = createGraphOptions({ yscale: memoryYscale, realtime: period.value === 0 });
|
|
|
|
if (!memoryGraph) {
|
|
memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });
|
|
} else {
|
|
memoryGraph.data = memoryGraphData;
|
|
memoryGraph.options = memoryGraphOptions;
|
|
memoryGraph.update('none');
|
|
}
|
|
|
|
if (metricStream) {
|
|
clearInterval(metricStream.intervalId);
|
|
metricStream.close();
|
|
metricStream = null;
|
|
}
|
|
|
|
if (period.value === 0) liveRefresh();
|
|
}
|
|
|
|
onMounted(async () => {
|
|
let error, result;
|
|
[error, result] = await systemModel.memory();
|
|
if (error) return console.error(error);
|
|
|
|
systemMemory = result;
|
|
|
|
[error, result] = await systemModel.cpus();
|
|
if (error) return console.error(error);
|
|
|
|
systemCpus = result;
|
|
|
|
await refresh();
|
|
});
|
|
|
|
onUnmounted(async () => {
|
|
if (metricStream) {
|
|
clearInterval(metricStream.intervalId);
|
|
metricStream.close();
|
|
}
|
|
});
|
|
|
|
</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">
|
|
<label>{{ $t('system.cpuUsage.title') }}</label>
|
|
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
|
<div class="graph">
|
|
<canvas v-show="!busy" ref="cpuGraphNode"></canvas>
|
|
</div>
|
|
|
|
<label>{{ $t('system.systemMemory.title') }}</label>
|
|
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
|
<div class="graph">
|
|
<canvas v-show="!busy" ref="memoryGraphNode"></canvas>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.graphs label {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.graph {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 160px;
|
|
}
|
|
|
|
</style>
|