apps: make app graphs use GraphItem
This commit is contained in:
Girish Ramakrishnan
@@ -4,175 +4,156 @@ import { useI18n } from 'vue-i18n';
|
||||
const i18n = useI18n();
|
||||
const t = i18n.t;
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Chart from 'chart.js/auto';
|
||||
import { Button, SingleSelect } from 'pankow';
|
||||
import { ref, onMounted, useTemplateRef, nextTick, onUnmounted } from 'vue';
|
||||
import AppsModel from '../../models/AppsModel.js';
|
||||
import { prettyBinarySize, prettyDecimalSize } from 'pankow/utils';
|
||||
import SystemModel from '../../models/SystemModel.js';
|
||||
import { SingleSelect } from 'pankow';
|
||||
import GraphItem from '../GraphItem.vue';
|
||||
|
||||
const { app } = defineProps([ 'app' ]);
|
||||
|
||||
const appsModel = AppsModel.create();
|
||||
const systemModel = SystemModel.create();
|
||||
|
||||
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)) },
|
||||
{ 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 period = ref(6);
|
||||
const busy = ref(false);
|
||||
const blockReadTotal = ref(0);
|
||||
const blockWriteTotal = ref(0);
|
||||
const busy = ref(true);
|
||||
const period = ref(periods[0]);
|
||||
const cpuGraphItem = useTemplateRef('cpuGraphItem');
|
||||
const memoryGraphItem = useTemplateRef('memoryGraphItem');
|
||||
const diskGraphItem = useTemplateRef('diskGraphItem');
|
||||
const networkGraphItem = useTemplateRef('networkGraphItem');
|
||||
|
||||
const networkReadTotal = ref(0);
|
||||
const networkWriteTotal = ref(0);
|
||||
|
||||
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';
|
||||
const blockReadTotal = ref(0);
|
||||
const blockWriteTotal = ref(0);
|
||||
|
||||
return '';
|
||||
let systemMemory = {};
|
||||
let systemCpus = {};
|
||||
let metricStream = null;
|
||||
|
||||
const LIVE_REFRESH_INTERVAL_MSECS = 500;
|
||||
|
||||
async function liveRefresh() {
|
||||
metricStream = await appsModel.getMetricStream(app.id, LIVE_REFRESH_INTERVAL_MSECS);
|
||||
metricStream.onerror = (error) => console.log('event stream error:', error);
|
||||
metricStream.onmessage = (message) => {
|
||||
const data = JSON.parse(message.data);
|
||||
|
||||
cpuGraphItem.value.pushData(data.cpu);
|
||||
console.log(data.cpu);
|
||||
memoryGraphItem.value.pushData(data.memory);
|
||||
diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
|
||||
networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);
|
||||
|
||||
blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
|
||||
blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
|
||||
networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
|
||||
networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
|
||||
};
|
||||
}
|
||||
|
||||
const graphs = {};
|
||||
const currentMemoryLimit = app.memoryLimit || app.manifest.memoryLimit || 0;
|
||||
const maxGraphMemory = currentMemoryLimit < (512 * 1024 * 1024) ? (512 * 1024 * 1024) : currentMemoryLimit;
|
||||
const ioDivisor = 1000 * 1000;
|
||||
const borderColors = [ '#2196F3', '#FF6384' ];
|
||||
const backgroundColors = [ '#82C4F844', '#FF63844F' ];
|
||||
async function onPeriodChange() {
|
||||
if (metricStream) {
|
||||
metricStream.close();
|
||||
metricStream = null;
|
||||
}
|
||||
|
||||
function fillGraph(element, contents, chartPropertyName, divisor, max, format, formatDivisor, stepSize) {
|
||||
if (!contents || !contents[0]) return; // no data available yet
|
||||
if (period.value.hours === 0) return await liveRefresh();
|
||||
|
||||
// keep in sync with graphs.js
|
||||
const timePeriod = period.value * 60;
|
||||
const timeBucketSizeMinutes = timePeriod > (24 * 60) ? (6*60) : 5;
|
||||
const steps = Math.floor(timePeriod/timeBucketSizeMinutes);
|
||||
|
||||
const labels = (new Array(steps).fill(0)).map(function (v, index) {
|
||||
const dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSizeMinutes)) * 60 * 1000));
|
||||
|
||||
if (period.value > 24) {
|
||||
return dateTime.toLocaleDateString();
|
||||
} else {
|
||||
return dateTime.toLocaleTimeString();
|
||||
}
|
||||
});
|
||||
|
||||
const datasets = [];
|
||||
contents.forEach((content, index) => {
|
||||
// fill holes with previous value
|
||||
let cur = 0;
|
||||
content.data.forEach(function (d) {
|
||||
if (d[0] === null) d[0] = cur;
|
||||
else cur = d[0];
|
||||
});
|
||||
|
||||
const datapoints = Array(steps).map(function () { return '0'; });
|
||||
|
||||
// walk backwards and fill up the datapoints
|
||||
content.data.reverse().forEach((d, index) => {
|
||||
datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2);
|
||||
});
|
||||
|
||||
datasets.push({
|
||||
label: content.label,
|
||||
backgroundColor: backgroundColors[index],
|
||||
borderColor: borderColors[index],
|
||||
borderWidth: 1,
|
||||
pointRadius: 0,
|
||||
data: datapoints,
|
||||
tension: 0.4,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
});
|
||||
});
|
||||
|
||||
const graphData = {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
};
|
||||
|
||||
const options = {
|
||||
// responsive: true,
|
||||
// maintainAspectRatio: true,
|
||||
// aspectRatio: 2.5,
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { autoSkipPadding: 50, maxRotation: 0 }
|
||||
},
|
||||
y: {
|
||||
ticks: { maxTicksLimit: 6 },
|
||||
min: 0,
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (format) options.scales.y.ticks.callback = (value) => {
|
||||
if (!formatDivisor) return value + ' ' + format;
|
||||
return (value/formatDivisor).toLocaleString('en-US', { maximumFractionDigits: 6 }) + ' ' + format;
|
||||
};
|
||||
if (max) options.scales.y.max = max;
|
||||
if (stepSize) options.scales.y.ticks.stepSize = stepSize;
|
||||
|
||||
if (graphs[chartPropertyName]) graphs[chartPropertyName].destroy();
|
||||
if (element) graphs[chartPropertyName] = new Chart(element.getContext('2d'), { type: 'line', data: graphData, options: options });
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
busy.value = true;
|
||||
|
||||
const [error,result] = await appsModel.getMetrics(app.id, { fromSecs: period.value * 60 * 60, intervalSecs: 300 });
|
||||
const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: 300 });
|
||||
if (error) return console.error(error);
|
||||
|
||||
blockReadTotal.value = (result.blockReadTotal / ioDivisor / 1000).toFixed(2) + ' MB';
|
||||
blockWriteTotal.value = (result.blockWriteTotal / ioDivisor / 1000).toFixed(2) + ' MB';
|
||||
networkReadTotal.value = (result.networkReadTotal / ioDivisor / 1000).toFixed(2) + ' MB';
|
||||
networkWriteTotal.value = (result.networkWriteTotal / ioDivisor / 1000).toFixed(2) + ' MB';
|
||||
cpuGraphItem.value.setData(metrics.cpu);
|
||||
memoryGraphItem.value.setData(metrics.memory);
|
||||
diskGraphItem.value.setData(metrics.blockReadRate, metrics.blockWriteRate);
|
||||
networkGraphItem.value.setData(metrics.networkReadRate, metrics.networkWriteRate);
|
||||
|
||||
fillGraph(document.getElementById('graphsMemoryChart'), [{ data: result.memory, label: 'Memory' }], 'memoryChart', 1024 * 1024, maxGraphMemory / 1024 / 1024, 'GiB', 1024, (maxGraphMemory / 1024 / 1024) <= 1024 ? 256 : 512);
|
||||
fillGraph(document.getElementById('graphsCpuChart'), [{ data: result.cpu, label: 'CPU' }], 'cpuChart', 1, result.cpuCount * 100, '%');
|
||||
fillGraph(document.getElementById('graphsDiskChart'), [{ data: result.blockRead, label: 'read' }, { data: result.blockWrite, label: 'write' }], 'diskChart', ioDivisor, null, 'kB/s');
|
||||
fillGraph(document.getElementById('graphsNetworkChart'), [{ data: result.networkRead, label: 'inbound' }, { data: result.networkWrite, label: 'outbound' }], 'networkChart', ioDivisor, null, 'kB/s');
|
||||
|
||||
busy.value = false;
|
||||
networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
|
||||
networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
|
||||
blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
|
||||
blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refresh();
|
||||
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;
|
||||
|
||||
busy.value = false;
|
||||
await nextTick();
|
||||
|
||||
await onPeriodChange();
|
||||
});
|
||||
|
||||
onUnmounted(async () => {
|
||||
if (metricStream) metricStream.close();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex; gap: 6px; flex-direction: row-reverse;">
|
||||
<SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
|
||||
<Button tool plain secondary @click="refresh()" :loading="busy" :disabled="busy" icon="fa-solid fa-sync-alt"/>
|
||||
</div>
|
||||
<div class="graphs" v-if="!busy">
|
||||
<div style="text-align: right"><SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/></div>
|
||||
|
||||
<label style="margin-top: 10px;">Memory</label>
|
||||
<canvas id="graphsMemoryChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
|
||||
<label style="margin-top: 10px;">CPU</label>
|
||||
<canvas id="graphsCpuChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
|
||||
<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>
|
||||
<canvas id="graphsDiskChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
|
||||
<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>
|
||||
<canvas id="graphsNetworkChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
|
||||
</div>
|
||||
<GraphItem ref="cpuGraphItem"
|
||||
:title="$t('system.cpuUsage.title')"
|
||||
:subtext="`${app.cpuQuota}% of ${systemCpus.length} Core ${systemCpus[0].model}`"
|
||||
:period="period"
|
||||
yscale="cpu"
|
||||
:dataset-labels="['CPU']"
|
||||
:dataset-colors="['#9ad0f5']"
|
||||
:cpu="systemCpus"
|
||||
>
|
||||
</GraphItem>
|
||||
|
||||
<GraphItem ref="memoryGraphItem"
|
||||
title="Memory"
|
||||
:subtext="`RAM: ${prettyBinarySize(app.memoryLimit || 256*1024*1024)}`"
|
||||
:period="period"
|
||||
yscale="memory"
|
||||
:dataset-labels="['Memory']"
|
||||
:dataset-colors="['#9ad0f5']"
|
||||
:memory="systemMemory"
|
||||
>
|
||||
</GraphItem>
|
||||
|
||||
<GraphItem ref="diskGraphItem"
|
||||
title="Disk I/O"
|
||||
:subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
|
||||
:period="period"
|
||||
yscale="disk"
|
||||
:dataset-labels="['Read', 'Write']"
|
||||
:dataset-colors="['#9ad0f5', '#ffb1c1']"
|
||||
>
|
||||
</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']"
|
||||
:dataset-colors="['#9ad0f5', '#ffb1c1']"
|
||||
>
|
||||
</GraphItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user