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): migrate dashboard to react [EE-2191] (#11574)
Some checks are pending
ci / build_images (map[arch:ppc64le platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:s390x platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
ci / build_images (map[arch:arm platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:arm64 platform:linux version:]) (push) Waiting to run
ci / build_manifests (push) Blocked by required conditions
/ triage (push) Waiting to run
Lint / Run linters (push) Waiting to run
Test / test-client (push) Waiting to run
Test / test-server (map[arch:amd64 platform:linux]) (push) Waiting to run
Test / test-server (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
Test / test-server (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
Test / test-server (map[arch:arm64 platform:linux]) (push) Waiting to run

Browse source
This commit is contained in:
Chaim Lev-Ari 2024-05-20 09:34:51 +03:00 • committed by GitHub
parent 2669a44d79
commit 014a590704
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
54 changed files with 1297 additions and 507 deletions
Download patch file Download diff file Expand all files Collapse all files

47
app/react/docker/DashboardView/ContainerStatus.tsx
View file

@ -2,63 +2,38 @@ import { Heart, Power } from 'lucide-react';
import { Icon } from '@/react/components/Icon';
import {
DockerContainer,
ContainerStatus as Status,
} from '../containers/types';
interface Props {
containers: DockerContainer[];
stats: {
running: number;
stopped: number;
healthy: number;
unhealthy: number;
};
}
export function useContainerStatusComponent(containers: DockerContainer[]) {
return <ContainerStatus containers={containers} />;
}
export function ContainerStatus({ containers }: Props) {
export function ContainerStatus({ stats }: Props) {
return (
<div className="pull-right">
<div>
<div className="vertical-center space-right pr-5">
<Icon icon={Power} mode="success" size="sm" />
{runningContainersFilter(containers)} running
{stats.running} running
</div>
<div className="vertical-center space-right">
<Icon icon={Power} mode="danger" size="sm" />
{stoppedContainersFilter(containers)} stopped
{stats.stopped} stopped
</div>
</div>
<div>
<div className="vertical-center space-right pr-5">
<Icon icon={Heart} mode="success" size="sm" />
{healthyContainersFilter(containers)} healthy
{stats.healthy} healthy
</div>
<div className="vertical-center space-right">
<Icon icon={Heart} mode="danger" size="sm" />
{unhealthyContainersFilter(containers)} unhealthy
{stats.unhealthy} unhealthy
</div>
</div>
</div>
);
}
function runningContainersFilter(containers: DockerContainer[]) {
return containers.filter(
(container) =>
container.Status === Status.Running || container.Status === Status.Healthy
).length;
}
function stoppedContainersFilter(containers: DockerContainer[]) {
return containers.filter(
(container) =>
container.Status === Status.Exited || container.Status === Status.Stopped
).length;
}
function healthyContainersFilter(containers: DockerContainer[]) {
return containers.filter((container) => container.Status === Status.Healthy)
.length;
}
function unhealthyContainersFilter(containers: DockerContainer[]) {
return containers.filter((container) => container.Status === Status.Unhealthy)
.length;
}