2022-05-09 21:01:15 +00:00
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
import { useRouter, useCurrentStateAndParams } from '@uirouter/react';
|
|
|
|
import { useQueryClient } from 'react-query';
|
|
|
|
import _ from 'lodash';
|
|
|
|
|
|
|
|
import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
|
|
|
|
import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
|
2022-09-07 04:25:00 +00:00
|
|
|
import { AccessControlPanel } from '@/react/portainer/access-control/AccessControlPanel/AccessControlPanel';
|
|
|
|
import { ResourceControlType } from '@/react/portainer/access-control/types';
|
2022-06-26 14:16:50 +00:00
|
|
|
import { DockerContainer } from '@/react/docker/containers/types';
|
2022-09-07 04:25:00 +00:00
|
|
|
import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
|
2022-08-11 04:33:29 +00:00
|
|
|
import { useContainers } from '@/react/docker/containers/queries/containers';
|
2022-05-09 21:01:15 +00:00
|
|
|
|
2022-06-17 16:18:42 +00:00
|
|
|
import { PageHeader } from '@@/PageHeader';
|
|
|
|
|
2022-05-09 21:01:15 +00:00
|
|
|
import { useNetwork, useDeleteNetwork } from '../queries';
|
|
|
|
import { isSystemNetwork } from '../network.helper';
|
|
|
|
import { DockerNetwork, NetworkContainer } from '../types';
|
|
|
|
|
|
|
|
import { NetworkDetailsTable } from './NetworkDetailsTable';
|
|
|
|
import { NetworkOptionsTable } from './NetworkOptionsTable';
|
|
|
|
import { NetworkContainersTable } from './NetworkContainersTable';
|
|
|
|
|
2022-06-26 14:16:50 +00:00
|
|
|
export function ItemView() {
|
2022-05-09 21:01:15 +00:00
|
|
|
const router = useRouter();
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
|
|
|
const [networkContainers, setNetworkContainers] = useState<
|
|
|
|
NetworkContainer[]
|
|
|
|
>([]);
|
|
|
|
const {
|
|
|
|
params: { id: networkId, nodeName },
|
|
|
|
} = useCurrentStateAndParams();
|
|
|
|
const environmentId = useEnvironmentId();
|
|
|
|
|
|
|
|
const networkQuery = useNetwork(environmentId, networkId);
|
|
|
|
const deleteNetworkMutation = useDeleteNetwork();
|
|
|
|
const filters = {
|
|
|
|
network: [networkId],
|
|
|
|
};
|
2022-08-11 04:33:29 +00:00
|
|
|
const containersQuery = useContainers(environmentId, true, filters);
|
2022-05-09 21:01:15 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (networkQuery.data && containersQuery.data) {
|
|
|
|
setNetworkContainers(
|
|
|
|
filterContainersInNetwork(networkQuery.data, containersQuery.data)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}, [networkQuery.data, containersQuery.data]);
|
|
|
|
|
|
|
|
if (!networkQuery.data) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2022-06-17 16:21:41 +00:00
|
|
|
const network = networkQuery.data;
|
|
|
|
|
|
|
|
const resourceControl = network.Portainer?.ResourceControl
|
|
|
|
? new ResourceControlViewModel(network.Portainer.ResourceControl)
|
|
|
|
: undefined;
|
|
|
|
|
2022-05-09 21:01:15 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<PageHeader
|
|
|
|
title="Network details"
|
|
|
|
breadcrumbs={[
|
|
|
|
{ link: 'docker.networks', label: 'Networks' },
|
|
|
|
{
|
|
|
|
link: 'docker.networks.network',
|
|
|
|
label: networkQuery.data.Name,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
<NetworkDetailsTable
|
|
|
|
network={networkQuery.data}
|
|
|
|
onRemoveNetworkClicked={onRemoveNetworkClicked}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<AccessControlPanel
|
|
|
|
onUpdateSuccess={() =>
|
|
|
|
queryClient.invalidateQueries([
|
|
|
|
'environments',
|
|
|
|
environmentId,
|
|
|
|
'docker',
|
|
|
|
'networks',
|
|
|
|
networkId,
|
|
|
|
])
|
|
|
|
}
|
2022-06-17 16:21:41 +00:00
|
|
|
resourceControl={resourceControl}
|
2022-05-09 21:01:15 +00:00
|
|
|
resourceType={ResourceControlType.Network}
|
|
|
|
disableOwnershipChange={isSystemNetwork(networkQuery.data.Name)}
|
|
|
|
resourceId={networkId}
|
|
|
|
/>
|
|
|
|
<NetworkOptionsTable options={networkQuery.data.Options} />
|
|
|
|
<NetworkContainersTable
|
|
|
|
networkContainers={networkContainers}
|
|
|
|
nodeName={nodeName}
|
|
|
|
environmentId={environmentId}
|
|
|
|
networkId={networkId}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
async function onRemoveNetworkClicked() {
|
|
|
|
const message = 'Do you want to delete the network?';
|
|
|
|
const confirmed = await confirmDeletionAsync(message);
|
|
|
|
|
|
|
|
if (confirmed) {
|
|
|
|
deleteNetworkMutation.mutate(
|
|
|
|
{ environmentId, networkId },
|
|
|
|
{
|
|
|
|
onSuccess: () => {
|
|
|
|
router.stateService.go('docker.networks');
|
|
|
|
},
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function filterContainersInNetwork(
|
|
|
|
network: DockerNetwork,
|
|
|
|
containers: DockerContainer[]
|
|
|
|
) {
|
|
|
|
const containersInNetwork = _.compact(
|
|
|
|
containers.map((container) => {
|
|
|
|
const containerInNetworkResponse = network.Containers[container.Id];
|
|
|
|
if (containerInNetworkResponse) {
|
|
|
|
const containerInNetwork: NetworkContainer = {
|
|
|
|
...containerInNetworkResponse,
|
|
|
|
Id: container.Id,
|
|
|
|
};
|
|
|
|
return containerInNetwork;
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
})
|
|
|
|
);
|
|
|
|
return containersInNetwork;
|
|
|
|
}
|
|
|
|
}
|