From 4e64ccff3b9afa44c7fc68318d5fa5e303260f2f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 8 Jan 2022 13:55:26 +0000
Subject: [PATCH] :sparkles: Adds current memory usage widget

---
 docs/widgets.md                       |  17 ++++
 src/components/Widgets/GlMemGauge.vue | 136 ++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |  10 +-
 src/utils/MiscHelpers.js              |   9 ++
 4 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Widgets/GlMemGauge.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index b21f63a4..3cfda213 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -46,6 +46,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
   - [CPU Usage History](#cpu-usage-history)
+  - [Memory Usage Current](#current-memory-usage)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1240,6 +1241,22 @@ Recent CPU usage history, across all cores, and displayed by user and system
 
 ---
 
+### Current Memory Usage
+
+Real-time memory usage gauge, with more info visible on click
+
+<p align="center"><img width="500" src="https://i.ibb.co/rynp52J/gl-mem-usage.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-current-mem
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget
diff --git a/src/components/Widgets/GlMemGauge.vue b/src/components/Widgets/GlMemGauge.vue
new file mode 100644
index 00000000..c43e400d
--- /dev/null
+++ b/src/components/Widgets/GlMemGauge.vue
@@ -0,0 +1,136 @@
+<template>
+<div class="glances-cpu-gauge-wrapper">
+  <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, capitalize, convertBytes } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {
+    GaugeChart,
+  },
+  data() {
+    return {
+      gaugeValue: 0,
+      gaugeColor: '#272f4d',
+      showMoreInfo: false,
+      moreInfo: null,
+      background: '#fff',
+    };
+  },
+  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/mem`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(memData) {
+      this.gaugeValue = memData.percent;
+      this.gaugeColor = this.getColor(memData.percent);
+      const moreInfo = [];
+      const ignore = ['percent'];
+      Object.keys(memData).forEach((key) => {
+        if (!ignore.includes(key) && memData[key]) {
+          moreInfo.push({ label: capitalize(key), value: convertBytes(memData[key]) });
+        }
+      });
+      this.moreInfo = moreInfo;
+    },
+    toggleMoreInfo() {
+      this.showMoreInfo = !this.showMoreInfo;
+    },
+    getColor(memPercent) {
+      if (memPercent < 50) return '#20e253';
+      if (memPercent < 60) return '#f6f000';
+      if (memPercent < 80) return '#fca016';
+      if (memPercent < 100) return '#f80363';
+      return '#272f4d';
+    },
+  },
+  created() {
+    this.overrideUpdateInterval = 2;
+  },
+  mounted() {
+    this.background = getValueFromCss('widget-accent-color');
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-cpu-gauge-wrapper {
+    max-width: 18rem;
+    margin: 0.5rem auto;
+  p.percentage {
+    color: var(--widget-text-color);
+    text-align: center;
+    position: absolute;
+    font-size: 1.3rem;
+    margin: 0.5rem 0;
+    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>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 55d555c0..0e1df96f 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -130,6 +130,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlMemGauge
+        v-else-if="widgetType === 'gl-current-mem'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <HealthChecks
         v-else-if="widgetType === 'health-checks'"
         :options="widgetOptions"
@@ -319,10 +326,11 @@ export default {
     ExchangeRates: () => import('@/components/Widgets/ExchangeRates.vue'),
     Flights: () => import('@/components/Widgets/Flights.vue'),
     GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
+    GitHubProfile: () => import('@/components/Widgets/GitHubProfile.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'),
+    GlMemGauge: () => import('@/components/Widgets/GlMemGauge.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index bee89e6f..5e998048 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -90,6 +90,15 @@ export const capitalize = (str) => {
   return words.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
 };
 
+/* Given a mem size in bytes, will return it in appropriate unit */
+export const convertBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / (k ** i)).toFixed(decimals))} ${sizes[i]}`;
+};
+
 /* Round price to appropriate number of decimals */
 export const roundPrice = (price) => {
   if (Number.isNaN(price)) return price;