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

app/docker/services/networkService.js

@@ -2,7 +2,6 @@ import { createNetwork } from '@/react/docker/networks/queries/useCreateNetworkM
 import { getNetwork } from '@/react/docker/networks/queries/useNetwork';
 import { getNetworks } from '@/react/docker/networks/queries/useNetworks';
 import { deleteNetwork } from '@/react/docker/networks/queries/useDeleteNetworkMutation';
-import { disconnectContainer } from '@/react/docker/networks/queries/useDisconnectContainerMutation';
 import { connectContainer } from '@/react/docker/networks/queries/useConnectContainerMutation';
 
 import { NetworkViewModel } from '../models/network';
@@ -18,7 +17,6 @@ function NetworkServiceFactory(AngularToReact) {
     network: useAxios(injectEnvironmentId(networkAngularJS)), // service edit
     networks: useAxios(injectEnvironmentId(networksAngularJS)), // macvlan form + container edit + dashboard + service create + service edit + custom templates list + templates list
     remove: useAxios(injectEnvironmentId(deleteNetwork)), // networks list
-    disconnectContainer: useAxios(injectEnvironmentId(disconnectContainer)), // container edit
     connectContainer: useAxios(injectEnvironmentId(connectContainerAngularJS)), // container edit
   };
 

app/docker/views/containers/edit/container.html

@@ -349,15 +349,5 @@
   </div>
 </div>
 
-<docker-container-networks-datatable
-  ng-if="container.NetworkSettings.Networks"
-  dataset="container.NetworkSettings.Networks"
-  container="container"
-  available-networks="availableNetworks"
-  on-join="(containerJoinNetwork)"
-  join-in-progress="state.joinNetworkInProgress"
-  on-leave="(containerLeaveNetwork)"
-  leave-in-progress="state.leaveNetworkInProgress"
-  node-name="nodeName"
->
+<docker-container-networks-datatable ng-if="container.NetworkSettings.Networks" dataset="container.NetworkSettings.Networks" container="container" node-name="nodeName">
 </docker-container-networks-datatable>

app/docker/views/containers/edit/containerController.js

@@ -16,12 +16,11 @@ angular.module('portainer.docker').controller('ContainerController', [
   '$async',
   'ContainerService',
   'ImageHelper',
-  'NetworkService',
   'Notifications',
   'HttpRequestHelper',
   'Authentication',
   'endpoint',
-  function ($q, $scope, $state, $transition$, $filter, $async, ContainerService, ImageHelper, NetworkService, Notifications, HttpRequestHelper, Authentication, endpoint) {
+  function ($q, $scope, $state, $transition$, $filter, $async, ContainerService, ImageHelper, Notifications, HttpRequestHelper, Authentication, endpoint) {
     $scope.resourceType = ResourceControlType.Container;
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
@@ -38,8 +37,6 @@ angular.module('portainer.docker').controller('ContainerController', [
 
     $scope.state = {
       recreateContainerInProgress: false,
-      joinNetworkInProgress: false,
-      leaveNetworkInProgress: false,
       pullImageValidity: false,
     };
 
@@ -202,36 +199,6 @@ angular.module('portainer.docker').controller('ContainerController', [
         });
     };
 
-    $scope.containerLeaveNetwork = function containerLeaveNetwork(container, networkId) {
-      $scope.state.leaveNetworkInProgress = true;
-      NetworkService.disconnectContainer(networkId, container.Id)
-        .then(function success() {
-          Notifications.success('Container left network', container.Id);
-          $state.reload();
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to disconnect container from network');
-        })
-        .finally(function final() {
-          $scope.state.leaveNetworkInProgress = false;
-        });
-    };
-
-    $scope.containerJoinNetwork = function containerJoinNetwork(container, networkId) {
-      $scope.state.joinNetworkInProgress = true;
-      NetworkService.connectContainer(networkId, container.Id)
-        .then(function success() {
-          Notifications.success('Container joined network', container.Id);
-          $state.reload();
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to connect container to network');
-        })
-        .finally(function final() {
-          $scope.state.joinNetworkInProgress = false;
-        });
-    };
-
     async function commitContainerAsync() {
       $scope.config.commitInProgress = true;
       const registryModel = $scope.config.RegistryModel;
@@ -326,17 +293,6 @@ angular.module('portainer.docker').controller('ContainerController', [
       }
     }
 
-    var provider = $scope.applicationState.endpoint.mode.provider;
-    var apiVersion = $scope.applicationState.endpoint.apiVersion;
-    NetworkService.networks(provider === 'DOCKER_STANDALONE' || provider === 'DOCKER_SWARM_MODE', false, provider === 'DOCKER_SWARM_MODE' && apiVersion >= 1.25)
-      .then(function success(data) {
-        var networks = data;
-        $scope.availableNetworks = networks;
-      })
-      .catch(function error(err) {
-        Notifications.error('Failure', err, 'Unable to retrieve networks');
-      });
-
     update();
   },
 ]);

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) {

build/build_binary.sh

@@ -8,7 +8,7 @@ mkdir -p dist
 BUILDNUMBER=${BUILDNUMBER:-"N/A"}
 CONTAINER_IMAGE_TAG=${CONTAINER_IMAGE_TAG:-"N/A"}
 NODE_VERSION=${NODE_VERSION:-$(node -v)}
-YARN_VERSION=${YARN_VERSION:-$(yarn --version))}
+YARN_VERSION=${YARN_VERSION:-$(yarn --version)}
 WEBPACK_VERSION=${WEBPACK_VERSION:-$(yarn list webpack --depth=0 | grep webpack | awk -F@ '{print $2}')}
 GO_VERSION=${GO_VERSION:-$(go version | awk '{print $3}')}
 GIT_COMMIT_HASH=${GIT_COMMIT_HASH:-$(git rev-parse --short HEAD)}