Offer health data through websocket

[heavyrubberslave]

Summary by CodeRabbit

Release Notes

• Improvements
  • Health metrics now update in real-time via Socket.IO connection instead of periodic polling for faster, more efficient system monitoring
  • Simplified operating system information display in the system health view by showing only the OS type

[coderabbitai]

📝 Walkthrough

Walkthrough

The app refactors health metrics from REST polling intervals to real-time Socket.IO events, updating the health store contract to accept a Socket connection, wiring the socket from App.vue, and adjusting the system view display. Additionally, Monaco's Device interface is updated to declare setAttribute as async.

Changes

Socket.IO Health Metrics

Layer / File(s)	Summary
Health store Socket.IO initialization src/stores/health.ts	Store imports Socket type, changes init() signature to init(socket: Socket), and replaces interval-based polling and chart-update loops with a socket.on("healthMetrics") listener that updates state and pushes chart datapoints for process memory, CPU, and used memory percentage.
App socket binding and view data display src/App.vue, src/views/SystemHealthView.vue	App initializes health store with the Socket.IO client instance inside the socket connect handler; system health view simplifies the OS subtitle to display only OS type instead of a combined name and type string.

Monaco Device Interface Type

Layer / File(s)	Summary
Device.setAttribute async type signature src/components/automation/MonacoEditor.vue	Device interface in the injected Monaco type declarations is updated so setAttribute returns Promise<void> instead of void.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• SlvCtrlPlus/slvctrlplus-frontend#41: Both PRs modify MonacoEditor.vue's Device interface method signatures to use promises.
• SlvCtrlPlus/slvctrlplus-frontend#25: Both PRs update socket.io connection setup in App.vue—PR #25 manages socket listener registration, and this PR uses the socket connect event to initialize health store with live metrics.

Suggested labels

patch

Poem

🐰 From polling in loops, now streaming so free,
Socket events bring health metrics in spree,
The view shows just OS type, simple and true,
Monaco promises its attributes anew!
Hop-hop! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Offer health data through websocket' directly and clearly reflects the main changes across all modified files: migrating from polling-based health data to websocket-driven updates.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/offer-health-through-websocket

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[heavyrubberslave]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/App.vue (1)

26-34: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Avoid stacking healthMetrics listeners on Socket.IO reconnects.

src/App.vue calls healthStore.init(io) inside the io.on("connect", ...) handler, so every reconnect re-runs it. In src/stores/health.ts, init(socket) registers socket.on("healthMetrics", ...) and there’s no socket.off("healthMetrics", ...) cleanup in place, so listeners can accumulate.

Proposed fix

 if (backendStore.backendUrl) {
   const io = useSocketIO() as Socket;
+  healthStore.init(io);
 
   io.on("connect", () => {
     backendStore.setServerOnline(true);
@@
     settingsStore.init();
     automationStore.init();
     devicesStore.init();
-    healthStore.init(io);
   });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/App.vue` around lines 26 - 34, App.vue is re-calling healthStore.init(io)
on every Socket.IO "connect", and healthStore.init(socket) attaches
socket.on("healthMetrics", ...) without removing prior listeners, causing
listener accumulation on reconnects; modify healthStore.init(socket) to avoid
duplicate handlers by either moving the healthStore.init(io) call outside the
io.on("connect", ...) handler in App.vue so it runs once, or change
healthStore.init to first remove any existing listener (call
socket.off("healthMetrics", handler) or socket.off("healthMetrics") before
socket.on) or keep a single stored handler reference in healthStore (e.g.,
this._healthHandler) and use socket.off with that reference before re-attaching
to ensure only one "healthMetrics" listener is registered.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/App.vue`:
- Around line 26-34: App.vue is re-calling healthStore.init(io) on every
Socket.IO "connect", and healthStore.init(socket) attaches
socket.on("healthMetrics", ...) without removing prior listeners, causing
listener accumulation on reconnects; modify healthStore.init(socket) to avoid
duplicate handlers by either moving the healthStore.init(io) call outside the
io.on("connect", ...) handler in App.vue so it runs once, or change
healthStore.init to first remove any existing listener (call
socket.off("healthMetrics", handler) or socket.off("healthMetrics") before
socket.on) or keep a single stored handler reference in healthStore (e.g.,
this._healthHandler) and use socket.off with that reference before re-attaching
to ensure only one "healthMetrics" listener is registered.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 79109e6e-ec60-420d-af12-42f5292027b3

📥 Commits

Reviewing files that changed from the base of the PR and between 4e3a954 and 9131170.

📒 Files selected for processing (4)

• src/App.vue
• src/components/automation/MonacoEditor.vue
• src/stores/health.ts
• src/views/SystemHealthView.vue