118 lines
3.4 KiB
React
118 lines
3.4 KiB
React
import { Stack, Button } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
import Fallback from "../../Components/Fallback";
|
|
import { useState, useEffect } from "react";
|
|
import "./index.css";
|
|
import MaintenanceTable from "./MaintenanceTable";
|
|
import { useSelector } from "react-redux";
|
|
import { networkService } from "../../main";
|
|
import Breadcrumbs from "../../Components/Breadcrumbs";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useIsAdmin } from "../../Hooks/useIsAdmin";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Typography } from "@mui/material";
|
|
import GenericFallback from "../../Components/GenericFallback";
|
|
|
|
const Maintenance = () => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const rowsPerPage = useSelector((state) => state?.ui?.maintenance?.rowsPerPage ?? 5);
|
|
const isAdmin = useIsAdmin();
|
|
const [maintenanceWindows, setMaintenanceWindows] = useState([]);
|
|
const [maintenanceWindowCount, setMaintenanceWindowCount] = useState(0);
|
|
const [page, setPage] = useState(0);
|
|
const [sort, setSort] = useState({});
|
|
const [updateTrigger, setUpdateTrigger] = useState(false);
|
|
const [networkError, setNetworkError] = useState(false);
|
|
const [isDataFetched, setIsDataFetched] = useState(false);
|
|
|
|
const handleActionMenuDelete = () => {
|
|
setUpdateTrigger((prev) => !prev);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchMaintenanceWindows = async () => {
|
|
try {
|
|
const response = await networkService.getMaintenanceWindowsByTeamId({
|
|
page: page,
|
|
rowsPerPage: rowsPerPage,
|
|
});
|
|
const { maintenanceWindows, maintenanceWindowCount } = response.data.data;
|
|
setMaintenanceWindows(maintenanceWindows);
|
|
setMaintenanceWindowCount(maintenanceWindowCount);
|
|
} catch (error) {
|
|
setNetworkError(true);
|
|
} finally {
|
|
setIsDataFetched(true);
|
|
}
|
|
};
|
|
fetchMaintenanceWindows();
|
|
}, [page, rowsPerPage, updateTrigger]);
|
|
|
|
if (networkError) {
|
|
return (
|
|
<GenericFallback>
|
|
<Typography
|
|
variant="h1"
|
|
marginY={theme.spacing(4)}
|
|
color={theme.palette.primary.contrastTextTertiary}
|
|
>
|
|
{t("common.toasts.networkError")}
|
|
</Typography>
|
|
<Typography>{t("common.toasts.checkConnection")}</Typography>
|
|
</GenericFallback>
|
|
);
|
|
}
|
|
// Only show the fallback if we've fetched data and there are no maintenance windows
|
|
if (isDataFetched && maintenanceWindows.length === 0) {
|
|
return (
|
|
<Fallback
|
|
title="maintenance window"
|
|
checks={[
|
|
"Mark your maintenance periods",
|
|
"Eliminate any misunderstandings",
|
|
"Stop sending alerts in maintenance windows",
|
|
]}
|
|
link="/maintenance/create"
|
|
isAdmin={isAdmin}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack gap={theme.spacing(10)}>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
mt={theme.spacing(5)}
|
|
>
|
|
<Breadcrumbs list={[{ name: "maintenance", path: "/maintenance" }]} />
|
|
<Button
|
|
variant="contained"
|
|
color="accent"
|
|
onClick={() => {
|
|
navigate("/maintenance/create");
|
|
}}
|
|
sx={{ fontWeight: 500 }}
|
|
>
|
|
{t("createMaintenanceWindow")}
|
|
</Button>
|
|
</Stack>
|
|
<MaintenanceTable
|
|
page={page}
|
|
setPage={setPage}
|
|
rowsPerPage={rowsPerPage}
|
|
sort={sort}
|
|
setSort={setSort}
|
|
maintenanceWindows={maintenanceWindows}
|
|
maintenanceWindowCount={maintenanceWindowCount}
|
|
updateCallback={handleActionMenuDelete}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Maintenance;
|