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

app/react/components/datatables/buildNameColumn.tsx

@@ -1,10 +1,15 @@
 import { ColumnDef, CellContext } from '@tanstack/react-table';
+import { UISrefProps } from '@uirouter/react';
 
 import { Link } from '@@/Link';
 
 import { DefaultType } from './types';
 import { defaultGetRowId } from './defaultGetRowId';
 
+/**
+ * @deprecated Use `buildNameColumnFromObject` instead
+ * @todo Replace `buildNameColumnFromObject` and rename to `buildNameColumn`
+ */
 export function buildNameColumn<T extends DefaultType>(
   nameKey: keyof T,
   path: string,
@@ -12,6 +17,30 @@ export function buildNameColumn<T extends DefaultType>(
   idParam = 'id',
   idGetter: (row: T) => string = defaultGetRowId<T>
 ): ColumnDef<T> {
+  return buildNameColumnFromObject({
+    nameKey,
+    path,
+    dataCy,
+    idParam,
+    idGetter,
+  });
+}
+
+export function buildNameColumnFromObject<T extends DefaultType>({
+  nameKey,
+  path,
+  dataCy,
+  idParam = 'id',
+  idGetter = defaultGetRowId<T>,
+  linkParamsBuilder = () => ({}),
+}: {
+  nameKey: keyof T;
+  path: string;
+  dataCy: string;
+  idParam?: string;
+  idGetter?: (row: T) => string;
+  linkParamsBuilder?: (row: T) => UISrefProps['params'];
+}): ColumnDef<T> {
   const cell = createCell();
 
   return {
@@ -34,7 +63,10 @@ export function buildNameColumn<T extends DefaultType>(
       return (
         <Link
           to={path}
-          params={{ [idParam]: idGetter(row.original) }}
+          params={{
+            ...linkParamsBuilder(row.original),
+            [idParam]: idGetter(row.original),
+          }}
           title={name}
           data-cy={`${dataCy}_${name}`}
         >

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 }),
+  ];
+}

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

@@ -79,6 +79,7 @@ export function NetworkContainersTable({
                       disconnectContainer.mutate(
                         {
                           containerId: container.Id,
+                          nodeName,
                         },
                         {
                           onSuccess: () =>

app/react/docker/networks/queries/useDisconnectContainerMutation.ts

@@ -9,6 +9,7 @@ import {
 } from '@/react-tools/react-query';
 
 import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+import { withAgentTargetHeader } from '../../proxy/queries/utils';
 import { ContainerId } from '../../containers/types';
 import { NetworkId } from '../types';
 
@@ -24,8 +25,13 @@ export function useDisconnectContainer({
   const client = useQueryClient();
 
   return useMutation(
-    ({ containerId }: { containerId: ContainerId }) =>
-      disconnectContainer(environmentId, networkId, containerId),
+    ({
+      containerId,
+      nodeName,
+    }: {
+      containerId: ContainerId;
+      nodeName?: string;
+    }) => disconnectContainer(environmentId, networkId, containerId, nodeName),
     mutationOptions(
       withInvalidate(client, [queryKeys.item(environmentId, networkId)]),
       withError('Unable to disconnect container from network')
@@ -43,7 +49,8 @@ export function useDisconnectContainer({
 export async function disconnectContainer(
   environmentId: EnvironmentId,
   networkId: NetworkId,
-  containerId: ContainerId
+  containerId: ContainerId,
+  nodeName?: string
 ) {
   try {
     await axios.post(
@@ -51,7 +58,8 @@ export async function disconnectContainer(
       {
         Container: containerId,
         Force: false,
-      }
+      },
+      { headers: { ...withAgentTargetHeader(nodeName) } }
     );
     return { networkId, environmentId };
   } catch (err) {