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, nextTick } from 'vue';
import { SingleSelect } from 'pankow';
import Section from './Section.vue';
import SystemModel from '../models/SystemModel.js';
import { prettyDecimalSize } from 'pankow/utils';
import GraphItem from './GraphItem.vue';

const systemModel = SystemModel.create();

const periods = [
  { hours: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm:ss 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(true);
const period = ref(periods[0]);
const cpuGraphItem = useTemplateRef('cpuGraphItem');
const memoryGraphItem = useTemplateRef('memoryGraphItem');
const diskGraphItem = useTemplateRef('diskGraphItem');
const networkGraphItem = useTemplateRef('networkGraphItem');

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

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

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

const LIVE_REFRESH_INTERVAL_MSECS = 500;

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

    cpuGraphItem.value.pushData(data.cpu);
    memoryGraphItem.value.pushData(data.memory, data.swap);
    diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
    networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);

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

async function onPeriodChange() {
  if (metricStream) {
    metricStream.close();
    metricStream = null;
  }

  if (period.value.hours === 0) return await liveRefresh();

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

  cpuGraphItem.value.setData(metrics.cpu);
  memoryGraphItem.value.setData(metrics.memory, metrics.swap);
  diskGraphItem.value.setData(metrics.blockReadRate, metrics.blockWriteRate);
  networkGraphItem.value.setData(metrics.networkReadRate, metrics.networkWriteRate);

  networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
  networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
  blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
  blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
}

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;

  busy.value = false;
  await nextTick();

  await onPeriodChange();
});

onUnmounted(async () => {
  if (metricStream) 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" v-if="!busy">
      <GraphItem ref="cpuGraphItem"
        :title="$t('system.cpuUsage.title')"
        :subtext='systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : ""'
        :period="period"
        yscale="cpu"
        :dataset-labels="['CPU']"
        :dataset-colors="['#9ad0f5']"
        :cpu="systemCpus"
        >
      </GraphItem>

      <GraphItem ref="memoryGraphItem"
        :title="$t('system.systemMemory.title')"
        :subtext="`RAM: ${prettyDecimalSize(systemMemory.memory)} Swap: ${prettyDecimalSize(systemMemory.swap)}`"
        :period="period"
        yscale="memory"
        :dataset-labels="['Memory', 'Swap']"
        :dataset-colors="['#9ad0f5', '#ffb1c1']"
        :memory="systemMemory"
        >
      </GraphItem>

      <GraphItem ref="diskGraphItem"
        title="Disk I/O"
        :subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
        :period="period"
        yscale="disk"
        :dataset-labels="['Read', 'Write']"
        :dataset-colors="['#9ad0f5', '#ffb1c1']"
        >
      </GraphItem>

      <GraphItem ref="networkGraphItem"
        title="Network I/O"
        :subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
        :period="period"
        yscale="network"
        :dataset-labels="['RX', 'TX']"
        :dataset-colors="['#9ad0f5', '#ffb1c1']"
        >
      </GraphItem>
    </div>
  </Section>
</template>