124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import { DockerStateLabel, Table } from "@/Components/design-elements";
|
|
// Hooks
|
|
import { useTranslation } from "react-i18next";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
// Types
|
|
import type { Header } from "@/Components/design-elements/Table";
|
|
import type { DockerContainerInfo } from "@/Types/Check";
|
|
|
|
// Utils
|
|
import { formatPercentage } from "@/Utils/FormatUtils";
|
|
|
|
interface DockerContainersTableProps {
|
|
monitorId: string | undefined;
|
|
containers: DockerContainerInfo[];
|
|
onRowClick?: (container: DockerContainerInfo) => void;
|
|
}
|
|
|
|
export const DockerContainersTable = ({
|
|
monitorId,
|
|
containers,
|
|
}: DockerContainersTableProps) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
const navigate = useNavigate();
|
|
|
|
const getHeaders = () => {
|
|
// const renderSortIcon = (isActive: boolean) => (
|
|
// <Box
|
|
// width={16}
|
|
// display="inline-flex"
|
|
// justifyContent="center"
|
|
// >
|
|
// {isActive ? (
|
|
// sortOrder === "asc" ? (
|
|
// <ArrowUp size={16} />
|
|
// ) : (
|
|
// <ArrowDown size={16} />
|
|
// )
|
|
// ) : null}
|
|
// </Box>
|
|
// );
|
|
const headers: Header<DockerContainerInfo>[] = [
|
|
{
|
|
id: "container",
|
|
content: t("pages.docker.host.table.headers.container"),
|
|
render: (row) => {
|
|
return (
|
|
<DockerStateLabel
|
|
state={row.state}
|
|
name={row.name}
|
|
image={row.image}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "status",
|
|
content: t("common.table.headers.status"),
|
|
render: (row) => {
|
|
return <Typography>{row.state}</Typography>;
|
|
},
|
|
},
|
|
{
|
|
id: "health",
|
|
content: t("common.labels.health"),
|
|
render: (row) => {
|
|
return <Typography>{row.health}</Typography>;
|
|
},
|
|
},
|
|
{
|
|
id: "cpu",
|
|
content: t("pages.docker.host.table.headers.cpu"),
|
|
render: (row) => {
|
|
return <Typography>{formatPercentage(row.cpuPct ?? 0)}</Typography>;
|
|
},
|
|
},
|
|
{
|
|
id: "memory",
|
|
content: t("pages.docker.host.table.headers.memory"),
|
|
render: (row) => {
|
|
return <Typography>{formatPercentage(row.memoryPct ?? 0)}</Typography>;
|
|
},
|
|
},
|
|
{
|
|
id: "restarts",
|
|
content: t("common.labels.restarts"),
|
|
render: (row) => {
|
|
return <Typography>{row.restartCount}</Typography>;
|
|
},
|
|
},
|
|
];
|
|
return headers;
|
|
};
|
|
|
|
let headers = getHeaders();
|
|
|
|
if (isSmall) {
|
|
headers = headers.filter((h) => h.id !== "histogram");
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Table
|
|
headers={headers}
|
|
data={containers}
|
|
onRowClick={(row) => {
|
|
navigate(`/docker/host/${monitorId}/container/${row.name}`);
|
|
}}
|
|
// getRowSx={(row) => ({
|
|
// backgroundColor: isRowSelected(row.id)
|
|
// ? theme.palette.action.selected
|
|
// : "inherit",
|
|
// })}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|