cloudron-box/dashboard/src/components/SystemMetrics.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, useTemplateRef } from 'vue';
import Chart from 'chart.js/auto';
import moment from 'moment-timezone';
import { SingleSelect, Spinner } from 'pankow';
import Section from './Section.vue';
import SystemModel from '../models/SystemModel.js';

const systemModel = SystemModel.create();

function trKeyFromPeriod(period) {
  if (period === 0) return 'app.graphs.period.live';
  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 periods = [
  { id: 0,     label: t(trKeyFromPeriod(0)) },
  { 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 busy = ref(false);
const period = ref(0);
const cpuGraphNode = useTemplateRef('cpuGraphNode');
const memoryGraphNode = useTemplateRef('memoryGraphNode');

let systemMemory = {};
let cpuGraph = null;
let memoryGraph = null;
let metricStream = null;

async function liveRefresh() {
  metricStream = await systemModel.getMetricStream();
  metricStream.onerror = (error) => console.log('event stream error:', error);
  metricStream.onmessage = (message) => {
    const data = JSON.parse(message.data);

    // value can be null if no previous value
    if (data.cpu[0]) {
      cpuGraph.data.labels.push(moment(data.cpu[1]*1000).format('hh:mm'));
      cpuGraph.data.datasets[0].data.push(data.cpu[0]);
      cpuGraph.update('none');
    }

    memoryGraph.data.labels.push(moment(data.memory[1]*1000).format('hh:mm'));
    memoryGraph.data.datasets[0].data.push((data.memory[0] / 1024 / 1024 / 1024).toFixed(2));
    memoryGraph.data.datasets[1].data.push((data.swap[0] / 1024 / 1024 / 1024).toFixed(2) + 2);

    memoryGraph.update('none');
  };
}

async function refresh() {
  busy.value = true;

  const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
  if (error) return console.error(error);

  // cpu
  const cpuLabels = result.cpu.map(v => {
    return moment(v[1]*1000).format('hh:mm');
  });

  const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100

  const cpuGraphData = {
    labels: cpuLabels,
    datasets: [{
      label: 'CPU',
      data: cpuData,
      pointRadius: 0,
      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      borderWidth: 1,
      tension: 0.4,
      showLine: true,
      fill: true
    }]
  };

  const cpuGraphOptions = {
    plugins: {
      legend: false
    },
    scales: {
      x: {
        ticks: {
          autoSkip: true, // skip tick labels as needed
          autoSkipPadding: 20, // padding between ticks
          maxRotation: 0, // don't rotate the labels
          maxTicksLimit: 15, // max tick labels to show
        }
      },
      y: {
        ticks: {
          callback: (value) => `${value}%`,
          maxTicksLimit: 6 // max tick labels to show
        },
        min: 0,
        max: result.cpuCount * 100,
        beginAtZero: true,
      }
    },
    interaction: {
      intersect: false,
      mode: 'nearest',
      axis: 'x'
    }
  };

  if (cpuGraph) cpuGraph.destroy();
  cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });

  const memoryLabels = result.memory.map(v => {
    return moment(v[1]*1000).format('hh:mm');
  });

  const memoryData = result.memory.map(v => {
    return (v[0] / 1024 / 1024 / 1024).toFixed(2);
  });

  const swapData = result.swap.map(v => { // assume that there is 1:1 timeline for swap and memory
    return (v[0] / 1024 / 1024 / 1024).toFixed(2);
  });

  const giB = 1024 * 1024 * 1024;
  const quarterGiB = 0.25 * giB;
  const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
  const roundedSwap = Math.round(systemMemory.swap / quarterGiB) * quarterGiB;

  const memoryGraphData = {
    labels: memoryLabels,
    datasets: [{
      label: 'RAM',
      data: memoryData,
      stack: 'memory+swap',
      pointRadius: 0,
      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      borderWidth: 1,
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#9ad0f5'
    },{
      label: 'Swap',
      data: swapData,
      stack: 'memory+swap',
      pointRadius: 0,
      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      borderWidth: 1,
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#ffb1c1'
    }]
  };

  const memoryGraphOptions = {
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        align: 'center'
      }
    },
    scales: {
      x: {
        ticks: {
          autoSkip: true, // skip tick labels as needed
          autoSkipPadding: 20, // padding between ticks
          maxRotation: 0, // don't rotate the labels
          maxTicksLimit: 15, // max tick labels to show
        }
      },
      y: {
        ticks: {
          callback: (value) => `${value} GiB`,
          color: (value /* ,index, ticks */) => {
            const tickValue = parseFloat(value['tick']['value']);
            console.log(value);
            return ((tickValue * 1024 * 1024 * 1024) > roundedMemory) ? '#ff7d98' : '#46a9ec';
          },
          maxTicksLimit: 6 // max tick labels to show
        },
        min: 0,
        max: ((roundedMemory + roundedSwap)/ giB).toFixed(2), // string
        beginAtZero: true,
        stacked: true,
      }
    },
    interaction: {
      intersect: false,
      mode: 'nearest',
      axis: 'x'
    }
  };

  if (memoryGraph) memoryGraph.destroy();
  memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });

  busy.value = false;

  if (metricStream) {
    metricStream.close();
    metricStream = null;
  }

  if (period.value === 0) liveRefresh();
}

onMounted(async () => {
  const [error, result] = await systemModel.memory();
  if (error) return console.error(error);

  systemMemory = result;

  await refresh();
});

</script>

<template>
  <Section :title="$t('system.graphs.title')">
    <template #header-buttons>
      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
    </template>
    <div class="graphs">
      <div style="position: relative; width: 400px; height: 200px;">
        <label>{{ $t('system.cpuUsage.title') }}</label>
        <div style="text-align: center" v-if="busy"><Spinner/></div>
        <canvas v-show="!busy" ref="cpuGraphNode"></canvas>
      </div>

      <div style="position: relative; width: 400px; height: 200px;">
        <label>{{ $t('system.systemMemory.title') }}</label>
        <div style="text-align: center" v-if="busy"><Spinner/></div>
        <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
      </div>
    </div>
  </Section>
</template>

<style scoped>

.graphs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

</style>