From 1900fb695d0e7cb05472970a6270cce391f6d3cb Mon Sep 17 00:00:00 2001 From: LP B Date: Wed, 17 Jul 2024 14:40:05 +0200 Subject: [PATCH] fix(docker/container): use nodeName to build links to networks used by containers (#12002) --- app/docker/services/networkService.js | 2 - .../views/containers/edit/container.html | 12 +-- .../containers/edit/containerController.js | 46 +-------- .../components/datatables/buildNameColumn.tsx | 34 ++++++- .../ContainerNetworksDatatable.tsx | 4 +- .../ContainerNetworksDatatable/actions.tsx | 97 ++++++++++--------- .../ContainerNetworksDatatable/columns.tsx | 61 ++++++------ .../ItemView/NetworkContainersTable.tsx | 1 + .../queries/useDisconnectContainerMutation.ts | 16 ++- build/build_binary.sh | 2 +- 10 files changed, 134 insertions(+), 141 deletions(-) diff --git a/app/docker/services/networkService.js b/app/docker/services/networkService.js index 77d0d8236..dc407d404 100644 --- a/app/docker/services/networkService.js +++ b/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 }; diff --git a/app/docker/views/containers/edit/container.html b/app/docker/views/containers/edit/container.html index 9dbac0cdd..8d42fa32b 100644 --- a/app/docker/views/containers/edit/container.html +++ b/app/docker/views/containers/edit/container.html @@ -349,15 +349,5 @@ - + diff --git a/app/docker/views/containers/edit/containerController.js b/app/docker/views/containers/edit/containerController.js index 15c068e0a..f7fa00bab 100644 --- a/app/docker/views/containers/edit/containerController.js +++ b/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(); }, ]); diff --git a/app/react/components/datatables/buildNameColumn.tsx b/app/react/components/datatables/buildNameColumn.tsx index bc8ecc1b0..c159b1587 100644 --- a/app/react/components/datatables/buildNameColumn.tsx +++ b/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( nameKey: keyof T, path: string, @@ -12,6 +17,30 @@ export function buildNameColumn( idParam = 'id', idGetter: (row: T) => string = defaultGetRowId ): ColumnDef { + return buildNameColumnFromObject({ + nameKey, + path, + dataCy, + idParam, + idGetter, + }); +} + +export function buildNameColumnFromObject({ + nameKey, + path, + dataCy, + idParam = 'id', + idGetter = defaultGetRowId, + linkParamsBuilder = () => ({}), +}: { + nameKey: keyof T; + path: string; + dataCy: string; + idParam?: string; + idGetter?: (row: T) => string; + linkParamsBuilder?: (row: T) => UISrefProps['params']; +}): ColumnDef { const cell = createCell(); return { @@ -34,7 +63,10 @@ export function buildNameColumn( return ( diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx index 6aef43b29..d55fb213a 100644 --- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx +++ b/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 = Object.entries(dataset || {}) .filter(isNetworkDefined) diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx index 7e0ffcb89..795988b5e 100644 --- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx +++ b/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) { - 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 ( - - - Leave network - - - ); + function Cell({ + row: { + original: { id: networkId }, + }, + table: { + options: { meta }, + }, + }: CellContext) { + 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 ( + + + Leave network + + ); + + 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(); + }, + } + ); + } } } diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx index bb7579f28..53358b542 100644 --- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx +++ b/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(), - { - ...buildNameColumn( - '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(), + { + ...buildNameColumnFromObject({ + 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 }), + ]; +} diff --git a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx index 91dc453ba..c3f540d75 100644 --- a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx +++ b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx @@ -79,6 +79,7 @@ export function NetworkContainersTable({ disconnectContainer.mutate( { containerId: container.Id, + nodeName, }, { onSuccess: () => diff --git a/app/react/docker/networks/queries/useDisconnectContainerMutation.ts b/app/react/docker/networks/queries/useDisconnectContainerMutation.ts index 0b4682c55..cf74e2c5d 100644 --- a/app/react/docker/networks/queries/useDisconnectContainerMutation.ts +++ b/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) { diff --git a/build/build_binary.sh b/build/build_binary.sh index ca6a25d53..67d8726fb 100755 --- a/build/build_binary.sh +++ b/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)}