From d2584f135db5295625d7e8200f816cf4a2faef36 Mon Sep 17 00:00:00 2001 From: rcourtman Date: Mon, 29 Sep 2025 16:22:59 +0000 Subject: [PATCH] Fix discovery list indicator alignment --- .../src/components/Settings/Settings.tsx | 380 +++++++++--------- 1 file changed, 190 insertions(+), 190 deletions(-) diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx index 56feb49f0..80208d2fa 100644 --- a/frontend-modern/src/components/Settings/Settings.tsx +++ b/frontend-modern/src/components/Settings/Settings.tsx @@ -1073,67 +1073,65 @@ const Settings: Component = () => {
-
-
{ - // Find the corresponding node in the WebSocket state - const stateNode = state.nodes.find(n => n.instance === node.name); - // Check if the node has an unhealthy connection or is offline - if (stateNode?.connectionHealth === 'unhealthy' || stateNode?.connectionHealth === 'error' || stateNode?.status === 'offline') { - return 'bg-red-500'; - } - // Check if connection is degraded (partial cluster connectivity) - if (stateNode?.connectionHealth === 'degraded') { - return 'bg-yellow-500'; - } - // Check if we have a healthy connection - if (stateNode && (stateNode.status === 'online' || stateNode.connectionHealth === 'healthy')) { - return 'bg-green-500'; - } - // Fall back to the last known config status if live data hasn't arrived yet - if (node.status === 'connected') { - return 'bg-green-500'; - } - if (node.status === 'error') { - return 'bg-red-500'; - } - if (node.status === 'pending' || node.status === 'disconnected') { - return 'bg-amber-500 animate-pulse'; - } - return 'bg-gray-400'; - })() +
{ + // Find the corresponding node in the WebSocket state + const stateNode = state.nodes.find(n => n.instance === node.name); + // Check if the node has an unhealthy connection or is offline + if (stateNode?.connectionHealth === 'unhealthy' || stateNode?.connectionHealth === 'error' || stateNode?.status === 'offline') { + return 'bg-red-500'; + } + // Check if connection is degraded (partial cluster connectivity) + if (stateNode?.connectionHealth === 'degraded') { + return 'bg-yellow-500'; + } + // Check if we have a healthy connection + if (stateNode && (stateNode.status === 'online' || stateNode.connectionHealth === 'healthy')) { + return 'bg-green-500'; + } + // Fall back to the last known config status if live data hasn't arrived yet + if (node.status === 'connected') { + return 'bg-green-500'; + } + if (node.status === 'error') { + return 'bg-red-500'; + } + if (node.status === 'pending' || node.status === 'disconnected') { + return 'bg-amber-500 animate-pulse'; + } + return 'bg-gray-400'; + })() }`}>
-

{node.name}

{node.host}

- - {node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`} - - {node.type === 'pve' && 'monitorVMs' in node && node.monitorVMs && VMs} - {node.type === 'pve' && 'monitorContainers' in node && node.monitorContainers && Containers} - {node.type === 'pve' && 'monitorStorage' in node && node.monitorStorage && Storage} - {node.type === 'pve' && 'monitorBackups' in node && node.monitorBackups && Backups} -
- -
-
- - - - - - - - - {'clusterName' in node ? node.clusterName : 'Unknown'} Cluster - - - {'clusterEndpoints' in node && node.clusterEndpoints ? node.clusterEndpoints.length : 0} nodes - -
-
+ + {node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`} + + {node.type === 'pve' && 'monitorVMs' in node && node.monitorVMs && VMs} + {node.type === 'pve' && 'monitorContainers' in node && node.monitorContainers && Containers} + {node.type === 'pve' && 'monitorStorage' in node && node.monitorStorage && Storage} + {node.type === 'pve' && 'monitorBackups' in node && node.monitorBackups && Backups} +
+ +
+
+ + + + + + + + + {'clusterName' in node ? node.clusterName : 'Unknown'} Cluster + + + {'clusterEndpoints' in node && node.clusterEndpoints ? node.clusterEndpoints.length : 0} nodes + +
+
{(endpoint) => (
@@ -1240,58 +1238,58 @@ const Settings: Component = () => { n.type === 'pve')}> {(server) => ( -
{ - // Pre-fill the modal with discovered server info - setEditingNode({ - id: '', - type: 'pve', - name: server.hostname || `pve-${server.ip}`, - host: `https://${server.ip}:${server.port}`, - user: '', - tokenName: '', - tokenValue: '', - verifySSL: false, - monitorVMs: true, - monitorContainers: true, - monitorStorage: true, - monitorBackups: true, - status: 'pending' - } as NodeConfigWithStatus); - setCurrentNodeType('pve'); - setShowNodeModal(true); - }} - > -
-
-
-
-
-
-

- {server.hostname || `Proxmox VE at ${server.ip}`} -

-

- {server.ip}:{server.port} -

-
- - Discovered - - - Click to configure - +
{ + // Pre-fill the modal with discovered server info + setEditingNode({ + id: '', + type: 'pve', + name: server.hostname || `pve-${server.ip}`, + host: `https://${server.ip}:${server.port}`, + user: '', + tokenName: '', + tokenValue: '', + verifySSL: false, + monitorVMs: true, + monitorContainers: true, + monitorStorage: true, + monitorBackups: true, + status: 'pending' + } as NodeConfigWithStatus); + setCurrentNodeType('pve'); + setShowNodeModal(true); + }} + > +
+
+
+
+
+

+ {server.hostname || `Proxmox VE at ${server.ip}`} +

+

+ {server.ip}:{server.port} +

+
+ + Discovered + + + Click to configure + +
+
+ + +
- - -
-
- )} - + )} +
@@ -1398,46 +1396,48 @@ const Settings: Component = () => {
-
{ - // Find the corresponding PBS instance in the WebSocket state - const statePBS = state.pbs.find(p => p.name === node.name); - // Check if the PBS has an unhealthy connection or is offline - if (statePBS?.connectionHealth === 'unhealthy' || statePBS?.connectionHealth === 'error' || statePBS?.status === 'offline') { - return 'bg-red-500'; - } - // Check if connection is degraded (not commonly used for PBS but keeping consistent) - if (statePBS?.connectionHealth === 'degraded') { - return 'bg-yellow-500'; - } - // Check if we have a healthy connection - if (statePBS && (statePBS.status === 'online' || statePBS.connectionHealth === 'healthy')) { - return 'bg-green-500'; - } - // Fall back to the last known config status if live data hasn't arrived yet - if (node.status === 'connected') { - return 'bg-green-500'; - } - if (node.status === 'error') { - return 'bg-red-500'; - } - if (node.status === 'pending' || node.status === 'disconnected') { - return 'bg-amber-500 animate-pulse'; - } - return 'bg-gray-400'; - })() - }`}>
-
+
+
{ + // Find the corresponding PBS instance in the WebSocket state + const statePBS = state.pbs.find(p => p.name === node.name); + // Check if the PBS has an unhealthy connection or is offline + if (statePBS?.connectionHealth === 'unhealthy' || statePBS?.connectionHealth === 'error' || statePBS?.status === 'offline') { + return 'bg-red-500'; + } + // Check if connection is degraded (not commonly used for PBS but keeping consistent) + if (statePBS?.connectionHealth === 'degraded') { + return 'bg-yellow-500'; + } + // Check if we have a healthy connection + if (statePBS && (statePBS.status === 'online' || statePBS.connectionHealth === 'healthy')) { + return 'bg-green-500'; + } + // Fall back to the last known config status if live data hasn't arrived yet + if (node.status === 'connected') { + return 'bg-green-500'; + } + if (node.status === 'error') { + return 'bg-red-500'; + } + if (node.status === 'pending' || node.status === 'disconnected') { + return 'bg-amber-500 animate-pulse'; + } + return 'bg-gray-400'; + })() + }`}>
+

{node.name}

{node.host}

- - {node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`} - - {node.type === 'pbs' && 'monitorDatastores' in node && node.monitorDatastores && Datastores} - {node.type === 'pbs' && 'monitorSyncJobs' in node && node.monitorSyncJobs && Sync Jobs} - {node.type === 'pbs' && 'monitorVerifyJobs' in node && node.monitorVerifyJobs && Verify Jobs} - {node.type === 'pbs' && 'monitorPruneJobs' in node && node.monitorPruneJobs && Prune Jobs} + + {node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`} + + {node.type === 'pbs' && 'monitorDatastores' in node && node.monitorDatastores && Datastores} + {node.type === 'pbs' && 'monitorSyncJobs' in node && node.monitorSyncJobs && Sync Jobs} + {node.type === 'pbs' && 'monitorVerifyJobs' in node && node.monitorVerifyJobs && Verify Jobs} + {node.type === 'pbs' && 'monitorPruneJobs' in node && node.monitorPruneJobs && Prune Jobs} +
@@ -1526,59 +1526,59 @@ const Settings: Component = () => { n.type === 'pbs')}> {(server) => ( -
{ - // Pre-fill the modal with discovered server info - setEditingNode({ - id: '', - type: 'pbs', - name: server.hostname || `pbs-${server.ip}`, - host: `https://${server.ip}:${server.port}`, - user: '', - tokenName: '', - tokenValue: '', - verifySSL: false, - monitorDatastores: true, - monitorSyncJobs: true, - monitorVerifyJobs: true, - monitorPruneJobs: true, - monitorGarbageJobs: true, - status: 'pending' - } as NodeConfigWithStatus); - setCurrentNodeType('pbs'); - setShowNodeModal(true); - }} - > -
-
-
-
-
-
-

- {server.hostname || `Backup Server at ${server.ip}`} -

-

- {server.ip}:{server.port} -

-
- - Discovered - - - Click to configure - +
{ + // Pre-fill the modal with discovered server info + setEditingNode({ + id: '', + type: 'pbs', + name: server.hostname || `pbs-${server.ip}`, + host: `https://${server.ip}:${server.port}`, + user: '', + tokenName: '', + tokenValue: '', + verifySSL: false, + monitorDatastores: true, + monitorSyncJobs: true, + monitorVerifyJobs: true, + monitorPruneJobs: true, + monitorGarbageJobs: true, + status: 'pending' + } as NodeConfigWithStatus); + setCurrentNodeType('pbs'); + setShowNodeModal(true); + }} + > +
+
+
+
+
+

+ {server.hostname || `Backup Server at ${server.ip}`} +

+

+ {server.ip}:{server.port} +

+
+ + Discovered + + + Click to configure + +
+
+ + +
- - -
-
- )} - + )} +