diff --git a/dashboard/src/components/app/Graphs.vue b/dashboard/src/components/app/Graphs.vue index 8b4ecd47a..12eef40ef 100644 --- a/dashboard/src/components/app/Graphs.vue +++ b/dashboard/src/components/app/Graphs.vue @@ -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(); }); diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js index c7a579257..d55ec256c 100644 --- a/dashboard/src/models/AppsModel.js +++ b/dashboard/src/models/AppsModel.js @@ -407,6 +407,9 @@ function create() { if (result.status !== 200) return [result]; return [null, result.body]; }, + async getMetricStream(id, intervalMsecs) { + return new EventSource(`${API_ORIGIN}/api/v1/apps/${id}/metricstream?access_token=${accessToken}&intervalMsecs=${intervalMsecs}`); + }, async repair(id, data) { let result; try { diff --git a/src/metrics.js b/src/metrics.js index dadbb1cf6..dc483b2fc 100644 --- a/src/metrics.js +++ b/src/metrics.js @@ -282,7 +282,6 @@ async function getContainer(name, options) { blockWriteTotal: results[7][0] && results[7][0][0] ? results[7][0][0] : 0, networkReadTotal: results[8][0] && results[8][0][0] ? results[8][0][0] : 0, networkWriteTotal: results[9][0] && results[9][0][0] ? results[9][0][0] : 0, - cpuCount: os.cpus().length }; } @@ -368,7 +367,6 @@ async function getSystem(options) { ...systemStats, // { cpu, memory, swap, block{Read,Write}{Rate,Total}, network{Read,Write}{Rate,Total} apps: appStats, services: serviceStats, - cpuCount: os.cpus().length }; }