diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx index 7203edda7..6adcf5d8f 100644 --- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx +++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx @@ -14,6 +14,7 @@ import { Button, } from "@mui/material"; import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; +import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded"; import { setRowsPerPage } from "../../../../Features/UI/uiSlice"; import { useState, useEffect } from "react"; @@ -48,6 +49,7 @@ import useUtils from "../../utils"; */ const TablePaginationActions = (props) => { const { count, page, rowsPerPage, onPageChange } = props; + const handleFirstPageButtonClick = (event) => { onPageChange(event, 0); }; @@ -118,6 +120,7 @@ const MonitorTable = ({ isAdmin }) => { const [monitorCount, setMonitorCount] = useState(0); const authState = useSelector((state) => state.auth); const [updateTrigger, setUpdateTrigger] = useState(false); + const [sort, setSort] = useState({}); const handleActionMenuDelete = () => { setUpdateTrigger((prev) => !prev); @@ -175,19 +178,74 @@ const MonitorTable = ({ isAdmin }) => { return `${start} - ${end}`; }; + 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); + }; + return ( <> - Host - + handleSort("name")}> + + Host + + {sort.order === "asc" ? ( + + ) : ( + + )} + + + + handleSort("status")}> {" "} + {" "} Status - - + + {sort.order === "asc" ? ( + + ) : ( + + )}