From 1626b94285d3f96747a0bb281c87c1c8aca707cf Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 15:15:04 +0000
Subject: [PATCH] :bar_chart: Adds widget to display CPU temps (#452)

---
 docs/widgets.md                       | 22 ++++++-
 src/components/Widgets/GlCpuTemp.vue  | 83 +++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |  8 +++
 3 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Widgets/GlCpuTemp.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 131f7075..dc789c25 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -57,6 +57,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Network Traffic](#network-traffic)
   - [Resource Usage Alerts](#resource-usage-alerts)
   - [Public & Private IP](#ip-address)
+  - [CPU Temperature](#cpu-temp)
 - **[Dynamic Widgets](#dynamic-widgets)**
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1488,6 +1489,25 @@ Shows public and private IP address. Note that the ip plugin is not available on
 
 ---
 
+### CPU Temp
+
+Displays temperature data from system CPUs.
+
+Note: This widget uses the [`sensors`](https://github.com/nicolargo/glances/blob/develop/glances/plugins/glances_sensors.py) plugin, which is disabled by default, and may cause [performance issues](https://github.com/nicolargo/glances/issues/1664#issuecomment-632063558).
+You'll need to enable the sensors plugin to use this widget, using: `--enable-plugin sensors` when you start Glances.
+
+<p align="center"><img width="400" src="https://i.ibb.co/xSs4Gqd/gl-cpu-temp.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-cpu-temp
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget
@@ -1786,4 +1806,4 @@ For testing purposes, you can use an addon, which will disable the CORS checks.
 
 ### Raising an Issue
 
-If you need to submit a bug report for a failing widget, then please include the full console output (see [how](/docs/troubleshooting.md#how-to-open-browser-console)) as well as the relevant parts of your config file. Before sending the request, ensure you've read the docs. If you're new to GitHub, an haven't previously contributed to the project, then please fist star the repo to avoid your ticket being closed by the anti-spam bot.
\ No newline at end of file
+If you need to submit a bug report for a failing widget, then please include the full console output (see [how](/docs/troubleshooting.md#how-to-open-browser-console)) as well as the relevant parts of your config file. Before sending the request, ensure you've read the docs. If you're new to GitHub, an haven't previously contributed to the project, then please fist star the repo to avoid your ticket being closed by the anti-spam bot.
diff --git a/src/components/Widgets/GlCpuTemp.vue b/src/components/Widgets/GlCpuTemp.vue
new file mode 100644
index 00000000..af915080
--- /dev/null
+++ b/src/components/Widgets/GlCpuTemp.vue
@@ -0,0 +1,83 @@
+<template>
+<div class="glances-temp-wrapper" v-if="tempData">
+  <div class="temp-row" v-for="sensor in tempData" :key="sensor.label">
+    <p class="label">{{ sensor.label | formatLbl }}</p>
+    <p :class="`temp range-${sensor.color}`">{{ sensor.value | formatVal }}</p>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
+import { capitalize, fahrenheitToCelsius } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, GlancesMixin],
+  data() {
+    return {
+      tempData: null,
+      noResults: false,
+    };
+  },
+  computed: {
+    endpoint() {
+      return this.makeGlancesUrl('sensors');
+    },
+  },
+  filters: {
+    formatLbl(lbl) {
+      return capitalize(lbl);
+    },
+    formatVal(val) {
+      return `${Math.round(val)}°C`;
+    },
+  },
+  methods: {
+    getTempColor(temp) {
+      if (temp <= 50) return 'green';
+      if (temp > 50 && temp < 75) return 'yellow';
+      if (temp >= 75) return 'red';
+      return 'grey';
+    },
+    processData(sensorData) {
+      const results = [];
+      sensorData.forEach((sensor) => {
+        const tempC = sensor.unit === 'F' ? fahrenheitToCelsius(sensor.value) : sensor.value;
+        results.push({
+          label: sensor.label,
+          value: tempC,
+          color: this.getTempColor(tempC),
+        });
+      });
+      this.tempData = results;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-temp-wrapper {
+  .temp-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    p.label {
+      margin: 0.5rem 0;
+      color: var(--widget-text-color);
+    }
+    p.temp {
+      margin: 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: bold;
+      &.range-green { color: var(--success); }
+      &.range-yellow { color: var(--warning); }
+      &.range-red { color: var(--danger); }
+      &.range-grey { color: var(--medium-grey); }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 07b246dd..ffd1d737 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -209,6 +209,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlCpuTemp
+        v-else-if="widgetType === 'gl-cpu-temp'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <HealthChecks
         v-else-if="widgetType === 'health-checks'"
         :options="widgetOptions"
@@ -413,6 +420,7 @@ export default {
     GlNetworkInterfaces: () => import('@/components/Widgets/GlNetworkInterfaces.vue'),
     GlNetworkTraffic: () => import('@/components/Widgets/GlNetworkTraffic.vue'),
     GlSystemLoad: () => import('@/components/Widgets/GlSystemLoad.vue'),
+    GlCpuTemp: () => import('@/components/Widgets/GlCpuTemp.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),