fix(docker/container): use nodeName to build links to networks used by containers (#12004)

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Network } from 'lucide-react';
 import { EndpointSettings, NetworkSettings } from 'docker-types/generated/1.41';
 
@@ -9,7 +10,7 @@ import { withMeta } from '@@/datatables/extend-options/withMeta';
 import { DockerContainer } from '../../types';
 
 import { TableNetwork } from './types';
-import { columns } from './columns';
+import { buildColumns } from './columns';
 import { ConnectNetworkForm } from './ConnectNetworkForm';
 
 const storageKey = 'container-networks';
@@ -25,6 +26,7 @@ export function ContainerNetworksDatatable({
   nodeName?: string;
 }) {
   const tableState = useTableState(store, storageKey);
+  const columns = useMemo(() => buildColumns({ nodeName }), [nodeName]);
 
   const networks: Array<TableNetwork> = Object.entries(dataset || {})
     .filter(isNetworkDefined)

app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx

@@ -10,51 +10,54 @@ import { LoadingButton } from '@@/buttons';
 import { TableNetwork, isContainerNetworkTableMeta } from './types';
 import { columnHelper } from './helper';
 
-export const actions = columnHelper.display({
-  header: 'Actions',
-  cell: Cell,
-});
+export function buildActions({ nodeName }: { nodeName?: string } = {}) {
+  return columnHelper.display({
+    header: 'Actions',
+    cell: Cell,
+  });
 
-function Cell({
-  row,
-  table: {
-    options: { meta },
-  },
-}: CellContext<TableNetwork, unknown>) {
-  const router = useRouter();
-  const environmentId = useEnvironmentId();
-  const disconnectMutation = useDisconnectContainer();
+  function Cell({
+    row,
+    table: {
+      options: { meta },
+    },
+  }: CellContext<TableNetwork, unknown>) {
+    const router = useRouter();
+    const environmentId = useEnvironmentId();
+    const disconnectMutation = useDisconnectContainer();
 
-  return (
-    <Authorized authorizations="DockerNetworkDisconnect">
-      <LoadingButton
-        color="dangerlight"
-        isLoading={disconnectMutation.isLoading}
-        loadingText="Leaving network..."
-        type="button"
-        onClick={handleSubmit}
-      >
-        Leave network
-      </LoadingButton>
-    </Authorized>
-  );
-
-  function handleSubmit() {
-    if (!isContainerNetworkTableMeta(meta)) {
-      throw new Error('Invalid row meta');
-    }
-
-    disconnectMutation.mutate(
-      {
-        environmentId,
-        networkId: row.original.id,
-        containerId: meta.containerId,
-      },
-      {
-        onSuccess() {
-          router.stateService.reload();
-        },
-      }
+    return (
+      <Authorized authorizations="DockerNetworkDisconnect">
+        <LoadingButton
+          color="dangerlight"
+          isLoading={disconnectMutation.isLoading}
+          loadingText="Leaving network..."
+          type="button"
+          onClick={handleSubmit}
+        >
+          Leave network
+        </LoadingButton>
+      </Authorized>
     );
+
+    function handleSubmit() {
+      if (!isContainerNetworkTableMeta(meta)) {
+        throw new Error('Invalid row meta');
+      }
+
+      disconnectMutation.mutate(
+        {
+          environmentId,
+          networkId: row.original.id,
+          containerId: meta.containerId,
+          nodeName,
+        },
+        {
+          onSuccess() {
+            router.stateService.reload();
+          },
+        }
+      );
+    }
   }
 }

app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx

@@ -1,30 +1,36 @@
 import { buildExpandColumn } from '@@/datatables/expand-column';
-import { buildNameColumn } from '@@/datatables/buildNameColumn';
+import { buildNameColumnFromObject } from '@@/datatables/buildNameColumn';
 
 import { TableNetwork } from './types';
 import { columnHelper } from './helper';
-import { actions } from './actions';
+import { buildActions } from './actions';
 
-export const columns = [
-  buildExpandColumn<TableNetwork>(),
-  {
-    ...buildNameColumn<TableNetwork>('name', 'docker.networks.network'),
-    header: 'Network',
-  },
-  columnHelper.accessor((item) => item.IPAddress || '-', {
-    header: 'IP Address',
-    id: 'ip',
-    enableSorting: false,
-  }),
-  columnHelper.accessor((item) => item.Gateway || '-', {
-    header: 'Gateway',
-    id: 'gateway',
-    enableSorting: false,
-  }),
-  columnHelper.accessor((item) => item.MacAddress || '-', {
-    header: 'MAC Address',
-    id: 'macAddress',
-    enableSorting: false,
-  }),
-  actions,
-];
+export function buildColumns({ nodeName }: { nodeName?: string } = {}) {
+  return [
+    buildExpandColumn<TableNetwork>(),
+    {
+      ...buildNameColumnFromObject<TableNetwork>({
+        nameKey: 'name',
+        path: 'docker.networks.network',
+        linkParamsBuilder: () => ({ nodeName }),
+      }),
+      header: 'Network',
+    },
+    columnHelper.accessor((item) => item.IPAddress || '-', {
+      header: 'IP Address',
+      id: 'ip',
+      enableSorting: false,
+    }),
+    columnHelper.accessor((item) => item.Gateway || '-', {
+      header: 'Gateway',
+      id: 'gateway',
+      enableSorting: false,
+    }),
+    columnHelper.accessor((item) => item.MacAddress || '-', {
+      header: 'MAC Address',
+      id: 'macAddress',
+      enableSorting: false,
+    }),
+    buildActions({ nodeName }),
+  ];
+}

app/react/docker/networks/ItemView/NetworkContainersTable.tsx

@@ -75,6 +75,7 @@ export function NetworkContainersTable({
                         containerId: container.Id,
                         environmentId,
                         networkId,
+                        nodeName,
                       });
                     }
                   }}

app/react/docker/networks/network.service.ts

@@ -56,13 +56,24 @@ export async function deleteNetwork(
 export async function disconnectContainer(
   environmentId: EnvironmentId,
   networkId: NetworkId,
-  containerId: ContainerId
+  containerId: ContainerId,
+  nodeName?: string
 ) {
   try {
-    await axios.post(buildUrl(environmentId, networkId, 'disconnect'), {
-      Container: containerId,
-      Force: false,
-    });
+    await axios.post(
+      buildUrl(environmentId, networkId, 'disconnect'),
+      {
+        Container: containerId,
+        Force: false,
+      },
+      nodeName
+        ? {
+            headers: {
+              [agentTargetHeader]: nodeName,
+            },
+          }
+        : undefined
+    );
     return { networkId, environmentId };
   } catch (e) {
     throw parseAxiosError(

app/react/docker/networks/queries.ts

@@ -67,11 +67,13 @@ export function useDisconnectContainer() {
       containerId,
       environmentId,
       networkId,
+      nodeName,
     }: {
       containerId: ContainerId;
       environmentId: EnvironmentId;
       networkId: NetworkId;
-    }) => disconnectContainer(environmentId, networkId, containerId),
+      nodeName?: string;
+    }) => disconnectContainer(environmentId, networkId, containerId, nodeName),
     {
       onSuccess: ({ networkId, environmentId }) => {
         notifySuccess('Container successfully disconnected', networkId);