Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

refactor(docker): move components to react [EE-3348] (#7084)

Browse source
This commit is contained in:
Chaim Lev-Ari 2022-06-26 17:16:50 +03:00 • committed by GitHub
parent 7238372d8d
commit 46e1a01625
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 61 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

98
app/react/docker/networks/ItemView/NetworkContainersTable.tsx Normal file
View file

@ -0,0 +1,98 @@
import { Authorized } from '@/portainer/hooks/useUser';
import { EnvironmentId } from '@/portainer/environments/types';
import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
import { DetailsTable } from '@@/DetailsTable';
import { Button } from '@@/buttons';
import { Link } from '@@/Link';
import { NetworkContainer, NetworkId } from '../types';
import { useDisconnectContainer } from '../queries';
type Props = {
networkContainers: NetworkContainer[];
nodeName: string;
environmentId: EnvironmentId;
networkId: NetworkId;
};
const tableHeaders = [
'Container Name',
'IPv4 Address',
'IPv6 Address',
'MacAddress',
'Actions',
];
export function NetworkContainersTable({
networkContainers,
nodeName,
environmentId,
networkId,
}: Props) {
const disconnectContainer = useDisconnectContainer();
if (networkContainers.length === 0) {
return null;
}
return (
<div className="row">
<div className="col-lg-12 col-md-12 col-xs-12">
<Widget>
<WidgetTitle title="Containers in network" icon="fa-server" />
<WidgetBody className="nopadding">
<DetailsTable
headers={tableHeaders}
dataCy="networkDetails-networkContainers"
>
{networkContainers.map((container) => (
<tr key={container.Id}>
<td>
<Link
to="docker.containers.container"
params={{
id: container.Id,
nodeName,
}}
title={container.Name}
>
{container.Name}
</Link>
</td>
<td>{container.IPv4Address || '-'}</td>
<td>{container.IPv6Address || '-'}</td>
<td>{container.MacAddress || '-'}</td>
<td>
<Authorized authorizations="DockerNetworkDisconnect">
<Button
data-cy={`networkDetails-disconnect${container.Name}`}
size="xsmall"
color="danger"
onClick={() => {
if (container.Id) {
disconnectContainer.mutate({
containerId: container.Id,
environmentId,
networkId,
});
}
}}
>
<i
className="fa fa-trash-alt space-right"
aria-hidden="true"
/>
Leave Network
</Button>
</Authorized>
</td>
</tr>
))}
</DetailsTable>
</WidgetBody>
</Widget>
</div>
</div>
);
}