✨ Adds widgets for monitoring CPU usage

src/components/Widgets/GlCpuCores.vue

@@ -1,19 +1,18 @@
 <template>
 <div class="glances-cpu-cores-wrapper">
   <div class="percentage-charts" v-for="(chartData, index) in cpuChartData" :key="index">
-    <PercentageChart :values="chartData" />
+    <PercentageChart :values="chartData" :title="`Core #${index + 1}`" />
   </div>
 </div>
 </template>
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
-import ChartingMixin from '@/mixins/ChartingMixin';
 import { capitalize } from '@/utils/MiscHelpers';
 import PercentageChart from '@/components/Charts/PercentageChart';
 
 export default {
-  mixins: [WidgetMixin, ChartingMixin],
+  mixins: [WidgetMixin],
   components: {
     PercentageChart,
   },
@@ -31,56 +30,29 @@ export default {
       return `${this.hostname}/api/3/quicklook`;
     },
   },
+  created() {
+    // Enable automatic updates (won't be applied if user has explicitly disabled)
+    this.overrideUpdateInterval = 2;
+  },
   methods: {
     fetchData() {
       this.makeRequest(this.endpoint).then(this.processData);
     },
+    /* Converts returned data into format for the percentage charts */
     processData(cpuData) {
-      const results = [];
+      const cpuSections = [];
       cpuData.percpu.forEach((cpuInfo) => {
         const cpuSection = [];
-        const ignore = ['total', 'key', 'cpu_number'];
+        const ignore = ['total', 'key', 'cpu_number', 'idle'];
+        cpuSection.push({ label: 'Idle', size: cpuInfo.idle, color: '#20e253' });
         Object.keys(cpuInfo).forEach((keyName) => {
           if (!ignore.includes(keyName) && cpuInfo[keyName]) {
-            cpuSection.push({
+            cpuSection.push({ label: capitalize(keyName), size: cpuInfo[keyName] });
-              label: capitalize(keyName),
-              size: cpuInfo[keyName],
-              color: keyName === 'idle' ? '#20e253' : null,
-            });
           }
         });
-        results.push(cpuSection.reverse());
+        cpuSections.push(cpuSection);
-      });
-      this.cpuChartData = results;
-    },
-    generateCpuChart(cpuData) {
-      // [
-      //   { size: 15, label: 'Hello' },
-      //   { size: 12, label: 'World' },
-      //   { size: 10 },
-      //   { size: 10 },
-      //   { size: 10 },
-      //   { size: 10 },
-      //   { size: 5 },
-      //   { size: 5 },
-      //   { size: 5 },
-      // ]
-      const newElement = document.createElement('div');
-      const parentContainer = document.getElementById(this.chartId);
-      parentContainer.appendChild(newElement);
-      const colors = Array(cpuData.labels.length - 1).fill('#f80363');
-      colors.push('#20e253');
-      return new this.Chart(newElement, {
-        title: 'CPU',
-        data: cpuData,
-        type: 'percentage',
-        height: 150,
-        colors,
-        barOptions: {
-          height: 18,
-          depth: 4,
-        },
       });
+      this.cpuChartData = cpuSections;
     },
   },
 };
@@ -89,5 +61,8 @@ export default {
 <style scoped lang="scss">
 .glances-cpu-cores-wrapper {
   color: var(--widget-text-color);
+  .percentage-charts:not(:last-child) {
+    border-bottom: 1px dashed var(--widget-accent-color);
+  }
 }
 </style>

src/components/Widgets/GlCpuGauge.vue

@@ -1,15 +1,24 @@
 <template>
 <div class="glances-cpu-gauge-wrapper">
-  <GaugeChart :value="gaugeValue" :baseColor="background">
+  <GaugeChart :value="gaugeValue" :baseColor="background" :gaugeColor="gaugeColor">
     <p class="percentage">{{ gaugeValue }}%</p>
   </GaugeChart>
+  <p class="show-more-btn" @click="toggleMoreInfo">
+    {{ showMoreInfo ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
+  </p>
+  <div class="more-info" v-if="moreInfo && showMoreInfo">
+    <div class="more-info-row" v-for="(info, key) in moreInfo" :key="key">
+      <p class="label">{{ info.label }}</p>
+      <p class="value">{{ info.value }}</p>
+    </div>
+  </div>
 </div>
 </template>
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
 import GaugeChart from '@/components/Charts/Gauge';
-import { getValueFromCss } from '@/utils/MiscHelpers';
+import { getValueFromCss, capitalize } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
@@ -19,6 +28,9 @@ export default {
   data() {
     return {
       gaugeValue: 0,
+      gaugeColor: '#272f4d',
+      showMoreInfo: false,
+      moreInfo: null,
       background: '#fff',
     };
   },
@@ -37,7 +49,30 @@ export default {
     },
     processData(cpuData) {
       this.gaugeValue = cpuData.total;
+      this.gaugeColor = this.getColor(cpuData.total);
+      const moreInfo = [];
+      const ignore = ['total', 'cpucore', 'time_since_update',
+        'interrupts', 'soft_interrupts', 'ctx_switches', 'syscalls'];
+      Object.keys(cpuData).forEach((key) => {
+        if (!ignore.includes(key) && cpuData[key]) {
+          moreInfo.push({ label: capitalize(key), value: `${cpuData[key].toFixed(1)}%` });
+        }
+      });
+      this.moreInfo = moreInfo;
     },
+    toggleMoreInfo() {
+      this.showMoreInfo = !this.showMoreInfo;
+    },
+    getColor(cpuPercent) {
+      if (cpuPercent < 50) return '#20e253';
+      if (cpuPercent < 60) return '#f6f000';
+      if (cpuPercent < 80) return '#fca016';
+      if (cpuPercent < 100) return '#f80363';
+      return '#272f4d';
+    },
+  },
+  created() {
+    this.overrideUpdateInterval = 2;
   },
   mounted() {
     this.background = getValueFromCss('widget-accent-color');
@@ -47,10 +82,8 @@ export default {
 
 <style scoped lang="scss">
 .glances-cpu-gauge-wrapper {
-  .gauge-chart {
     max-width: 18rem;
-    margin: 0 auto;
+    margin: 0.5rem auto;
-  }
   p.percentage {
     color: var(--widget-text-color);
     text-align: center;
@@ -60,5 +93,45 @@ export default {
     width: 100%;
     bottom: 0;
   }
+  .more-info {
+    background: var(--widget-accent-color);
+    border-radius: var(--curve-factor);
+    padding: 0.25rem 0.5rem;
+    margin: 0.5rem auto;
+    .more-info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p.label, p.value {
+        color: var(--widget-text-color);
+        margin: 0.25rem 0;
+      }
+      p.value {
+        font-family: var(--font-monospace);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px dashed var(--widget-text-color);
+      }
+    }
+  }
+  p.show-more-btn {
+    cursor: pointer;
+    font-size: 0.9rem;
+    text-align: center;
+    width: fit-content;
+    margin: 0.25rem auto;
+    padding: 0.1rem 0.25rem;
+    border: 1px solid transparent;
+    color: var(--widget-text-color);
+    opacity: var(--dimming-factor);
+    border-radius: var(--curve-factor);
+    &:hover {
+      border: 1px solid var(--widget-text-color);
+    }
+    &:focus, &:active {
+      background: var(--widget-text-color);
+      color: var(--widget-background-color);
+    }
+  }
 }
 </style>