Merge pull request #1736 from bluewave-labs/feat/fe/list-du-status-pages

feat: fe/list du status pages

Author: ajhollid

Client/src/Components/Fallback/index.jsx

@@ -27,7 +27,6 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 
 	return (
 		<Box
-			className="page-speed"
 			position="relative"
 			border={1}
 			borderColor={theme.palette.primary.lowContrast}

Client/src/Pages/DistributedUptime/Create/index.jsx

@@ -18,6 +18,7 @@ import { useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
 import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { useLocation } from "react-router-dom";
 
 // Constants
 const BREADCRUMBS = [
@@ -34,6 +35,9 @@ const SELECT_VALUES = [
 ];
 
 const CreateDistributedUptime = () => {
+	const location = useLocation();
+	const isCreate = location.pathname.startsWith("/distributed-uptime/create");
+
 	// Redux state
 	const { user, authToken } = useSelector((state) => state.auth);
 	const isLoading = useSelector((state) => state.uptimeMonitors.isLoading);
@@ -103,7 +107,6 @@ const CreateDistributedUptime = () => {
 			{ [name]: value },
 			{ abortEarly: false }
 		);
-		console.log(name);
 		setErrors((prev) => ({
 			...prev,
 			...(error ? { [name]: error.details[0].message } : { [name]: undefined }),

Client/src/Pages/DistributedUptime/Details/index.jsx

@@ -74,7 +74,7 @@ const DistributedUptimeDetails = () => {
 			<MonitorCreateHeader
 				label="Create status page"
 				isAdmin={isAdmin}
-				path={`/distributed-uptime/status/create/${monitorId}`}
+				path={`/status/distributed/create/${monitorId}`}
 			/>
 			<MonitorHeader monitor={monitor} />
 			<StatBoxes

Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx Client/src/Pages/DistributedUptimeStatus/Create/Components/VisuallyHiddenInput/index.jsx

@@ -9,8 +9,9 @@ import LogoPlaceholder from "../../../assets/Images/logo_placeholder.svg";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 // Utils
 import { useTheme } from "@emotion/react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { useStatusPageFetch } from "../../StatusPage/Status/Hooks/useStatusPageFetch";
 import { useCreateStatusPage } from "../../StatusPage/Create/Hooks/useCreateStatusPage";
 import { useLocation } from "react-router-dom";
 import { statusPageValidation } from "../../../Validation/validation";
@@ -20,20 +21,25 @@ import { useNavigate } from "react-router-dom";
 
 const CreateStatus = () => {
 	const theme = useTheme();
-	const { monitorId } = useParams();
+	const { monitorId, url } = useParams();
 	const navigate = useNavigate();
 	const location = useLocation();
-	const isCreate = location.pathname.startsWith("/distributed-uptime/status/create");
+	const isCreate = location.pathname.startsWith("/status/distributed/create");
 	const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate);
+
+	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
+		useStatusPageFetch(isCreate, url);
+
 	const BREADCRUMBS = [
 		{ name: "distributed uptime", path: "/distributed-uptime" },
 		{ name: "details", path: `/distributed-uptime/${monitorId}` },
-		{ name: "create status page", path: `` },
+		{ name: isCreate ? "create status page" : "edit status page", path: `` },
 	];
 	// Local state
 	const [form, setForm] = useState({
+		type: "distributed",
 		isPublished: false,
-		url: Math.floor(Math.random() * 1000000).toFixed(0),
+		url: url ?? Math.floor(Math.random() * 1000000).toFixed(0),
 		logo: undefined,
 		companyName: "",
 		monitors: [monitorId],
@@ -87,8 +93,9 @@ const CreateStatus = () => {
 		if (typeof error === "undefined") {
 			const success = await createStatusPage({ form: formToSubmit });
 			if (success) {
-				createToast({ body: "Status page created successfully" });
-				navigate(`/distributed-uptime/status/${form.url}`);
+				const verb = isCreate ? "created" : "updated";
+				createToast({ body: `Status page ${verb} successfully` });
+				navigate(`/status/distributed/${form.url}`);
 			}
 			return;
 		}
@@ -99,6 +106,36 @@ const CreateStatus = () => {
 		setErrors((prev) => ({ ...prev, ...newErrors }));
 	};
 
+	// If we are configuring, populate fields
+	useEffect(() => {
+		if (isCreate) return;
+		if (typeof statusPage === "undefined") {
+			return;
+		}
+
+		let newLogo = undefined;
+		if (statusPage.logo) {
+			newLogo = {
+				src: `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}`,
+				name: "logo",
+				type: statusPage.logo.contentType,
+				size: null,
+			};
+		}
+
+		setForm((prev) => {
+			return {
+				...prev,
+				companyName: statusPage?.companyName,
+				isPublished: statusPage?.isPublished,
+				timezone: statusPage?.timezone,
+				monitors: statusPageMonitors.map((monitor) => monitor._id),
+				color: statusPage?.color,
+				logo: newLogo,
+			};
+		});
+	}, [isCreate, statusPage, statusPageMonitors]);
+
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
@@ -159,6 +196,7 @@ const CreateStatus = () => {
 						name="url"
 						type="url"
 						label="Your status page address"
+						disabled={!isCreate}
 						value={form.url}
 						onChange={handleFormChange}
 						helperText={errors["url"]}

Client/src/Pages/DistributedUptime/CreateStatus/index.jsx Client/src/Pages/DistributedUptimeStatus/Create/index.jsx

@@ -13,7 +13,11 @@ const useStatusPageFetchByUrl = ({ url }) => {
 	useEffect(() => {
 		const fetchStatusPageByUrl = async () => {
 			try {
-				const response = await networkService.getStatusPageByUrl({ authToken, url });
+				const response = await networkService.getStatusPageByUrl({
+					authToken,
+					url,
+					type: "distributed",
+				});
 				if (!response?.data?.data) return;
 				const statusPage = response.data.data;
 				setStatusPage(statusPage);

Client/src/Pages/DistributedUptime/Status/Components/Skeleton/index.jsx Client/src/Pages/DistributedUptimeStatus/Status/Components/Skeleton/index.jsx

@@ -1,12 +1,12 @@
 //Components
-import DistributedUptimeMap from "../Details/Components/DistributedUptimeMap";
+import DistributedUptimeMap from "../../DistributedUptime/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 DeviceTicker from "../../DistributedUptime/Details/Components/DeviceTicker";
+import DistributedUptimeResponseChart from "../../DistributedUptime/Details/Components/DistributedUptimeResponseChart";
+import NextExpectedCheck from "../../DistributedUptime/Details/Components/NextExpectedCheck";
+import Footer from "../../DistributedUptime/Details/Components/Footer";
+import StatBoxes from "../../DistributedUptime/Details/Components/StatBoxes";
 import ControlsHeader from "../../StatusPage/Status/Components/ControlsHeader";
 import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import GenericFallback from "../../../Components/GenericFallback";
@@ -16,15 +16,15 @@ import SkeletonLayout from "./Components/Skeleton";
 import { useTheme } from "@mui/material/styles";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { useSubscribeToDetails } from "../Details/Hooks/useSubscribeToDetails";
+import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
 import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl";
 import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
 import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 const DistributedUptimeStatus = () => {
 	const { url } = useParams();
 	const location = useLocation();
-	const isPublic = location.pathname.startsWith("/distributed-uptime/status/public");
+	const isPublic = location.pathname.startsWith("/status/distributed/public");
 
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
@@ -84,7 +84,7 @@ const DistributedUptimeStatus = () => {
 	}
 
 	// Done loading, a status page exists but is not public
-	if (!statusPageIsLoading && statusPage.isPublished === false) {
+	if (!statusPageIsLoading && isPublic && statusPage.isPublished === false) {
 		return (
 			<Stack sx={sx}>
 				<GenericFallback>
@@ -141,6 +141,8 @@ const DistributedUptimeStatus = () => {
 				isDeleting={isDeleting}
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}
+				url={url}
+				type="distributed"
 			/>
 			<StatBoxes
 				monitor={monitor}

Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx Client/src/Pages/DistributedUptimeStatus/Status/Hooks/useStatusPageFetchByUrl.jsx

@@ -15,6 +15,7 @@ import timezones from "../../../../../Utils/timezones.json";
 import PropTypes from "prop-types";
 
 const TabSettings = ({
+	isCreate,
 	tabValue,
 	form,
 	handleFormChange,
@@ -68,8 +69,8 @@ const TabSettings = ({
 							id="url"
 							name="url"
 							type="url"
+							disabled={!isCreate}
 							label="Your status page address"
-							disabled
 							value={form.url}
 							onChange={handleFormChange}
 						/>
@@ -128,6 +129,7 @@ const TabSettings = ({
 };
 
 TabSettings.propTypes = {
+	isCreate: PropTypes.bool,
 	tabValue: PropTypes.string,
 	form: PropTypes.object,
 	handleFormChange: PropTypes.func,

Client/src/Pages/DistributedUptime/Status/index.jsx Client/src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -8,6 +8,7 @@ import Content from "./Content";
 import PropTypes from "prop-types";
 
 const Tabs = ({
+	isCreate,
 	form,
 	errors,
 	monitors,
@@ -47,6 +48,7 @@ const Tabs = ({
 					progress={progress}
 					removeLogo={removeLogo}
 					errors={errors}
+					isCreate={isCreate}
 				/>
 			) : (
 				<Content

Client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx

@@ -3,15 +3,15 @@ import { networkService } from "../../../../main";
 import { useSelector } from "react-redux";
 import { createToast } from "../../../../Utils/toastUtils";
 
-const useCreateStatusPage = (isCreate) => {
+const useCreateStatusPage = (isCreate, url) => {
 	const { authToken, user } = useSelector((state) => state.auth);
 
 	const [isLoading, setIsLoading] = useState(false);
 	const [networkError, setNetworkError] = useState(false);
 	const createStatusPage = async ({ form }) => {
 		setIsLoading(true);
 		try {
-			await networkService.createStatusPage({ authToken, user, form, isCreate });
+			await networkService.createStatusPage({ authToken, user, form, isCreate, url });
 			return true;
 		} catch (error) {
 			setNetworkError(true);

Client/src/Pages/StatusPage/Create/Components/Tabs/index.jsx

@@ -14,6 +14,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import { useStatusPageFetch } from "../Status/Hooks/useStatusPageFetch";
+import { useParams } from "react-router-dom";
 
 //Constants
 const TAB_LIST = ["General settings", "Contents"];
@@ -24,16 +25,18 @@ const ERROR_TAB_MAPPING = [
 ];
 
 const CreateStatusPage = () => {
+	const { url } = useParams();
 	//Local state
 	const [tab, setTab] = useState(0);
 	const [progress, setProgress] = useState({ value: 0, isLoading: false });
 	const [form, setForm] = useState({
 		isPublished: false,
 		companyName: "",
-		url: "/status/public",
+		url: url ?? Math.floor(Math.random() * 1000000).toFixed(0),
 		logo: undefined,
 		timezone: "America/Toronto",
 		color: "#4169E1",
+		type: "uptime",
 		monitors: [],
 		showCharts: true,
 		showUptimePercentage: true,
@@ -45,16 +48,17 @@ const CreateStatusPage = () => {
 
 	// Setup
 	const location = useLocation();
-	const isCreate = location.pathname === "/status/create";
+	const isCreate = location.pathname === "/status/uptime/create";
 
 	//Utils
 	const theme = useTheme();
 	const [monitors, isLoading, networkError] = useMonitorsFetch();
 	const [createStatusPage, createStatusIsLoading, createStatusPageNetworkError] =
 		useCreateStatusPage(isCreate);
 	const navigate = useNavigate();
+
 	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
-		useStatusPageFetch(isCreate);
+		useStatusPageFetch(isCreate, url);
 
 	// Handlers
 	const handleFormChange = (e) => {
@@ -131,7 +135,7 @@ const CreateStatusPage = () => {
 			const success = await createStatusPage({ form });
 			if (success) {
 				createToast({ body: "Status page created successfully" });
-				navigate("/status");
+				navigate(`/status/uptime/${form.url}`);
 			}
 			return;
 		}
@@ -141,7 +145,6 @@ const CreateStatusPage = () => {
 			newErrors[err.path[0]] = err.message;
 		});
 		setErrors((prev) => ({ ...prev, ...newErrors }));
-
 		const errorTabs = Object.keys(newErrors).map((err) => {
 			return ERROR_TAB_MAPPING.findIndex((tab) => tab.includes(err));
 		});
@@ -150,6 +153,13 @@ const CreateStatusPage = () => {
 		if (errorTabs.some((errorTab) => errorTab === tab)) {
 			return;
 		}
+
+		// If we get -1, there's an unknown error
+		if (errorTabs[0] === -1) {
+			createToast({ body: "Unknown error" });
+			return;
+		}
+
 		// Otherwise go to tab with error
 		setTab(errorTabs[0]);
 	};
@@ -218,6 +228,7 @@ const CreateStatusPage = () => {
 				tab={tab}
 				setTab={setTab}
 				TAB_LIST={TAB_LIST}
+				isCreate={isCreate}
 			/>
 			<Stack
 				direction="row"