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 { prettyDecimalSize } from 'pankow/utils';

const systemModel = SystemModel.create();

const periods = [
  { 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 busy = ref(false);
const period = ref(periods[0]);
const cpuGraphNode = useTemplateRef('cpuGraphNode');
const memoryGraphNode = useTemplateRef('memoryGraphNode');
const networkGraphNode = useTemplateRef('networkGraphNode');
const diskGraphNode = useTemplateRef('diskGraphNode');

const networkReadTotal = ref(0);
const networkWriteTotal = ref(0);

const blockReadTotal = ref(0);
const blockWriteTotal = ref(0);

let systemMemory = {};
let systemCpus = {};
let cpuGraph = null;
let memoryGraph = null;
let diskGraph = null;
let networkGraph = 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();
  }
}

function transformGiB(data) {
  return {
    x: data[1]*1000,
    y: (data[0] / 1024 / 1024 / 1024).toFixed(2)
  };
}

function transformMsecs(data) {
  return {
    x: data[1]*1000,
    y: data[0] || 0 // for relative values like cpu, if null make it 0
  };
}

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

    ///////////// CPU Graph
    cpuGraph.data.datasets[0].data.push(transformMsecs(data.cpu));
    pruneGraphData(cpuGraph.data.datasets[0], cpuGraph.options);
    cpuGraph.update('none');

    ///////////// Memory Graph
    memoryGraph.data.datasets[0].data.push(transformGiB(data.memory));
    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);

    memoryGraph.data.datasets[1].data.push(transformGiB(data.memory));
    pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);

    memoryGraph.update('none');

    ///////////// Disk Graph
    diskGraph.data.datasets[0].data.push(transformMsecs(data.blockReadRate));
    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);

    diskGraph.data.datasets[1].data.push(transformMsecs(data.blockWriteRate));
    pruneGraphData(diskGraph.data.datasets[1], diskGraph.options);

    diskGraph.update('none');

    blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
    blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);

    ///////////// Network Graph
    networkGraph.data.datasets[0].data.push(transformMsecs(data.networkReadRate));
    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);

    networkGraph.data.datasets[1].data.push(transformMsecs(data.networkWriteRate));
    pruneGraphData(networkGraph.data.datasets[1], networkGraph.options);

    networkGraph.update('none');

    networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
    networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
  };

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

async function getMetrics(hours) {
  const metrics = {
    cpu: [],
    memory: [],
    swap: [],
    blockReadRate: [],
    blockWriteRate: [],
    networkReadRate: [],
    networkWriteRate: [],

    // these are just scalars and not timeseries
    blockReadTotal: 0,
    blockWriteTotal: 0,
    networkReadTotal: 0,
    networkWriteTotal: 0
  };

  if (hours === 0) return metrics; // empty result. values will come from stream and not graphite

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

  metrics.cpu = result.cpu.map(transformMsecs); // cpu is already scaled to cpu*100
  metrics.memory = result.memory.map(transformGiB);
  metrics.swap = result.swap.map(transformGiB);
  metrics.blockReadRate = result.blockReadRate.map(transformMsecs);
  metrics.blockWriteRate = result.blockWriteRate.map(transformMsecs);
  metrics.networkReadRate = result.networkReadRate.map(transformMsecs);
  metrics.networkWriteRate = result.networkWriteRate.map(transformMsecs);

  metrics.networkReadTotal = result.networkReadTotal;
  metrics.networkWriteTotal = result.networkWriteTotal;
  metrics.blockReadTotal = result.blockReadTotal;
  metrics.blockWriteTotal = result.blockWriteTota;

  return metrics;
}

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(period.value.tooltipFormat),
          label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y)
        }
      }
    },
    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.hours === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.value.hours*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.hours === 0) return `${5-(value-this.min)/60000}min`;
            return moment(value).format(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'
    }
  };
}

// CPU and Memory graph have known min/max set and auto-scaling gets disabled
// Disk and Network graphs auto-scale the y values.
async function onPeriodChange() {
  const metrics = await getMetrics(period.value.hours);

  ///////////// CPU Graph
  const cpuGraphData = {
    datasets: [{
      label: 'CPU',
      data: metrics.cpu,
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      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.hours === 0 });

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

  ///////////// Memory Graph
  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: metrics.memory,
      stack: 'memory+swap',
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#9ad0f5'
    },{
      label: 'Swap',
      data: metrics.swap,
      stack: 'memory+swap',
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      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.hours === 0 });

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

  ///////////// Disk Graph
  const diskGraphData = {
    datasets: [{
      label: 'Block Read',
      data: metrics.blockReadRate,
      stack: 'blockread',
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#9ad0f5'
    },{
      label: 'Block Write',
      data: metrics.blockWriteRate,
      stack: 'blockwrite',
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#ffb1c1'
    }]
  };

  const diskYscale = {
    type: 'linear',
    min: 0,
    grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
    ticks: {
      callback: (value) => `${prettyDecimalSize(value)}ps`,
      maxTicksLimit: 6 // max tick labels to show
    },
    beginAtZero: true,
    stacked: false,
  };

  const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value.hours === 0 });

  if (!diskGraph) {
    diskGraph = new Chart(diskGraphNode.value, { type: 'line', data: diskGraphData, options: diskGraphOptions });
  } else {
    diskGraph.data = diskGraphData;
    diskGraph.options = diskGraphOptions;
    diskGraph.update('none');
  }

  ///////////// Network Graph
  const networkGraphData = {
    datasets: [{
      label: 'RX',
      data: metrics.networkReadRate,
      stack: 'networkread',
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#9ad0f5'
    },{
      label: 'TX',
      data: metrics.networkWriteRate,
      stack: 'networkwrite',
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      tension: 0.4,
      showLine: true,
      fill: true,
      color: '#ffb1c1'
    }]
  };

  const networkYscale = {
    type: 'linear',
    min: 0,
    grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
    ticks: {
      callback: (value) => `${prettyDecimalSize(value)}ps`,
      maxTicksLimit: 6 // max tick labels to show
    },
    beginAtZero: true,
    stacked: false,
  };

  const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value.hours === 0 });

  if (!networkGraph) {
    networkGraph = new Chart(networkGraphNode.value, { type: 'line', data: networkGraphData, options: networkGraphOptions });
  } else {
    networkGraph.data = networkGraphData;
    networkGraph.options = networkGraphOptions;
    networkGraph.update('none');
  }

  ///////////// Scalars
  networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
  networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);

  blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
  blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);

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

  if (period.value.hours === 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 onPeriodChange();
});

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

</script>

<template>
  <Section :title="$t('system.graphs.title')">
    <template #header-buttons>
      <SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/>
    </template>

    <div class="graphs">
      <label>{{ $t('system.cpuUsage.title') }} <span class="pull-right text-small">{{ systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : '' }}</span></label>
      <div style="text-align: center" v-if="busy"><Spinner/></div>
      <div class="graph">
        <canvas v-show="!busy" ref="cpuGraphNode"></canvas>
      </div>

      <label style="margin-top: 10px; display: block;">{{ $t('system.systemMemory.title') }} <span class="pull-right text-small">RAM: {{ prettyDecimalSize(systemMemory.memory) }} Swap: {{ prettyDecimalSize(systemMemory.swap) }}</span></label>
      <div style="text-align: center" v-if="busy"><Spinner/></div>
      <div class="graph">
        <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
      </div>

      <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>
      <div style="text-align: center" v-if="busy"><Spinner/></div>
      <div class="graph">
        <canvas v-show="!busy" ref="diskGraphNode"></canvas>
      </div>

      <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>
      <div style="text-align: center" v-if="busy"><Spinner/></div>
      <div class="graph">
        <canvas v-show="!busy" ref="networkGraphNode"></canvas>
      </div>

    </div>
  </Section>
</template>

<style scoped>

.graphs label {
  margin: 16px 0;
}

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

</style>