348 lines
8.2 KiB
TypeScript
348 lines
8.2 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import {
|
|
Table,
|
|
Pagination,
|
|
StatusLabel,
|
|
ColoredLabel,
|
|
} from "@/Components/design-elements";
|
|
import { SPACING } from "@/Utils/Theme/constants";
|
|
import type { Header } from "@/Components/design-elements/Table";
|
|
import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
|
|
import { ArrowUp, ArrowDown } from "lucide-react";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { usePost } from "@/Hooks/UseApi";
|
|
|
|
import type { Monitor } from "@/Types/Monitor";
|
|
import type { Tag } from "@/Types/Tag";
|
|
import type { DockerContainerSummary } from "@/Types/Check";
|
|
import { Checkbox } from "@/Components/inputs";
|
|
|
|
const summaryOf = (monitor: Monitor): DockerContainerSummary | undefined => {
|
|
const recentChecks = monitor.recentChecks ?? [];
|
|
return recentChecks[recentChecks.length - 1]?.containerSummary;
|
|
};
|
|
|
|
interface DockerMonitorsTableProps {
|
|
monitors: Monitor[];
|
|
tags: Tag[];
|
|
refetch: () => void;
|
|
setSelectedMonitor: (monitor: Monitor | null) => void;
|
|
sortField: string;
|
|
setSortField: (field: string) => void;
|
|
sortOrder: "asc" | "desc";
|
|
setSortOrder: (order: "asc" | "desc") => void;
|
|
count: number;
|
|
page: number;
|
|
setPage: (page: number) => void;
|
|
rowsPerPage: number;
|
|
setRowsPerPage: (rowsPerPage: number) => void;
|
|
selectedRows?: string[];
|
|
onSelectionChange?: (selected: string[]) => void;
|
|
}
|
|
|
|
export const DockerMonitorsTable = ({
|
|
monitors,
|
|
tags,
|
|
refetch,
|
|
setSelectedMonitor,
|
|
sortField,
|
|
setSortField,
|
|
sortOrder,
|
|
setSortOrder,
|
|
count,
|
|
page,
|
|
setPage,
|
|
rowsPerPage,
|
|
setRowsPerPage,
|
|
selectedRows = [],
|
|
onSelectionChange,
|
|
}: DockerMonitorsTableProps) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
const navigate = useNavigate();
|
|
const { post } = usePost<Record<string, never>, Monitor>();
|
|
|
|
const selectedSet = new Set(selectedRows);
|
|
const isAllSelected =
|
|
monitors.length > 0 && monitors.every((m) => selectedSet.has(m.id));
|
|
const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
|
|
|
|
const handleSelectAll = (checked: boolean) => {
|
|
onSelectionChange?.(checked ? monitors.map((m) => m.id) : []);
|
|
};
|
|
|
|
const handleSelectRow = (id: string, checked: boolean) => {
|
|
if (!onSelectionChange) return;
|
|
onSelectionChange(
|
|
checked ? [...selectedRows, id] : selectedRows.filter((rowId) => rowId !== id)
|
|
);
|
|
};
|
|
|
|
const isRowSelected = (id: string) => selectedSet.has(id);
|
|
|
|
const handlePageChange = (
|
|
_e: React.MouseEvent<HTMLButtonElement> | null,
|
|
newPage: number
|
|
) => {
|
|
setPage(newPage);
|
|
};
|
|
|
|
const handleRowsPerPageChange = (
|
|
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
|
|
) => {
|
|
const value = Number(e.target.value);
|
|
setPage(0);
|
|
setRowsPerPage(value);
|
|
};
|
|
|
|
const handleSort = (e: React.MouseEvent, field: string) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (sortField === field) {
|
|
const newOrder = sortOrder === "asc" ? "desc" : "asc";
|
|
setSortOrder(newOrder);
|
|
} else {
|
|
setSortField(field);
|
|
setSortOrder("asc");
|
|
}
|
|
refetch();
|
|
};
|
|
|
|
const getActions = (monitor: Monitor): ActionMenuItem[] => {
|
|
return [
|
|
{
|
|
id: 2,
|
|
label: t("pages.common.monitors.actions.details"),
|
|
action: () => {
|
|
navigate(`${monitor.id}`);
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
label: t("pages.common.monitors.actions.incidents"),
|
|
action: () => {
|
|
navigate(`/incidents?monitorId=${monitor.id}`);
|
|
},
|
|
},
|
|
{
|
|
id: 4,
|
|
label: t("pages.common.monitors.actions.configure"),
|
|
action: () => {
|
|
navigate(`/docker/configure/${monitor.id}`);
|
|
},
|
|
},
|
|
{
|
|
id: 6,
|
|
label:
|
|
monitor.isActive === false
|
|
? t("common.buttons.resume")
|
|
: t("common.buttons.pause"),
|
|
action: async () => {
|
|
await post(`/monitors/pause/${monitor.id}`, {});
|
|
refetch();
|
|
},
|
|
closeMenu: true,
|
|
},
|
|
{
|
|
id: 7,
|
|
label: (
|
|
<Typography color={theme.palette.error.main}>
|
|
{t("common.buttons.delete")}
|
|
</Typography>
|
|
),
|
|
action: () => {
|
|
setSelectedMonitor(monitor);
|
|
},
|
|
closeMenu: true,
|
|
},
|
|
];
|
|
};
|
|
|
|
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<Monitor>[] = [
|
|
{
|
|
id: "selection",
|
|
content: (
|
|
<Checkbox
|
|
aria-label={t("pages.common.monitors.actions.selectAll")}
|
|
indeterminate={isSomeSelected}
|
|
checked={isAllSelected}
|
|
onChange={(e) => handleSelectAll(e.target.checked)}
|
|
/>
|
|
),
|
|
hideMobileLabel: true,
|
|
render: (row) => (
|
|
<Checkbox
|
|
aria-label={t("pages.common.monitors.actions.selectMonitor", {
|
|
name: row.name,
|
|
})}
|
|
checked={isRowSelected(row.id)}
|
|
onChange={(e) => {
|
|
handleSelectRow(row.id, e.target.checked);
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
),
|
|
onClick: (e) => e?.stopPropagation(),
|
|
},
|
|
{
|
|
id: "name",
|
|
align: "left",
|
|
mobileLabel: t("pages.docker.table.headers.host"),
|
|
content: (
|
|
<Typography
|
|
component="div"
|
|
display="inline-flex"
|
|
alignItems="center"
|
|
gap={theme.spacing(4)}
|
|
onClick={(e) => handleSort(e, "name")}
|
|
sx={{ cursor: "pointer" }}
|
|
>
|
|
{t("pages.docker.table.headers.host")}
|
|
{renderSortIcon(sortField === "name")}
|
|
</Typography>
|
|
),
|
|
render: (row) => {
|
|
return (
|
|
<Stack>
|
|
<Typography variant="body2">{row.name}</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
color={theme.palette.text.secondary}
|
|
>
|
|
{row.url}
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "status",
|
|
mobileLabel: t("common.table.headers.status"),
|
|
content: (
|
|
<Stack
|
|
gap={theme.spacing(4)}
|
|
direction={"row"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
onClick={(e) => handleSort(e, "status")}
|
|
sx={{ cursor: "pointer" }}
|
|
>
|
|
<Box width={theme.spacing(8)} />
|
|
{t("common.table.headers.status")}
|
|
{renderSortIcon(sortField === "status")}
|
|
</Stack>
|
|
),
|
|
render: (row) => {
|
|
return <StatusLabel status={row.status} />;
|
|
},
|
|
},
|
|
{
|
|
id: "containers",
|
|
content: t("pages.docker.table.headers.containers"),
|
|
render: (row) => {
|
|
const summary = summaryOf(row);
|
|
return (
|
|
<Typography variant="body2">
|
|
{summary
|
|
? t("pages.docker.table.containersRunning", {
|
|
running: summary.running,
|
|
total: summary.total,
|
|
})
|
|
: "—"}
|
|
</Typography>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "tags",
|
|
content: t("common.table.headers.tags"),
|
|
render: (row) => {
|
|
if (row.tags.length === 0) return "-";
|
|
return (
|
|
<Stack
|
|
justifyContent={"center"}
|
|
direction={isSmall ? "column" : "row"}
|
|
gap={theme.spacing(SPACING.LG)}
|
|
>
|
|
{row.tags.map((tagId) => {
|
|
const fullTag = tags.find((t) => t.id === tagId);
|
|
if (!fullTag) return null;
|
|
return (
|
|
<ColoredLabel
|
|
key={fullTag.id}
|
|
text={fullTag.name}
|
|
color={fullTag.color}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
id: "actions",
|
|
content: t("common.table.headers.actions"),
|
|
render: (row) => {
|
|
return <ActionsMenu items={getActions(row)} />;
|
|
},
|
|
},
|
|
];
|
|
return headers;
|
|
};
|
|
|
|
let headers = getHeaders();
|
|
|
|
if (isSmall) {
|
|
headers = headers.filter((h) => h.id !== "histogram");
|
|
}
|
|
return (
|
|
<Box>
|
|
<Table
|
|
headers={headers}
|
|
data={monitors}
|
|
onRowClick={(row) => {
|
|
navigate(`/docker/host/${row.id}`);
|
|
}}
|
|
getRowSx={(row) => ({
|
|
backgroundColor: isRowSelected(row.id)
|
|
? theme.palette.action.selected
|
|
: "inherit",
|
|
})}
|
|
/>
|
|
<Pagination
|
|
component="div"
|
|
count={count}
|
|
page={page}
|
|
rowsPerPage={rowsPerPage}
|
|
onPageChange={handlePageChange}
|
|
onRowsPerPageChange={handleRowsPerPageChange}
|
|
itemsOnPage={monitors.length}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|