diff --git a/Client/src/Components/TabPanels/Status/ContentPanel.jsx b/Client/src/Components/TabPanels/Status/ContentPanel.jsx
deleted file mode 100644
index 4b8b92aa5..000000000
--- a/Client/src/Components/TabPanels/Status/ContentPanel.jsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { useState, useContext, useEffect } from "react";
-import { Button, Box, Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import TabPanel from "@mui/lab/TabPanel";
-
-import ConfigBox from "../../../Components/ConfigBox";
-import { StatusFormContext } from "../../../Pages/StatusPage/CreateStatusContext";
-import { useSelector } from "react-redux";
-import { logger } from "../../../Utils/Logger";
-import { createToast } from "../../../Utils/toastUtils";
-import { networkService } from "../../../main";
-import ServersList from "./ServersList";
-import Checkbox from "../../Inputs/Checkbox";
-import { publicPageSettingsValidation } from "../../../Validation/validation";
-import { buildErrors } from "../../../Validation/error";
-
-/**
- * Content Panel is used to compose the second part of the status page
- * for the servers/monitors to watch for in its public page presence and some
- * other server related configurations etc
- *
- */
-const ContentPanel = () => {
- const theme = useTheme();
- const { form, setForm, errors, setErrors, handleBlur, handelCheckboxChange } =
- useContext(StatusFormContext);
- const [cards, setCards] = useState([]);
- const { user, authToken } = useSelector((state) => state.auth);
- const [monitors, setMonitors] = useState([]);
-
- useEffect(() => {
- const fetchMonitors = async () => {
- try {
- const response = await networkService.getMonitorsByTeamId({
- authToken: authToken,
- teamId: user.teamId,
- limit: null, // donot return any checks for the monitors
- types: ["http"], // status page is available only for the uptime type
- });
- if (response.data.data.monitors.length == 0) {
- setErrors({ monitors: "Please config monitors to setup status page" });
- }
- const fullMonitors = response.data.data.monitors;
- setMonitors(fullMonitors);
- if (form.monitors.length > 0) {
- const initiCards = form.monitors.map((mid, idx) => ({
- id: "" + idx,
- val: fullMonitors.filter((fM) =>
- mid._id ? fM._id == mid._id : fM._id == mid
- )[0],
- }));
- setCards(initiCards);
- }
- } catch (error) {
- createToast({ body: "Failed to fetch monitors data" });
- logger.error("Failed to fetch monitors", error);
- }
- };
- fetchMonitors();
- }, [user, authToken]);
- const handleAddNew = () => {
- if (cards.length === monitors.length) return;
- const newCards = [...cards, { id: "" + Math.random(), val: {} }];
- setCards(newCards);
- };
- const removeCard = (id) => {
- const newCards = cards.filter((c) => c?.id != id);
- setCards(newCards);
- setForm({
- ...form,
- monitors: newCards.filter((c) => c.val !== undefined).map((c) => c.val),
- });
- };
-
- const handleServersBlur = () => {
- const { error } = publicPageSettingsValidation.validate(
- { monitors: form.monitors },
- {
- abortEarly: false,
- }
- );
- setErrors((prev) => {
- return buildErrors(prev, "monitors", error);
- });
- };
- return (
-
-
-
-
-
- Status page servers
-
- You can add any number of servers that you monitor to your status page.
- You can also reorder them for the best viewing experience.
-
-
-
-
-
-
- {" "}
- Servers list{" "}
-
-
-
-
-
-
- {errors["monitors"] && (
-
- {errors["monitors"]}
-
- )}
-
-
-
-
-
-
- Features
- Show more details on the status page
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ContentPanel;
diff --git a/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx b/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
deleted file mode 100644
index 46410e82e..000000000
--- a/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import { useState, useRef, useContext } from "react";
-import { Box, Button, Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import TabPanel from "@mui/lab/TabPanel";
-import ImageIcon from "@mui/icons-material/Image";
-
-import ConfigBox from "../../../Components/ConfigBox";
-import TextInput from "../../Inputs/TextInput";
-import ImageField from "../../Inputs/Image";
-import timezones from "../../../Utils/timezones.json";
-import Select from "../../Inputs/Select";
-import { logoImageValidation } from "../../../Validation/validation";
-import { formatBytes } from "../../../Utils/fileUtils";
-import ProgressUpload from "../../ProgressBars";
-import { StatusFormContext } from "../../../Pages/StatusPage/CreateStatusContext";
-import ColorPicker from "../../Inputs/ColorPicker";
-import Checkbox from "../../Inputs/Checkbox";
-
-/**
- * General settings panel is ued to compose part of the public static page
- * for general informations like company name, subdomain url, logo and color etc
- */
-const GeneralSettingsPanel = () => {
- const theme = useTheme();
- const {
- form,
- setForm,
- errors,
- setErrors,
- handleBlur,
- handleChange,
- handelCheckboxChange,
- } = useContext(StatusFormContext);
- const [logo, setLogo] = useState(form.logo);
-
- const [progress, setProgress] = useState({ value: 0, isLoading: false });
- const intervalRef = useRef(null);
- const STATUS_PAGE = import.meta.env.VITE_STATU_PAGE_URL ?? "status-page";
-
- // Clears specific error from errors state
- const clearError = (err) => {
- setErrors((prev) => {
- const updatedErrors = { ...prev };
- if (updatedErrors[err]) delete updatedErrors[err];
- return updatedErrors;
- });
- };
- const removeLogo = () => {
- errors["logo"] && clearError("logo");
- setLogo({});
- setForm((prev) => ({
- ...prev,
- logo: logo?.src,
- }));
- // interrupt interval if image upload is canceled prior to completing the process
- clearInterval(intervalRef.current);
- setProgress({ value: 0, isLoading: false });
- };
-
- const handleColorChange = (newValue) => {
- setForm((prev) => ({
- ...prev,
- color: newValue,
- }));
- };
-
- const validateField = (toValidate, schema, name = "logo") => {
- const { error } = schema.validate(toValidate, { abortEarly: false });
- setErrors((prev) => {
- let prevErrors = { ...prev };
- if (error) prevErrors[name] = error?.details[0].message;
- else delete prevErrors[name];
- return prevErrors;
- });
- if (error) return true;
- };
-
- const handleLogo = (event) => {
- const pic = event.target?.files?.[0];
- let error = validateField({ type: pic?.type, size: pic?.size }, logoImageValidation);
- if (error) return;
-
- const newLogo = {
- src: URL.createObjectURL(pic),
- name: pic.name,
- type: pic.type,
- size: pic.size,
- };
- setProgress((prev) => ({ ...prev, isLoading: true }));
- setLogo(newLogo);
- setForm({ ...form, logo: newLogo });
- intervalRef.current = setInterval(() => {
- const buffer = 12;
- setProgress((prev) => {
- if (prev.value + buffer >= 100) {
- clearInterval(intervalRef.current);
- return { value: 100, isLoading: false };
- }
- return { ...prev, value: prev.value + buffer };
- });
- }, 120);
- };
-
- return (
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
-
-
- Appearance
-
- Define the default look and feel of your public status page.
-
-
-
-
-
-
-
- Logo
-
-
- {progress.isLoading || progress.value !== 0 || errors["logo"] ? (
- }
- label={logo?.name}
- size={formatBytes(logo?.size)}
- progress={progress.value}
- onClick={removeLogo}
- error={errors["logo"]}
- />
- ) : logo && logo.type ? (
-
- ) : (
- ""
- )}
-
-
-
- Color
-
-
-
-
-
-
-
-
- );
-};
-
-export default GeneralSettingsPanel;
diff --git a/Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx b/Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx
deleted file mode 100644
index 26a200495..000000000
--- a/Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ServerStartAdornment, ServerEndAdornment } from "../../../../Inputs/TextInput/Adornments";
-import Search from "../../../../Inputs/Search";
-import {useState} from "react"
-import React from "react";
-import { Stack } from "@mui/material";
-import PropTypes from "prop-types";
-
-/**
- *
- * @param {*} id The Id of the Server component
- * @param {*} monitors The server monitors options
- * @param {*} value - Current input value for the Autocomplete
- * @param {*} removeItem The function used to remove a single server
- * @param {*} onChange The Change handler function to handle when the server value is changed
- * used to update the server(monitor) lists*
- * @param {*} onBlur Function to call when the input is blured
- * @param {*} dragHandleProps the dragHandleProps passed on to the designated dom node
- * so that there will be a draging indicator when mouse over it
- * @returns A single server whose value is one of the existing monitors
- */
-
-const Server = ({ id, value, monitors, onChange, removeItem, onBlur, dragHandleProps }) => {
- const [search, setSearch] = useState("");
- const handleSearch = (val) => {
- setSearch(val);
- };
- return (
-
- }
- endAdornment={
-
- }
- handleInputChange={handleSearch}
- handleChange={onChange}
- />
-
- );
-};
-
-Server.propTypes = {
- id: PropTypes.string.isRequired,
- monitors: PropTypes.array.isRequired,
- value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
- removeItem: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onBlur: PropTypes.func.isRequired,
- dragHandleProps: PropTypes.object.isRequired,
-};
-
-export default Server;
\ No newline at end of file
diff --git a/Client/src/Components/TabPanels/Status/ServersList/index.jsx b/Client/src/Components/TabPanels/Status/ServersList/index.jsx
deleted file mode 100644
index 4f73a87b4..000000000
--- a/Client/src/Components/TabPanels/Status/ServersList/index.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import Server from "./Server";
-import update from "immutability-helper";
-import PropTypes from "prop-types";
-import { Stack, useTheme } from "@mui/material";
-
-/**
- *
- * @param {*} monitors The server monitors options
- * @param {*} cards A set of servers/monitors user can add/remove/drag/drop to be displayed in status page
- * each card can be autocompleted/selected from the existing monitors list
- * @param {*} setCards Function to set the cards
- * @param {*} form The Status page form
- * @param {*} setForm Function to set the form
- * @param {*} removeItem The function used to remove a single server
- * @param {*} onBlur Function to call when the input is blured*
- * @returns A list of user selected Servers/Monitors
- */
-
-
-const ServersList = ({ monitors, cards, setCards, form, setForm, removeItem, onBlur }) => {
- const theme = useTheme()
- const grid = parseInt(theme.spacing(4));
-
- const handleCardChange = (event, val) => {
- let newCards;
- const { id } = event.target;
- let idx = cards.findIndex((a) => {
- let found = false;
- let optionIdx = id.indexOf("-option");
- if (optionIdx !== -1) found = a.id == id.substr(0, optionIdx);
- else found = a.id == id;
- return found;
- });
-
- if (idx >= 0) {
- let x = JSON.parse(JSON.stringify(cards[idx]));
- x.val = val;
- newCards = update(cards, { $splice: [[idx, 1, x]] });
- } else {
- newCards = update(cards, { $push: [{ id: id, val: val }] });
- }
- setCards(newCards);
- setForm({ ...form, monitors: newCards.map((c) => c.val) });
- };
-
- const moveCard = (dragIndex, hoverIndex) => {
- const dragCard = cards[dragIndex];
- const newCards = update(cards, {
- $splice: [
- [dragIndex, 1],
- [hoverIndex, 0, dragCard],
- ],
- });
- setCards(newCards);
- setForm({ ...form, monitors: newCards.map((c) => c.val) });
- };
-
- const handleDragEnd = (result) => {
- // dropped outside the list
- if (!result.destination) {
- return;
- }
- moveCard(result.source.index, result.destination.index);
- };
-
- const getItemStyle = (isDragging, draggableStyle) => ({
- // some basic styles to make the items look a bit nicer
- userSelect: "none",
- padding: grid,
- margin: `0 0 ${grid}px 0`,
-
- // change background colour if dragging
- background: isDragging ? "#D0D5DD" : "#F8F9F8",
-
- // styles we need to apply on draggables
- ...draggableStyle,
- });
-
- const getListStyle = (isDraggingOver) => ({
- background: isDraggingOver ? "lightblue" : "white",
- padding: grid,
- });
-
- return (
-
-
- {(provided, snapshot) => (
-
- {cards.map((item, index) => (
-
- {(provided, snapshot) => (
-
-
-
- )}
-
- ))}
- {provided.placeholder}
-
- )}
-
-
- );
-};
-
-ServersList.propTypes = {
- monitors: PropTypes.array.isRequired,
- cards: PropTypes.array.isRequired,
- setCards: PropTypes.func.isRequired,
- form: PropTypes.object.isRequired,
- setForm: PropTypes.func.isRequired,
- removeItem: PropTypes.func.isRequired,
- onBlur: PropTypes.func.isRequired
-};
-
-export default ServersList;