From 99f30fe09a70d9727ddca1eb42a87e4dcd348bd8 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 17 Feb 2025 16:38:30 +0100
Subject: [PATCH] Add diskusage to systems view again

---
 dashboard/src/components/DiskUsage.vue    | 255 ++++++++++++++++++++++
 dashboard/src/components/ExternalLdap.vue |   2 +-
 dashboard/src/models/SystemModel.js       |  22 ++
 dashboard/src/models/VolumesModel.js      |  12 +-
 dashboard/src/views/SystemView.vue        |   5 +-
 dashboard/src/views/VolumesView.vue       |   6 +-
 6 files changed, 290 insertions(+), 12 deletions(-)
 create mode 100644 dashboard/src/components/DiskUsage.vue

diff --git a/dashboard/src/components/DiskUsage.vue b/dashboard/src/components/DiskUsage.vue
new file mode 100644
index 000000000..834a615d0
--- /dev/null
+++ b/dashboard/src/components/DiskUsage.vue
@@ -0,0 +1,255 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { Button } from 'pankow';
+import { prettyDecimalSize, prettyDate } from 'pankow/utils';
+import Section from './Section.vue';
+import SystemModel from '../models/SystemModel.js';
+import AppsModel from '../models/AppsModel.js';
+import VolumesModel from '../models/VolumesModel.js';
+import TasksModel from '../models/TasksModel.js';
+
+const systemModel = SystemModel.create();
+const appsModel = AppsModel.create();
+const volumesModel = VolumesModel.create();
+const tasksModel = TasksModel.create();
+
+const busy = ref(false);
+const lastUpdated = ref(0);
+const disks = ref([]);
+
+async function updateTaskStatus(id) {
+  const [error, result] = await tasksModel.get(id);
+  if (error) return setTimeout(updateTaskStatus.bind(null, id), 5000);
+
+  if (!result.active) return busy.value = false;
+  busy.value = true;
+
+  setTimeout(updateTaskStatus.bind(null, id), 2000);
+}
+
+async function onRescan() {
+  busy.value = true;
+
+  const [error, result] = await systemModel.rescanDiskUsage();
+  if (error) return console.error(error);
+
+  updateTaskStatus(result);
+}
+
+// https://stackoverflow.com/questions/1484506/random-color-generator
+function rainbow(numOfSteps, step) {
+  // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
+  // Adam Cole, 2011-Sept-14
+  // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
+  var r, g, b;
+  var h = step / numOfSteps;
+  var i = ~~(h * 6);
+  var f = h * 6 - i;
+  var q = 1 - f;
+  switch(i % 6){
+  case 0: r = 1; g = f; b = 0; break;
+  case 1: r = q; g = 1; b = 0; break;
+  case 2: r = 0; g = 1; b = f; break;
+  case 3: r = 0; g = q; b = 1; break;
+  case 4: r = f; g = 0; b = 1; break;
+  case 5: r = 1; g = 0; b = q; break;
+  }
+  var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
+  return (c);
+}
+
+// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
+function shuffle(a) {
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+let colorIndex = 0;
+let colors = [];
+function resetColors(n) {
+  colorIndex = 0;
+  colors = [];
+  for (let i = 0; i < n; i++) colors.push(rainbow(n, i));
+  shuffle(colors);
+}
+
+function getNextColor() {
+  return colors[colorIndex++];
+}
+
+async function refresh() {
+  let [error, result] = await appsModel.list();
+  if (error) return console.error(error);
+
+  const appsById = {};
+  result.forEach(a => { appsById[a.id] = a; });
+
+  [error, result] = await volumesModel.list();
+  if (error) return console.error(error);
+
+  const volumesById = {};
+  result.forEach(v => { volumesById[v.id] = v; });
+
+  [error, result] = await systemModel.diskUsage();
+  if (error) return console.error(error);
+
+  lastUpdated.value = result.ts;
+
+  // [ { filesystem, type, size, used, available, capacity, mountpoint }]
+  disks.value = Object.keys(result.filesystems).map(k => result.filesystems[k]); // convert object to array...
+
+  disks.value.forEach(disk => {
+    let usageOther = disk.used;
+
+    resetColors(disk.contents.length);
+
+    // if this disk is a volume amend it and remove it from contents
+    disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = volumesById[content.id]; });
+    disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });
+
+    // only show old backups if the size is significant
+    disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });
+
+    disk.contents.forEach(function (content) {
+      content.color = getNextColor();
+
+      if (content.type === 'app') {
+        content.app = appsById[content.id];
+        if (!content.app) content.uninstalled = true;
+        else content.label = content.app.label || content.app.fqdn;
+      } else if (content.type === 'volume') {
+        content.volume = volumesById[content.id];
+        content.label = content.volume ? content.volume.name : 'Removed volume';
+      }
+
+      // ensure a label for ui
+      content.label = content.label || content.id;
+
+      usageOther -= content.usage;
+    });
+
+    disk.contents.sort((x, y) => { return y.usage - x.usage; }); // sort by usage
+
+    if (disks.value[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
+      disk.contents.push({
+        type: 'standard',
+        label: 'Everything else (Ubuntu, etc)',
+        id: 'other',
+        color: '#555555',
+        usage: usageOther
+      });
+    } else {
+      disk.contents.push({
+        type: 'standard',
+        label: 'Used',
+        id: 'other',
+        color: '#555555',
+        usage: usageOther
+      });
+    }
+  });
+}
+
+onMounted(async () => {
+  await refresh();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('system.diskUsage.title')">
+    <template #header-buttons>
+      <span class="small" style="margin: auto; margin-right: 10px" v-show="!busy && lastUpdated">Last updated: {{ prettyDate(lastUpdated) }}</span>
+      <Button tool @click="onRescan()" :disabled="busy" :loading="busy" icon="fa-solid fa-sync-alt" />
+    </template>
+
+    <div v-for="(disk, index) in disks" :key="disk.filesystem">
+      <hr style="margin: 5px 0px;" v-show="index !== 0"/>
+      <div>
+        <div style="display: flex; align-items: baseline; justify-content: space-between;">
+          <h3 class="no-wrap" style="font-size: 20px;" v-html="$t('system.diskUsage.mountedAt', { filesystem: disk.filesystem, mountpoint: disk.mountpoint })"></h3>
+          <div class="text-muted" style="white-space:nowrap;" v-if="disk.available && disk.size" v-html="$t('system.diskUsage.usedInfo', { used: prettyDecimalSize(disk.used), size: prettyDecimalSize(disk.size) })"></div>
+          <div class="text-muted" style="white-space:nowrap;" v-else>{{ $t('system.diskUsage.notAvailableYet') }}</div>
+        </div>
+        <div class="usage-bar">
+          <div class="usage-bar-section" v-for="content in disk.contents" :key="content" :style="{ width: `${content.usage / disk.size * 100}%`, backgroundColor: content.color }" v-tooltip="`${content.label} ${prettyDecimalSize(content.usage)}`"></div>
+          <div class="usage-bar-section-remaining">{{ prettyDecimalSize(disk.available) }}</div>
+        </div>
+        <div class="text-right text-muted" style="margin-top: 10px;" v-show="disk.speed !== -1">{{ $t('system.diskUsage.diskSpeed', { speed: disk.speed }) }}</div>
+        <p v-if="disk.volume" v-html="$t('system.diskUsage.volumeContent', { name: disk.volume.name })"></p>
+        <p v-else>{{ $t('system.diskUsage.diskContent') }}:</p>
+        <div v-for="content in disk.contents" :key="content.id" class="disk-content">
+          <span class="color-indicator" :style="{ backgroundColor: content.color }">&nbsp;</span>
+          <span v-show="content.type === 'cloudron-backup-default'">{{ content.path }} (Old Backups)</span>
+          <span v-show="content.type === 'standard'">{{ content.label }}</span>
+          <span v-show="content.type === 'swap'">{{ content.label }}</span>
+          <span v-show="content.type === 'app'">
+            <a v-if="content.app" :href="`/#/app/${content.app.id}/storage`">{{ content.label }}</a>
+            <span v-else>{{ $t('system.diskUsage.uninstalledApp') }}</span>
+          </span>
+          <span v-show="content.type === 'volume'"><a href="/#/volumes">{{ content.label }}</a></span>
+          <small class="disk-content-size">{{ prettyDecimalSize(content.usage) }}</small>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>
+
+<style scoped>
+
+.usage-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 20px;
+  background-color: #d8dee4;
+  color: #7f7f7f;
+}
+
+@media (prefers-color-scheme: dark) {
+  .usage-bar {
+    background-color: white;
+  }
+}
+
+.usage-bar-section {
+  display: inline-block;
+  height: 100%;
+}
+
+.usage-bar-section-remaining {
+  display: inline-block;
+  height: 100%;
+  margin: auto;
+}
+
+.color-indicator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  line-height: 16px;
+  margin-right: 4px;
+}
+
+.disk-content {
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.disk-content-size {
+  color: #777;
+  margin-left: 4px;
+}
+
+.disks-last-updated {
+  font-size: 12px;
+  font-weight: bold;
+  align-self: center;
+}
+
+</style>
diff --git a/dashboard/src/components/ExternalLdap.vue b/dashboard/src/components/ExternalLdap.vue
index 9b42cfee4..c17d24e73 100644
--- a/dashboard/src/components/ExternalLdap.vue
+++ b/dashboard/src/components/ExternalLdap.vue
@@ -186,7 +186,7 @@ async function updateTaskStatus(id) {
   syncPercent.value = result.percent;
   syncMessage.value = result.message;
 
-  setTimeout(updateTaskStatus.bind(null, id), 500);
+  setTimeout(updateTaskStatus.bind(null, id), 2000);
 }
 
 async function refreshTasks() {
diff --git a/dashboard/src/models/SystemModel.js b/dashboard/src/models/SystemModel.js
index a1800cd5a..9d2987b03 100644
--- a/dashboard/src/models/SystemModel.js
+++ b/dashboard/src/models/SystemModel.js
@@ -61,6 +61,28 @@ function create() {
       if (error || result.status !== 202) return [error || result];
       return [null];
     },
+    async diskUsage() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/system/disk_usage`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.usage];
+    },
+    async rescanDiskUsage() {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/system/disk_usage`, {}, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 201) return [error || result];
+      return [null, result.body.taskId];
+    },
   };
 }
 
diff --git a/dashboard/src/models/VolumesModel.js b/dashboard/src/models/VolumesModel.js
index 78fa1b00d..7ef3b2dbc 100644
--- a/dashboard/src/models/VolumesModel.js
+++ b/dashboard/src/models/VolumesModel.js
@@ -6,21 +6,17 @@ function create() {
   const origin = import.meta.env.VITE_API_ORIGIN || window.location.origin;
 
   return {
-    name: 'VolumesModel',
     async list() {
-      let error, result;
+      let result;
       try {
         result = await fetcher.get(`${origin}/api/v1/volumes`, { access_token: accessToken });
       } catch (e) {
-        error = e;
+          return [e];
       }
 
-      if (error || result.status !== 200) {
-        console.error('Failed to list volumes.', error, result);
-        return [];
-      }
+      if (result.status !== 200) return [result];
 
-      return result.body.volumes;
+      return [null, result.body.volumes];
     },
     async getStatus(id) {
       let error, result;
diff --git a/dashboard/src/views/SystemView.vue b/dashboard/src/views/SystemView.vue
index 28219869b..e8dd84ffb 100644
--- a/dashboard/src/views/SystemView.vue
+++ b/dashboard/src/views/SystemView.vue
@@ -5,6 +5,7 @@ import { Button } from 'pankow';
 import moment from 'moment';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
+import DiskUsage from '../components/DiskUsage.vue';
 import SystemModel from '../models/SystemModel.js';
 import DashboardModel from '../models/DashboardModel.js';
 
@@ -41,7 +42,6 @@ onMounted(async () => {
   [error, result] = await dashboardModel.getConfig();
   if (error) return console.error(error);
   config.value = result;
-
 });
 
 </script>
@@ -82,7 +82,8 @@ onMounted(async () => {
         <div class="info-label">{{ $t('system.info.activationTime') }}</div>
         <div class="info-value">{{ activeSince }}</div>
       </div>
-
     </Section>
+
+    <DiskUsage />
   </div>
 </template>
diff --git a/dashboard/src/views/VolumesView.vue b/dashboard/src/views/VolumesView.vue
index 22132a82e..dd393919e 100644
--- a/dashboard/src/views/VolumesView.vue
+++ b/dashboard/src/views/VolumesView.vue
@@ -83,7 +83,11 @@ const volumeDialogValid = computed(() => {
 
 async function refresh() {
   busy.value = true;
-  volumes.value = await volumesModel.list();
+
+  const [error, result] = await volumesModel.list();
+  if (error) return console.error(error);
+  volumes.value = result;
+
   busy.value = false;
 
   for (const v of volumes.value) {