✨ Adds a system alert widget

docs/widgets.md

@@ -52,6 +52,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Disk IO](#disk-io)
   - [System Load](#system-load)
   - [System Load History](#system-load-history)
+  - [Resource Usage Alerts](#resource-usage-alerts)
 - **[Dynamic Widgets](#dynamic-widgets)**
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1354,6 +1355,22 @@ Shows recent historical system load, calculated from the number of processes wai
 
 ---
 
+### Resource Usage Alerts
+
+Lists recent high resource usage alerts (e.g. CPU, mem, IO, load, temp)
+
+<p align="center"><img width="500" src="https://i.ibb.co/w01NX5R/gl-alerts.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-alerts
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget

src/components/Widgets/GlAlerts.vue

@@ -0,0 +1,129 @@
+<template>
+<div class="glances-alerts-wrapper" v-if="alerts">
+  <div class="alert-row" v-for="(alert, index) in alerts" :key="index">
+    <p class="time" v-tooltip="tooltip(`${alert.timeAgo}<br>Lasted: ${alert.lasted}`, true)">
+      {{ alert.time }}
+      <span v-if="alert.ongoing" class="ongoing">Ongoing</span>
+    </p>
+    <div class="alert-info" v-tooltip="tooltip(alert.minMax, true)">
+      <span class="category">{{ alert.category }}</span> -
+      <span class="value">{{ alert.value }}%</span>
+    </div>
+    <p :class="`severity ${alert.severity.toLowerCase()}`">{{ alert.severity }}</p>
+  </div>
+</div>
+<div v-else-if="noResults" class="no-alerts">
+  <p class="no-alert-title">System is Healthy</p>
+  <p class="no-alert-info">There are no active alerts</p>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { timestampToDateTime, getTimeAgo, getTimeDifference } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  data() {
+    return {
+      alerts: null,
+      noResults: false,
+    };
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/alert`;
+    },
+  },
+  filters: {},
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(alertData) {
+      if (!alertData || alertData.length === 0) {
+        this.noResults = true;
+      } else {
+        const alerts = [];
+        alertData.forEach((alert) => {
+          alerts.push({
+            time: timestampToDateTime(alert[0] * 1000),
+            ongoing: (alert[1] === -1),
+            timeAgo: getTimeAgo(alert[0] * 1000),
+            lasted: alert[1] ? getTimeDifference(alert[0] * 1000, alert[1] * 1000) : 'Ongoing',
+            severity: alert[2],
+            category: alert[3],
+            value: alert[5],
+            minMax: `Min: ${alert[4]}%<br>Avg: ${alert[5]}%<br>Max: ${alert[6]}%`,
+          });
+        });
+        this.alerts = alerts;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-alerts-wrapper {
+  .alert-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--widget-text-color);
+    .time {
+      max-width: 25%;
+      margin: 0.25rem 0;
+      span.ongoing {
+        display: block;
+        padding: 0.25rem;
+        margin: 0.2rem 0;
+        font-weight: bold;
+        font-size: 0.85rem;
+        width: fit-content;
+        color: var(--error);
+        border: 1px solid var(--error);
+        border-radius: var(--curve-factor);
+      }
+    }
+    .alert-info {
+      .category {}
+      .value {
+        font-family: var(--font-monospace);
+        font-weight: bold;
+      }
+    }
+    .severity {
+      padding: 0.25rem;
+      font-size: 0.85rem;
+      border-radius: var(--curve-factor);
+      color: var(--black);
+      font-weight: bold;
+      cursor: default;
+      border: 1px solid var(--widget-text-color);
+      &.warning { color: var(--warning); border-color: var(--warning); }
+      &.critical { color: var(--danger); border-color: var(--danger); }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+p.no-alert-title {
+  margin: 0.5rem 0;
+  font-weight: bold;
+  text-align: center;
+  color: var(--success);
+ }
+p.no-alert-info {
+  margin: 0.5rem 0;
+  font-style: italic;
+  text-align: center;
+  opacity: var(--dimming-factor);
+  color: var(--widget-text-color);
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -109,6 +109,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlAlerts
+        v-else-if="widgetType === 'gl-alerts'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <GlCpuCores
         v-else-if="widgetType === 'gl-current-cores'"
         :options="widgetOptions"
@@ -362,6 +369,7 @@ export default {
     Flights: () => import('@/components/Widgets/Flights.vue'),
     GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
     GitHubProfile: () => import('@/components/Widgets/GitHubProfile.vue'),
+    GlAlerts: () => import('@/components/Widgets/GlAlerts.vue'),
     GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
     GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
     GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),

src/utils/MiscHelpers.js

@@ -117,19 +117,25 @@ export const truncateStr = (str, len = 60, ellipse = '...') => {
   return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
 };
 
+/* Given two timestamp, return the difference in text format, e.g. '10 minutes' */
+export const getTimeDifference = (startTime, endTime) => {
+  const msDifference = new Date(endTime).getTime() - new Date(startTime).getTime();
+  const diff = Math.abs(Math.round(msDifference / 1000));
+  const divide = (time, round) => Math.round(time / round);
+  if (diff < 60) return `${divide(diff, 1)} seconds`;
+  if (diff < 3600) return `${divide(diff, 60)} minutes`;
+  if (diff < 86400) return `${divide(diff, 3600)} hours`;
+  if (diff < 604800) return `${divide(diff, 86400)} days`;
+  if (diff >= 604800) return `${divide(diff, 604800)} weeks`;
+  return 'unknown';
+};
+
 /* Given a timestamp, return how long ago it was, e.g. '10 minutes' */
 export const getTimeAgo = (dateTime) => {
   const now = new Date().getTime();
-  const then = new Date(dateTime).getTime();
+  const diffStr = getTimeDifference(dateTime, now);
-  if (then < 0) return 'Never';
+  if (diffStr === 'unknown') return diffStr;
-  const diff = (now - then) / 1000;
+  return `${diffStr} ago`;
-  const divide = (time, round) => Math.round(time / round);
-  if (diff < 60) return `${divide(diff, 1)} seconds ago`;
-  if (diff < 3600) return `${divide(diff, 60)} minutes ago`;
-  if (diff < 86400) return `${divide(diff, 3600)} hours ago`;
-  if (diff < 604800) return `${divide(diff, 86400)} days ago`;
-  if (diff >= 604800) return `${divide(diff, 604800)} weeks ago`;
-  return 'unknown';
 };
 
 /* Given the name of a CSS variable, returns it's value */