graphs: refactor into GraphItem component
This commit is contained in:
Girish Ramakrishnan
@@ -0,0 +1,236 @@
|
||||
|
||||
<script setup>
|
||||
|
||||
import moment from 'moment-timezone';
|
||||
import { onMounted, useTemplateRef, watch } from 'vue';
|
||||
import Chart from 'chart.js/auto';
|
||||
import { prettyDecimalSize } from 'pankow/utils';
|
||||
|
||||
const LIVE_REFRESH_INTERVAL_MSECS = 500;
|
||||
const LIVE_REFRESH_HISTORY_MSECS = 5*60*1000; // last 5 mins
|
||||
|
||||
const graphNode = useTemplateRef('graphNode');
|
||||
|
||||
let graph = null;
|
||||
let liveRefreshIntervalId = null;
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
subtext: String,
|
||||
period: Object, // { hours, format, tooltpFormat }
|
||||
datasetLabels: {
|
||||
type: Array,
|
||||
validator: (val) => Array.isArray(val) && val.every(item => typeof item === 'string')
|
||||
},
|
||||
yscale: String, // cpu, memory
|
||||
memory: Object,
|
||||
cpu: Object
|
||||
});
|
||||
|
||||
function createGraphOptions({ yscale, period }) {
|
||||
const now = Date.now();
|
||||
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(period.tooltipFormat),
|
||||
label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y)
|
||||
}
|
||||
}
|
||||
},
|
||||
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.hours === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.hours*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.hours === 0) return `${5-(value-this.min)/60000}min`;
|
||||
return moment(value).format(period.format);
|
||||
},
|
||||
stepSize: period.hours === 0 ? 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'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function transformData(data) {
|
||||
const x = data[1]*1000; // convert to msecs
|
||||
// in non-memory case, for relative values like cpu, if null make it 0
|
||||
const y = props.yscale === 'memory' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] || 0);
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
function setData(...data) {
|
||||
for (const [index, items] of data.entries()) {
|
||||
graph.data.datasets[index].data = items.map(transformData);
|
||||
}
|
||||
graph.update('none');
|
||||
}
|
||||
|
||||
function pruneGraphData(dataset, options) {
|
||||
while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our time window
|
||||
dataset.data.shift();
|
||||
}
|
||||
}
|
||||
|
||||
function advance() {
|
||||
graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
|
||||
graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
|
||||
graph.update('none');
|
||||
}
|
||||
|
||||
function pushData(...data) {
|
||||
for (const [index, item] of data.entries()) {
|
||||
graph.data.datasets[index].data.push(transformData(item));
|
||||
pruneGraphData(graph.data.datasets[index], graph.options);
|
||||
}
|
||||
graph.update('none');
|
||||
}
|
||||
|
||||
function onPeriodChanged() {
|
||||
if (liveRefreshIntervalId) {
|
||||
clearInterval(liveRefreshIntervalId);
|
||||
liveRefreshIntervalId = null;
|
||||
}
|
||||
|
||||
const data = { datasets: [] };
|
||||
|
||||
for (const label of props.datasetLabels) {
|
||||
data.datasets.push({
|
||||
label: label,
|
||||
data: [],
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true
|
||||
});
|
||||
}
|
||||
|
||||
let yscale = null;
|
||||
|
||||
if (props.yscale === 'cpu') {
|
||||
yscale = {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
max: 4 * 100,
|
||||
ticks: {
|
||||
callback: (value) => `${value.toFixed(2)}%`,
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
beginAtZero: true,
|
||||
};
|
||||
} else if (props.yscale === 'memory') {
|
||||
const giB = 1024 * 1024 * 1024;
|
||||
const roundedMemory = Math.ceil(props.memory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
|
||||
const roundedSwap = Math.ceil(props.memory.swap / giB) * giB;
|
||||
|
||||
yscale = {
|
||||
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,
|
||||
};
|
||||
} else if (props.yscale === 'disk') {
|
||||
yscale = {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
|
||||
ticks: {
|
||||
callback: (value) => `${prettyDecimalSize(value)}ps`,
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
beginAtZero: true,
|
||||
stacked: false,
|
||||
};
|
||||
} else if (props.yscale === 'network') {
|
||||
yscale = {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
|
||||
ticks: {
|
||||
callback: (value) => `${prettyDecimalSize(value)}ps`,
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
beginAtZero: true,
|
||||
stacked: false,
|
||||
};
|
||||
}
|
||||
|
||||
// this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
|
||||
const graphOptions = createGraphOptions({ yscale, period: props.period });
|
||||
|
||||
if (!graph) {
|
||||
graph = new Chart(graphNode.value, { type: 'line', data, options: graphOptions });
|
||||
} else {
|
||||
graph.data = data;
|
||||
graph.options = graphOptions;
|
||||
graph.update('none');
|
||||
}
|
||||
|
||||
// advances the time window. this is independent of incoming data vis pushData()
|
||||
if (props.period.hours === 0) liveRefreshIntervalId = setInterval(advance, LIVE_REFRESH_INTERVAL_MSECS);
|
||||
}
|
||||
|
||||
watch(() => props.period, onPeriodChanged);
|
||||
|
||||
onMounted(async function () {
|
||||
await onPeriodChanged();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
setData,
|
||||
pushData,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
|
||||
<div class="graph">
|
||||
<canvas ref="graphNode"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.graphs label {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.graph {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -4,13 +4,12 @@ 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 { ref, onMounted, onUnmounted, useTemplateRef, nextTick } from 'vue';
|
||||
import { SingleSelect } from 'pankow';
|
||||
import Section from './Section.vue';
|
||||
import SystemModel from '../models/SystemModel.js';
|
||||
import { prettyDecimalSize } from 'pankow/utils';
|
||||
import GraphItem from './GraphItem.vue';
|
||||
|
||||
const systemModel = SystemModel.create();
|
||||
|
||||
@@ -24,12 +23,12 @@ const periods = [
|
||||
{ hours: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
|
||||
];
|
||||
|
||||
const busy = ref(false);
|
||||
const busy = ref(true);
|
||||
const period = ref(periods[0]);
|
||||
const cpuGraphNode = useTemplateRef('cpuGraphNode');
|
||||
const memoryGraphNode = useTemplateRef('memoryGraphNode');
|
||||
const networkGraphNode = useTemplateRef('networkGraphNode');
|
||||
const diskGraphNode = useTemplateRef('diskGraphNode');
|
||||
const cpuGraphItem = useTemplateRef('cpuGraphItem');
|
||||
const memoryGraphItem = useTemplateRef('memoryGraphItem');
|
||||
const diskGraphItem = useTemplateRef('diskGraphItem');
|
||||
const networkGraphItem = useTemplateRef('networkGraphItem');
|
||||
|
||||
const networkReadTotal = ref(0);
|
||||
const networkWriteTotal = ref(0);
|
||||
@@ -39,34 +38,9 @@ const blockWriteTotal = ref(0);
|
||||
|
||||
let systemMemory = {};
|
||||
let systemCpus = {};
|
||||
let cpuGraph = null;
|
||||
let memoryGraph = null;
|
||||
let diskGraph = null;
|
||||
let networkGraph = 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();
|
||||
}
|
||||
}
|
||||
|
||||
function transformGiB(data) {
|
||||
return {
|
||||
x: data[1]*1000,
|
||||
y: (data[0] / 1024 / 1024 / 1024).toFixed(2)
|
||||
};
|
||||
}
|
||||
|
||||
function transformMsecs(data) {
|
||||
return {
|
||||
x: data[1]*1000,
|
||||
y: data[0] || 0 // for relative values like cpu, if null make it 0
|
||||
};
|
||||
}
|
||||
|
||||
async function liveRefresh() {
|
||||
metricStream = await systemModel.getMetricStream(LIVE_REFRESH_INTERVAL_MSECS);
|
||||
@@ -74,340 +48,40 @@ async function liveRefresh() {
|
||||
metricStream.onmessage = (message) => {
|
||||
const data = JSON.parse(message.data);
|
||||
|
||||
///////////// CPU Graph
|
||||
cpuGraph.data.datasets[0].data.push(transformMsecs(data.cpu));
|
||||
pruneGraphData(cpuGraph.data.datasets[0], cpuGraph.options);
|
||||
cpuGraph.update('none');
|
||||
|
||||
///////////// Memory Graph
|
||||
memoryGraph.data.datasets[0].data.push(transformGiB(data.memory));
|
||||
pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
|
||||
|
||||
memoryGraph.data.datasets[1].data.push(transformGiB(data.memory));
|
||||
pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);
|
||||
|
||||
memoryGraph.update('none');
|
||||
|
||||
///////////// Disk Graph
|
||||
diskGraph.data.datasets[0].data.push(transformMsecs(data.blockReadRate));
|
||||
pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
|
||||
|
||||
diskGraph.data.datasets[1].data.push(transformMsecs(data.blockWriteRate));
|
||||
pruneGraphData(diskGraph.data.datasets[1], diskGraph.options);
|
||||
|
||||
diskGraph.update('none');
|
||||
cpuGraphItem.value.pushData(data.cpu);
|
||||
memoryGraphItem.value.pushData(data.memory, data.swap);
|
||||
diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
|
||||
networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);
|
||||
|
||||
blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
|
||||
blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
|
||||
|
||||
///////////// Network Graph
|
||||
networkGraph.data.datasets[0].data.push(transformMsecs(data.networkReadRate));
|
||||
pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
|
||||
|
||||
networkGraph.data.datasets[1].data.push(transformMsecs(data.networkWriteRate));
|
||||
pruneGraphData(networkGraph.data.datasets[1], networkGraph.options);
|
||||
|
||||
networkGraph.update('none');
|
||||
|
||||
networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
|
||||
networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
|
||||
};
|
||||
|
||||
// advances the time window by 500ms. this is independent of incoming data
|
||||
metricStream.intervalId = setInterval(function () {
|
||||
for (const graph of [ cpuGraph, memoryGraph, diskGraph, networkGraph]) {
|
||||
graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
|
||||
graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
|
||||
graph.update('none');
|
||||
}
|
||||
}, LIVE_REFRESH_INTERVAL_MSECS);
|
||||
}
|
||||
|
||||
async function getMetrics(hours) {
|
||||
const metrics = {
|
||||
cpu: [],
|
||||
memory: [],
|
||||
swap: [],
|
||||
blockReadRate: [],
|
||||
blockWriteRate: [],
|
||||
networkReadRate: [],
|
||||
networkWriteRate: [],
|
||||
|
||||
// these are just scalars and not timeseries
|
||||
blockReadTotal: 0,
|
||||
blockWriteTotal: 0,
|
||||
networkReadTotal: 0,
|
||||
networkWriteTotal: 0
|
||||
};
|
||||
|
||||
if (hours === 0) return metrics; // empty result. values will come from stream and not graphite
|
||||
|
||||
const [error, result] = await systemModel.getMetrics({ fromSecs: hours * 60 * 60, intervalSecs: 300 });
|
||||
if (error) return console.error(error);
|
||||
|
||||
metrics.cpu = result.cpu.map(transformMsecs); // cpu is already scaled to cpu*100
|
||||
metrics.memory = result.memory.map(transformGiB);
|
||||
metrics.swap = result.swap.map(transformGiB);
|
||||
metrics.blockReadRate = result.blockReadRate.map(transformMsecs);
|
||||
metrics.blockWriteRate = result.blockWriteRate.map(transformMsecs);
|
||||
metrics.networkReadRate = result.networkReadRate.map(transformMsecs);
|
||||
metrics.networkWriteRate = result.networkWriteRate.map(transformMsecs);
|
||||
|
||||
metrics.networkReadTotal = result.networkReadTotal;
|
||||
metrics.networkWriteTotal = result.networkWriteTotal;
|
||||
metrics.blockReadTotal = result.blockReadTotal;
|
||||
metrics.blockWriteTotal = result.blockWriteTota;
|
||||
|
||||
return metrics;
|
||||
}
|
||||
|
||||
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(period.value.tooltipFormat),
|
||||
label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y)
|
||||
}
|
||||
}
|
||||
},
|
||||
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.hours === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.value.hours*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.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
|
||||
},
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
y: yscale,
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
axis: 'x'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 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.hours);
|
||||
|
||||
///////////// CPU Graph
|
||||
const cpuGraphData = {
|
||||
datasets: [{
|
||||
label: 'CPU',
|
||||
data: metrics.cpu,
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
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.hours === 0 });
|
||||
|
||||
if (!cpuGraph) {
|
||||
cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
|
||||
} else {
|
||||
cpuGraph.data = cpuGraphData;
|
||||
cpuGraph.options = cpuGraphOptions;
|
||||
cpuGraph.update('none');
|
||||
}
|
||||
|
||||
///////////// Memory Graph
|
||||
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: metrics.memory,
|
||||
stack: 'memory+swap',
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
color: '#9ad0f5'
|
||||
},{
|
||||
label: 'Swap',
|
||||
data: metrics.swap,
|
||||
stack: 'memory+swap',
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
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.hours === 0 });
|
||||
|
||||
if (!memoryGraph) {
|
||||
memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });
|
||||
} else {
|
||||
memoryGraph.data = memoryGraphData;
|
||||
memoryGraph.options = memoryGraphOptions;
|
||||
memoryGraph.update('none');
|
||||
}
|
||||
|
||||
///////////// Disk Graph
|
||||
const diskGraphData = {
|
||||
datasets: [{
|
||||
label: 'Block Read',
|
||||
data: metrics.blockReadRate,
|
||||
stack: 'blockread',
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
color: '#9ad0f5'
|
||||
},{
|
||||
label: 'Block Write',
|
||||
data: metrics.blockWriteRate,
|
||||
stack: 'blockwrite',
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
color: '#ffb1c1'
|
||||
}]
|
||||
};
|
||||
|
||||
const diskYscale = {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
|
||||
ticks: {
|
||||
callback: (value) => `${prettyDecimalSize(value)}ps`,
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
beginAtZero: true,
|
||||
stacked: false,
|
||||
};
|
||||
|
||||
const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value.hours === 0 });
|
||||
|
||||
if (!diskGraph) {
|
||||
diskGraph = new Chart(diskGraphNode.value, { type: 'line', data: diskGraphData, options: diskGraphOptions });
|
||||
} else {
|
||||
diskGraph.data = diskGraphData;
|
||||
diskGraph.options = diskGraphOptions;
|
||||
diskGraph.update('none');
|
||||
}
|
||||
|
||||
///////////// Network Graph
|
||||
const networkGraphData = {
|
||||
datasets: [{
|
||||
label: 'RX',
|
||||
data: metrics.networkReadRate,
|
||||
stack: 'networkread',
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
color: '#9ad0f5'
|
||||
},{
|
||||
label: 'TX',
|
||||
data: metrics.networkWriteRate,
|
||||
stack: 'networkwrite',
|
||||
pointRadius: 0,
|
||||
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
color: '#ffb1c1'
|
||||
}]
|
||||
};
|
||||
|
||||
const networkYscale = {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
|
||||
ticks: {
|
||||
callback: (value) => `${prettyDecimalSize(value)}ps`,
|
||||
maxTicksLimit: 6 // max tick labels to show
|
||||
},
|
||||
beginAtZero: true,
|
||||
stacked: false,
|
||||
};
|
||||
|
||||
const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value.hours === 0 });
|
||||
|
||||
if (!networkGraph) {
|
||||
networkGraph = new Chart(networkGraphNode.value, { type: 'line', data: networkGraphData, options: networkGraphOptions });
|
||||
} else {
|
||||
networkGraph.data = networkGraphData;
|
||||
networkGraph.options = networkGraphOptions;
|
||||
networkGraph.update('none');
|
||||
}
|
||||
|
||||
///////////// Scalars
|
||||
networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
|
||||
networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
|
||||
|
||||
blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
|
||||
blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
|
||||
|
||||
if (metricStream) {
|
||||
clearInterval(metricStream.intervalId);
|
||||
metricStream.close();
|
||||
metricStream = null;
|
||||
}
|
||||
|
||||
if (period.value.hours === 0) liveRefresh();
|
||||
if (period.value.hours === 0) return await liveRefresh();
|
||||
|
||||
const [error, metrics] = await systemModel.getMetrics({ fromSecs: period.value.hours * 60 * 60, intervalSecs: 300 });
|
||||
if (error) return console.error(error);
|
||||
|
||||
cpuGraphItem.value.setData(metrics.cpu);
|
||||
memoryGraphItem.value.setData(metrics.memory, metrics.swap);
|
||||
diskGraphItem.value.setData(metrics.blockReadRate, metrics.blockWriteRate);
|
||||
networkGraphItem.value.setData(metrics.networkReadRate, metrics.networkWriteRate);
|
||||
|
||||
networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
|
||||
networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
|
||||
blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
|
||||
blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -422,14 +96,14 @@ onMounted(async () => {
|
||||
|
||||
systemCpus = result;
|
||||
|
||||
busy.value = false;
|
||||
await nextTick();
|
||||
|
||||
await onPeriodChange();
|
||||
});
|
||||
|
||||
onUnmounted(async () => {
|
||||
if (metricStream) {
|
||||
clearInterval(metricStream.intervalId);
|
||||
metricStream.close();
|
||||
}
|
||||
if (metricStream) metricStream.close();
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -440,31 +114,44 @@ onUnmounted(async () => {
|
||||
<SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/>
|
||||
</template>
|
||||
|
||||
<div class="graphs">
|
||||
<label>{{ $t('system.cpuUsage.title') }} <span class="pull-right text-small">{{ systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : '' }}</span></label>
|
||||
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
||||
<div class="graph">
|
||||
<canvas v-show="!busy" ref="cpuGraphNode"></canvas>
|
||||
</div>
|
||||
<div class="graphs" v-if="!busy">
|
||||
<GraphItem ref="cpuGraphItem"
|
||||
:title="$t('system.cpuUsage.title')"
|
||||
:subtext='systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : ""'
|
||||
:period="period"
|
||||
yscale="cpu"
|
||||
:dataset-labels="['CPU']"
|
||||
:cpu="systemCpus"
|
||||
>
|
||||
</GraphItem>
|
||||
|
||||
<label style="margin-top: 10px; display: block;">{{ $t('system.systemMemory.title') }} <span class="pull-right text-small">RAM: {{ prettyDecimalSize(systemMemory.memory) }} Swap: {{ prettyDecimalSize(systemMemory.swap) }}</span></label>
|
||||
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
||||
<div class="graph">
|
||||
<canvas v-show="!busy" ref="memoryGraphNode"></canvas>
|
||||
</div>
|
||||
<GraphItem ref="memoryGraphItem"
|
||||
:title="$t('system.systemMemory.title')"
|
||||
:subtext="`RAM: ${prettyDecimalSize(systemMemory.memory)} Swap: ${prettyDecimalSize(systemMemory.swap)}`"
|
||||
:period="period"
|
||||
yscale="memory"
|
||||
:dataset-labels="['Memory', 'Swap']"
|
||||
:memory="systemMemory"
|
||||
>
|
||||
</GraphItem>
|
||||
|
||||
<label style="margin-top: 10px; display: block;">Disk I/O <span class="pull-right text-small">{{ $t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal }) }}</span></label>
|
||||
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
||||
<div class="graph">
|
||||
<canvas v-show="!busy" ref="diskGraphNode"></canvas>
|
||||
</div>
|
||||
|
||||
<label style="margin-top: 10px; display: block;">Network I/O <span class="pull-right text-small">{{ $t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal }) }}</span></label>
|
||||
<div style="text-align: center" v-if="busy"><Spinner/></div>
|
||||
<div class="graph">
|
||||
<canvas v-show="!busy" ref="networkGraphNode"></canvas>
|
||||
</div>
|
||||
<GraphItem ref="diskGraphItem"
|
||||
title="Disk I/O"
|
||||
:subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
|
||||
:period="period"
|
||||
yscale="disk"
|
||||
:dataset-labels="['Read', 'Write']"
|
||||
>
|
||||
</GraphItem>
|
||||
|
||||
<GraphItem ref="networkGraphItem"
|
||||
title="Network I/O"
|
||||
:subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
|
||||
:period="period"
|
||||
yscale="network"
|
||||
:dataset-labels="['RX', 'TX']"
|
||||
>
|
||||
</GraphItem>
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user