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

const systemModel = SystemModel.create();

const periods = [
  { id: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
  { id: 1,     label: t('app.graphs.period.1h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
  { id: 6,     label: t('app.graphs.period.6h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
  { id: 12,    label: t('app.graphs.period.12h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
  { id: 24,    label: t('app.graphs.period.24h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
  { id: 24*7,  label: t('app.graphs.period.7d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
  { id: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
];

const busy = ref(false);
const period = ref(0);
const cpuGraphNode = useTemplateRef('cpuGraphNode');
const memoryGraphNode = useTemplateRef('memoryGraphNode');

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

const LIVE_REFRESH_INTERVAL_MSECS = 500;
const LIVE_REFRESH_HISTORY_MSECS = 5*60*1000; // last 5 mins

function pruneGraphData(dataset, options) {
  while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our tme window
    dataset.data.shift();
  }
}

async function liveRefresh() {

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

    if (data.cpu[0]) { // since cpu% is relative, value can be null if no previous value
      cpuGraph.data.datasets[0].data.push({
        x: data.cpu[1] * 1000, // cpuGraph.options.scales.x.max can be used for window edge, if we don't trust server timestamps . but using server timestamps handles network lags better
        y: data.cpu[0]
      });

      pruneGraphData(cpuGraph.data.datasets[0], cpuGraph.options);
      cpuGraph.update('none');
    }

    memoryGraph.data.datasets[0].data.push({
      x: data.memory[1] * 1000,
      y: (data.memory[0] / 1024 / 1024 / 1024).toFixed(2)
    });
    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);

    memoryGraph.data.datasets[1].data.push({
      x: data.swap[1] * 1000,
      y: (data.swap[0] / 1024 / 1024 / 1024).toFixed(2)
    });
    pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);

    memoryGraph.update('none');
  };
  // advances the time window by 500ms. this is independent of incoming data
  metricStream.intervalId = setInterval(function () {
    cpuGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
    cpuGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
    cpuGraph.update('none');

    memoryGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
    memoryGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
    memoryGraph.update('none');
  }, LIVE_REFRESH_INTERVAL_MSECS);
}

async function getMetrics(hours) {
  if (hours === 0) return { cpuData: [], memoryData: [], swapData: [] };

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

  // time is converted to msecs . cpu is already scaled to cpu*100
  const cpuData = result.cpu.map(v => { return { x: v[1]*1000, y: v[0] };});

  const memoryData = result.memory.map(v => {
    return {
      x: v[1]*1000,
      y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
    };
  });

  const swapData = result.swap.map(v => {
    return {
      x: v[1]*1000,
      y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
    };
  });

  return { cpuData, memoryData, swapData };
}

function createGraphOptions({ yscale, realtime }) {
  const now = Date.now();

  return {
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(periods.find((p) => p.id === period.value).tooltipFormat)
        }
      }
    },
    scales: {
      x: {
        // we used to use 'time' type but it relies on the data to generate ticks. we may not have data for our time periods
        type: 'linear',
        min: now - (period.value === 0 ? LIVE_REFRESH_HISTORY_MSECS : 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
          count: 7, // tick labels to show. anything more than 7 will not work for "7 days"
          callback: function (value) {
            if (period.value === 0) return `${5-(value-this.min)/60000}min`;
            return moment(value).format(periods.find((p) => p.id === period.value).format);
          },
          stepSize: realtime ? 60*1000 : null // // for realtime graph, generate steps of 1min and appropriate tick text
        },
        grid: {
          drawOnChartArea: false,
        },
      },
      y: yscale,
    },
    interaction: {
      intersect: false,
      mode: 'nearest',
      axis: 'x'
    }
  };
}

async function refresh() {
  const { cpuData, memoryData, swapData } = await getMetrics(period.value);

  const cpuGraphData = {
    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 cpuYscale = {
    type: 'linear',
    min: 0,
    max: systemCpus.length * 100,
    ticks: {
      callback: (value) => `${value}%`,
      maxTicksLimit: 6 // max tick labels to show
    },
    beginAtZero: true,
  };
  const cpuGraphOptions = createGraphOptions({ yscale: cpuYscale, realtime: period.value === 0 });

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

  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 = {
    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 memoryYscale = {
    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,
  };

  const memoryGraphOptions = createGraphOptions({ yscale: memoryYscale, realtime: period.value === 0 });

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

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

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

onMounted(async () => {
  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;

  await refresh();
});

onUnmounted(async () => {
  if (metricStream) {
    clearInterval(metricStream.intervalId);
    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>