From 8349206770224ccc53ba5a6dfb7b5a61cf055239 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 8 Jan 2022 13:32:43 +0000
Subject: [PATCH] :sparkles: Adds CPU history widget

---
 docs/widgets.md                         | 86 +++++++++++++++++++++++
 src/components/Widgets/GlCpuHistory.vue | 90 +++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue   |  8 +++
 3 files changed, 184 insertions(+)
 create mode 100644 src/components/Widgets/GlCpuHistory.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 022cc63e..b21f63a4 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -42,6 +42,10 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Pi Hole Queries](#pi-hole-queries)
   - [Recent Traffic](#recent-traffic)
   - [Stat Ping Statuses](#stat-ping-statuses)
+- [System Resource Monitoring](#system-resource-monitoring)
+  - [CPU Usage Current](#current-cpu-usage)
+  - [CPU Usage Per Core](#cpu-usage-per-core)
+  - [CPU Usage History](#cpu-usage-history)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1154,6 +1158,88 @@ Displays the current and recent uptime of your running services, via a self-host
 
 ---
 
+## System Resource Monitoring
+
+The easiest method for displaying system info and resource usage in Dashy is with [Glances](https://nicolargo.github.io/glances/).
+
+Glances is a cross-platform monitoring tool developed by [@nicolargo](https://github.com/nicolargo). It's similar to top/htop but with a [Rest API](https://glances.readthedocs.io/en/latest/api.html) and many [data exporters](https://glances.readthedocs.io/en/latest/gw/index.html) available. Under the hood, it uses [psutil](https://github.com/giampaolo/psutil) for retrieving system info.
+
+If you don't already have it installed, either follow the [Installation Guide](https://github.com/nicolargo/glances/blob/master/README.rst) for your system, or setup [with Docker](https://glances.readthedocs.io/en/latest/docker.html), or use the one-line install script: `curl -L https://bit.ly/glances | /bin/bash`. You'll need to run Glances as a web server, using the `-w` option, see the [command reference docs](https://glances.readthedocs.io/en/latest/cmds.html) for more info.
+
+
+##### Options
+
+All Glance's based widgets require a `hostname`
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`hostname`** | `string` |  Required | The URL to your Glances instance, without a trailing slash
+
+
+##### Info
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 Not Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [GitHub - Nicolargo/Glances](https://github.com/nicolargo/glances))
+- **Privacy**: ⚫ No Policy Available
+
+---
+
+### Current CPU Usage
+
+Live-updating current CPU usage, as a combined average across alll cores
+
+<p align="center"><img width="400" src="https://i.ibb.co/qkLgxLp/gl-cpu-usage.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-current-cpu
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
+### CPU Usage Per Core
+
+Live-updating CPU usage breakdown per core
+
+<p align="center"><img width="400" src="https://i.ibb.co/512MYhT/gl-cpu-cores.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-current-cores
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
+### CPU Usage History
+
+Recent CPU usage history, across all cores, and displayed by user and system
+
+<p align="center"><img width="500" src="https://i.ibb.co/zs8BDzR/gl-cpu-history.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`limit`** | `number` |  _Optional_ | Limit the number of results returned, rendering more data points will take longer to load. Defaults to `100`
+
+##### Example 
+
+```yaml
+- type: gl-cpu-history
+  options:
+    hostname: http://192.168.130.2:61208
+    limit: 60
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget
diff --git a/src/components/Widgets/GlCpuHistory.vue b/src/components/Widgets/GlCpuHistory.vue
new file mode 100644
index 00000000..23293ac9
--- /dev/null
+++ b/src/components/Widgets/GlCpuHistory.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="glances-cpu-history-wrapper">
+  <div class="gl-history-chart" :id="chartId"></div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    limit() {
+      return this.options.limit || 100;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/cpu/history/${this.limit}`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(cpuData) {
+      const { system, user } = cpuData;
+      const labels = [];
+      const systemValues = [];
+      const userValues = [];
+      system.forEach((dataPoint) => {
+        labels.push(timestampToTime(dataPoint[0]));
+        systemValues.push(dataPoint[1]);
+      });
+      user.forEach((dataPoint) => {
+        userValues.push(dataPoint[1]);
+      });
+      const chartTitle = this.makeTitle(system);
+      const datasets = [
+        { name: 'System', type: 'bar', values: systemValues },
+        { name: 'User', type: 'bar', values: userValues },
+      ];
+      this.generateChart({ labels, datasets }, chartTitle);
+    },
+    makeTitle(system) {
+      return `CPU Usage over past ${getTimeAgo(system[0][0]).replace('ago', '')}`;
+    },
+    generateChart(timeChartData, chartTitle) {
+      return new this.Chart(`#${this.chartId}`, {
+        title: chartTitle,
+        data: timeChartData,
+        type: 'axis-mixed',
+        height: this.chartHeight,
+        colors: ['#9b5de5', '#00f5d4'],
+        truncateLegends: true,
+        lineOptions: {
+          regionFill: 1,
+          hideDots: 1,
+        },
+        axisOptions: {
+          xIsSeries: true,
+          xAxisMode: 'tick',
+        },
+        tooltipOptions: {
+          formatTooltipY: d => `${Math.round(d)}%`,
+          // formatTooltipX: d => timestampToTime(d),
+        },
+      });
+    },
+
+  },
+  created() {
+    this.overrideUpdateInterval = 20;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-cpu-history-wrapper {
+  .gl-history-chart {}
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 458f2f17..55d555c0 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -123,6 +123,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlCpuHistory
+        v-else-if="widgetType === 'gl-cpu-history'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <HealthChecks
         v-else-if="widgetType === 'health-checks'"
         :options="widgetOptions"
@@ -314,6 +321,7 @@ export default {
     GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
     GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
     GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
+    GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),
     GitHubProfile: () => import('@/components/Widgets/GitHubProfile.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),