diff --git a/src/Pages/DistributedUptimeStatus/Create/index.jsx b/src/Pages/DistributedUptimeStatus/Create/index.jsx
index 3aa16a074..0dc6aeb93 100644
--- a/src/Pages/DistributedUptimeStatus/Create/index.jsx
+++ b/src/Pages/DistributedUptimeStatus/Create/index.jsx
@@ -7,6 +7,8 @@ import VisuallyHiddenInput from "./Components/VisuallyHiddenInput";
import Image from "../../../Components/Image";
import LogoPlaceholder from "../../../assets/Images/logo_placeholder.svg";
import Breadcrumbs from "../../../Components/Breadcrumbs";
+import Search from "../../../Components/Inputs/Search";
+import MonitorList from "../../StatusPage/Create/Components/MonitorList";
// Utils
import { useTheme } from "@emotion/react";
import { useState, useEffect } from "react";
@@ -17,6 +19,7 @@ import { statusPageValidation } from "../../../Validation/validation";
import { buildErrors } from "../../../Validation/error";
import { createToast } from "../../../Utils/toastUtils";
import { useNavigate } from "react-router-dom";
+import { useMonitorsFetch } from "../../StatusPage/Create/Hooks/useMonitorsFetch";
const CreateStatus = () => {
const theme = useTheme();
@@ -28,6 +31,8 @@ const CreateStatus = () => {
const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
useStatusPageFetch(isCreate, url);
+ const [monitors, monitorsIsLoading, monitorsNetworkError] = useMonitorsFetch();
+
const BREADCRUMBS = [
{ name: "distributed uptime", path: "/distributed-uptime" },
{ name: "details", path: `/distributed-uptime/${monitorId}` },
@@ -43,6 +48,8 @@ const CreateStatus = () => {
monitors: [monitorId],
});
const [errors, setErrors] = useState({});
+ const [search, setSearch] = useState("");
+ const [selectedMonitors, setSelectedMonitors] = useState([]);
const handleFormChange = (e) => {
const { name, value, checked, type } = e.target;
@@ -62,6 +69,16 @@ const CreateStatus = () => {
setForm({ ...form, [name]: value });
};
+ const handleMonitorsChange = (selectedMonitors) => {
+ handleFormChange({
+ target: {
+ name: "subMonitors",
+ value: selectedMonitors.map((monitor) => monitor._id),
+ },
+ });
+ setSelectedMonitors(selectedMonitors);
+ };
+
const handleImageUpload = (e) => {
const img = e.target?.files?.[0];
setForm((prev) => ({
@@ -85,7 +102,6 @@ const CreateStatus = () => {
if (typeof logoToSubmit !== "undefined") {
formToSubmit.logo = logoToSubmit;
}
-
// Validate
const { error } = statusPageValidation.validate(formToSubmit, { abortEarly: false });
if (typeof error === "undefined") {
@@ -134,6 +150,12 @@ const CreateStatus = () => {
});
}, [isCreate, statusPage, statusPageMonitors]);
+ const imgSrc = form?.logo?.src
+ ? form.logo.src
+ : form.logo
+ ? URL.createObjectURL(form.logo)
+ : undefined;
+
return (
@@ -212,7 +234,7 @@ const CreateStatus = () => {
alignItems="center"
>
{
+
+
+ Standard Monitors
+
+ Attach standard monitors to your status page.
+
+
+
+
+
+
+
{
fd.append("monitors[]", monitorId);
});
+ form.subMonitors &&
+ form.subMonitors.forEach((monitorId) => {
+ fd.append("subMonitors[]", monitorId);
+ });
if (form?.logo?.src && form?.logo?.src !== "") {
const imageResult = await axios.get(form.logo.src, {
responseType: "blob",
diff --git a/src/Validation/validation.js b/src/Validation/validation.js
index 04088e44c..68c0b5f12 100644
--- a/src/Validation/validation.js
+++ b/src/Validation/validation.js
@@ -226,6 +226,7 @@ const statusPageValidation = joi.object({
"array.empty": "At least one monitor is required",
"any.required": "At least one monitor is required",
}),
+ subMonitors: joi.array().optional(),
logo: logoImageValidation,
showUptimePercentage: joi.boolean(),
showCharts: joi.boolean(),