From dc6c947043649365a2a4f484c5d5d8bcaac74ed6 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 10:06:10 -0700 Subject: [PATCH 1/7] add hook for fetching monitors with summary --- src/Hooks/useFetchMonitorsWithSummary.js | 36 ++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/Hooks/useFetchMonitorsWithSummary.js diff --git a/src/Hooks/useFetchMonitorsWithSummary.js b/src/Hooks/useFetchMonitorsWithSummary.js new file mode 100644 index 000000000..009984738 --- /dev/null +++ b/src/Hooks/useFetchMonitorsWithSummary.js @@ -0,0 +1,36 @@ +import { useEffect, useState } from "react"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; + +export const useFetchMonitorsWithSummary = ({ teamId, types }) => { + const [isLoading, setIsLoading] = useState(false); + const [monitors, setMonitors] = useState(undefined); + const [monitorsSummary, setMonitorsSummary] = useState(undefined); + const [networkError, setNetworkError] = useState(false); + + useEffect(() => { + const fetchMonitors = async () => { + try { + setIsLoading(true); + const res = await networkService.getMonitorsWithSummaryByTeamId({ + teamId, + types, + }); + const { monitors, summary } = res?.data?.data ?? {}; + setMonitors(monitors); + setMonitorsSummary(summary); + } catch (error) { + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + fetchMonitors(); + }, [teamId, types]); + return [monitors, monitorsSummary, isLoading, networkError]; +}; + +export default useFetchMonitorsWithSummary; From 4b166ceca3eac3e7fa3c3769c1b069de9c5dbeed Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 10:06:36 -0700 Subject: [PATCH 2/7] add network op --- src/Utils/NetworkService.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js index 6b9aebd60..b27e0cb06 100644 --- a/src/Utils/NetworkService.js +++ b/src/Utils/NetworkService.js @@ -1033,6 +1033,29 @@ class NetworkService { return this.axiosInstance.delete(`/status-page/${encodedUrl}`, {}); } + + // ************************************ + // Fetch monitors with summary by TeamID + // ************************************ + async getMonitorsWithSummaryByTeamId(config) { + const { teamId, types } = config; + const params = new URLSearchParams(); + + if (types) { + types.forEach((type) => { + params.append("type", type); + }); + } + + return this.axiosInstance.get( + `/monitors/summary/team/${teamId}?${params.toString()}`, + { + headers: { + "Content-Type": "application/json", + }, + } + ); + } } export default NetworkService; From 43f8377b9988d606c58edf28392570fff7d7b127 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 11:04:31 -0700 Subject: [PATCH 3/7] use updatedAt --- src/Components/Charts/BarChart/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Charts/BarChart/index.jsx b/src/Components/Charts/BarChart/index.jsx index 101afe648..375773b94 100644 --- a/src/Components/Charts/BarChart/index.jsx +++ b/src/Components/Charts/BarChart/index.jsx @@ -58,7 +58,7 @@ const BarChart = ({ checks = [] }) => { <> {formatDateWithTz( - check.createdAt, + check.updatedAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone )} From acd3e873308b8c9e11a136eb766fb07e27fa25b9 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 11:04:50 -0700 Subject: [PATCH 4/7] log error --- src/Hooks/useFetchMonitorsWithSummary.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Hooks/useFetchMonitorsWithSummary.js b/src/Hooks/useFetchMonitorsWithSummary.js index 009984738..7d1b6ec78 100644 --- a/src/Hooks/useFetchMonitorsWithSummary.js +++ b/src/Hooks/useFetchMonitorsWithSummary.js @@ -20,6 +20,7 @@ export const useFetchMonitorsWithSummary = ({ teamId, types }) => { setMonitors(monitors); setMonitorsSummary(summary); } catch (error) { + console.error(error); setNetworkError(true); createToast({ body: error.message, From 176ced29dfe4052af2db4adf224424ad0e23f8f2 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 11:05:33 -0700 Subject: [PATCH 5/7] use new hooks --- src/Pages/Uptime/Monitors/index.jsx | 62 +++++++++++++++++------------ 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/src/Pages/Uptime/Monitors/index.jsx b/src/Pages/Uptime/Monitors/index.jsx index 625b1920a..0187d0d34 100644 --- a/src/Pages/Uptime/Monitors/index.jsx +++ b/src/Pages/Uptime/Monitors/index.jsx @@ -1,3 +1,8 @@ +// Required Data +// 1. Monitor summary +// 2. List of monitors filtered by search term with 25 checks each +// 2a.List of monitors must have the total number of monitors that match. + // Components import Breadcrumbs from "../../../Components/Breadcrumbs"; import Greeting from "../../../Utils/greeting"; @@ -23,9 +28,11 @@ import useMonitorsFetch from "./Hooks/useMonitorsFetch"; import { useSelector, useDispatch } from "react-redux"; import { setRowsPerPage } from "../../../Features/UI/uiSlice"; import PropTypes from "prop-types"; +import useFetchMonitorsWithSummary from "../../../Hooks/useFetchMonitorsWithSummary"; +import useFetchMonitorsWithChecks from "../../../Hooks/useFetchMonitorsWithChecks"; const BREADCRUMBS = [{ name: `Uptime`, path: "/uptime" }]; - +const TYPES = ["http", "ping", "docker", "port"]; const CreateMonitorButton = ({ shouldRender }) => { // Utils const navigate = useNavigate(); @@ -89,23 +96,32 @@ const UptimeMonitors = () => { }, []); const teamId = user.teamId; - const { - monitorsAreLoading, - monitors, - filteredMonitors, - monitorsSummary, - networkError, - } = useMonitorsFetch({ + + const [monitors, monitorsSummary, monitorsWithSummaryIsLoading, networkError] = + useFetchMonitorsWithSummary({ + teamId, + types: TYPES, + }); + + const [ + monitorsWithChecks, + monitorsWithChecksCount, + monitorsWithChecksIsLoading, + monitorsWithChecksNetworkError, + ] = useFetchMonitorsWithChecks({ teamId, + types: TYPES, limit: 25, page: page, rowsPerPage: rowsPerPage, filter: search, field: sort?.field, order: sort?.order, - triggerUpdate: monitorUpdateTrigger, + triggerUpdate, }); - const totalMonitors = monitorsSummary?.totalMonitors; + + const isLoading = monitorsWithSummaryIsLoading || monitorsWithChecksIsLoading; + if (networkError) { return ( @@ -121,8 +137,9 @@ const UptimeMonitors = () => { ); } if ( - !monitorsAreLoading && - (totalMonitors === 0 || typeof totalMonitors === "undefined") + !isLoading && + (monitorsSummary?.totalMonitors === 0 || + typeof monitorsSummary?.totalMonitors === "undefined") ) { return ( { 0 && !monitorsAreLoading} - monitorCount={totalMonitors} + shouldRender={monitors?.length > 0 && !monitorsWithSummaryIsLoading} + monitorCount={monitorsSummary?.totalMonitors} heading={"Uptime monitors"} > { Date: Fri, 14 Mar 2025 11:05:49 -0700 Subject: [PATCH 6/7] add new hook for monitor with checks --- src/Hooks/useFetchMonitorsWithChecks.js | 71 +++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 src/Hooks/useFetchMonitorsWithChecks.js diff --git a/src/Hooks/useFetchMonitorsWithChecks.js b/src/Hooks/useFetchMonitorsWithChecks.js new file mode 100644 index 000000000..0a0efa103 --- /dev/null +++ b/src/Hooks/useFetchMonitorsWithChecks.js @@ -0,0 +1,71 @@ +import { useEffect, useState } from "react"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; +import { useTheme } from "@emotion/react"; +import { useMonitorUtils } from "./useMonitorUtils"; + +export const useFetchMonitorsWithChecks = ({ + teamId, + types, + limit, + page, + rowsPerPage, + filter, + field, + order, + triggerUpdate, +}) => { + const [isLoading, setIsLoading] = useState(false); + const [count, setCount] = useState(undefined); + const [monitors, setMonitors] = useState(undefined); + const [networkError, setNetworkError] = useState(false); + + const theme = useTheme(); + const { getMonitorWithPercentage } = useMonitorUtils(); + useEffect(() => { + const fetchMonitors = async () => { + try { + setIsLoading(true); + const res = await networkService.getMonitorsWithChecksByTeamId({ + teamId, + limit, + types, + page, + rowsPerPage, + filter, + field, + order, + }); + const { count, monitors } = res?.data?.data ?? {}; + const mappedMonitors = monitors.map((monitor) => + getMonitorWithPercentage(monitor, theme) + ); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); + } catch (error) { + console.error(error); + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + fetchMonitors(); + }, [ + field, + filter, + getMonitorWithPercentage, + limit, + order, + page, + rowsPerPage, + teamId, + theme, + types, + ]); + return [monitors, count, isLoading, networkError]; +}; + +export default useFetchMonitorsWithChecks; From badcf436b6d1cd1f4d673029f7ced79ad8bfe320 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 11:06:10 -0700 Subject: [PATCH 7/7] add network op --- src/Utils/NetworkService.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js index b27e0cb06..ec8a10abf 100644 --- a/src/Utils/NetworkService.js +++ b/src/Utils/NetworkService.js @@ -1056,6 +1056,35 @@ class NetworkService { } ); } + + // ************************************ + // Fetch monitors with checks by TeamID + // ************************************ + async getMonitorsWithChecksByTeamId(config) { + const { teamId, limit, types, page, rowsPerPage, filter, field, order } = config; + const params = new URLSearchParams(); + + if (limit) params.append("limit", limit); + if (types) { + types.forEach((type) => { + params.append("type", type); + }); + } + 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}/with-checks?${params.toString()}`, + { + headers: { + "Content-Type": "application/json", + }, + } + ); + } } export default NetworkService;