✨ Optionally allow StatPing widget to filter on group

docs/widgets.md

@@ -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

src/components/Widgets/StatPing.vue

@@ -15,17 +15,21 @@
  <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')" />
  <img class="uptime-pie-chart" alt="7 Day Uptime Chart"
  :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;