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**
|
||||
--- | --- | --- | ---
|
||||
**`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
|
||||
|
||||
@ -1358,6 +1361,18 @@ Displays the current and recent uptime of your running services, via a self-host
|
||||
options:
|
||||
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
|
||||
- **CORS**: 🟠 Proxied
|
||||
|
@ -15,9 +15,13 @@
|
||||
<span v-else class="status-offline">
|
||||
{{ $t('widgets.stat-ping.down') }}
|
||||
</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>
|
||||
<!-- Charts -->
|
||||
<div class="charts">
|
||||
<div v-if="!service.chartHidden" class="charts">
|
||||
<img
|
||||
class="uptime-pie-chart" alt="24 Hour Uptime Chart"
|
||||
:src="makeChartUrl(service.uptime24, '24 Hours')" />
|
||||
@ -25,7 +29,7 @@
|
||||
:src="makeChartUrl(service.uptime7, '7 Days')" />
|
||||
</div>
|
||||
<!-- Info -->
|
||||
<div class="info">
|
||||
<div v-if="!service.infoHidden" class="info">
|
||||
<div class="info-row">
|
||||
<span class="lbl">Failed Pings</span>
|
||||
<span class="val">{{ service.totalFailure }}/{{ service.totalSuccess }}</span>
|
||||
@ -73,6 +77,15 @@ export default {
|
||||
endpoint() {
|
||||
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: {
|
||||
fetchData() {
|
||||
@ -99,6 +112,7 @@ export default {
|
||||
processData(data) {
|
||||
let services = [];
|
||||
data.forEach((service) => {
|
||||
if (this.groupId && this.groupId !== service.group_id) return;
|
||||
services.push({
|
||||
name: service.name,
|
||||
online: service.online,
|
||||
@ -109,6 +123,8 @@ export default {
|
||||
totalFailure: showNumAsThousand(service.stats.failures),
|
||||
lastSuccess: getTimeAgo(service.last_success),
|
||||
lastFailure: getTimeAgo(service.last_error),
|
||||
chartHidden: this.showChart ? 0 : 1,
|
||||
infoHidden: this.showInfo ? 0 : 1,
|
||||
});
|
||||
});
|
||||
if (this.limit) services = services.slice(0, this.limit);
|
||||
@ -135,6 +151,18 @@ export default {
|
||||
&.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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
Loading…
Reference in New Issue
Block a user