cloudron-box/dashboard/src/components/app/Graphs.vue

<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>