mirror of
https://github.com/Lissy93/dashy.git
synced 2024-09-11 22:27:10 +03:00
✨ Optionally allow the widget to filter on StatPing Group and to display in a more compact view.
* Add widget option: `groupId`. StatPing services are filtered for the given group. * Add widget options: `showChart` and `showInfo`. Initially hide the chart and info summary. * Add buttons to show/hide chart and info sections. * Update widget documentation.
This commit is contained in:
parent
ee27dc8a1a
commit
2d6c499192
@ -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
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user