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

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 { ContainerListViewModel } 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

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

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

@@ -1,34 +1,37 @@
 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',
-      'docker-networks-name'
-    ),
-    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',
+        dataCy: 'docker-networks-name',
+        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 }),
+  ];
+}