Merge latest changes

This commit is contained in:
Daniel Cojocea
2024-09-18 19:51:56 -04:00
7 changed files with 185 additions and 71 deletions

View File

@@ -25,17 +25,20 @@ const Incidents = () => {
useEffect(() => {
const fetchMonitors = async () => {
setLoading(true);
const res = await networkService.getMonitorsByTeamId(
authState.authToken,
authState.user.teamId,
-1,
null,
null,
null,
null,
null,
null
);
const res = await networkService.getMonitorsByTeamId({
authToken: authState.authToken,
teamId: authState.user.teamId,
limit: -1,
types: null,
status: null,
checkOrder: null,
normalize: null,
page: null,
rowsPerPage: null,
filter: null,
field: null,
order: null,
});
// Reduce to a lookup object for 0(1) lookup
if (res?.data?.data?.monitors?.length > 0) {
const monitorLookup = res.data.data.monitors.reduce((acc, monitor) => {

View File

@@ -40,8 +40,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
fill: theme.palette.text.tertiary,
},
"& path": {
transition: "fill 300ms ease",
transition: "stroke-width 400ms ease",
transition: "fill 300ms ease, stroke-width 400ms ease",
},
}));

View File

@@ -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);
@@ -142,17 +145,20 @@ const MonitorTable = ({ isAdmin }) => {
try {
const { authToken } = authState;
const user = jwtDecode(authToken);
const res = await networkService.getMonitorsByTeamId(
const res = await networkService.getMonitorsByTeamId({
authToken,
user.teamId,
25,
["http", "ping"],
null,
"desc",
true,
page,
rowsPerPage
);
teamId: user.teamId,
limit: 25,
types: ["http", "ping"],
status: null,
checkOrder: "desc",
normalize: true,
page: page,
rowsPerPage: rowsPerPage,
filter: null,
field: sort.field,
order: sort.order,
});
setMonitors(res?.data?.data?.monitors ?? []);
setMonitorCount(res?.data?.data?.monitorCount ?? 0);
} catch (error) {
@@ -172,19 +178,80 @@ 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 (
<>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Host</TableCell>
<TableCell>
<TableCell
sx={{ cursor: "pointer" }}
onClick={() => handleSort("name")}
>
<Box>
Host
<span
style={{
visibility: sort.field === "name" ? "visible" : "hidden",
}}
>
{sort.order === "asc" ? (
<ArrowUpwardRoundedIcon />
) : (
<ArrowDownwardRoundedIcon />
)}
</span>
</Box>
</TableCell>
<TableCell
sx={{ cursor: "pointer" }}
onClick={() => handleSort("status")}
>
{" "}
<Box width="max-content">
{" "}
Status
<span>
<ArrowDownwardRoundedIcon />
<span
style={{
visibility:
sort.field === "status" ? "visible" : "hidden",
}}
>
{sort.order === "asc" ? (
<ArrowUpwardRoundedIcon />
) : (
<ArrowDownwardRoundedIcon />
)}
</span>
</Box>
</TableCell>

View File

@@ -29,17 +29,20 @@ const PageSpeed = ({ isAdmin }) => {
const fetchMonitors = async () => {
try {
setIsLoading(true);
const res = await networkService.getMonitorsByTeamId(
authToken,
user.teamId,
10,
["pagespeed"],
null,
"desc",
true,
null,
null
);
const res = await networkService.getMonitorsByTeamId({
authToken: authToken,
teamId: user.teamId,
limit: 10,
types: ["pagespeed"],
status: null,
checkOrder: "desc",
normalize: true,
page: null,
rowsPerPage: null,
filter: null,
field: null,
order: null,
});
if (res?.data?.data?.monitors) {
setMonitors(res.data.data.monitors);
}

View File

@@ -83,26 +83,37 @@ class NetworkService {
* ************************************
*
* @async
* @param {string} authToken - The authorization token to be used in the request header.
* @param {string} userId - The ID of the user whose monitors are to be retrieved.
* @param {number} [limit] - The maximum number of monitors to retrieve.
* @param {Array<string>} [types] - The types of monitors to retrieve.
* @param {string} [status] - The status of the monitors to retrieve.
* @param {string} [sortOrder] - The order in which to sort the retrieved monitors.
* @param {boolean} [normalize] - Whether to normalize the retrieved monitors.
* @param {Object} config - The configuration object.
* @param {string} config.authToken - The authorization token to be used in the request header.
* @param {string} config.teamId - The ID of the team whose monitors are to be retrieved.
* @param {number} [config.limit] - The maximum number of monitors to retrieve.
* @param {Array<string>} [config.types] - The types of monitors to retrieve.
* @param {string} [config.status] - The status of the monitors to retrieve.
* @param {string} [config.checkOrder] - The order in which to sort the retrieved monitors.
* @param {boolean} [config.normalize] - Whether to normalize the retrieved monitors.
* @param {number} [config.page] - The page number for pagination.
* @param {number} [config.rowsPerPage] - The number of rows per page for pagination.
* @param {string} [config.filter] - The filter to apply to the monitors.
* @param {string} [config.field] - The field to sort by.
* @param {string} [config.order] - The order in which to sort the field.
* @returns {Promise<AxiosResponse>} The response from the axios GET request.
*/
async getMonitorsByTeamId(
authToken,
teamId,
limit,
types,
status,
sortOrder,
normalize,
page,
rowsPerPage
) {
async getMonitorsByTeamId(config) {
const {
authToken,
teamId,
limit,
types,
status,
checkOrder,
normalize,
page,
rowsPerPage,
filter,
field,
order,
} = config;
const params = new URLSearchParams();
if (limit) params.append("limit", limit);
@@ -112,10 +123,13 @@ class NetworkService {
});
}
if (status) params.append("status", status);
if (sortOrder) params.append("sortOrder", sortOrder);
if (checkOrder) params.append("checkOrder", checkOrder);
if (normalize) params.append("normalize", normalize);
if (page) params.append("page", page);
if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
if (filter) params.append("filter", filter);
if (field) params.append("field", field);
if (order) params.append("order", order);
return this.axiosInstance.get(
`/monitors/team/${teamId}?${params.toString()}`,

View File

@@ -347,13 +347,31 @@ const getMonitorsAndSummaryByTeamId = async (teamId, type) => {
*/
const getMonitorsByTeamId = async (req, res) => {
try {
let { limit, type, status, sortOrder, normalize, page, rowsPerPage } =
req.query || {};
const monitorQuery = { teamId: req.params.teamId };
const monitorsCount = await Monitor.countDocuments({
teamId: req.params.teamId,
let {
limit,
type,
});
status,
checkOrder,
normalize,
page,
rowsPerPage,
filter,
field,
order,
} = req.query || {};
const monitorQuery = { teamId: req.params.teamId };
if (type !== undefined) {
monitorQuery.type = type;
}
// Add filter if provided
// $options: "i" makes the search case-insensitive
if (filter !== undefined) {
monitorQuery.$or = [
{ name: { $regex: filter, $options: "i" } },
{ url: { $regex: filter, $options: "i" } },
];
}
const monitorsCount = await Monitor.countDocuments(monitorQuery);
// Pagination
let skip = 0;
@@ -367,15 +385,22 @@ const getMonitorsByTeamId = async (req, res) => {
}
// Default sort order is newest -> oldest
if (sortOrder === "asc") {
sortOrder = 1;
} else if (sortOrder === "desc") {
sortOrder = -1;
} else sortOrder = -1;
if (checkOrder === "asc") {
checkOrder = 1;
} else if (checkOrder === "desc") {
checkOrder = -1;
} else checkOrder = -1;
// Sort order for monitors
let sort = {};
if (field !== undefined && order !== undefined) {
sort[field] = order === "asc" ? 1 : -1;
}
const monitors = await Monitor.find(monitorQuery)
.skip(skip)
.limit(rowsPerPage);
.limit(rowsPerPage)
.sort(sort);
// Early return if limit is set to -1, indicating we don't want any checks
if (limit === "-1") {
@@ -402,7 +427,7 @@ const getMonitorsByTeamId = async (req, res) => {
let checks = await model
.find(checksQuery)
.sort({
createdAt: sortOrder,
createdAt: checkOrder,
})
.limit(limit);

View File

@@ -180,7 +180,7 @@ const getMonitorsByTeamIdValidation = joi.object({
const getMonitorsByTeamIdQueryValidation = joi.object({
status: joi.boolean(),
sortOrder: joi.string().valid("asc", "desc"),
checkOrder: joi.string().valid("asc", "desc"),
limit: joi.number(),
normalize: joi.boolean(),
type: joi
@@ -191,6 +191,9 @@ const getMonitorsByTeamIdQueryValidation = joi.object({
),
page: joi.number(),
rowsPerPage: joi.number(),
filter: joi.string(),
field: joi.string(),
order: joi.string().valid("asc", "desc"),
});
const getMonitorStatsByIdParamValidation = joi.object({