diff --git a/client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx deleted file mode 100644 index 709bca212..000000000 --- a/client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx +++ /dev/null @@ -1,178 +0,0 @@ -import { useState } from "react"; -import { useTheme } from "@emotion/react"; -import { useNavigate } from "react-router-dom"; -import { useSelector } from "react-redux"; -import { IconButton, Menu, MenuItem } from "@mui/material"; -import { logger } from "@/Utils/Logger.js"; -import Icon from "@/Components/v1/Icon"; -import PropTypes from "prop-types"; -import { networkService } from "../../../../main.jsx"; -import { createToast } from "@/Utils/toastUtils.jsx"; -import { useTranslation } from "react-i18next"; - -import Dialog from "@/Components/v1/Dialog/index.jsx"; - -const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => { - maintenanceWindow; - const [anchorEl, setAnchorEl] = useState(null); - const [isOpen, setIsOpen] = useState(false); - const [isLoading, setIsLoading] = useState(false); - - const theme = useTheme(); - const { t } = useTranslation(); - - const handleRemove = async (event) => { - event.preventDefault(); - event.stopPropagation(); - try { - setIsLoading(true); - await networkService.deleteMaintenanceWindow({ - maintenanceWindowId: maintenanceWindow.id, - }); - updateCallback(); - createToast({ body: "Maintenance window deleted successfully." }); - } catch (error) { - createToast({ body: "Failed to delete maintenance window." }); - logger.error("Failed to delete maintenance window", error); - } finally { - setIsLoading(false); - } - setIsOpen(false); - }; - - const handlePause = async () => { - try { - setIsLoading(true); - const data = { - active: !maintenanceWindow.active, - }; - await networkService.editMaintenanceWindow({ - maintenanceWindowId: maintenanceWindow.id, - maintenanceWindow: data, - }); - updateCallback(); - } catch (error) { - logger.error(error); - createToast({ body: "Failed to pause maintenance window." }); - } finally { - setIsLoading(false); - } - }; - - const handleEdit = () => { - navigate(`/maintenance/create/${maintenanceWindow.id}`); - }; - - const openMenu = (event) => { - event.preventDefault(); - event.stopPropagation(); - setAnchorEl(event.currentTarget); - }; - - const openRemove = (e) => { - closeMenu(e); - setIsOpen(true); - }; - - const closeMenu = (e) => { - e.stopPropagation(); - setAnchorEl(null); - }; - - const navigate = useNavigate(); - - return ( - <> - { - event.stopPropagation(); - openMenu(event); - }} - sx={{ - "&:focus": { - outline: "none", - }, - "& svg path": { - stroke: theme.palette.primary.contrastTextTertiary, - }, - }} - > - - - - closeMenu(e)} - disableScrollLock - slotProps={{ - paper: { - sx: { - "& ul": { p: theme.spacing(2.5) }, - "& li": { m: 0 }, - "& li:last-of-type": { - color: theme.palette.error.main, - }, - }, - }, - }} - > - { - closeMenu(e); - e.stopPropagation(); - handleEdit(); - }} - > - {t("edit")} - - { - handlePause(); - closeMenu(e); - e.stopPropagation(); - }} - > - {`${maintenanceWindow.active === true ? t("pause") : t("resume")}`} - - - { - e.stopPropagation(); - openRemove(e); - }} - > - {t("remove")} - - - { - e.stopPropagation(); - setIsOpen(false); - }} - confirmationButtonLabel={t("delete")} - onConfirm={(e) => { - e.stopPropagation(e); - handleRemove(e); - }} - isLoading={isLoading} - /> - - ); -}; - -ActionsMenu.propTypes = { - maintenanceWindow: PropTypes.object, - isAdmin: PropTypes.bool, - updateCallback: PropTypes.func, -}; - -export default ActionsMenu; diff --git a/client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/client/src/Pages/Maintenance/MaintenanceTable/index.jsx deleted file mode 100644 index 11875bb6a..000000000 --- a/client/src/Pages/Maintenance/MaintenanceTable/index.jsx +++ /dev/null @@ -1,237 +0,0 @@ -import PropTypes from "prop-types"; -import { Box } from "@mui/material"; -import DataTable from "@/Components/v1/Table/index.jsx"; -import Pagination from "@/Components/v1/Table/TablePagination/index.jsx"; -import Icon from "@/Components/v1/Icon"; -import ActionsMenu from "./ActionsMenu/index.jsx"; -import { memo } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { formatDurationRounded } from "../../../Utils/timeUtilsLegacy.js"; -import { StatusLabel } from "@/Components/v1/Label/index.jsx"; -import { setRowsPerPage } from "../../../Features/UI/uiSlice.js"; -import { useTranslation } from "react-i18next"; -import { useTheme } from "@emotion/react"; -import { useNavigate } from "react-router-dom"; -import dayjs from "dayjs"; -/** - * Component for pagination actions (first, previous, next, last). - * - * @component - * @param {Object} props - * @param {number} props.count - Total number of items. - * @param {number} props.page - Current page number. - * @param {number} props.rowsPerPage - Number of rows per page. - * @param {function} props.onPageChange - Callback function to handle page change. - * - * @returns {JSX.Element} Pagination actions component. - */ - -const MaintenanceTable = ({ - page, - setPage, - sort, - setSort, - maintenanceWindows, - maintenanceWindowCount, - updateCallback, -}) => { - const rowsPerPage = useSelector((state) => state?.ui?.maintenance?.rowsPerPage ?? 5); - const dispatch = useDispatch(); - const theme = useTheme(); - const navigate = useNavigate(); - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - dispatch( - setRowsPerPage({ - value: parseInt(event.target.value, 10), - table: "maintenance", - }) - ); - setPage(0); - }; - - const { t } = useTranslation(); - - const headers = [ - { - id: "name", - content: ( - handleSort("name")}> - {t("maintenanceWindowName")} - - {sort.order === "asc" ? ( - - ) : ( - - )} - - - ), - render: (row) => row.name, - }, - { - id: "status", - content: ( - handleSort("status")}> - {" "} - {t("status")} - - {sort.order === "asc" ? ( - - ) : ( - - )} - - - ), - render: (row) => { - const status = row.active ? "up" : "paused"; - const text = row.active ? "active" : "paused"; - - return ( - - ); - }, - }, - { - id: "nextWindow", - content: t("nextWindow"), - render: (row) => { - return getTimeToNextWindow(row.start, row.end, row.repeat); - }, - }, - { - id: "repeat", - content: t("repeat"), - render: (row) => { - return row.repeat === 0 ? "N/A" : formatDurationRounded(row.repeat); - }, - }, - { - id: "actions", - content: t("actions"), - render: (row) => ( - - ), - }, - ]; - - const getTimeToNextWindow = (startTime, endTime, repeat) => { - //1. Advance time closest to next window as possible - const now = dayjs(); - let start = dayjs(startTime); - let end = dayjs(endTime); - if (repeat > 0) { - // Advance time closest to next window as possible - while (start.isBefore(now) && end.isBefore(now)) { - start = start.add(repeat, "milliseconds"); - end = end.add(repeat, "milliseconds"); - } - } - - //Check if we are in a window - if (now.isAfter(start) && now.isBefore(end)) { - return "In maintenance window"; - } - - if (start.isAfter(now)) { - const diffInMinutes = start.diff(now, "minutes"); - const diffInHours = start.diff(now, "hours"); - const diffInDays = start.diff(now, "days"); - - if (diffInMinutes < 60) { - return diffInMinutes + " minutes"; - } else if (diffInHours < 24) { - return diffInHours + " hours"; - } else if (diffInDays < 7) { - return diffInDays + " days"; - } else { - return diffInDays + " days"; - } - } - }; - - const handleSort = async (field) => { - let order = ""; - if (sort.field !== field) { - order = "desc"; - } else { - order = sort.order === "asc" ? "desc" : "asc"; - } - setSort({ field, order }); - }; - - return ( - <> - { - navigate(`/maintenance/create/${row.id}`); - }, - }} - headers={headers} - data={maintenanceWindows} - /> - - - ); -}; - -MaintenanceTable.propTypes = { - isAdmin: PropTypes.bool, - page: PropTypes.number, - setPage: PropTypes.func, - rowsPerPage: PropTypes.number, - setRowsPerPage: PropTypes.func, - sort: PropTypes.object, - setSort: PropTypes.func, - maintenanceWindows: PropTypes.array, - maintenanceWindowCount: PropTypes.number, - updateCallback: PropTypes.func, -}; - -const MemoizedMaintenanceTable = memo(MaintenanceTable); -export default MemoizedMaintenanceTable; diff --git a/client/src/Pages/Maintenance/index.css b/client/src/Pages/Maintenance/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/client/src/Pages/Maintenance/old.jsx b/client/src/Pages/Maintenance/old.jsx deleted file mode 100644 index b49cd9f6e..000000000 --- a/client/src/Pages/Maintenance/old.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Stack, Button } from "@mui/material"; -import { useTheme } from "@emotion/react"; -import { useState, useEffect } from "react"; -import "./index.css"; -import MaintenanceTable from "./MaintenanceTable/index.jsx"; -import { useSelector } from "react-redux"; -import { networkService } from "../../main.jsx"; -import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx"; -import { useNavigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; -import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx"; - -const Maintenance = () => { - const theme = useTheme(); - const { t } = useTranslation(); - const navigate = useNavigate(); - const rowsPerPage = useSelector((state) => state?.ui?.maintenance?.rowsPerPage ?? 5); - const [maintenanceWindows, setMaintenanceWindows] = useState(undefined); - 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 [isLoading, setIsLoading] = useState(true); - - const handleActionMenuDelete = () => { - setUpdateTrigger((prev) => !prev); - }; - - useEffect(() => { - const fetchMaintenanceWindows = async () => { - try { - setNetworkError(false); - setIsLoading(true); - const response = await networkService.getMaintenanceWindowsByTeamId({ - page: page, - rowsPerPage: rowsPerPage, - }); - const { maintenanceWindows, maintenanceWindowCount } = response.data.data; - setMaintenanceWindows(maintenanceWindows ?? []); - setMaintenanceWindowCount(maintenanceWindowCount ?? 0); - } catch (error) { - setNetworkError(true); - } finally { - setIsLoading(false); - } - }; - fetchMaintenanceWindows(); - }, [page, rowsPerPage, updateTrigger]); - - return ( - <> - - - - - - - - - - - ); -}; - -export default Maintenance;