✨ Adds file system widget

docs/widgets.md

@@ -1246,7 +1246,7 @@ Recent CPU usage history, across all cores, and displayed by user and system
 
 Real-time memory usage gauge, with more info visible on click
 
-<p align="center"><img width="500" src="https://i.ibb.co/rynp52J/gl-mem-usage.png" /></p>
+<p align="center"><img width="400" src="https://i.ibb.co/rynp52J/gl-mem-usage.png" /></p>
 
 ##### Example 
 
@@ -1282,6 +1282,22 @@ Recent memory usage chart
 
 ---
 
+### Disk Space
+
+List connected disks, showing free / used space and other info (file system, mount point and space available)
+
+<p align="center"><img width="400" src="https://i.ibb.co/25y94bB/gl-disk-usage.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-disk-space
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget

src/assets/locales/en.json

@@ -269,6 +269,12 @@
       "mem-breakdown-title": "Memory Breakdown",
       "load-chart-title": "System Load"
     },
+    "glances": {
+      "disk-space-free": "Free",
+      "disk-space-used": "Used",
+      "disk-mount-point": "Mount Point",
+      "disk-file-system": "File System"
+    },
     "system-info": {
       "uptime": "Uptime"
     },
@@ -281,4 +287,4 @@
       "good-service-rest": "Good Service on all other Lines"
     }
   }
-}
+}

src/components/Widgets/GlDiskSpace.vue

@@ -0,0 +1,82 @@
+<template>
+<div class="glances-disk-space-wrapper" v-if="disks">
+  <div v-for="(disk, key) in disks" :key="key" class="disk-row">
+    <PercentageChart :title="disk.device_name"
+      :values="[
+      { label: $t('widgets.glances.disk-space-used'), size: disk.percent, color: '#f80363' },
+      { label: $t('widgets.glances.disk-space-free'), size: 100 - disk.percent, color: '#20e253' },
+      ]" />
+    <p class="info">
+      <b>{{ $t('widgets.glances.disk-space-free') }}</b>:
+      {{ disk.used | formatSize }} out of {{ disk.size | formatSize }}
+    </p>
+    <p class="info"><b>{{ $t('widgets.glances.disk-mount-point') }}</b>: {{ disk.mnt_point }}</p>
+    <p class="info"><b>{{ $t('widgets.glances.disk-file-system') }}</b>: {{ disk.fs_type }}</p>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import PercentageChart from '@/components/Charts/PercentageChart';
+import { getValueFromCss, convertBytes } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {
+    PercentageChart,
+  },
+  data() {
+    return {
+      disks: null,
+    };
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/fs`;
+    },
+  },
+  filters: {
+    formatSize(byteValue) {
+      return convertBytes(byteValue);
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(diskData) {
+      this.disks = diskData;
+    },
+  },
+  created() {
+    this.overrideUpdateInterval = 2;
+  },
+  mounted() {
+    this.background = getValueFromCss('widget-accent-color');
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-disk-space-wrapper {
+  color: var(--widget-text-color);
+  .disk-row {
+    padding: 0.25rem 0 0.5rem 0;
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+    p.info {
+      font-size: 0.8rem;
+      margin: 0.25rem 0;
+      color: var(--widget-text-color);
+      opacity: var(--dimming-factor);
+      font-family: var(--font-monospace);
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -130,6 +130,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlDiskSpace
+        v-else-if="widgetType === 'gl-disk-space'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <GlMemGauge
         v-else-if="widgetType === 'gl-current-mem'"
         :options="widgetOptions"
@@ -337,6 +344,7 @@ export default {
     GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
     GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
     GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),
+    GlDiskSpace: () => import('@/components/Widgets/GlDiskSpace.vue'),
     GlMemGauge: () => import('@/components/Widgets/GlMemGauge.vue'),
     GlMemHistory: () => import('@/components/Widgets/GlMemHistory.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),