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

app/docker/services/networkService.js

@@ -70,22 +70,6 @@ angular.module('portainer.docker').factory('NetworkService', [
       return Network.remove({ id: id }).$promise;
     };
 
-    service.disconnectContainer = function (networkId, containerId, force) {
-      return Network.disconnect({ id: networkId }, { Container: containerId, Force: force }).$promise;
-    };
-
-    service.connectContainer = function (networkId, containerId, aliases) {
-      var payload = {
-        Container: containerId,
-      };
-      if (aliases) {
-        payload.EndpointConfig = {
-          Aliases: aliases,
-        };
-      }
-      return Network.connect({ id: networkId }, payload).$promise;
-    };
-
     return service;
   },
 ]);

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

@@ -14,37 +14,13 @@ angular.module('portainer.docker').controller('ContainerController', [
   '$filter',
   '$async',
   'Commit',
-  'ContainerHelper',
   'ContainerService',
   'ImageHelper',
-  'NetworkService',
   'Notifications',
-  'ResourceControlService',
-  'RegistryService',
-  'ImageService',
   'HttpRequestHelper',
   'Authentication',
   'endpoint',
-  function (
-    $q,
-    $scope,
-    $state,
-    $transition$,
-    $filter,
-    $async,
-    Commit,
-    ContainerHelper,
-    ContainerService,
-    ImageHelper,
-    NetworkService,
-    Notifications,
-    ResourceControlService,
-    RegistryService,
-    ImageService,
-    HttpRequestHelper,
-    Authentication,
-    endpoint
-  ) {
+  function ($q, $scope, $state, $transition$, $filter, $async, Commit, ContainerService, ImageHelper, Notifications, HttpRequestHelper, Authentication, endpoint) {
     $scope.resourceType = ResourceControlType.Container;
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
@@ -61,8 +37,6 @@ angular.module('portainer.docker').controller('ContainerController', [
 
     $scope.state = {
       recreateContainerInProgress: false,
-      joinNetworkInProgress: false,
-      leaveNetworkInProgress: false,
       pullImageValidity: false,
     };
 
@@ -225,36 +199,6 @@ angular.module('portainer.docker').controller('ContainerController', [
         });
     };
 
-    $scope.containerLeaveNetwork = function containerLeaveNetwork(container, networkId) {
-      $scope.state.leaveNetworkInProgress = true;
-      NetworkService.disconnectContainer(networkId, container.Id, false)
-        .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;
@@ -349,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,16 +1,42 @@
 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,
   idParam = 'id',
   idGetter: (row: T) => string = defaultGetRowId<T>
 ): ColumnDef<T> {
+  return buildNameColumnFromObject({
+    nameKey,
+    path,
+    idParam,
+    idGetter,
+  });
+}
+
+export function buildNameColumnFromObject<T extends DefaultType>({
+  nameKey,
+  path,
+  idParam = 'id',
+  idGetter = defaultGetRowId<T>,
+  linkParamsBuilder = () => ({}),
+}: {
+  nameKey: keyof T;
+  path: string;
+  idParam?: string;
+  idGetter?: (row: T) => string;
+  linkParamsBuilder?: (row: T) => UISrefProps['params'];
+}): ColumnDef<T> {
   const cell = createCell();
 
   return {
@@ -33,7 +59,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}
         >
           {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 { 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,
-});
-
-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');
-    }
+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();
+
+    return (
+      <Authorized authorizations="DockerNetworkDisconnect">
+        <LoadingButton
+          color="dangerlight"
+          isLoading={disconnectMutation.isLoading}
+          loadingText="Leaving network..."
+          type="button"
+          onClick={handleSubmit}
+        >
+          Leave network
+        </LoadingButton>
+      </Authorized>
+    );
 
-    disconnectMutation.mutate(
-      {
-        environmentId,
-        networkId: row.original.id,
-        containerId: meta.containerId,
-      },
-      {
-        onSuccess() {
-          router.stateService.reload();
-        },
+    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);

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