Filters for gl-disk-space and gl-network-interfaces widgets

docs/widgets.md

@@ -2598,7 +2598,8 @@ Recent memory usage chart
 
 ### Disk Space
 
-List connected disks, showing free / used space and other info (file system, mount point and space available)
+List connected disks, showing free / used space and other info (file system, mount point and space available).
+Use "Disks" to filter available disks and give them a friendly name.
 
 <p align="center"><img width="400" src="https://i.ibb.co/25y94bB/gl-disk-usage.png" /></p>
 
@@ -2608,6 +2609,10 @@ List connected disks, showing free / used space and other info (file system, mou
 - type: gl-disk-space
   options:
     hostname: http://192.168.130.2:61208
+    Disks:
+      - /dev/mapper/md1p1: HDD 1
+      - /dev/mapper/md2p1: HDD 2
+      - /dev/mapper/md3p1: HDD 3
 ```
 
 ---
@@ -2662,7 +2667,8 @@ Shows recent historical system load, calculated from the number of processes wai
 
 ### Network Interfaces
 
-Lists visible network interfaces, including real-time upload/ download stats
+Lists visible network interfaces, including real-time upload/ download stats.
+Use "Interfaces" to filter interfaces and give them am friendly name.
 
 <p align="center"><img width="400" src="https://i.ibb.co/FnhgHfG/gl-network-interfaces.png" /></p>
 
@@ -2672,6 +2678,9 @@ Lists visible network interfaces, including real-time upload/ download stats
 - type: gl-network-interfaces
   options:
     hostname: http://192.168.130.2:61208
+    Interfaces:
+      - bond0: LAN
+      - docker0: Docker
 ```
 
 ---

src/components/Widgets/GlDiskSpace.vue

@@ -1,73 +1,97 @@
 <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.size - 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 GlancesMixin from '@/mixins/GlancesMixin';
-import PercentageChart from '@/components/Charts/PercentageChart';
-import { getValueFromCss, convertBytes } from '@/utils/MiscHelpers';
-
-export default {
-  mixins: [WidgetMixin, GlancesMixin],
-  components: {
-    PercentageChart,
-  },
-  data() {
-    return {
-      disks: null,
-    };
-  },
-  computed: {
-    endpoint() {
-      return this.makeGlancesUrl('fs');
+    <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.size - 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 GlancesMixin from '@/mixins/GlancesMixin';
+  import PercentageChart from '@/components/Charts/PercentageChart';
+  import { getValueFromCss, convertBytes } from '@/utils/MiscHelpers';
+
+  export default {
+    mixins: [WidgetMixin, GlancesMixin],
+    components: {
+      PercentageChart,
     },
-  },
-  filters: {
-    formatSize(byteValue) {
-      return convertBytes(byteValue);
+    data() {
+      return {
+        disks: null,
+      };
     },
-  },
-  methods: {
-    processData(diskData) {
-      this.disks = diskData;
+    computed: {
+      endpoint() {
+        return this.makeGlancesUrl('fs');
+      },
     },
-  },
-  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);
+    filters: {
+      formatSize(byteValue) {
+        return convertBytes(byteValue);
+      },
+    },
+    methods: {
+      processData(diskData) {
+        // Falls eine Disk-Konfiguration in den Optionen vorhanden ist, filtern und benennen wir die Disks um.
+        if (this.options.Disks && Array.isArray(this.options.Disks)) {
+          let diskMapping = {};
+          this.options.Disks.forEach(item => {
+            const key = Object.keys(item)[0];
+            diskMapping[key] = item[key];
+          });
+          this.disks = diskData.filter(disk => {
+            if (diskMapping[disk.device_name] !== undefined) {
+              // Ersetze den Standardnamen durch den konfigurierten Anzeigenamen
+              disk.device_name = diskMapping[disk.device_name];
+              return true;
+            }
+            return false;
+          });
+        } else {
+          this.disks = diskData;
+        }
+      },
+    },
+    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>
+  </style>
+