WIP: Add storage managment section + disks managment page

app/package.json

@@ -24,7 +24,8 @@
     "vue-router": "^3.6.5",
     "vue-showdown": "^2.4.1",
     "vuelidate": "^0.7.7",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "filesize": "^10.1.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue2": "^2.2.0",

app/src/i18n/locales/en.json

@@ -614,6 +614,15 @@
     "start": "Start",
     "status": "Status",
     "stop": "Stop",
+    "storage": "Storage",
+    "storage_disks": {
+      "category_name": "Hard drives",
+      "table": {
+        "disks_name": "Name",
+        "disks_serial": "Serial",
+        "disks_size": "Size"
+      }
+    },
     "system": "System",
     "system_apps_nothing": "All apps are up to date!",
     "system_packages_nothing": "All system packages are up to date!",

app/src/router/routes.js

@@ -341,6 +341,28 @@ const routes = [
     },
   },
 
+  /* ────────────╮
+   │   STORAGE   │
+   ╰──────────── */
+  {
+    name: 'storage',
+    path: '/storage',
+    component: () => import('@/views/storage/StorageList.vue'),
+    meta: {
+      args: { trad: 'storage' },
+      breadcrumb: ['storage'],
+    },
+  },
+  {
+    name: 'storage-disks',
+    path: '/storage/disks',
+    component: () => import('@/views/storage/Disks.vue'),
+    meta: {
+      args: { trad: 'storage_disks.category_name' },
+      breadcrumb: ['storage', 'storage-disks'],
+    },
+  },
+
   /* ────────────╮
    │  DIAGNOSIS  │
    ╰──────────── */

app/src/views/HomeView.vue

@@ -24,6 +24,7 @@ export default {
         { routeName: 'user-list', icon: 'users', translation: 'users' },
         { routeName: 'domain-list', icon: 'globe', translation: 'domains' },
         { routeName: 'app-list', icon: 'cubes', translation: 'applications' },
+        { routeName: 'storage', icon: 'hdd-o', translation: 'storage' },
         { routeName: 'update', icon: 'refresh', translation: 'system_update' },
         { routeName: 'tool-list', icon: 'wrench', translation: 'tools' },
         {

app/src/views/storage/Disks.vue

@@ -0,0 +1,60 @@
+<template>
+  <ViewBase
+      :queries="queries"
+      @queries-response="onQueriesResponse"
+  >
+    <BTable v-if="disks" :fields="table_fields" :items="table_items">
+
+    </BTable>
+  </ViewBase>
+</template>
+
+<script>
+import {filesize} from "filesize";
+
+export default {
+  name: 'Disks',
+  data () {
+    return {
+      queries: [['GET', 'storage/disks/infos']],
+      disks: undefined,
+      table_fields: [
+        {
+          key: 'name',
+          label: this.$t('storage_disks.table.disks_name'),
+        },
+        {
+          key: 'serial',
+          label: this.$t('storage_disks.table.disks_serial'),
+        },
+        {
+          key: 'size',
+          label: this.$t('storage_disks.table.disks_size'),
+        },
+      ]
+    }
+  },
+  computed: {
+    table_items () {
+      if (this.disks === undefined) return []
+
+      return Object.entries(this.disks).map(([name, infos]) => {
+        return {
+          name,
+          serial: infos.serial,
+          size: this.humanSize(infos.size),
+        }
+      })
+    }
+  },
+  methods: {
+    onQueriesResponse (disks) {
+      this.disks = disks
+    },
+    humanSize (size) {
+      if (typeof size !== 'number') return size
+      return filesize(size);
+    }
+  }
+}
+</script>

app/src/views/storage/StorageList.vue

@@ -0,0 +1,32 @@
+<!-- FIXME make a component shared with HomeView.vue ? -->
+<template>
+  <BListGroup class="menu-list">
+    <BListGroupItem
+      v-for="item in menu"
+      :key="item.routeName"
+      :to="{ name: item.routeName }"
+    >
+      <YIcon :iname="item.icon" class="lg ml-1" />
+      <h4>{{ $t(item.translation) }}</h4>
+      <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+    </BListGroupItem>
+  </BListGroup>
+</template>
+
+<script>
+export default {
+  name: 'StorageList',
+
+  data() {
+    return {
+      menu: [
+        {
+          routeName: 'storage-disks',
+          icon: 'hdd-o',
+          translation: 'storage_disks.category_name',
+        },
+      ],
+    }
+  },
+}
+</script>