🔀 Merge pull request #714 from marekful/FEATURE/StatPing-widget-group-filter-and-compact-view

 Optionally allow StatPing widget to filter on group
This commit is contained in:
Alicia Sykes 2022-06-08 23:35:30 +01:00 committed by GitHub
commit 9faab35a57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 2 deletions

View File

@ -1350,6 +1350,9 @@ Displays the current and recent uptime of your running services, via a self-host
**Field** | **Type** | **Required** | **Description** **Field** | **Type** | **Required** | **Description**
--- | --- | --- | --- --- | --- | --- | ---
**`hostname`** | `string` | Required | The URL to your StatPing instance, without a trailing slash **`hostname`** | `string` | Required | The URL to your StatPing instance, without a trailing slash
**`groupId`** | `number` | Optional | If provided, only Services in the given group are displayed. Defaults to `0` in which case all services are displayed.
**`showChart`** | `boolean`| Optional | If provided and `false` then charts are not displayed. Defaults to `true`.
**`showInfo`** | `boolean`| Optional | If provided and `false` then information summaries are not displayed. Defaults to `true`.
##### Example ##### Example
@ -1358,6 +1361,18 @@ Displays the current and recent uptime of your running services, via a self-host
options: options:
hostname: http://192.168.130.1:8080 hostname: http://192.168.130.1:8080
``` ```
or
```yaml
- type: stat-ping
options:
hostname: http://192.168.130.1:8080
groupId: 3
showChart: false
showInfo: false
```
You can use multiple StatPing widgets with different `groupId`s.
Note, the Group Id is not directly visible in SttatPing UI, you can inspect the group select HTML element or the API response to find out.
##### Info ##### Info
- **CORS**: 🟠 Proxied - **CORS**: 🟠 Proxied

View File

@ -15,9 +15,13 @@
<span v-else class="status-offline"> <span v-else class="status-offline">
{{ $t('widgets.stat-ping.down') }} {{ $t('widgets.stat-ping.down') }}
</span> </span>
<Button v-on:click="service.infoHidden = !service.infoHidden"
class="far fa-info"></Button>
<Button v-on:click="service.chartHidden = !service.chartHidden"
class="far fa-chart-line"></button>
</p> </p>
<!-- Charts --> <!-- Charts -->
<div class="charts"> <div v-if="!service.chartHidden" class="charts">
<img <img
class="uptime-pie-chart" alt="24 Hour Uptime Chart" class="uptime-pie-chart" alt="24 Hour Uptime Chart"
:src="makeChartUrl(service.uptime24, '24 Hours')" /> :src="makeChartUrl(service.uptime24, '24 Hours')" />
@ -25,7 +29,7 @@
:src="makeChartUrl(service.uptime7, '7 Days')" /> :src="makeChartUrl(service.uptime7, '7 Days')" />
</div> </div>
<!-- Info --> <!-- Info -->
<div class="info"> <div v-if="!service.infoHidden" class="info">
<div class="info-row"> <div class="info-row">
<span class="lbl">Failed Pings</span> <span class="lbl">Failed Pings</span>
<span class="val">{{ service.totalFailure }}/{{ service.totalSuccess }}</span> <span class="val">{{ service.totalFailure }}/{{ service.totalSuccess }}</span>
@ -73,6 +77,15 @@ export default {
endpoint() { endpoint() {
return `${this.hostname}/api/services`; return `${this.hostname}/api/services`;
}, },
groupId() {
return this.options.groupId || 0;
},
showChart() {
return typeof this.options.showChart !== 'boolean' ? true : this.options.showChart;
},
showInfo() {
return typeof this.options.showInfo !== 'boolean' ? true : this.options.showInfo;
},
}, },
methods: { methods: {
fetchData() { fetchData() {
@ -99,6 +112,7 @@ export default {
processData(data) { processData(data) {
let services = []; let services = [];
data.forEach((service) => { data.forEach((service) => {
if (this.groupId && this.groupId !== service.group_id) return;
services.push({ services.push({
name: service.name, name: service.name,
online: service.online, online: service.online,
@ -109,6 +123,8 @@ export default {
totalFailure: showNumAsThousand(service.stats.failures), totalFailure: showNumAsThousand(service.stats.failures),
lastSuccess: getTimeAgo(service.last_success), lastSuccess: getTimeAgo(service.last_success),
lastFailure: getTimeAgo(service.last_error), lastFailure: getTimeAgo(service.last_error),
chartHidden: this.showChart ? 0 : 1,
infoHidden: this.showInfo ? 0 : 1,
}); });
}); });
if (this.limit) services = services.slice(0, this.limit); if (this.limit) services = services.slice(0, this.limit);
@ -135,6 +151,18 @@ export default {
&.status-offline { color: var(--danger); } &.status-offline { color: var(--danger); }
} }
} }
button {
float: right;
color: var(--widget-text-color);
top: 4px;
background: none;
border: none;
position: relative;
opacity: .4;
}
button:hover {
opacity: .75;
}
.charts { .charts {
display: flex; display: flex;
flex-direction: row; flex-direction: row;