mirror of https://github.com/Lissy93/dashy.git
🔀 Merge pull request #808 from jammo2k5/master
✨ Gluetun VPN Container Status Widget.
This commit is contained in:
Alicia Sykes
GitHub
commit
e663fb7639
|
|
@ -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/).
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue