From 2415d9118753ad06b9c8fcc9d51b4a5ac9cfab6e Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Mon, 25 May 2026 15:37:00 +0200
Subject: [PATCH 1/3] Use websocket events for health view

---
 src/App.vue                                |  2 +-
 src/components/automation/MonacoEditor.vue |  2 +-
 src/stores/health.ts                       | 33 ++++++++--------------
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c1addf2..1d46fd7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@ if (backendStore.backendUrl) {
     settingsStore.init();
     automationStore.init();
     devicesStore.init();
-    healthStore.init();
+    healthStore.init(io);
   });
   io.on("disconnect", () => backendStore.setServerOnline(false));
 
diff --git a/src/components/automation/MonacoEditor.vue b/src/components/automation/MonacoEditor.vue
index 39a8c7f..773f1e0 100644
--- a/src/components/automation/MonacoEditor.vue
+++ b/src/components/automation/MonacoEditor.vue
@@ -70,7 +70,7 @@ interface Device
 {
     getDeviceId: string
     getAttribute(attrName: string): Promise<DeviceAttribute | undefined>
-    setAttribute(attrName: string, value: DeviceAttributeValue): void
+    setAttribute(attrName: string, value: DeviceAttributeValue): Promise<void>
 }
 enum DeviceEventType {
     deviceUpdateReceived = "deviceUpdateReceived",
diff --git a/src/stores/health.ts b/src/stores/health.ts
index 595bdb6..3fe285d 100644
--- a/src/stores/health.ts
+++ b/src/stores/health.ts
@@ -3,7 +3,7 @@ import { ref, reactive, type Ref } from "vue";
 import type { ChartData } from "chart.js";
 import ChartHelper from "../helper/ChartHelper";
 import { useBackendStore } from "@/stores/backend";
-import { apiFetch } from "@/utils/apiFetch";
+import type { Socket } from "socket.io-client";
 
 interface SystemInfo {
   process: {
@@ -47,7 +47,7 @@ type HealthChartData = {
 type HealthStore = {
   state: Ref<SystemInfo | undefined>;
   chartData: HealthChartData;
-  init: () => void;
+  init: (socket: Socket) => void;
 };
 
 export const useHealthStore = defineStore("health", (): HealthStore => {
@@ -94,46 +94,37 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
   });
 
   // actions
-  function init(): void {
-    const backendStore = useBackendStore();
+  function init(socket: Socket): void {
+    socket.on("healthMetrics", (data: SystemInfo) => {
+      state.value = data;
 
-    setInterval(async () => {
-      if (!backendStore.isServerOnline) {
-        return;
-      }
-
-      const response = await apiFetch(`/health`);
-      state.value = await response.json();
-    }, 500);
-
-    setInterval(() => {
-      if (!backendStore.isServerOnline || !chartData || !state.value) {
+      if (!chartData) {
         return;
       }
 
       chartData.processMemory.datasets[0].data.push({
         x: Date.now(),
-        y: Number((state.value.process.memoryUsage.rss / 1024 / 1024).toFixed(2)),
+        y: Number((data.process.memoryUsage.rss / 1024 / 1024).toFixed(2)),
       });
       chartData.processMemory.datasets[1].data.push({
         x: Date.now(),
-        y: Number((state.value.process.memoryUsage.heapTotal / 1024 / 1024).toFixed(2)),
+        y: Number((data.process.memoryUsage.heapTotal / 1024 / 1024).toFixed(2)),
       });
       chartData.processMemory.datasets[2].data.push({
         x: Date.now(),
-        y: Number((state.value.process.memoryUsage.heapUsed / 1024 / 1024).toFixed(2)),
+        y: Number((data.process.memoryUsage.heapUsed / 1024 / 1024).toFixed(2)),
       });
 
       chartData.systemCpu.datasets[0].data.push({
         x: Date.now(),
-        y: Number(state.value.system.cpu.usage.toFixed(2)),
+        y: Number(data.system.cpu.usage.toFixed(2)),
       });
 
       chartData.systemMemory.datasets[0].data.push({
         x: Date.now(),
-        y: Number(state.value.system.memory.usedMemPercentage.toFixed(2)),
+        y: Number(data.system.memory.usedMemPercentage.toFixed(2)),
       });
-    }, 425);
+    });
   }
 
   return {

From 404ce4d0bd5f927a358ef8acd669c627eddbdb3b Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Mon, 25 May 2026 15:57:23 +0200
Subject: [PATCH 2/3] Just show OS type, not name

---
 src/views/SystemHealthView.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/views/SystemHealthView.vue b/src/views/SystemHealthView.vue
index 0baf3b9..2f69cd8 100644
--- a/src/views/SystemHealthView.vue
+++ b/src/views/SystemHealthView.vue
@@ -87,9 +87,7 @@ const uptime = computed(() => {
                 </v-list-item>
                 <v-list-item class="px-1">
                   <v-list-item-title>Operating System</v-list-item-title>
-                  <v-list-item-subtitle>{{
-                    `${state.system.os.name} (${state.system.os.type})`
-                  }}</v-list-item-subtitle>
+                  <v-list-item-subtitle>{{ state.system.os.type }}</v-list-item-subtitle>
                 </v-list-item>
                 <v-list-item class="px-1">
                   <v-list-item-title>IP address</v-list-item-title>

From 9131170fca02c81d391c64ff34653d1b8e1eb473 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Mon, 25 May 2026 15:59:45 +0200
Subject: [PATCH 3/3] Remove unused import

---
 src/stores/health.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stores/health.ts b/src/stores/health.ts
index 3fe285d..464ecad 100644
--- a/src/stores/health.ts
+++ b/src/stores/health.ts
@@ -2,7 +2,6 @@ import { defineStore } from "pinia";
 import { ref, reactive, type Ref } from "vue";
 import type { ChartData } from "chart.js";
 import ChartHelper from "../helper/ChartHelper";
-import { useBackendStore } from "@/stores/backend";
 import type { Socket } from "socket.io-client";
 
 interface SystemInfo {