From 7835b852c5de5b028e6d0f4afffa1d4e24782cf1 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Thu, 30 Jan 2025 01:41:19 +0530 Subject: [PATCH 01/34] Fix: Ensure profile panel text and button visibility in dark mode --- Client/src/Components/Inputs/Image/index.jsx | 2 +- Client/src/Components/TabPanels/Account/ProfilePanel.jsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx index a955a8ad6..46bcfe694 100644 --- a/Client/src/Components/Inputs/Image/index.jsx +++ b/Client/src/Components/Inputs/Image/index.jsx @@ -99,7 +99,7 @@ const ImageField = ({ id, src, loading, onChange }) => { Click to upload diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index e20cb13a4..7b94c5b16 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -445,7 +445,7 @@ const ProfilePanel = () => { > From 959e555744f6390a832a65cfb279bd227697641c Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Thu, 30 Jan 2025 17:44:28 +0530 Subject: [PATCH 02/34] Fix: Enhance MuiButton disabled state styles in theme --- Client/src/Components/Inputs/Image/index.jsx | 2 +- Client/src/Components/TabPanels/Account/ProfilePanel.jsx | 8 +------- Client/src/Utils/Theme/globalTheme.js | 4 ++++ 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx index 46bcfe694..6a16b9300 100644 --- a/Client/src/Components/Inputs/Image/index.jsx +++ b/Client/src/Components/Inputs/Image/index.jsx @@ -99,7 +99,7 @@ const ImageField = ({ id, src, loading, onChange }) => { Click to upload diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 7b94c5b16..e20cb13a4 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -445,7 +445,7 @@ const ProfilePanel = () => { > diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 12c377b3e..8805fe69f 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -110,6 +110,10 @@ const baseTheme = (palette) => ({ "&:hover": { boxShadow: "none", }, + "&.Mui-disabled": { + backgroundColor: theme.palette.secondary.main, + color: theme.palette.primary.main, + }, "&.MuiLoadingButton-root": { "&:disabled": { backgroundColor: theme.palette.secondary.main, From 263427dab3ec2fb59f5deaadd5371989590d4c68 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Thu, 6 Feb 2025 10:48:14 +0530 Subject: [PATCH 03/34] Fix: Disabled button color theme --- Client/src/Utils/Theme/globalTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 7f90705d0..bfa26a0e6 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -130,7 +130,7 @@ const baseTheme = (palette) => ({ }, "&.Mui-disabled": { backgroundColor: theme.palette.secondary.main, - color: theme.palette.primary.main, + color: theme.palette.primary.contrastText, }, "&.MuiLoadingButton-root": { "&:disabled": { From 52ad36d75f3fbf4870990d076d9a2778245e8016 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:40:12 -0800 Subject: [PATCH 04/34] make fields optional --- Server/validation/joi.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Server/validation/joi.js b/Server/validation/joi.js index d595f00fd..349ac9fcb 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -421,8 +421,8 @@ const getStatusPageParamValidation = joi.object({ const createStatusPageBodyValidation = joi.object({ companyName: joi.string().required(), url: joi.string().required(), - timezone: joi.string().required(), - color: joi.string().required(), + timezone: joi.string().optional(), + color: joi.string().optional(), monitors: joi .array() .items(joi.string().pattern(/^[0-9a-fA-F]{24}$/)) @@ -434,7 +434,7 @@ const createStatusPageBodyValidation = joi.object({ "any.required": "Monitors are required", }), isPublished: joi.boolean(), - showCharts: joi.boolean(), + showCharts: joi.boolean().optional(), showUptimePercentage: joi.boolean(), }); From 3eaf68aa5bbd7784ac35d8b172d40d51317348ce Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:40:33 -0800 Subject: [PATCH 05/34] add src and name to image validation --- Client/src/Validation/validation.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js index 988035cbe..6a2a56b94 100644 --- a/Client/src/Validation/validation.js +++ b/Client/src/Validation/validation.js @@ -180,6 +180,8 @@ const imageValidation = joi.object({ const logoImageValidation = joi .object({ + src: joi.string(), + name: joi.string(), type: joi .string() .valid("image/jpeg", "image/png") From b23ec3526077d86ee5f49fc03c40284cf6c2f789 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:41:06 -0800 Subject: [PATCH 06/34] add placeholder prop, add min width and height props --- Client/src/Components/Image/index.jsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Client/src/Components/Image/index.jsx b/Client/src/Components/Image/index.jsx index 9304a4385..8f30f8a9e 100644 --- a/Client/src/Components/Image/index.jsx +++ b/Client/src/Components/Image/index.jsx @@ -11,9 +11,12 @@ const Image = ({ alt, width = "auto", height = "auto", + minWidth = "auto", + minHeight = "auto", maxWidth = "auto", maxHeight = "auto", base64, + placeholder, sx, }) => { if (shouldRender === false) { @@ -28,11 +31,21 @@ const Image = ({ src = `data:image/png;base64,${base64}`; } + if ( + typeof src === "undefined" && + typeof base64 === "undefined" && + typeof placeholder !== "undefined" + ) { + src = placeholder; + } + return ( Date: Fri, 7 Feb 2025 14:42:04 -0800 Subject: [PATCH 07/34] add placeholder img --- Client/src/assets/Images/logo_placeholder.svg | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 Client/src/assets/Images/logo_placeholder.svg diff --git a/Client/src/assets/Images/logo_placeholder.svg b/Client/src/assets/Images/logo_placeholder.svg new file mode 100644 index 000000000..82f307b2d --- /dev/null +++ b/Client/src/assets/Images/logo_placeholder.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file From c015302811220f7dd7f855549c219f1f323d3117 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:42:24 -0800 Subject: [PATCH 08/34] update StatusPage model --- Server/db/models/StatusPage.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Server/db/models/StatusPage.js b/Server/db/models/StatusPage.js index e720327ed..2f9898300 100644 --- a/Server/db/models/StatusPage.js +++ b/Server/db/models/StatusPage.js @@ -15,12 +15,11 @@ const StatusPageSchema = mongoose.Schema( }, timezone: { type: String, - required: true, - default: "America/Toronto", + required: false, }, color: { type: String, - required: true, + required: false, default: "#4169E1", }, monitors: [ From 0cf26f82b77d6dd3268e7e9a2426361ca644cb85 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:42:38 -0800 Subject: [PATCH 09/34] add string --- Server/utils/messages.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Server/utils/messages.js b/Server/utils/messages.js index ffcfc3f1f..c8ff88f5a 100644 --- a/Server/utils/messages.js +++ b/Server/utils/messages.js @@ -135,6 +135,7 @@ const successMessages = { // Status Page STATUS_PAGE_BY_URL: "Got status page by url successfully", + STATUS_PAGE: "Got status page successfully", STATUS_PAGE_CREATE: "Status page created successfully", STATUS_PAGE_DELETE: "Status page deleted successfully", STATUS_PAGE_UPDATE: "Status page updated successfully", From b829bd45492ff8413a1d82ccc61f933b16263aeb Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:43:14 -0800 Subject: [PATCH 10/34] add route for getting status page by url, update delete route to delete by url --- Server/routes/statusPageRoute.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Server/routes/statusPageRoute.js b/Server/routes/statusPageRoute.js index 37ae313ee..020935834 100644 --- a/Server/routes/statusPageRoute.js +++ b/Server/routes/statusPageRoute.js @@ -12,6 +12,7 @@ class StatusPageRoutes { initRoutes() { this.router.get("/", this.statusPageController.getStatusPage); + this.router.get("/:url", this.statusPageController.getStatusPageByUrl); this.router.post( "/", upload.single("logo"), @@ -24,7 +25,7 @@ class StatusPageRoutes { verifyJWT, this.statusPageController.updateStatusPage ); - this.router.delete("/", verifyJWT, this.statusPageController.deleteStatusPage); + this.router.delete("/:url(*)", verifyJWT, this.statusPageController.deleteStatusPage); } getRouter() { From 14ce47d97bba752357990584ea5e2ed602cb69aa Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:44:08 -0800 Subject: [PATCH 11/34] add network request for getting status page by url, update create status page method --- Client/src/Utils/NetworkService.js | 38 ++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js index 52edfa91f..6d56990a9 100644 --- a/Client/src/Utils/NetworkService.js +++ b/Client/src/Utils/NetworkService.js @@ -974,19 +974,31 @@ class NetworkService { }); } + async getStatusPageByUrl(config) { + const { authToken, url } = config; + return this.axiosInstance.get(`/status-page/${url}`, { + headers: { + Authorization: `Bearer ${authToken}`, + "Content-Type": "application/json", + }, + }); + } + async createStatusPage(config) { const { authToken, user, form, isCreate } = config; const fd = new FormData(); - fd.append("isPublished", form.isPublished); - fd.append("companyName", form.companyName); - fd.append("url", form.url); - fd.append("timezone", form.timezone); - fd.append("color", form.color); - fd.append("showCharts", form.showCharts); - fd.append("showUptimePercentage", form.showUptimePercentage); - form.monitors.forEach((monitorId) => { - fd.append("monitors[]", monitorId); - }); + form.isPublished && fd.append("isPublished", form.isPublished); + form.companyName && fd.append("companyName", form.companyName); + form.url && fd.append("url", form.url); + form.timezone && fd.append("timezone", form.timezone); + form.color && fd.append("color", form.color); + form.showCharts && fd.append("showCharts", form.showCharts); + form.showUptimePercentage && + fd.append("showUptimePercentage", form.showUptimePercentage); + form.monitors && + form.monitors.forEach((monitorId) => { + fd.append("monitors[]", monitorId); + }); if (form?.logo?.src && form?.logo?.src !== "") { const imageResult = await axios.get(form.logo.src, { responseType: "blob", @@ -1013,8 +1025,10 @@ class NetworkService { } async deleteStatusPage(config) { - const { authToken } = config; - return this.axiosInstance.delete(`/status-page`, { + const { authToken, url } = config; + const encodedUrl = encodeURIComponent(url); + + return this.axiosInstance.delete(`/status-page/${encodedUrl}`, { headers: { Authorization: `Bearer ${authToken}`, }, From 45cd6320d873dd9ba853d908160572ee8fc623ff Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:44:31 -0800 Subject: [PATCH 12/34] add routes --- Client/src/Routes/index.jsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/Client/src/Routes/index.jsx b/Client/src/Routes/index.jsx index 3ace64ae1..25a8b562d 100644 --- a/Client/src/Routes/index.jsx +++ b/Client/src/Routes/index.jsx @@ -31,6 +31,8 @@ import InfrastructureDetails from "../Pages/Infrastructure/Details"; import DistributedUptimeMonitors from "../Pages/DistributedUptime/Monitors"; import CreateDistributedUptime from "../Pages/DistributedUptime/Create"; import DistributedUptimeDetails from "../Pages/DistributedUptime/Details"; +import DistributedUptimeStatus from "../Pages/DistributedUptime/Status"; +import CreateDistributedUptimeStatus from "../Pages/DistributedUptime/CreateStatus"; // Incidents import Incidents from "../Pages/Incidents"; @@ -110,6 +112,22 @@ const Routes = () => { } /> + + + + } + /> + + + + } + /> } From 27e4bd006c3e7ac408625bf154d9d305765f2b6b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:44:56 -0800 Subject: [PATCH 13/34] destructure monitors to add all properties --- Client/src/Hooks/useMonitorUtils.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/Client/src/Hooks/useMonitorUtils.js b/Client/src/Hooks/useMonitorUtils.js index 1e235af68..fc1966b69 100644 --- a/Client/src/Hooks/useMonitorUtils.js +++ b/Client/src/Hooks/useMonitorUtils.js @@ -22,10 +22,7 @@ const useMonitorUtils = () => { } return { - id: monitor._id, - name: monitor.name, - url: monitor.url, - title: monitor.name, + ...monitor, percentage: uptimePercentage, percentageColor, monitor: monitor, From 65bc98ca2e9a6da17dd18ca63fa5e91054ec364c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:46:36 -0800 Subject: [PATCH 14/34] add db method for getting status page by url, update delete method to delete by url --- Server/db/mongo/modules/statusPageModule.js | 25 +++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/Server/db/mongo/modules/statusPageModule.js b/Server/db/mongo/modules/statusPageModule.js index 2f31d2adb..7db9bb545 100644 --- a/Server/db/mongo/modules/statusPageModule.js +++ b/Server/db/mongo/modules/statusPageModule.js @@ -47,10 +47,21 @@ const updateStatusPage = async (statusPageData, image) => { } }; +const getStatusPageByUrl = async (url) => { + try { + const statusPage = await StatusPage.aggregate([{ $match: { url } }]); + return statusPage[0]; + } catch (error) { + error.service = SERVICE_NAME; + error.method = "getStatusPageByUrl"; + throw error; + } +}; + const getStatusPage = async () => { try { const statusPageQuery = await StatusPage.aggregate([ - { $limit: 1 }, + { $match: { url: "/status/public" } }, { $set: { originalMonitors: "$monitors", @@ -143,9 +154,9 @@ const getStatusPage = async () => { } }; -const deleteStatusPage = async () => { +const deleteStatusPage = async (url) => { try { - await StatusPage.deleteOne({}); + await StatusPage.deleteOne({ url }); } catch (error) { error.service = SERVICE_NAME; error.method = "createStatusPage"; @@ -153,4 +164,10 @@ const deleteStatusPage = async () => { } }; -export { createStatusPage, updateStatusPage, getStatusPage, deleteStatusPage }; +export { + createStatusPage, + updateStatusPage, + getStatusPage, + getStatusPageByUrl, + deleteStatusPage, +}; From c352ca39b1b19a66fe5babf5143b1bee999ac0de Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:47:22 -0800 Subject: [PATCH 15/34] add controller method for getting status page by url, update delete controlelr method --- Server/controllers/statusPageController.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Server/controllers/statusPageController.js b/Server/controllers/statusPageController.js index bcf241cc2..50f2e1ee4 100644 --- a/Server/controllers/statusPageController.js +++ b/Server/controllers/statusPageController.js @@ -62,7 +62,7 @@ class StatusPageController { try { const statusPage = await this.db.getStatusPage(); return res.success({ - msg: successMessages.STATUS_PAGE_BY_URL, + msg: successMessages.STATUS_PAGE, data: statusPage, }); } catch (error) { @@ -70,9 +70,21 @@ class StatusPageController { } }; + getStatusPageByUrl = async (req, res, next) => { + try { + const statusPage = await this.db.getStatusPageByUrl(req.params.url); + return res.success({ + msg: successMessages.STATUS_PAGE_BY_URL, + data: statusPage, + }); + } catch (error) { + next(handleError(error, SERVICE_NAME, "getStatusPageByUrl")); + } + }; + deleteStatusPage = async (req, res, next) => { try { - await this.db.deleteStatusPage(); + await this.db.deleteStatusPage(req.params.url); return res.success({ msg: successMessages.STATUS_PAGE_DELETE, }); From dec12cc6abef4a2804280a67bd2db712bde21bc7 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:47:52 -0800 Subject: [PATCH 16/34] add label prop --- Client/src/Components/MonitorCreateHeader/index.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/MonitorCreateHeader/index.jsx b/Client/src/Components/MonitorCreateHeader/index.jsx index 01a102b7d..565dca032 100644 --- a/Client/src/Components/MonitorCreateHeader/index.jsx +++ b/Client/src/Components/MonitorCreateHeader/index.jsx @@ -3,7 +3,12 @@ import { useNavigate } from "react-router-dom"; import PropTypes from "prop-types"; import SkeletonLayout from "./skeleton"; -const CreateMonitorHeader = ({ isAdmin, shouldRender = true, path }) => { +const CreateMonitorHeader = ({ + isAdmin, + label = "Create new", + shouldRender = true, + path, +}) => { const navigate = useNavigate(); if (!isAdmin) return null; if (!shouldRender) return ; @@ -18,7 +23,7 @@ const CreateMonitorHeader = ({ isAdmin, shouldRender = true, path }) => { color="accent" onClick={() => navigate(path)} > - Create new + {label} ); @@ -30,4 +35,5 @@ CreateMonitorHeader.propTypes = { isAdmin: PropTypes.bool.isRequired, shouldRender: PropTypes.bool, path: PropTypes.string.isRequired, + label: PropTypes.string, }; From d8c0839391ef9560043b759f83add6844461dcf1 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:48:14 -0800 Subject: [PATCH 17/34] add early return --- .../Details/Hooks/useSubscribeToDetails.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx index 409e9cf89..787281865 100644 --- a/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/Client/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx @@ -59,6 +59,9 @@ const useSubscribeToDetails = ({ monitorId, dateRange }) => { useEffect(() => { try { + if (typeof monitorId === "undefined") { + return; + } const cleanup = networkService.subscribeToDistributedUptimeDetails({ authToken, monitorId, @@ -116,4 +119,4 @@ const useSubscribeToDetails = ({ monitorId, dateRange }) => { return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger]; }; -export default useSubscribeToDetails; +export { useSubscribeToDetails }; From 163d1a3e6ed5d3a250285b5a2c0ab79b318ffc0b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:48:45 -0800 Subject: [PATCH 18/34] use correct _id instead of id --- .../Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx b/Client/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx index 0b39e141b..10fffe5bd 100644 --- a/Client/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx +++ b/Client/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx @@ -191,7 +191,7 @@ const UptimeDataTable = ({ }, }, onRowClick: (row) => { - navigate(`/uptime/${row.id}`); + navigate(`/uptime/${row._id}`); }, emptyView: "No monitors found", }} From 5c5d1b88e65f463611e0419799464ba36c9c37c8 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:49:38 -0800 Subject: [PATCH 19/34] udpate max width, safe property access --- .../Pages/StatusPage/Status/Components/ControlsHeader/index.jsx | 2 +- .../Pages/StatusPage/Status/Components/MonitorsList/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx b/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx index 11733fc61..f07aa19da 100644 --- a/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx +++ b/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx @@ -80,7 +80,7 @@ const ControlsHeader = ({ statusPage, isDeleting, isDeleteOpen, setIsDeleteOpen {"Company {statusPage?.companyName} diff --git a/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx b/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx index ff7a18f97..7f4af1e0c 100644 --- a/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx +++ b/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx @@ -34,7 +34,7 @@ const MonitorsList = ({ monitors = [] }) => { gap={theme.spacing(20)} > - + Date: Fri, 7 Feb 2025 14:50:14 -0800 Subject: [PATCH 20/34] add url to request, add missing dependency --- .../Pages/StatusPage/Status/Hooks/useStatusPageDelete.jsx | 5 ++--- .../src/Pages/StatusPage/Status/Hooks/useStatusPageFetch.jsx | 4 +++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageDelete.jsx b/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageDelete.jsx index 42138d373..f9699020c 100644 --- a/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageDelete.jsx +++ b/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageDelete.jsx @@ -4,15 +4,14 @@ import { networkService } from "../../../../main"; import { createToast } from "../../../../Utils/toastUtils"; import { useNavigate } from "react-router-dom"; -const useStatusPageDelete = (fetchStatusPage) => { +const useStatusPageDelete = (fetchStatusPage, url = "/status/public") => { const [isLoading, setIsLoading] = useState(false); const navigate = useNavigate(); const { authToken } = useSelector((state) => state.auth); - const deleteStatusPage = async () => { try { setIsLoading(true); - await networkService.deleteStatusPage({ authToken }); + await networkService.deleteStatusPage({ authToken, url }); fetchStatusPage?.(); return true; } catch (error) { diff --git a/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageFetch.jsx b/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageFetch.jsx index d2b2eae2a..013e32dd9 100644 --- a/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageFetch.jsx +++ b/Client/src/Pages/StatusPage/Status/Hooks/useStatusPageFetch.jsx @@ -18,11 +18,13 @@ const useStatusPageFetch = (isCreate = false) => { const response = await networkService.getStatusPage({ authToken }); if (!response?.data?.data) return; const { statusPage, monitors } = response.data.data; + setStatusPage(statusPage); const monitorsWithPercentage = monitors.map((monitor) => getMonitorWithPercentage(monitor, theme) ); + setMonitors(monitorsWithPercentage); } catch (error) { // If there is a 404, status page is not found @@ -35,7 +37,7 @@ const useStatusPageFetch = (isCreate = false) => { } finally { setIsLoading(false); } - }, [authToken, theme]); + }, [authToken, theme, getMonitorWithPercentage]); useEffect(() => { if (isCreate === true) { From 08b0ed9d3b4993c78e6ed15405f138fe6e029ba4 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:51:02 -0800 Subject: [PATCH 21/34] remove comment --- Client/src/Pages/StatusPage/Status/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/Client/src/Pages/StatusPage/Status/index.jsx b/Client/src/Pages/StatusPage/Status/index.jsx index e27bc8184..a957f3f2c 100644 --- a/Client/src/Pages/StatusPage/Status/index.jsx +++ b/Client/src/Pages/StatusPage/Status/index.jsx @@ -139,7 +139,6 @@ const PublicStatus = () => { {link} { deleteStatusPage(); From 6a1675aa4ab5a889a4e0e767ec621f0acb17bd12 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 7 Feb 2025 14:51:29 -0800 Subject: [PATCH 22/34] implement DU status page --- .../Components/VisuallyHiddenInput/index.jsx | 22 ++ .../DistributedUptime/CreateStatus/index.jsx | 217 ++++++++++++++++++ .../Pages/DistributedUptime/Details/index.jsx | 11 +- .../Components/MonitorTable/index.jsx | 2 +- .../Status/Hooks/useStatusPageFetchByUrl.jsx | 35 +++ .../Pages/DistributedUptime/Status/index.jsx | 135 +++++++++++ .../Components/MonitorsTable/index.jsx | 2 +- 7 files changed, 420 insertions(+), 4 deletions(-) create mode 100644 Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx create mode 100644 Client/src/Pages/DistributedUptime/CreateStatus/index.jsx create mode 100644 Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx create mode 100644 Client/src/Pages/DistributedUptime/Status/index.jsx diff --git a/Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx b/Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx new file mode 100644 index 000000000..fd002d2a4 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx @@ -0,0 +1,22 @@ +const VisuallyHiddenInput = ({ onChange }) => { + return ( + + ); +}; + +export default VisuallyHiddenInput; diff --git a/Client/src/Pages/DistributedUptime/CreateStatus/index.jsx b/Client/src/Pages/DistributedUptime/CreateStatus/index.jsx new file mode 100644 index 000000000..d244bfe38 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/CreateStatus/index.jsx @@ -0,0 +1,217 @@ +// Components +import { Stack, Typography, Button, Box } from "@mui/material"; +import ConfigBox from "../../../Components/ConfigBox"; +import Checkbox from "../../../Components/Inputs/Checkbox"; +import TextInput from "../../../Components/Inputs/TextInput"; +import VisuallyHiddenInput from "./Components/VisuallyHiddenInput"; +import Image from "../../../Components/Image"; +import LogoPlaceholder from "../../../assets/Images/logo_placeholder.svg"; +import Breadcrumbs from "../../../Components/Breadcrumbs"; +// Utils +import { useTheme } from "@emotion/react"; +import { useState } from "react"; +import { useParams } from "react-router-dom"; +import { useCreateStatusPage } from "../../StatusPage/Create/Hooks/useCreateStatusPage"; +import { useLocation } from "react-router-dom"; +import { statusPageValidation } from "../../../Validation/validation"; +import { buildErrors } from "../../../Validation/error"; +import { createToast } from "../../../Utils/toastUtils"; +import { useNavigate } from "react-router-dom"; + +const CreateStatus = () => { + const theme = useTheme(); + const { monitorId } = useParams(); + const navigate = useNavigate(); + const location = useLocation(); + const isCreate = location.pathname.startsWith("/distributed-uptime/status/create"); + const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate); + const BREADCRUMBS = [ + { name: "distributed uptime", path: "/distributed-uptime" }, + { name: "details", path: `/distributed-uptime/${monitorId}` }, + { name: "create status page", path: `` }, + ]; + // Local state + const [form, setForm] = useState({ + isPublished: false, + url: Math.floor(Math.random() * 1000000).toFixed(0), + logo: undefined, + companyName: "", + monitors: [monitorId], + }); + const [errors, setErrors] = useState({}); + + const handleFormChange = (e) => { + const { name, value, checked, type } = e.target; + + // Check for errors + const { error } = statusPageValidation.validate( + { [name]: value }, + { abortEarly: false } + ); + + setErrors((prev) => buildErrors(prev, name, error)); + + if (type === "checkbox") { + setForm({ ...form, [name]: checked }); + return; + } + setForm({ ...form, [name]: value }); + }; + + const handleImageUpload = (e) => { + const img = e.target?.files?.[0]; + setForm((prev) => ({ + ...prev, + logo: img, + })); + }; + const handleSubmit = async () => { + let logoToSubmit = undefined; + + // Handle image + if (typeof form.logo !== "undefined") { + logoToSubmit = { + src: URL.createObjectURL(form.logo), + name: form.logo.name, + type: form.logo.type, + size: form.logo.size, + }; + } + const formToSubmit = { ...form }; + if (typeof logoToSubmit !== "undefined") { + formToSubmit.logo = logoToSubmit; + } + + // Validate + const { error } = statusPageValidation.validate(formToSubmit, { abortEarly: false }); + if (typeof error === "undefined") { + const success = await createStatusPage({ form: formToSubmit }); + if (success) { + createToast({ body: "Status page created successfully" }); + navigate(`/distributed-uptime/status/${form.url}`); + } + return; + } + const newErrors = {}; + error?.details?.forEach((err) => { + newErrors[err.path[0]] = err.message; + }); + setErrors((prev) => ({ ...prev, ...newErrors })); + }; + + return ( + + + + + Create your{" "} + + + status page + + + + + Access + + If your status page is ready, you can mark it as published. + + + + + + + + + Basic Information + + Define company name and the subdomain that your status page points to. + + + + + + + + + + Logo + Upload a logo for your status page + + + Logo + + + + + + + + + + ); +}; + +export default CreateStatus; diff --git a/Client/src/Pages/DistributedUptime/Details/index.jsx b/Client/src/Pages/DistributedUptime/Details/index.jsx index ab39ec2ec..a8fc0c309 100644 --- a/Client/src/Pages/DistributedUptime/Details/index.jsx +++ b/Client/src/Pages/DistributedUptime/Details/index.jsx @@ -10,21 +10,23 @@ import StatBoxes from "./Components/StatBoxes"; import MonitorHeader from "./Components/MonitorHeader"; import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader"; import GenericFallback from "../../../Components/GenericFallback"; +import MonitorCreateHeader from "../../../Components/MonitorCreateHeader"; //Utils import { useTheme } from "@mui/material/styles"; import { useState } from "react"; import { useParams } from "react-router-dom"; -import useSubscribeToDetails from "./Hooks/useSubscribeToDetails"; +import { useIsAdmin } from "../../../Hooks/useIsAdmin"; +import { useSubscribeToDetails } from "./Hooks/useSubscribeToDetails"; const DistributedUptimeDetails = () => { const { monitorId } = useParams(); - // Local State const [dateRange, setDateRange] = useState("day"); // Utils const theme = useTheme(); + const isAdmin = useIsAdmin(); const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = useSubscribeToDetails({ monitorId, dateRange }); // Constants @@ -65,6 +67,11 @@ const DistributedUptimeDetails = () => { gap={theme.spacing(10)} > + { }, }, onRowClick: (row) => { - navigate(`/distributed-uptime/${row.id}`); + navigate(`/distributed-uptime/${row._id}`); }, }} /> diff --git a/Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx b/Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx new file mode 100644 index 000000000..973e157c7 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx @@ -0,0 +1,35 @@ +import { useState, useEffect } from "react"; +import { networkService } from "../../../../main"; +import { createToast } from "../../../../Utils/toastUtils"; +import { useSelector } from "react-redux"; + +const useStatusPageFetchByUrl = ({ url }) => { + const [isLoading, setIsLoading] = useState(true); + const [networkError, setNetworkError] = useState(false); + const [statusPage, setStatusPage] = useState(undefined); + const [monitorId, setMonitorId] = useState(undefined); + const { authToken } = useSelector((state) => state.auth); + useEffect(() => { + const fetchStatusPageByUrl = async () => { + try { + const response = await networkService.getStatusPageByUrl({ authToken, url }); + if (!response?.data?.data) return; + const statusPage = response.data.data; + setStatusPage(statusPage); + setMonitorId(statusPage?.monitors[0]); + } catch (error) { + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + fetchStatusPageByUrl(); + }, [authToken, url]); + + return [isLoading, networkError, statusPage, monitorId]; +}; + +export { useStatusPageFetchByUrl }; diff --git a/Client/src/Pages/DistributedUptime/Status/index.jsx b/Client/src/Pages/DistributedUptime/Status/index.jsx new file mode 100644 index 000000000..c2cee4c12 --- /dev/null +++ b/Client/src/Pages/DistributedUptime/Status/index.jsx @@ -0,0 +1,135 @@ +//Components +import DistributedUptimeMap from "../Details/Components/DistributedUptimeMap"; +import Breadcrumbs from "../../../Components/Breadcrumbs"; +import { Stack, Typography } from "@mui/material"; +import DeviceTicker from "../Details/Components/DeviceTicker"; +import DistributedUptimeResponseChart from "../Details/Components/DistributedUptimeResponseChart"; +import NextExpectedCheck from "../Details/Components/NextExpectedCheck"; +import Footer from "../Details/Components/Footer"; +import StatBoxes from "../Details/Components/StatBoxes"; +import ControlsHeader from "../../StatusPage/Status/Components/ControlsHeader"; +import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader"; +import GenericFallback from "../../../Components/GenericFallback"; +import Dialog from "../../../Components/Dialog"; +//Utils +import { useTheme } from "@mui/material/styles"; +import { useState } from "react"; +import { useParams } from "react-router-dom"; +import { useIsAdmin } from "../../../Hooks/useIsAdmin"; +import { useSubscribeToDetails } from "../Details/Hooks/useSubscribeToDetails"; +import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl"; +import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete"; +import { useNavigate } from "react-router-dom"; +const DistributedUptimeStatus = () => { + const { url } = useParams(); + // Local State + const [dateRange, setDateRange] = useState("day"); + const [isDeleteOpen, setIsDeleteOpen] = useState(false); + // Utils + const theme = useTheme(); + const navigate = useNavigate(); + const [statusPageIsLoading, statusPageNetworkError, statusPage, monitorId] = + useStatusPageFetchByUrl({ + url, + }); + + const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = + useSubscribeToDetails({ monitorId, dateRange }); + + const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => { + navigate("/distributed-uptime"); + }, url); + // Constants + const BREADCRUMBS = [ + { name: "Distributed Uptime", path: "/distributed-uptime" }, + { name: "status", path: `` }, + ]; + + if (networkError) { + return ( + + + Network error + + Please check your connection + + ); + } + + if (typeof monitor === "undefined" || monitor.totalChecks === 0) { + return ( + + + + There is no check history for this monitor yet. + + + ); + } + + return ( + + + + + + + + + + + +