🔀 Merge pull request #808 from jammo2k5/master

✨ Gluetun VPN Container Status Widget.

docs/widgets.md

@@ -55,6 +55,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Nextcloud Stats](#nextcloud-stats)
   - [Nextcloud PHP Opcache](#nextcloud-php-opcache-stats)
   - [Sabnzbd](#sabnzbd)
+  - [Gluetun VPN Info](#gluetun-vpn-info)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -1827,6 +1828,39 @@ Shows queue information regarding your self hosted Sabnzbd server.
 
 ---
 
+### Gluetun VPN Info
+
+Display info from the Gluetun VPN container public IP API. This can show the IP and location data for the exit VPN node.
+
+<p align="center"><img width="380" src="https://i.ibb.co/xjXbZ7Z/Screenshot-from-2022-07-20-21-42-34.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`visibleFields`** | `string` |  Required | A comma separated list of the fields you want visible in the widget. You can have any number of the following : `public_ip`, `region`, `country`, `city`, `location`, `organisation`, `postal_code`, `timezone` 
+**`host`** | `string` |  Required | The url to the gluetun HTTP control server. E.g. `http://gluetun:8000`
+
+
+##### Example 
+
+
+```yaml
+- type: gluetun-status
+  useProxy: true
+  options:
+    hostname: http://server-or-conatiner-hostname:8000
+    visibleFields: public_ip,region,country,city,location,organisation,postal_code,timezone
+```
+##### Info
+- **CORS**: 🟠 Proxied
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Gluetun](https://github.com/qdm12/gluetun))
+- **Privacy**: _See [Gluetun Wiki](https://github.com/qdm12/gluetun/wiki)_
+
+---
+
 ## System Resource Monitoring
 
 The easiest method for displaying system info and resource usage in Dashy is with [Glances](https://nicolargo.github.io/glances/).

src/components/Widgets/GluetunStatus.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="vpn-ip-addr-wrapper">
+  <div class="ip-row public-ip" v-if="public_ip">
+    <span class="lbl">VPN IP</span>
+    <span class="val">{{ public_ip }}</span>
+  </div>
+  <div class="ip-row" v-if="country">
+    <span class="lbl">Country</span>
+    <span class="val">{{ country }}</span>
+  </div>
+  <div class="ip-row" v-if="region">
+    <span class="lbl">Region</span>
+    <span class="val">{{ region }}</span>
+  </div>
+  <div class="ip-row" v-if="city">
+    <span class="lbl">City</span>
+    <span class="val">{{ city }}</span>
+  </div>
+  <div class="ip-row" v-if="postal_code">
+    <span class="lbl">Post Code</span>
+    <span class="val">{{ postal_code }}</span>
+  </div>
+  <div class="ip-row" v-if="location">
+    <span class="lbl">Location</span>
+    <span class="val">{{ location }}</span>
+  </div>
+  <div class="ip-row" v-if="timezone">
+    <span class="lbl">Timezone</span>
+    <span class="val">{{ timezone }}</span>
+  </div>
+  <div class="ip-row" v-if="organization">
+    <span class="lbl">Organization</span>
+    <span class="val">{{ organization }}</span>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  data() {
+    return {
+      public_ip: null,
+      country: null,
+      region: null,
+      city: null,
+      location: null,
+      organization: null,
+      postal_code: null,
+      timezone: null,
+    };
+  },
+  methods: {
+    /* Make GET request to Gluetun publicip API endpoint */
+    fetchData() {
+      this.makeRequest(this.options.hostname + "/v1/publicip/ip").then(this.processData);
+    },
+    /* Assign data variables to the returned data */
+    processData(ipInfo) {
+      var fields = this.options.visibleFields.split(",");
+      this.public_ip = fields.includes("public_ip") ? ipInfo.public_ip : null;
+      this.country = fields.includes("country") ?  ipInfo.country : null;
+      this.region = fields.includes("region") ? ipInfo.region : null;
+      this.city = fields.includes("city") ?  ipInfo.city : null;
+      this.location = fields.includes("location") ?  ipInfo.location : null;
+      this.organization = fields.includes("organization") ?  ipInfo.organization : null;
+      this.postal_code = fields.includes("postal_code") ?  ipInfo.postal_code : null;
+      this.timezone = fields.includes("timezone") ?  ipInfo.timezone : null;
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.vpn-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

@@ -77,6 +77,7 @@ const COMPAT = {
   'gl-system-load': 'GlSystemLoad',
   'gl-cpu-temp': 'GlCpuTemp',
   'health-checks': 'HealthChecks',
+  'gluetun-status': 'GluetunStatus',
   iframe: 'IframeWidget',
   image: 'ImageWidget',
   joke: 'Jokes',