mirror of https://github.com/bastienwirtz/homer
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>pull/838/head
Bastien Wirtz
GitHub
parent
496f9083b2
commit
e58637d935
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
20
package.json
20
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",
|
||||
"yaml": "^2.6.0"
|
||||
"vue": "^3.5.13",
|
||||
"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-plugin-vue": "^9.29.0",
|
||||
"eslint": "^9.15.0",
|
||||
"eslint-plugin-vue": "^9.31.0",
|
||||
"http-server": "^14.1.1",
|
||||
"prettier": "^3.3.3",
|
||||
"sass-embedded": "^1.79.5",
|
||||
"vite": "^5.4.9",
|
||||
"vite-plugin-pwa": "^0.20.5"
|
||||
"sass-embedded": "^1.81.0",
|
||||
"vite": "^5.4.11",
|
||||
"vite-plugin-pwa": "^0.21.0"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
|
||||
"packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
|
||||
}
|
||||
|
|
|
|||
612
pnpm-lock.yaml
612
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
Loading…
Reference in New Issue