From 9c3704b3a648f0314e67d8b7f76b52a39ee20fc3 Mon Sep 17 00:00:00 2001
From: Kryce49 <108368858+Kryce49@users.noreply.github.com>
Date: Sat, 22 Mar 2025 11:35:27 +0100
Subject: [PATCH 1/3] Update GlDiskSpace.vue to use Filters

Added possibility to use filters and a friendly name in the config to show only relevant disks.
Example config:
widgets:
      - type: gl-disk-space
        options:
          hostname: http://192.168.100.40:61208
          Disks:
            - /dev/mapper/md1p1: HDD 1
            - /dev/mapper/md2p1: HDD 2
            - /dev/mapper/md3p1: HDD 3
---
 src/components/Widgets/GlDiskSpace.vue | 158 ++++++++++++++-----------
 1 file changed, 91 insertions(+), 67 deletions(-)

diff --git a/src/components/Widgets/GlDiskSpace.vue b/src/components/Widgets/GlDiskSpace.vue
index 32d04aa1ba..17545ce0c7 100644
--- a/src/components/Widgets/GlDiskSpace.vue
+++ b/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>
+  

From adf7c806f212c10af88abeb2d49ef30ed043fe2a Mon Sep 17 00:00:00 2001
From: Kryce49 <108368858+Kryce49@users.noreply.github.com>
Date: Sat, 22 Mar 2025 11:37:00 +0100
Subject: [PATCH 2/3] Update GlNetworkInterfaces.vue to use filters

Added possibility to use filters and a friendly name in the config to show only relevant interfaces.
Example config:
widgets:
      - type: gl-network-interfaces
        options:
          hostname: http://192.168.100.40:61208
          Interfaces:
            - bond0: LAN
            - docker0: Docker
---
 .../Widgets/GlNetworkInterfaces.vue           | 305 ++++++++++--------
 1 file changed, 167 insertions(+), 138 deletions(-)

diff --git a/src/components/Widgets/GlNetworkInterfaces.vue b/src/components/Widgets/GlNetworkInterfaces.vue
index 3c9900954a..2338627dda 100644
--- a/src/components/Widgets/GlNetworkInterfaces.vue
+++ b/src/components/Widgets/GlNetworkInterfaces.vue
@@ -1,151 +1,180 @@
 <template>
-<div class="glances-network-interfaces-wrapper" v-if="networks">
-  <div class="interface-row" v-for="network in networks" :key="network.name">
-    <div class="network-info">
-      <p class="network-name">{{ network.name }}</p>
-      <p class="network-speed">{{ network.speed | formatSpeed }}</p>
-      <p :class="`network-online ${network.online}`">
-      {{ network.online }}
-      </p>
+    <div class="glances-network-interfaces-wrapper" v-if="networks">
+      <div class="interface-row" v-for="network in networks" :key="network.name">
+        <div class="network-info">
+          <p class="network-name">{{ network.name }}</p>
+          <p class="network-speed">{{ network.speed | formatSpeed }}</p>
+          <p :class="`network-online ${network.online}`">
+            {{ network.online }}
+          </p>
+        </div>
+        <div class="current" v-if="network.online === 'up'">
+          <span class="upload">
+            ↑ <span class="val">{{ network.currentUpload | formatDataSize }}</span>
+          </span>
+          <span class="separator">|</span>
+          <span class="download">
+            ↓ <span class="val">{{ network.currentDownload | formatDataSize }}</span>
+          </span>
+        </div>
+        <div class="total">
+          <b class="lbl">Total</b> Up
+          <span class="val">{{ network.totalUpload | formatDataSize }}</span>
+          <span class="separator">|</span>
+          Down
+          <span class="val">{{ network.totalDownload | formatDataSize }}</span>
+        </div>
+      </div>
     </div>
-    <div class="current" v-if="network.online === 'up'">
-      <span class="upload">
-        ↑ <span class="val">{{ network.currentUpload | formatDataSize }}</span>
-      </span>
-      <span class="separator">|</span>
-      <span class="download">
-        ↓ <span class="val">{{ network.currentDownload | formatDataSize }}</span>
-      </span>
-    </div>
-    <div class="total">
-      <b class="lbl">Total</b> Up
-      <span class="val">{{ network.totalUpload | formatDataSize }}</span>
-      <span class="separator">|</span>
-      Down
-      <span class="val">{{ network.totalDownload | formatDataSize }}</span>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-import WidgetMixin from '@/mixins/WidgetMixin';
-import GlancesMixin from '@/mixins/GlancesMixin';
-import { convertBytes } from '@/utils/MiscHelpers';
-
-export default {
-  mixins: [WidgetMixin, GlancesMixin],
-  data() {
-    return {
-      networks: null,
-      previous: null,
-    };
-  },
-  computed: {
-    endpoint() {
-      return this.makeGlancesUrl('network');
+  </template>
+  
+  <script>
+  import WidgetMixin from '@/mixins/WidgetMixin';
+  import GlancesMixin from '@/mixins/GlancesMixin';
+  import { convertBytes } from '@/utils/MiscHelpers';
+  
+  export default {
+    mixins: [WidgetMixin, GlancesMixin],
+    data() {
+      return {
+        networks: null,
+        previous: null,
+      };
     },
-  },
-  filters: {
-    formatDataSize(data) {
-      return convertBytes(data);
+    computed: {
+      endpoint() {
+        return this.makeGlancesUrl('network');
+      },
     },
-    formatSpeed(byteValue) {
-      if (!byteValue) return '';
-      return `${convertBytes(byteValue)}/s`;
+    filters: {
+      formatDataSize(data) {
+        return convertBytes(data);
+      },
+      formatSpeed(byteValue) {
+        if (!byteValue) return '';
+        return `${convertBytes(byteValue)}/s`;
+      },
+      getArrow(direction) {
+        if (direction === 'up') return '↑';
+        if (direction === 'down') return '↓';
+        return '';
+      },
     },
-    getArrow(direction) {
-      if (direction === 'up') return '↑';
-      if (direction === 'down') return '↓';
-      return '';
+    methods: {
+      processData(networkData) {
+        // Speichere vorherige Netzwerkinformationen (optional, je nach Bedarf)
+        this.previous = this.networks;
+        const networks = [];
+  
+        // Falls eine Interfaces-Konfiguration vorhanden ist, erstellen wir ein Mapping:
+        if (this.options.Interfaces && Array.isArray(this.options.Interfaces)) {
+          let interfaceMapping = {};
+          this.options.Interfaces.forEach(item => {
+            const key = Object.keys(item)[0];
+            interfaceMapping[key] = item[key];
+          });
+          // Nur die Interfaces übernehmen, die in der Konfiguration angegeben wurden
+          networkData.forEach((network, index) => {
+            if (interfaceMapping[network.interface_name] !== undefined) {
+              networks.push({
+                name: interfaceMapping[network.interface_name],
+                speed: network.speed,
+                online: network.speed ? 'up' : 'down', // v3 zu v4: "is_up" ist nicht mehr Standard
+                currentDownload: network.bytes_recv,
+                currentUpload: network.bytes_sent,
+                totalDownload: network.bytes_recv_gauge,
+                totalUpload: network.bytes_sent_gauge,
+                changeDownload: this.previous && network.rx > this.previous[index].rx,
+                changeUpload: this.previous && network.tx > this.previous[index].tx,
+              });
+            }
+          });
+        } else {
+          // Falls keine Konfiguration vorliegt, werden alle Interfaces übernommen
+          networkData.forEach((network, index) => {
+            networks.push({
+              name: network.interface_name,
+              speed: network.speed,
+              online: network.speed ? 'up' : 'down',
+              currentDownload: network.bytes_recv,
+              currentUpload: network.bytes_sent,
+              totalDownload: network.bytes_recv_gauge,
+              totalUpload: network.bytes_sent_gauge,
+              changeDownload: this.previous && network.rx > this.previous[index].rx,
+              changeUpload: this.previous && network.tx > this.previous[index].tx,
+            });
+          });
+        }
+        this.networks = networks;
+      },
     },
-  },
-  methods: {
-    processData(networkData) {
-      this.previous = this.disks;
-      const networks = [];
-      networkData.forEach((network, index) => {
-        networks.push({
-          name: network.interface_name,
-          speed: network.speed,
-          online: network.speed ? 'up' : 'down', //v3 to v4 is_up no longer seems to be a default response field
-          currentDownload: network.bytes_recv,
-          currentUpload: network.bytes_sent,
-          totalDownload: network.bytes_recv_gauge,
-          totalUpload: network.bytes_sent_gauge,
-          changeDownload: this.previous && network.rx > this.previous[index].rx,
-          changeUpload: this.previous && network.tx > this.previous[index].tx,
-        });
-      });
-      this.networks = networks;
+    created() {
+      this.overrideUpdateInterval = 5;
     },
-  },
-  created() {
-    this.overrideUpdateInterval = 5;
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.glances-network-interfaces-wrapper {
-  color: var(--widget-text-color);
-  .interface-row {
-    display: flex;
-    flex-direction: column;
-    padding: 0.5rem 0;
-    .network-info {
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .glances-network-interfaces-wrapper {
+    color: var(--widget-text-color);
+    .interface-row {
       display: flex;
-      justify-content: space-between;
-      .network-name {
-        width: 50%;
-        margin: 0.5rem 0;
-        overflow: hidden;
-        font-weight: bold;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .network-speed {
-        font-family: var(--font-monospace);
-        margin: 0.5rem 0;
+      flex-direction: column;
+      padding: 0.5rem 0;
+      .network-info {
+        display: flex;
+        justify-content: space-between;
+        .network-name {
+          width: 50%;
+          margin: 0.5rem 0;
+          overflow: hidden;
+          font-weight: bold;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .network-speed {
+          font-family: var(--font-monospace);
+          margin: 0.5rem 0;
+        }
+        .network-online {
+          min-width: 15%;
+          margin: 0.5rem 0;
+          font-weight: bold;
+          text-align: right;
+          text-transform: capitalize;
+          &.up { color: var(--success); }
+          &.down { color: var(--danger); }
+        }
       }
-      .network-online {
-        min-width: 15%;
-        margin: 0.5rem 0;
-        font-weight: bold;
-        text-align: right;
-        text-transform: capitalize;
-        &.up { color: var(--success); }
-        &.down { color: var(--danger); }
-      }
-    }
-    .total, .current {
-      display: inline;
-      margin: 0.25rem 0;
-      b.lbl {
-        margin-right: 0.25rem;
+      .total, .current {
+        display: inline;
+        margin: 0.25rem 0;
+        b.lbl {
+          margin-right: 0.25rem;
+        }
+        span.val {
+          margin-left: 0.25rem;
+          font-family: var(--font-monospace);
+        }
+        span.separator {
+          font-weight: bold;
+          margin: 0 0.5rem;
+        }
+        &.total {
+          opacity: var(--dimming-factor);
+          font-size: 0.85rem;
+        }
+        &.current {
+          text-align: center;
+          background: var(--widget-accent-color);
+          border-radius: var(--curve-factor);
+          padding: 0.2rem 0.5rem;
+        }
       }
-      span.val {
-        margin-left: 0.25rem;
-        font-family: var(--font-monospace);
+      &:not(:last-child) {
+        border-bottom: 1px dashed var(--widget-text-color);
       }
-      span.separator {
-        font-weight: bold;
-        margin: 0 0.5rem;
-      }
-      &.total {
-        opacity: var(--dimming-factor);
-        font-size: 0.85rem;
-      }
-      &.current {
-        text-align: center;
-        background: var(--widget-accent-color);
-        border-radius: var(--curve-factor);
-        padding: 0.2rem 0.5rem;
-      }
-    }
-    &:not(:last-child) {
-      border-bottom: 1px dashed var(--widget-text-color);
     }
   }
-}
-</style>
+  </style>
+  

From fa4a3d681b416cbab2a0e863446fbdf9f729e430 Mon Sep 17 00:00:00 2001
From: Kryce49 <108368858+Kryce49@users.noreply.github.com>
Date: Sat, 22 Mar 2025 11:45:01 +0100
Subject: [PATCH 3/3] Update widgets.md gl-disk-space and gl-network-interfaces

Edited docs for new filter options in gl-disk-space and gl-network-interfaces.
---
 docs/widgets.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/widgets.md b/docs/widgets.md
index 82433158b9..87edc6b084 100644
--- a/docs/widgets.md
+++ b/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
 ```
 
 ---