From 2102481ed0133b57228f7fcea7c9cbcd2186d398 Mon Sep 17 00:00:00 2001
From: Philipp <schlottmann@digital-droplets.de>
Date: Thu, 4 Jun 2026 14:31:53 +0200
Subject: [PATCH] changed poll and some UI bugs.

---
 agent/package-lock.json           |  3 +++
 agent/package.json                |  3 +++
 deploy/install-agent.sh           | 13 +++++++++++
 docs/deployment.md                |  2 ++
 frontend/src/App.jsx              | 27 ++++++++++++++-------
 frontend/src/components/Nodes.jsx | 39 ++++++++++++++++++++++++++++---
 management/src/routes/proxy.js    |  4 ++--
 7 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/agent/package-lock.json b/agent/package-lock.json
index ab32f3f..ee00f49 100644
--- a/agent/package-lock.json
+++ b/agent/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "incus-backup-ui-agent",
       "version": "0.1.0",
+      "engines": {
+        "node": ">=22.5.0"
+      },
       "dependencies": {
         "cors": "^2.8.5",
         "dotenv": "^16.4.7",
diff --git a/agent/package.json b/agent/package.json
index ef75dad..f527c6f 100644
--- a/agent/package.json
+++ b/agent/package.json
@@ -7,6 +7,9 @@
     "dev": "node --watch src/index.js",
     "start": "node src/index.js"
   },
+  "engines": {
+    "node": ">=22.5.0"
+  },
   "dependencies": {
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
diff --git a/deploy/install-agent.sh b/deploy/install-agent.sh
index f1f6c89..fdf2275 100755
--- a/deploy/install-agent.sh
+++ b/deploy/install-agent.sh
@@ -27,6 +27,18 @@ need_cmd() {
   command -v "$1" >/dev/null 2>&1 || fail "Required command not found: $1"
 }
 
+node_major_version() {
+  node -p "Number(process.versions.node.split('.')[0])"
+}
+
+check_node_version() {
+  need_cmd node
+  major=$(node_major_version)
+  if [ "$major" -lt 22 ]; then
+    fail "Node.js 22.5 or newer is required. Found: $(node -v). Install a current Node.js release and rerun this installer."
+  fi
+}
+
 as_root() {
   if [ "$(id -u)" -eq 0 ]; then
     "$@"
@@ -177,6 +189,7 @@ configure_env() {
 
 install_dependencies() {
   need_cmd npm
+  check_node_version
   log "Installing agent dependencies..."
   if [ -f "$AGENT_DIR/package-lock.json" ]; then
     npm --prefix "$AGENT_DIR" ci --omit=dev
diff --git a/docs/deployment.md b/docs/deployment.md
index a91b024..7d60b43 100644
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -4,6 +4,8 @@
 
 Run this on every Incus host. The installer clones or updates the repository, creates the agent state/config directories, prepares `agent/.env`, installs npm dependencies, installs the systemd unit, and starts the service:
 
+The agent requires Node.js 22.5 or newer because it uses Node's built-in SQLite module.
+
 ```bash
 curl -fsSL https://forgejo.digital-droplets.de/philschlo/incus-backup-ui/raw/branch/main/deploy/install-agent.sh | sudo sh
 ```
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3fa0bb5..94cb881 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -36,7 +36,6 @@ export default function App() {
   const [loading, setLoading] = useState(true);
 
   async function refresh() {
-    setError('');
     try {
       const [healthResult, vmsResult, jobsResult, schedulesResult, nodesResult] = await Promise.allSettled([
         api.get('/health'),
@@ -47,20 +46,20 @@ export default function App() {
       ]);
 
       if (healthResult.status === 'fulfilled') {
-        setHealth(healthResult.value.data);
+        setStableState(setHealth, healthResult.value.data);
       } else {
-        setHealth(healthResult.reason.response?.data || { ok: false, checks: {} });
+        setStableState(setHealth, healthResult.reason.response?.data || { ok: false, checks: {} });
       }
 
-      if (vmsResult.status === 'fulfilled') setVms(vmsResult.value.data);
-      if (jobsResult.status === 'fulfilled') setJobs(jobsResult.value.data);
-      if (schedulesResult.status === 'fulfilled') setSchedules(schedulesResult.value.data);
-      if (nodesResult.status === 'fulfilled') setNodes(nodesResult.value.data);
+      if (vmsResult.status === 'fulfilled') setStableState(setVms, vmsResult.value.data);
+      if (jobsResult.status === 'fulfilled') setStableState(setJobs, jobsResult.value.data);
+      if (schedulesResult.status === 'fulfilled') setStableState(setSchedules, schedulesResult.value.data);
+      if (nodesResult.status === 'fulfilled') setStableState(setNodes, nodesResult.value.data);
 
       const firstFailure = [healthResult, vmsResult, jobsResult, schedulesResult, nodesResult].find((result) => result.status === 'rejected');
-      if (firstFailure) setError(errorMessage(firstFailure.reason));
+      setStableState(setError, firstFailure ? errorMessage(firstFailure.reason) : '');
     } catch (requestError) {
-      setError(errorMessage(requestError));
+      setStableState(setError, errorMessage(requestError));
     } finally {
       setLoading(false);
     }
@@ -227,6 +226,16 @@ export default function App() {
   }
 }
 
+function setStableState(setter, nextValue) {
+  setter((currentValue) => (
+    stableStringify(currentValue) === stableStringify(nextValue) ? currentValue : nextValue
+  ));
+}
+
+function stableStringify(value) {
+  return JSON.stringify(value);
+}
+
 function NavButton({ active, icon: Icon, label, onClick }) {
   return (
     <button
diff --git a/frontend/src/components/Nodes.jsx b/frontend/src/components/Nodes.jsx
index dc69fa4..90267d6 100644
--- a/frontend/src/components/Nodes.jsx
+++ b/frontend/src/components/Nodes.jsx
@@ -4,6 +4,7 @@ import { api, errorMessage } from '../api.js';
 
 export function Nodes({ nodes, onChanged }) {
   const [drafts, setDrafts] = useState(() => nodes);
+  const [dirtyIds, setDirtyIds] = useState(() => new Set());
   const [newNode, setNewNode] = useState({ name: '', baseUrl: '', token: '', enabled: true });
   const [message, setMessage] = useState('');
   const [error, setError] = useState('');
@@ -29,6 +30,7 @@ export function Nodes({ nodes, onChanged }) {
       const body = { ...node };
       if (!body.token) delete body.token;
       await api.put(`/nodes/${encodeURIComponent(node.id)}`, body);
+      setDirtyIds((current) => withoutId(current, node.id));
       setMessage('Node saved.');
       await onChanged();
     } catch (requestError) {
@@ -53,6 +55,7 @@ export function Nodes({ nodes, onChanged }) {
     setMessage('');
     try {
       await api.delete(`/nodes/${encodeURIComponent(node.id)}`);
+      setDirtyIds((current) => withoutId(current, node.id));
       setMessage('Node deleted.');
       await onChanged();
     } catch (requestError) {
@@ -61,12 +64,30 @@ export function Nodes({ nodes, onChanged }) {
   }
 
   function updateDraft(id, values) {
+    setDirtyIds((current) => withId(current, id));
     setDrafts((current) => current.map((node) => node.id === id ? { ...node, ...values } : node));
   }
 
+  async function toggleNodeEnabled(node, enabled) {
+    setError('');
+    setMessage('');
+    setDrafts((current) => current.map((draft) => draft.id === node.id ? { ...draft, enabled } : draft));
+    try {
+      await api.put(`/nodes/${encodeURIComponent(node.id)}`, { enabled });
+      setMessage(enabled ? 'Node enabled.' : 'Node disabled.');
+      await onChanged();
+    } catch (requestError) {
+      setError(errorMessage(requestError));
+      await onChanged();
+    }
+  }
+
   useEffect(() => {
-    setDrafts(nodes);
-  }, [nodes]);
+    setDrafts((current) => {
+      const currentById = new Map(current.map((node) => [node.id, node]));
+      return nodes.map((node) => dirtyIds.has(node.id) ? { ...node, ...currentById.get(node.id) } : node);
+    });
+  }, [dirtyIds, nodes]);
 
   return (
     <section className="space-y-5">
@@ -107,7 +128,7 @@ export function Nodes({ nodes, onChanged }) {
               {drafts.map((node) => (
                 <tr key={node.id}>
                   <td className="px-4 py-3">
-                    <input checked={node.enabled} className="h-4 w-4 accent-cyan-500" onChange={(event) => updateDraft(node.id, { enabled: event.target.checked })} type="checkbox" />
+                    <input checked={node.enabled} className="h-4 w-4 accent-cyan-500" onChange={(event) => toggleNodeEnabled(node, event.target.checked)} type="checkbox" />
                   </td>
                   <td className="px-4 py-3"><input className="h-9 w-full rounded-md border border-zinc-700 bg-zinc-950 px-2 text-zinc-100" onChange={(event) => updateDraft(node.id, { name: event.target.value })} value={node.name} /></td>
                   <td className="px-4 py-3"><input className="h-9 w-full rounded-md border border-zinc-700 bg-zinc-950 px-2 text-zinc-100" onChange={(event) => updateDraft(node.id, { baseUrl: event.target.value })} value={node.baseUrl} /></td>
@@ -131,6 +152,18 @@ export function Nodes({ nodes, onChanged }) {
   );
 }
 
+function withId(set, id) {
+  const next = new Set(set);
+  next.add(id);
+  return next;
+}
+
+function withoutId(set, id) {
+  const next = new Set(set);
+  next.delete(id);
+  return next;
+}
+
 function Input({ label, onChange, placeholder = '', type = 'text', value }) {
   return (
     <label className="block text-sm text-zinc-300">
diff --git a/management/src/routes/proxy.js b/management/src/routes/proxy.js
index 44a07c7..fee40b4 100644
--- a/management/src/routes/proxy.js
+++ b/management/src/routes/proxy.js
@@ -28,7 +28,7 @@ proxyRouter.get('/vms', async (_req, res) => {
   const rows = [];
   await Promise.all(nodes.map(async (node) => {
     try {
-      const vms = await agentRequest(node, '/vms');
+      const vms = await agentRequest(node, '/vms', { timeout: 8000 });
       for (const vm of vms) {
         rows.push({ ...vm, id: `${node.id}:${vm.name}`, nodeId: node.id, nodeName: node.name });
       }
@@ -45,7 +45,7 @@ proxyRouter.get('/jobs', async (_req, res) => {
   const rows = [];
   await Promise.all(nodes.map(async (node) => {
     try {
-      const jobs = await agentRequest(node, '/jobs');
+      const jobs = await agentRequest(node, '/jobs', { timeout: 8000 });
       for (const job of jobs) rows.push({ ...job, nodeId: node.id, nodeName: node.name });
     } catch {
       recordNodeHealth(node.id, 'error');