From 078248770e72fad431aa9807970896ec50223970 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 9 Nov 2025 18:03:38 +0000
Subject: [PATCH] Fix Docker host custom display name not showing in main
 Docker tab RESOURCE column (related to #662)

The previous fix (a1ba915ca) correctly added customDisplayName to the WebSocket
payload and made it persist in Settings, but the main Docker tab's RESOURCE
column still showed the default name.

DockerUnifiedTable had four locations that built display names but ignored
customDisplayName:
- DockerHostGroupHeader (RESOURCE column header) - line 549
- containerMatchesToken (search/filter logic) - line 391
- serviceMatchesToken (search/filter logic) - line 472
- sortedHosts (host sorting logic) - lines 1879-1880

All four now prioritize customDisplayName first, matching the pattern used in
DockerHostSummaryTable and Settings (customDisplayName || displayName ||
hostname || id).

This ensures custom Docker host names display consistently across the entire UI.
---
 .../src/components/Docker/DockerUnifiedTable.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index eb910f4..47ec0b2 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -388,7 +388,7 @@ const containerMatchesToken = (
 ) => {
   const state = toLower(container.state);
   const health = toLower(container.health);
-  const hostName = toLower(host.displayName ?? host.hostname ?? host.id);
+  const hostName = toLower(host.customDisplayName ?? host.displayName ?? host.hostname ?? host.id);
 
   if (token.key === 'name') {
     return (
@@ -469,7 +469,7 @@ const containerMatchesToken = (
 };
 
 const serviceMatchesToken = (token: SearchToken, host: DockerHost, service: DockerService) => {
-  const hostName = toLower(host.displayName ?? host.hostname ?? host.id);
+  const hostName = toLower(host.customDisplayName ?? host.displayName ?? host.hostname ?? host.id);
   const serviceName = toLower(service.name ?? service.id);
   const image = toLower(service.image);
 
@@ -546,7 +546,7 @@ const buildRowId = (host: DockerHost, row: DockerRow) => {
 const GROUPED_RESOURCE_INDENT = 'pl-5 sm:pl-6 lg:pl-8';
 
 const DockerHostGroupHeader: Component<{ host: DockerHost; colspan: number }> = (props) => {
-  const displayName = props.host.displayName || props.host.hostname || props.host.id;
+  const displayName = props.host.customDisplayName || props.host.displayName || props.host.hostname || props.host.id;
   return (
     <tr class="bg-gray-50 dark:bg-gray-900/40">
       <td colSpan={props.colspan} class="py-0.5 pr-2 pl-4">
@@ -1876,8 +1876,8 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
   const sortedHosts = createMemo(() => {
     const hosts = props.hosts || [];
     return [...hosts].sort((a, b) => {
-      const aName = a.displayName || a.hostname || a.id;
-      const bName = b.displayName || b.hostname || b.id;
+      const aName = a.customDisplayName || a.displayName || a.hostname || a.id;
+      const bName = b.customDisplayName || b.displayName || b.hostname || b.id;
       return aName.localeCompare(bName);
     });
   });