Add system basic graphs

dashboard/src/components/CpuUsage.vue

@@ -0,0 +1,68 @@
+<script setup>
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import Chart from 'chart.js/auto';
+import moment from 'moment';
+import Section from './Section.vue';
+import SystemModel from '../models/SystemModel.js';
+
+const systemModel = SystemModel.create();
+
+const graph = useTemplateRef('graph');
+const period = ref(6);
+
+async function refresh() {
+  const [error, result] = await systemModel.graphs(period.value * 60);
+  if (error) return console.error(error);
+
+  const labels = result.cpu.map(v => {
+    return moment(v[1]*1000).format('hh:mm:ss');
+  });
+
+  const data = result.cpu.map(v => {
+    // v[0] is in percent, need to scale up depending on cpu count 2 cpus => 200% max
+    return parseInt(v[0]);
+  });
+
+  new Chart(graph.value, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [{
+        label: 'CPU',
+        data: data,
+        radius: 0,
+        borderWidth: 1,
+        tension: 0.4,
+      }]
+    },
+    options: {
+      plugins: {
+        legend: false
+      },
+      scales: {
+        y: {
+          min: 0,
+          max: result.cpuCount*100
+        }
+      },
+      interaction: {
+        intersect: false,
+        mode: 'nearest',
+        axis: 'x'
+      }
+    }
+  });
+}
+
+onMounted(async () => {
+  await refresh();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('system.cpuUsage.title')">
+    <div style="position: relative; width: 100%; height: 200px;"><canvas ref="graph"></canvas></div>
+  </Section>
+</template>

dashboard/src/components/MemoryUsage.vue

@@ -0,0 +1,72 @@
+<script setup>
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import Chart from 'chart.js/auto';
+import moment from 'moment';
+import Section from './Section.vue';
+import SystemModel from '../models/SystemModel.js';
+
+const systemModel = SystemModel.create();
+
+let systemMemory = {};
+const graph = useTemplateRef('graph');
+const period = ref(6);
+
+async function refresh() {
+  const [error, result] = await systemModel.graphs(period.value * 60);
+  if (error) return console.error(error);
+
+  const labels = result.memory.map(v => {
+    return moment(v[1]*1000).format('hh:mm:ss');
+  });
+
+  const data = result.memory.map(v => {
+    return v[0];
+  });
+
+  new Chart(graph.value, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [{
+        label: 'Memory',
+        data: data,
+        radius: 0,
+        borderWidth: 1,
+        tension: 0.4,
+      }]
+    },
+    options: {
+      plugins: {
+        legend: false
+      },
+      scales: {
+        y: {
+          min: 0,
+          max: systemMemory.memory / 1024 / 1024
+        }
+      },
+      interaction: {
+        intersect: false,
+        mode: 'nearest',
+        axis: 'x'
+      }
+    }
+  });
+}
+
+onMounted(async () => {
+  const [error, result] = await systemModel.memory();
+  if (error) return console.error(error);
+  systemMemory = result;
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('system.systemMemory.title')">
+    <div style="position: relative; width: 100%; height: 200px;"><canvas ref="graph"></canvas></div>
+  </Section>
+</template>

dashboard/src/models/SystemModel.js

@@ -83,6 +83,17 @@ function create() {
       if (error || result.status !== 201) return [error || result];
       return [null, result.body.taskId];
     },
+    async graphs(fromMinutes) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/system/graphs`, { fromMinutes, access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
   };
 }
 

dashboard/src/views/SystemView.vue

@@ -6,6 +6,8 @@ import moment from 'moment';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import DiskUsage from '../components/DiskUsage.vue';
+import MemoryUsage from '../components/MemoryUsage.vue';
+import CpuUsage from '../components/CpuUsage.vue';
 import SystemModel from '../models/SystemModel.js';
 import DashboardModel from '../models/DashboardModel.js';
 
@@ -84,6 +86,20 @@ onMounted(async () => {
       </div>
     </Section>
 
+    <div class="graphs">
+      <MemoryUsage style="flex-grow: 1;" />
+      <CpuUsage style="flex-grow: 1;" />
+    </div>
+
     <DiskUsage />
   </div>
 </template>
+
+<style scoped>
+
+.graphs {
+  display: flex;
+  gap: 60px;
+}
+
+</style>