47 lines
1.2 KiB
React
47 lines
1.2 KiB
React
import PropTypes from "prop-types";
|
|
import { Stack } from "@mui/material";
|
|
import StatusBox from "./StatusBox.jsx";
|
|
import { useTheme } from "@emotion/react";
|
|
import { useTranslation } from "react-i18next";
|
|
import SkeletonLayout from "./skeleton.jsx";
|
|
|
|
const StatusBoxes = ({ isLoading, summary }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
if (isLoading) return <SkeletonLayout shouldRender={isLoading} />;
|
|
return (
|
|
<Stack
|
|
gap={theme.spacing(12)}
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
>
|
|
<StatusBox
|
|
title={t("incidentsOptionsHeaderTotalIncidents")}
|
|
value={summary?.totalChecks + summary?.cannotResolveChecks || 0}
|
|
/>
|
|
<StatusBox
|
|
title={t("incidentsOptionsHeaderFilterResolved")}
|
|
status="up"
|
|
value={summary?.resolvedChecks || 0}
|
|
/>
|
|
<StatusBox
|
|
title={t("incidentsOptionsHeaderFilterCannotResolve")}
|
|
status="paused"
|
|
value={summary?.cannotResolveChecks || 0}
|
|
/>
|
|
<StatusBox
|
|
title={t("incidentsOptionsHeaderFilterDown")}
|
|
status="down"
|
|
value={summary?.downChecks || 0}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
StatusBoxes.propTypes = {
|
|
isLoading: PropTypes.bool,
|
|
summary: PropTypes.object,
|
|
};
|
|
|
|
export default StatusBoxes;
|