✨ Adds Glances IP address widget (#437)

docs/widgets.md

@@ -56,6 +56,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Network Interfaces](#network-interfaces)
   - [Network Traffic](#network-traffic)
   - [Resource Usage Alerts](#resource-usage-alerts)
+  - [Public & Private IP](#ip-address)
 - **[Dynamic Widgets](#dynamic-widgets)**
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1471,6 +1472,22 @@ Lists recent high resource usage alerts (e.g. CPU, mem, IO, load, temp)
 
 ---
 
+### IP Address
+
+Shows public and private IP address. Note that the ip plugin is not available on all instances of Glances.
+
+<p align="center"><img width="400" src="https://i.ibb.co/ZhXBxZr/gl-ip-address.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-ip-address
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget

src/components/Widgets/GlIpAddress.vue

@@ -0,0 +1,74 @@
+<template>
+<div class="glances-ip-addr-wrapper" v-if="ipAddresses">
+  <div class="ip-row public-ip" v-if="ipAddresses.public_address">
+    <span class="lbl">Public IP</span>
+    <span class="val">{{ ipAddresses.public_address }}</span>
+  </div>
+  <div class="ip-row" v-if="ipAddresses.address">
+    <span class="lbl">Local Address</span>
+    <span class="val">{{ ipAddresses.address }}</span>
+  </div>
+  <div class="ip-row" v-if="ipAddresses.gateway">
+    <span class="lbl">Gateway</span>
+    <span class="val">{{ ipAddresses.gateway }}</span>
+  </div>
+  <div class="ip-row" v-if="ipAddresses.mask">
+    <span class="lbl">Mask</span>
+    <span class="val">{{ ipAddresses.mask }}</span>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
+
+export default {
+  mixins: [WidgetMixin, GlancesMixin],
+  data() {
+    return {
+      ipAddresses: null,
+    };
+  },
+  computed: {
+    endpoint() {
+      return this.makeGlancesUrl('ip');
+    },
+  },
+  filters: {},
+  methods: {
+    processData(ipData) {
+      this.ipAddresses = ipData;
+      if (Object.keys(ipData).length === 0) {
+        this.error('The IP plugin is not supported in this instance of Glances');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-ip-addr-wrapper {
+  .ip-row {
+    display: flex;
+    padding: 0.1rem 0.1rem 0.5rem 0.1rem;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--widget-text-color);
+    max-width: 400px;
+    margin: 0.5rem auto;
+    span.lbl {
+      font-weight: bold;
+    }
+    span.val {
+      font-family: var(--font-monospace);
+    }
+    &:not(.public-ip) {
+      opacity: var(--dimming-factor);
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -160,6 +160,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlIpAddress
+        v-else-if="widgetType === 'gl-ip-address'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <GlLoadHistory
         v-else-if="widgetType === 'gl-load-history'"
         :options="widgetOptions"
@@ -399,6 +406,7 @@ export default {
     GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),
     GlDiskIo: () => import('@/components/Widgets/GlDiskIo.vue'),
     GlDiskSpace: () => import('@/components/Widgets/GlDiskSpace.vue'),
+    GlIpAddress: () => import('@/components/Widgets/GlIpAddress.vue'),
     GlLoadHistory: () => import('@/components/Widgets/GlLoadHistory.vue'),
     GlMemGauge: () => import('@/components/Widgets/GlMemGauge.vue'),
     GlMemHistory: () => import('@/components/Widgets/GlMemHistory.vue'),