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

<script setup>

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

import { ref, onMounted, onUnmounted, 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';

import 'chartjs-adapter-moment'; // https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters

const systemModel = SystemModel.create();

function trKeyFromPeriod(period) {
  if (period === 0) return 'app.graphs.period.live';
  if (period === 1) return 'app.graphs.period.1h';
  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: 1,     label: t(trKeyFromPeriod(1)) },
  { 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(6);
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);

  const now = Date.now();
  const cpuLabels = result.cpu.map(v => v[1]*1000); // convert to msecs
  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 = {
    maintainAspectRatio: false,
    plugins: {
      legend: false
    },
    scales: {
      x: {
        type: 'time',
        bounds: 'ticks', // otherwise data bound. https://www.chartjs.org/docs/latest/axes/cartesian/time.html#changing-the-scale-type-from-time-scale-to-logarithmic-linear-scale
        min: now - period.value*60*60*1000,
        max: now,
        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
        },
        grid: {
          drawOnChartArea: false,
        },
      },
      y: {
        type: 'linear',
        min: 0,
        max: result.cpuCount * 100,
        ticks: {
          callback: (value) => `${value}%`,
          maxTicksLimit: 6 // max tick labels to show
        },
        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 => v[1]*1000); // convert to msecs
  const memoryData = result.memory.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
  // assume that there is 1:1 timeline for swap and memory data
  const swapData = result.swap.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));

  const giB = 1024 * 1024 * 1024;
  const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
  const roundedSwap = Math.ceil(systemMemory.swap / giB) * giB;

  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 = {
    maintainAspectRatio: false,
    plugins: {
      legend: false,
    },
    scales: {
      x: {
        type: 'time',
        bounds: 'ticks', // otherwise data bound. https://www.chartjs.org/docs/latest/axes/cartesian/time.html#changing-the-scale-type-from-time-scale-to-logarithmic-linear-scale
        min: now - period.value*60*60*1000,
        max: now,
        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
        },
        grid: {
          drawOnChartArea: false,
        },
      },
      y: {
        type: 'linear',
        min: 0,
        max: (roundedMemory + roundedSwap)/ giB,
        ticks: {
          stepSize: 1,
          autoSkip: true, // skip tick labels as needed
          autoSkipPadding: 20, // padding between ticks
          callback: (value) => `${value} GiB`,
          maxTicksLimit: 8 // max tick labels to show
        },
        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();
});

onUnmounted(async () => {
  if (metricStream) metricStream.close();
});

</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">
      <label>{{ $t('system.cpuUsage.title') }}</label>
      <div style="text-align: center" v-if="busy"><Spinner/></div>
      <div class="graph">
        <canvas v-show="!busy" ref="cpuGraphNode"></canvas>
      </div>

      <label>{{ $t('system.systemMemory.title') }}</label>
      <div style="text-align: center" v-if="busy"><Spinner/></div>
      <div class="graph">
        <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
      </div>
    </div>
  </Section>
</template>

<style scoped>

.graphs label {
  margin: 16px 0;
}

.graph {
  position: relative;
  width: 100%;
  height: 160px;
}

</style>