From 35ab52b75b1addbcdc316bff9cfd72d8a09a3243 Mon Sep 17 00:00:00 2001 From: rcourtman Date: Wed, 29 Oct 2025 11:00:04 +0000 Subject: [PATCH] Align Docker drawer cards with Proxmox layout --- .../components/Docker/DockerUnifiedTable.tsx | 254 +++++++++--------- 1 file changed, 131 insertions(+), 123 deletions(-) diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx index f4d1142..f937b63 100644 --- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx +++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx @@ -732,19 +732,19 @@ const DockerContainerRow: Component<{ -
+
0}> -
-
+
+
Ports
-
+
{container.ports!.map((port) => { const label = port.publicPort ? `${port.publicPort}:${port.privatePort}/${port.protocol}` : `${port.privatePort}/${port.protocol}`; return ( - + {label} ); @@ -754,20 +754,26 @@ const DockerContainerRow: Component<{ 0}> -
-
+
+
Networks
-
+
{container.networks!.map((network) => ( -
- {network.name} - - IPv4: {network.ipv4} - - - IPv6: {network.ipv6} - +
+
{network.name}
+
+ + + {network.ipv4} + + + + + {network.ipv6} + + +
))}
@@ -775,13 +781,13 @@ const DockerContainerRow: Component<{ 0}> -
-
+
+
Labels
-
+
{Object.entries(container.labels!).map(([key, value]) => ( - + {key} : {value} @@ -1154,110 +1160,112 @@ const DockerServiceRow: Component<{ -
-
- Tasks - - {tasks.length} {tasks.length === 1 ? 'entry' : 'entries'} - -
-
- - - - - - - - - - - - - - - {(task) => { - const container = findContainerForTask(host.containers || [], task); - const cpu = container?.cpuPercent ?? 0; - const mem = container?.memoryPercent ?? 0; - const updated = ensureMs(task.updatedAt ?? task.createdAt ?? task.startedAt); - const taskLabel = () => { - if (task.containerName) return task.containerName; - if (task.containerId) return task.containerId.slice(0, 12); - if (task.slot !== undefined) return `slot-${task.slot}`; - return task.id ?? 'Task'; - }; - const taskTitle = () => { - const label = taskLabel(); - if (task.containerId && task.containerId !== label) { - return `${label} \u2014 ${task.containerId}`; - } - if (task.id && task.id !== label) { - return `${label} \u2014 ${task.id}`; - } - return label; - }; - const state = toLower(task.currentState ?? task.desiredState ?? 'unknown'); - const stateClass = () => { - if (state === 'running') { - return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'; - } - if (state === 'failed' || state === 'error') { - return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'; - } - return 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300'; - }; - return ( - - - - - - - - + + + + + + + + ); + }} + + +
TaskTypeNodeStateCPUMemoryUpdated
-
- - {taskLabel()} - -
- 		- - Task - - - {task.nodeName || task.nodeId || '—'} - - - {task.currentState || task.desiredState || 'Unknown'} - - - 0} fallback={—}> - - - - 0} fallback={—}> - - - - - {(timestamp) => ( - - {formatRelativeTime(timestamp())} +
+
+
+ Tasks + + {tasks.length} {tasks.length === 1 ? 'entry' : 'entries'} + +
+
+ + + + + + + + + + + + + + + {(task) => { + const container = findContainerForTask(host.containers || [], task); + const cpu = container?.cpuPercent ?? 0; + const mem = container?.memoryPercent ?? 0; + const updated = ensureMs(task.updatedAt ?? task.createdAt ?? task.startedAt); + const taskLabel = () => { + if (task.containerName) return task.containerName; + if (task.containerId) return task.containerId.slice(0, 12); + if (task.slot !== undefined) return `slot-${task.slot}`; + return task.id ?? 'Task'; + }; + const taskTitle = () => { + const label = taskLabel(); + if (task.containerId && task.containerId !== label) { + return `${label} \u2014 ${task.containerId}`; + } + if (task.id && task.id !== label) { + return `${label} \u2014 ${task.id}`; + } + return label; + }; + const state = toLower(task.currentState ?? task.desiredState ?? 'unknown'); + const stateClass = () => { + if (state === 'running') { + return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'; + } + if (state === 'failed' || state === 'error') { + return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'; + } + return 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300'; + }; + return ( + + - - ); - }} - - -
TaskTypeNodeStateCPUMemoryUpdated
+
+ + {taskLabel()} - )} - -
+
+
+ + Task + + + {task.nodeName || task.nodeId || '—'} + + + {task.currentState || task.desiredState || 'Unknown'} + + + 0} fallback={—}> + + + + 0} fallback={—}> + + + + + {(timestamp) => ( + + {formatRelativeTime(timestamp())} + + )} + +
+