Merge pull request #792 from bluewave-labs/feat/fe/unknown-status

Add pending state to monitors and config screens, resolves #771, resolves #766

Client/src/Components/Label/index.jsx

@@ -139,10 +139,10 @@ const StatusLabel = ({ status, text, customStyles }) => {
       bgColor: theme.palette.error.bg,
       borderColor: theme.palette.error.light,
     },
-    unknown: {
-      dotColor: theme.palette.unresolved.main,
-      bgColor: theme.palette.unresolved.bg,
-      borderColor: theme.palette.unresolved.light,
+    pending: {
+      dotColor: theme.palette.warning.main,
+      bgColor: theme.palette.warning.bg,
+      borderColor: theme.palette.warning.light,
     },
     "cannot resolve": {
       dotColor: theme.palette.unresolved.main,
@@ -176,7 +176,7 @@ const StatusLabel = ({ status, text, customStyles }) => {
 };
 
 StatusLabel.propTypes = {
-  status: PropTypes.oneOf(["up", "down", "unknown", "cannot resolve"]),
+  status: PropTypes.oneOf(["up", "down", "pending", "cannot resolve"]),
   text: PropTypes.string,
   customStyles: PropTypes.object,
 };

Client/src/Pages/Monitors/Configure/index.jsx

@@ -53,7 +53,6 @@ const Configure = () => {
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
-  console.log(monitor);
   const idMap = {
     "monitor-url": "url",
     "monitor-name": "name",
@@ -190,6 +189,18 @@ const Configure = () => {
   const parsedUrl = parseUrl(monitor?.url);
   const protocol = parsedUrl?.protocol?.replace(":", "") || "";
 
+  const statusColor = {
+    true: theme.palette.success.main,
+    false: theme.palette.error.main,
+    undefined: theme.palette.warning.main,
+  };
+
+  const statusMsg = {
+    true: "Your site is up.",
+    false: "Your site is down.",
+    undefined: "Pending...",
+  };
+
   return (
     <Stack className="configure-monitor" gap={theme.spacing(12)}>
       {Object.keys(monitor).length === 0 ? (
@@ -211,13 +222,7 @@ const Configure = () => {
             flex={1}
           >
             <Stack direction="row" gap={theme.spacing(2)}>
-              <PulseDot
-                color={
-                  monitor?.status
-                    ? theme.palette.success.main
-                    : theme.palette.error.main
-                }
-              />
+              <PulseDot color={statusColor[monitor?.status ?? undefined]} />
               <Box>
                 {parsedUrl?.host ? (
                   <Typography
@@ -234,13 +239,9 @@ const Configure = () => {
                 <Typography
                   component="span"
                   lineHeight={theme.spacing(12)}
-                  sx={{
-                    color: monitor?.status
-                      ? theme.palette.success.main
-                      : theme.palette.error.text,
-                  }}
+                  sx={{ color: statusColor[monitor?.status ?? undefined] }}
                 >
-                  Your site is {monitor?.status ? "up" : "down"}.
+                  {statusMsg[monitor?.status ?? undefined]}
                 </Typography>
               </Box>
               <Box

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

@@ -1,13 +1,6 @@
 import PropTypes from "prop-types";
 import { useEffect, useState, useCallback } from "react";
-import {
-  Box,
-  Button,
-  Skeleton,
-  Stack,
-  Typography,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { networkService } from "../../../main";
@@ -22,6 +15,7 @@ import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
+import SkeletonLayout from "./skeleton";
 import "./index.css";
 
 const StatBox = ({ title, value }) => {
@@ -71,76 +65,6 @@ StatBox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Skeleton variant="rounded" width="20%" height={34} />
-      <Stack gap={theme.spacing(20)} mt={theme.spacing(6)}>
-        <Stack direction="row" gap={theme.spacing(4)} mt={theme.spacing(4)}>
-          <Skeleton
-            variant="circular"
-            style={{ minWidth: 24, minHeight: 24 }}
-          />
-          <Box width="80%">
-            <Skeleton variant="rounded" width="50%" height={24} />
-            <Skeleton
-              variant="rounded"
-              width="50%"
-              height={18}
-              sx={{ mt: theme.spacing(4) }}
-            />
-          </Box>
-          <Skeleton
-            variant="rounded"
-            width="20%"
-            height={34}
-            sx={{ alignSelf: "flex-end" }}
-          />
-        </Stack>
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          gap={theme.spacing(12)}
-        >
-          <Skeleton variant="rounded" width="100%" height={80} />
-          <Skeleton variant="rounded" width="100%" height={80} />
-          <Skeleton variant="rounded" width="100%" height={80} />
-        </Stack>
-        <Box>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            mb={theme.spacing(8)}
-          >
-            <Skeleton
-              variant="rounded"
-              width="20%"
-              height={24}
-              sx={{ alignSelf: "flex-end" }}
-            />
-            <Skeleton variant="rounded" width="20%" height={34} />
-          </Stack>
-          <Box sx={{ height: "200px" }}>
-            <Skeleton variant="rounded" width="100%" height="100%" />
-          </Box>
-        </Box>
-        <Stack gap={theme.spacing(8)}>
-          <Skeleton variant="rounded" width="20%" height={24} />
-          <Skeleton variant="rounded" width="100%" height={200} />
-          <Skeleton variant="rounded" width="100%" height={50} />
-        </Stack>
-      </Stack>
-    </>
-  );
-};
-
 /**
  * Details page component displaying monitor details and related information.
  * @component
@@ -195,6 +119,19 @@ const DetailsPage = ({ isAdmin }) => {
   }, [authToken, monitorId, monitor]);
 
   let loading = Object.keys(monitor).length === 0;
+
+  const statusColor = {
+    true: theme.palette.success.main,
+    false: theme.palette.error.main,
+    undefined: theme.palette.warning.main,
+  };
+
+  const statusMsg = {
+    true: "Your site is up.",
+    false: "Your site is down.",
+    undefined: "Pending...",
+  };
+
   return (
     <Box className="monitor-details">
       {loading ? (
@@ -209,13 +146,7 @@ const DetailsPage = ({ isAdmin }) => {
           />
           <Stack gap={theme.spacing(12)} mt={theme.spacing(12)}>
             <Stack direction="row" gap={theme.spacing(2)}>
-              <PulseDot
-                color={
-                  monitor?.status
-                    ? theme.palette.success.main
-                    : theme.palette.error.main
-                }
-              />
+              <PulseDot color={statusColor[monitor?.status ?? undefined]} />
               <Box>
                 <Typography
                   component="h1"
@@ -231,12 +162,10 @@ const DetailsPage = ({ isAdmin }) => {
                   <Typography
                     component="span"
                     sx={{
-                      color: monitor?.status
-                        ? theme.palette.success.main
-                        : theme.palette.success.text,
+                      color: statusColor[monitor?.status ?? undefined],
                     }}
                   >
-                    Your site is {monitor?.status ? "up" : "down"}.
+                    {statusMsg[monitor?.status ?? undefined]}
                   </Typography>{" "}
                   Checking every {formatDurationRounded(monitor?.interval)}.
                 </Typography>

Client/src/Pages/Monitors/Details/skeleton.jsx

@@ -0,0 +1,73 @@
+import { Box, Skeleton, Stack, useTheme } from "@mui/material";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="20%" height={34} />
+      <Stack gap={theme.spacing(20)} mt={theme.spacing(6)}>
+        <Stack direction="row" gap={theme.spacing(4)} mt={theme.spacing(4)}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton variant="rounded" width="50%" height={24} />
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={18}
+              sx={{ mt: theme.spacing(4) }}
+            />
+          </Box>
+          <Skeleton
+            variant="rounded"
+            width="20%"
+            height={34}
+            sx={{ alignSelf: "flex-end" }}
+          />
+        </Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.spacing(12)}
+        >
+          <Skeleton variant="rounded" width="100%" height={80} />
+          <Skeleton variant="rounded" width="100%" height={80} />
+          <Skeleton variant="rounded" width="100%" height={80} />
+        </Stack>
+        <Box>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            mb={theme.spacing(8)}
+          >
+            <Skeleton
+              variant="rounded"
+              width="20%"
+              height={24}
+              sx={{ alignSelf: "flex-end" }}
+            />
+            <Skeleton variant="rounded" width="20%" height={34} />
+          </Stack>
+          <Box sx={{ height: "200px" }}>
+            <Skeleton variant="rounded" width="100%" height="100%" />
+          </Box>
+        </Box>
+        <Stack gap={theme.spacing(8)}>
+          <Skeleton variant="rounded" width="20%" height={24} />
+          <Skeleton variant="rounded" width="100%" height={200} />
+          <Skeleton variant="rounded" width="100%" height={50} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default SkeletonLayout;

Client/src/Pages/Monitors/Home/monitorData.jsx

@@ -66,7 +66,7 @@ export const buildData = (monitors, isAdmin, navigate) => {
       percentageColor,
       status:
         monitor.status === undefined
-          ? "unknown"
+          ? "pending"
           : monitor.status === true
           ? "up"
           : "down",