✨ Adds a system alert 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'),