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 && (