✨ Adds a disk IO widget

docs/widgets.md

@@ -48,6 +48,8 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [CPU Usage History](#cpu-usage-history)
   - [Memory Usage Current](#current-memory-usage)
   - [Memory Usage History](#memory-usage-history)
+  - [Disk Space](#disk-space)
+  - [Disk IO](#disk-io)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1298,6 +1300,22 @@ List connected disks, showing free / used space and other info (file system, mou
 
 ---
 
+### Disk IO
+
+Shows real-time read and write speeds and operations per sec for each disk 
+
+<p align="center"><img width="400" src="https://i.ibb.co/JdgjCjG/gl-disk-io.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-disk-io
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget

src/components/Widgets/GlDiskIo.vue

@@ -0,0 +1,127 @@
+<template>
+<div class="glances-disk-io-wrapper" v-if="disks">
+  <div class="disk-row" v-for="disk in disks" :key="disk.name">
+    <p class="disk-name">{{ disk.name }}</p>
+    <!-- Read Data -->
+    <div class="io-data read" v-tooltip="disk.readC ? `Count: ${disk.readC}` : ''">
+      <span class="lbl">Read:</span>
+      <span class="val">{{ disk.readB | formatSize }}</span>
+      <span :class="`direction ${disk.readD}`">{{ disk.readD | getArrow }}</span>
+    </div>
+    <!-- Write Data -->
+    <div class="io-data write" v-tooltip="disk.writeC ? `Count: ${disk.writeC}` : ''">
+      <span class="lbl">Write:</span>
+      <span class="val">{{ disk.writeB | formatSize }}</span>
+      <span :class="`direction ${disk.writeD}`">{{ disk.writeD | getArrow }}</span>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { convertBytes } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  data() {
+    return {
+      disks: null,
+      previous: 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/diskio`;
+    },
+  },
+  filters: {
+    formatSize(byteValue) {
+      if (!byteValue) return 'Idle';
+      return `${convertBytes(byteValue)}/s`;
+    },
+    getArrow(direction) {
+      if (direction === 'up') return '↑';
+      if (direction === 'down') return '↓';
+      return '';
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(diskData) {
+      this.previous = this.disks;
+      const disks = [];
+      diskData.forEach((disk, index) => {
+        disks.push({
+          name: disk.disk_name,
+          readB: disk.read_bytes,
+          readC: disk.read_count,
+          readD: this.comparePrevious('read', disk.read_bytes, index),
+          writeB: disk.write_bytes,
+          writeC: disk.write_count,
+          writeD: this.comparePrevious('write', disk.write_bytes, index),
+        });
+      });
+      this.disks = disks;
+    },
+    /* Compares previous values with current data */
+    comparePrevious(direction, newVal, diskIndex) {
+      if (!this.previous || !this.previous[diskIndex]) return 'none';
+      const disk = this.previous[diskIndex];
+      const previousVal = direction === 'read' ? disk.readB : disk.writeB;
+      if (newVal === 0) return 'reset';
+      if (newVal === previousVal) return 'same';
+      if (newVal > previousVal) return 'up';
+      if (newVal < previousVal) return 'down';
+      return 'none';
+    },
+  },
+  created() {
+    this.overrideUpdateInterval = 1;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-disk-io-wrapper {
+  color: var(--widget-text-color);
+  .disk-row {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0;
+    p.disk-name {
+      margin: 0;
+      font-weight: bold;
+      color: var(--widget-text-color);
+    }
+    .io-data {
+      span.lbl {
+        margin-right: 0.5rem;
+      }
+      span.val {
+        font-family: var(--font-monospace);
+      }
+      span.second-val {
+        margin: 0 0.5rem;
+        opacity: var(--dimming-factor);
+      }
+      span.direction {
+        padding: 0 0.2rem;
+        font-weight: bold;
+        font-size: 1.2rem;
+        &.up { color: var(--success); }
+        &.down { color: var(--warning); }
+      }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

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