140 lines
3.6 KiB
React
140 lines
3.6 KiB
React
// Components
|
|
import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
|
|
import Select from "@/Components/v1/Inputs/Select/index.jsx";
|
|
import PropTypes from "prop-types";
|
|
|
|
//Utils
|
|
import { useTheme } from "@emotion/react";
|
|
import SkeletonLayout from "./skeleton.jsx";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const OptionsHeader = ({
|
|
shouldRender,
|
|
selectedMonitor = 0,
|
|
setSelectedMonitor,
|
|
monitors,
|
|
filter = "all",
|
|
setFilter,
|
|
dateRange = "hour",
|
|
setDateRange,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const monitorNames = typeof monitors !== "undefined" ? Object.values(monitors) : [];
|
|
const filterOptions = [
|
|
{ id: "all", name: t("incidentsOptionsHeaderFilterAll") },
|
|
{ id: "down", name: t("incidentsOptionsHeaderFilterDown") },
|
|
{ id: "resolve", name: t("incidentsOptionsHeaderFilterCannotResolve") },
|
|
{ id: "resolved", name: t("incidentsOptionsHeaderFilterResolved") },
|
|
];
|
|
|
|
// The stacks below which are three in number have the same style so
|
|
const stackStyles = {
|
|
direction: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing(6),
|
|
};
|
|
|
|
if (!shouldRender) return <SkeletonLayout />;
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
>
|
|
<Stack {...stackStyles}>
|
|
<Typography
|
|
display="inline-block"
|
|
component="h1"
|
|
color={theme.palette.primary.contrastTextSecondary}
|
|
>
|
|
{t("incidentsOptionsHeader")}
|
|
</Typography>
|
|
<Select
|
|
id="incidents-select-monitor"
|
|
placeholder={t("incidentsOptionsPlaceholderAllServers")}
|
|
value={selectedMonitor}
|
|
onChange={(e) => setSelectedMonitor(e.target.value)}
|
|
items={monitorNames}
|
|
sx={{
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
}}
|
|
maxWidth={250}
|
|
/>
|
|
</Stack>
|
|
<Stack {...stackStyles}>
|
|
<Typography
|
|
display="inline-block"
|
|
component="h1"
|
|
color={theme.palette.primary.contrastTextSecondary}
|
|
>
|
|
{t("incidentsOptionsHeaderFilterBy")}
|
|
</Typography>
|
|
<Select
|
|
id="incidents-select-filter"
|
|
value={filter}
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
items={filterOptions}
|
|
sx={{
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<Stack {...stackStyles}>
|
|
<Typography
|
|
display="inline-block"
|
|
component="h1"
|
|
color={theme.palette.primary.contrastTextSecondary}
|
|
>
|
|
{t("incidentsOptionsHeaderShow")}
|
|
</Typography>
|
|
<ButtonGroup>
|
|
<Button
|
|
variant="group"
|
|
filled={(dateRange === "hour").toString()}
|
|
onClick={() => setDateRange("hour")}
|
|
>
|
|
{t("incidentsOptionsHeaderLastHour")}
|
|
</Button>
|
|
<Button
|
|
variant="group"
|
|
filled={(dateRange === "day").toString()}
|
|
onClick={() => setDateRange("day")}
|
|
>
|
|
{t("incidentsOptionsHeaderLastDay")}
|
|
</Button>
|
|
<Button
|
|
variant="group"
|
|
filled={(dateRange === "week").toString()}
|
|
onClick={() => setDateRange("week")}
|
|
>
|
|
{t("incidentsOptionsHeaderLastWeek")}
|
|
</Button>
|
|
<Button
|
|
variant="group"
|
|
filled={(dateRange === "all").toString()}
|
|
onClick={() => setDateRange("all")}
|
|
>
|
|
{t("incidentsOptionsHeaderFilterAll")}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
OptionsHeader.propTypes = {
|
|
shouldRender: PropTypes.bool,
|
|
selectedMonitor: PropTypes.string,
|
|
setSelectedMonitor: PropTypes.func,
|
|
monitors: PropTypes.object,
|
|
filter: PropTypes.string,
|
|
setFilter: PropTypes.func,
|
|
dateRange: PropTypes.string,
|
|
setDateRange: PropTypes.func,
|
|
};
|
|
|
|
export default OptionsHeader;
|