/
EnclaveServicesSummary.tsx
64 lines (56 loc) · 1.96 KB
/
EnclaveServicesSummary.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { Flex, Spinner, Tag, TagProps, Tooltip } from "@chakra-ui/react";
import { ServiceInfo, ServiceStatus } from "enclave-manager-sdk/build/api_container_service_pb";
import { isDefined } from "../../../utils";
type ServicesSummaryProps = {
services: "loading" | ServiceInfo[] | null;
};
export const EnclaveServicesSummary = ({ services }: ServicesSummaryProps) => {
if (!isDefined(services)) {
return <Tag>Unknown</Tag>;
}
if (services === "loading") {
return <Spinner size={"xs"} />;
}
const runningServices = services.filter(({ serviceStatus }) => serviceStatus === ServiceStatus.RUNNING).length;
const stopppedServices = services.filter(({ serviceStatus }) => serviceStatus === ServiceStatus.STOPPED).length;
const unknownServices = services.filter(({ serviceStatus }) => serviceStatus === ServiceStatus.UNKNOWN).length;
const totalServices = runningServices + stopppedServices + unknownServices;
const tooltipLabel = [
runningServices > 0 ? `${runningServices} running` : null,
stopppedServices > 0 ? `${stopppedServices} stopped` : null,
unknownServices > 0 ? `${unknownServices} unknown` : null,
]
.filter(isDefined)
.join(", ");
const tagProps: Partial<TagProps> = {
variant: "solid",
fontSize: "xs",
fontWeight: "semibold",
};
return (
<Tooltip label={tooltipLabel} size={"xs"}>
<Flex justifyContent={"center"}>
{totalServices === 0 && (
<Tag color={"#A0AEC0"} {...tagProps}>
NONE
</Tag>
)}
{runningServices > 0 && (
<Tag colorScheme={"green"} {...tagProps}>
{runningServices}
</Tag>
)}
{stopppedServices > 0 && (
<Tag colorScheme={"red"} {...tagProps}>
{stopppedServices}
</Tag>
)}
{unknownServices > 0 && (
<Tag colorScheme={"orange"} {...tagProps}>
{unknownServices}
</Tag>
)}
</Flex>
</Tooltip>
);
};