Add app configure graphs view
This commit is contained in:
Johannes Zellner
@@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
|
||||
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 AppsModel from '../../models/AppsModel.js';
|
||||
|
||||
const { app } = defineProps([ 'app' ]);
|
||||
|
||||
const appsModel = AppsModel.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)) },
|
||||
];
|
||||
|
||||
const period = ref(6);
|
||||
const busy = ref(false);
|
||||
const blockReadTotal = ref(0);
|
||||
const blockWriteTotal = ref(0);
|
||||
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';
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
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' ];
|
||||
|
||||
function fillGraph(element, contents, chartPropertyName, divisor, max, format, formatDivisor, stepSize) {
|
||||
if (!contents || !contents[0]) return; // no data available yet
|
||||
|
||||
// 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,
|
||||
radius: 0,
|
||||
data: datapoints,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
tension: 0.4
|
||||
});
|
||||
});
|
||||
|
||||
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();
|
||||
graphs[chartPropertyName] = new Chart(element.getContext('2d'), { type: 'line', data: graphData, options: options });
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
busy.value = true;
|
||||
|
||||
const [error,result] = await appsModel.graphs(app.id, period.value * 60);
|
||||
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';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refresh();
|
||||
});
|
||||
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
Reference in New Issue
Block a user