Glances service improvements (#837)

* feat: add a basic glances service widget

* feat: auto update for glances widget

* feat(services/glances): multiple metric support

* Update dependencies

---------

Co-authored-by: Manuel Quarneti <manuelquarneti@protonmail.com>

docs/customservices.md

@@ -17,6 +17,7 @@ within Homer:
 - [Emby / Jellyfin](#emby--jellyfin)
 - [FreshRSS](#freshrss)
 - [Gitea / Forgejo](#gitea--forgejo)
+- [Glances](#glances)
 - [Gotify](#gotify)
 - [Healthchecks](#healthchecks)
 - [Home Assistant](#home-assistant)
@@ -128,6 +129,37 @@ This service displays a version string instead of a subtitle. Example configurat
   url: http://git.example.com
 ```
 
+## Glances
+
+This is a basic widget for showing cpu and ram usage using a glances server
+
+You'll need a glances server up and running, this is a sample compose.yml
+
+```yml
+---
+services:
+  glances:
+    image: nicolargo/glances:latest
+    container_name: glances
+    environment:
+      - TZ=Europe/Rome
+      - GLANCES_OPT=-w
+    ports:
+      - 61208:61208
+    restart: unless-stopped
+```
+
+And this is a sample homer configuration
+
+```yml
+- name: System
+  icon: "fa-solid fa-heart-pulse"
+  url: http://192.168.1.2:61208
+  type: Glances
+  stats: [cpu, mem] # Metric to display. Possible values are: load, cpu, mem, swap.
+  updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats   
+```
+
 ## Gotify
 
 The Gotify service will show the number of currently oustanding messages

dummy-data/glances/api/4/quicklook

@@ -0,0 +1 @@
+{"cpu_name":"AMD Ryzen 7 3700X 8-Core Processor","cpu_hz_current":2662987562.5,"cpu_hz":3600000000.0,"cpu":3.7,"percpu":[{"key":"cpu_number","cpu_number":0,"total":5.1,"user":3.3,"system":0.6,"idle":94.9,"nice":0.0,"iowait":0.0,"irq":0.8,"softirq":0.3,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":1,"total":2.6,"user":2.0,"system":0.5,"idle":97.4,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.1,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":2,"total":1.6,"user":1.1,"system":0.3,"idle":98.4,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":3,"total":7.4,"user":6.2,"system":0.9,"idle":92.6,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":4,"total":1.3,"user":0.9,"system":0.4,"idle":98.7,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":5,"total":10.4,"user":8.9,"system":1.2,"idle":89.6,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":6,"total":3.1,"user":2.3,"system":0.6,"idle":96.9,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":7,"total":2.1,"user":1.3,"system":0.6,"idle":97.9,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":8,"total":5.8,"user":4.9,"system":0.7,"idle":94.2,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":9,"total":2.0,"user":1.3,"system":0.4,"idle":98.0,"nice":0.0,"iowait":0.2,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":10,"total":1.5,"user":0.9,"system":0.3,"idle":98.5,"nice":0.0,"iowait":0.2,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":11,"total":5.3,"user":4.6,"system":0.6,"idle":94.7,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":12,"total":1.5,"user":1.0,"system":0.4,"idle":98.5,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":13,"total":5.7,"user":4.9,"system":0.7,"idle":94.3,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":14,"total":2.9,"user":2.0,"system":0.8,"idle":97.1,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":15,"total":1.7,"user":1.1,"system":0.5,"idle":98.3,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null}],"mem":59.6,"swap":0.0,"cpu_log_core":16,"cpu_phys_core":8,"load":5.7}

package.json

@@ -10,23 +10,23 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fortawesome/fontawesome-free": "^6.7.0",
     "bulma": "^1.0.2",
     "lodash.merge": "^4.6.2",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
-    "yaml": "^2.6.0"
+    "yaml": "^2.6.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.2.0",
     "@vue/eslint-config-prettier": "^10.0.0",
-    "eslint": "^9.12.0",
+    "eslint": "^9.15.0",
-    "eslint-plugin-vue": "^9.29.0",
+    "eslint-plugin-vue": "^9.31.0",
     "http-server": "^14.1.1",
     "prettier": "^3.3.3",
-    "sass-embedded": "^1.79.5",
+    "sass-embedded": "^1.81.0",
-    "vite": "^5.4.9",
+    "vite": "^5.4.11",
-    "vite-plugin-pwa": "^0.20.5"
+    "vite-plugin-pwa": "^0.21.0"
   },
   "license": "Apache-2.0",
-  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
+  "packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
 }

src/components/services/Glances.vue

@@ -0,0 +1,78 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-for="(statItem, index) in item.stats" :key="statItem">
+          <span v-if="stats[statItem]" :title="stats[statItem].label">
+            <i :class="stats[statItem].icon"></i> {{ stats[statItem].value }} {{ stats[statItem].unit }}
+            <span v-if="index != item.stats.length-1"> / </span>
+          </span>
+        </template>
+      </p>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+
+export default {
+  name: "Glances",
+  components: {
+    Generic,
+  },
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    stats: [],
+    error: null,
+  }),
+  created() {
+    const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
+    if (updateInterval > 0) {
+      setInterval(() => this.fetchStat(), updateInterval);
+    }
+    this.fetchStat();
+  },
+  methods: {
+    fetchStat: async function () {
+      this.fetch(`/api/4/quicklook`)
+        .then((response) => {
+          this.stats["load"] = {
+            value: response.load,
+            label: "System load",
+            icon: "fa-solid fa-bolt",
+            unit: "%",
+          }
+          this.stats["cpu"] = {
+            value: response.cpu,
+            label: `CPU usage (${response.cpu_name})`,
+            icon: "fa-solid fa-microchip",
+            unit: "%",
+          }
+          this.stats["mem"] = {
+            value: response.mem,
+            label: `RAM usage`,
+            icon: "fa-solid fa-memory",
+            unit: "%",
+          }
+          this.stats["swap"] = {
+            value: response.swap,
+            label: `Swap usage`,
+            icon: "fa-solid fa-file-arrow-down",
+            unit: "%",
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+          this.error = "Unable to get metrics";
+        });
+    },
+  },
+};
+</script>