From 89d0a74ade40c159e6cf80d20bdc5ef67c918750 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 7 Jan 2025 14:31:25 -0800 Subject: [PATCH] Use new table component, remove old table --- .../Uptime/Home/CurrentMonitoring/index.jsx | 71 ---- .../Home/UptimeTable/Skeleton/index.jsx | 47 --- .../Pages/Uptime/Home/UptimeTable/index.jsx | 345 ------------------ Client/src/Pages/Uptime/Home/actionsMenu.jsx | 4 +- Client/src/Routes/index.jsx | 1 + 5 files changed, 4 insertions(+), 464 deletions(-) delete mode 100644 Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx delete mode 100644 Client/src/Pages/Uptime/Home/UptimeTable/Skeleton/index.jsx delete mode 100644 Client/src/Pages/Uptime/Home/UptimeTable/index.jsx diff --git a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx deleted file mode 100644 index 2d9426137..000000000 --- a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import { useTheme } from "@emotion/react"; -import { Box, Stack } from "@mui/material"; -import Search from "../../../../Components/Inputs/Search"; -import MemoizedMonitorTable from "../UptimeTable"; -import { useState } from "react"; -import useDebounce from "../../../../Utils/debounce"; -import PropTypes from "prop-types"; -import { Heading } from "../../../../Components/Heading"; - -const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) => { - const theme = useTheme(); - const [search, setSearch] = useState(""); - const [isSearching, setIsSearching] = useState(false); - const debouncedFilter = useDebounce(search, 500); - const handleSearch = (value) => { - setIsSearching(true); - setSearch(value); - }; - return ( - - - Uptime monitors - - - {totalMonitors} - - - - - - - - ); -}; - -CurrentMonitoring.propTypes = { - handlePause: PropTypes.func, - totalMonitors: PropTypes.number, - monitors: PropTypes.array, - isAdmin: PropTypes.bool, -}; - -export { CurrentMonitoring }; diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/Skeleton/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/Skeleton/index.jsx deleted file mode 100644 index c17f6d74b..000000000 --- a/Client/src/Pages/Uptime/Home/UptimeTable/Skeleton/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Skeleton } from "@mui/material"; -import DataTable from "../../../../../Components/Table"; -const ROWS_NUMBER = 7; -const ROWS_ARRAY = Array.from({ length: ROWS_NUMBER }, (_, i) => i); - -const TableSkeleton = () => { - /* TODO Skeleton does not follow light and dark theme */ - - const headers = [ - { - id: "name", - - content: "Host", - - render: () => , - }, - { - id: "status", - content: "Status", - render: () => , - }, - { - id: "responseTime", - content: "Response Time", - render: () => , - }, - { - id: "type", - content: "Type", - render: () => , - }, - { - id: "actions", - content: "Actions", - render: () => , - }, - ]; - - return ( - - ); -}; - -export { TableSkeleton }; diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx deleted file mode 100644 index 0aa0eef90..000000000 --- a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx +++ /dev/null @@ -1,345 +0,0 @@ -import PropTypes from "prop-types"; -import { useState, useEffect, memo, useCallback, useRef } from "react"; -import { useNavigate } from "react-router"; -import { useDispatch, useSelector } from "react-redux"; -import { useTheme } from "@emotion/react"; -import useUtils from "../../utils"; - -import { setRowsPerPage } from "../../../../Features/UI/uiSlice"; -import { logger } from "../../../../Utils/Logger"; -import { jwtDecode } from "jwt-decode"; -import { networkService } from "../../../../main"; - -import { Box, CircularProgress } from "@mui/material"; -import ActionsMenu from "../actionsMenu"; -import Host from "../host"; -import { StatusLabel } from "../../../../Components/Label"; -import { TableSkeleton } from "./Skeleton"; -import BarChart from "../../../../Components/Charts/BarChart"; - -import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; -import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded"; - -import { Pagination } from "../../../../Components/Table/TablePagination"; -import DataTable from "../../../../Components/Table"; - -const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePause }) => { - const theme = useTheme(); - const navigate = useNavigate(); - const dispatch = useDispatch(); - const { determineState } = useUtils(); - - const { rowsPerPage } = useSelector((state) => state.ui.monitors); - const authState = useSelector((state) => state.auth); - - const [page, setPage] = useState(0); - const [monitors, setMonitors] = useState([]); - const [monitorCount, setMonitorCount] = useState(0); - const [updateTrigger, setUpdateTrigger] = useState(false); - const [sort, setSort] = useState({}); - const [data, setData] = useState([]); - const prevFilter = useRef(filter); - const headers = [ - { - id: "name", - content: ( - handleSort("name")}> - Host - - {sort.order === "asc" ? ( - - ) : ( - - )} - - - ), - render: (row) => ( - - ), - }, - { - id: "status", - content: ( - handleSort("status")} - > - {" "} - Status - - {sort.order === "asc" ? ( - - ) : ( - - )} - - - ), - render: (row) => { - const status = determineState(row.monitor); - return ( - - ); - }, - }, - { - id: "responseTime", - content: "Response Time", - render: (row) => , - }, - { - id: "type", - content: "Type", - render: (row) => ( - {row.monitor.type} - ), - }, - { - id: "actions", - content: "Actions", - render: (row) => ( - - ), - }, - ]; - - const handleRowUpdate = () => { - setUpdateTrigger((prev) => !prev); - }; - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - dispatch( - setRowsPerPage({ - value: parseInt(event.target.value, 10), - table: "monitors", - }) - ); - setPage(0); - }; - - const fetchPage = useCallback(async () => { - try { - const { authToken } = authState; - const user = jwtDecode(authToken); - const res = await networkService.getMonitorsByTeamId({ - authToken, - teamId: user.teamId, - limit: 25, - types: ["http", "ping", "docker", "port"], - status: null, - checkOrder: "desc", - normalize: true, - page: page, - rowsPerPage: rowsPerPage, - filter: filter, - field: sort.field, - order: sort.order, - }); - setMonitors(res?.data?.data?.monitors ?? []); - setMonitorCount(res?.data?.data?.monitorCount ?? 0); - } catch (error) { - logger.error(error); - } finally { - setIsSearching(false); - } - }, [authState, page, rowsPerPage, filter, sort, setIsSearching]); - - useEffect(() => { - fetchPage(); - }, [ - updateTrigger, - authState, - page, - rowsPerPage, - filter, - sort, - setIsSearching, - fetchPage, - ]); - - // Listen for changes in filter, if new value reset the page - useEffect(() => { - if (prevFilter.current !== filter) { - setPage(0); - fetchPage(); - } - prevFilter.current = filter; - }, [filter, fetchPage]); - - const handleSort = async (field) => { - let order = ""; - if (sort.field !== field) { - order = "desc"; - } else { - order = sort.order === "asc" ? "desc" : "asc"; - } - setSort({ field, order }); - - const { authToken } = authState; - const user = jwtDecode(authToken); - - const res = await networkService.getMonitorsByTeamId({ - authToken, - teamId: user.teamId, - limit: 25, - types: ["http", "ping"], - status: null, - checkOrder: "desc", - normalize: true, - page: page, - rowsPerPage: rowsPerPage, - filter: null, - field: field, - order: order, - }); - setMonitors(res?.data?.data?.monitors ?? []); - setMonitorCount(res?.data?.data?.monitorCount ?? 0); - }; - - useEffect(() => { - const mappedMonitors = monitors.map((monitor) => { - let uptimePercentage = ""; - let percentageColor = theme.palette.percentage.uptimeExcellent; - - // Determine uptime percentage and color based on the monitor's uptimePercentage value - if (monitor.uptimePercentage !== undefined) { - uptimePercentage = - monitor.uptimePercentage === 0 - ? "0" - : (monitor.uptimePercentage * 100).toFixed(2); - - percentageColor = - monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.uptimePoor - : monitor.uptimePercentage < 0.5 - ? theme.palette.percentage.uptimeFair - : monitor.uptimePercentage < 0.75 - ? theme.palette.percentage.uptimeGood - : theme.palette.percentage.uptimeExcellent; - } - - return { - id: monitor._id, - url: monitor.url, - title: monitor.name, - percentage: uptimePercentage, - percentageColor, - monitor: monitor, - }; - }); - setData(mappedMonitors); - }, [monitors, theme]); - - return ( - - {isSearching && ( - <> - - - - - - )} - {/* - This is the original SX for the row, doesn't match infrastructure table - rowSX: { - cursor: "pointer", - "&:hover": { - filter: "brightness(.75)", - opacity: 0.75, - transition: "filter 0.3s ease, opacity 0.3s ease", - }, - }, - */} - {monitors.length > 0 ? ( - { - navigate(`/uptime/${row.id}`); - }, - emptyView: "No monitors found", - }} - /> - ) : ( - - )} - - - ); -}; - -MonitorTable.propTypes = { - isAdmin: PropTypes.bool, - filter: PropTypes.string, - setIsSearching: PropTypes.func, - isSearching: PropTypes.bool, - setMonitorUpdateTrigger: PropTypes.func, - handlePause: PropTypes.func, -}; - -const MemoizedMonitorTable = memo(MonitorTable); -export default MemoizedMonitorTable; diff --git a/Client/src/Pages/Uptime/Home/actionsMenu.jsx b/Client/src/Pages/Uptime/Home/actionsMenu.jsx index 01452b718..bda27bf15 100644 --- a/Client/src/Pages/Uptime/Home/actionsMenu.jsx +++ b/Client/src/Pages/Uptime/Home/actionsMenu.jsx @@ -34,7 +34,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => if (action.meta.requestStatus === "fulfilled") { setIsOpen(false); // close modal dispatch(getUptimeMonitorsByTeamId(authState.authToken)); - updateCallback(); + updateRowCallback(); createToast({ body: "Monitor deleted successfully." }); } else { createToast({ body: "Failed to delete monitor." }); @@ -169,6 +169,8 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => {isAdmin && ( { + closeMenu(e); + e.stopPropagation(); handlePause(e); }} diff --git a/Client/src/Routes/index.jsx b/Client/src/Routes/index.jsx index 7d444f2ab..b5f4dd376 100644 --- a/Client/src/Routes/index.jsx +++ b/Client/src/Routes/index.jsx @@ -48,6 +48,7 @@ const Routes = () => { path="/uptime" element={} /> + }