Add indeterminate state to monitors

Client/src/Components/Label/index.jsx

@@ -126,6 +126,7 @@ ColoredLabel.propTypes = {
  */
 
 const StatusLabel = ({ status, text, customStyles }) => {
+  console.log(status);
   const theme = useTheme();
   const colors = {
     up: {
@@ -138,6 +139,11 @@ 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,
+    },
     "cannot resolve": {
       dotColor: theme.palette.unresolved.main,
       bgColor: theme.palette.unresolved.bg,
@@ -170,7 +176,7 @@ const StatusLabel = ({ status, text, customStyles }) => {
 };
 
 StatusLabel.propTypes = {
-  status: PropTypes.oneOf(["up", "down", "cannot resolve"]),
+  status: PropTypes.oneOf(["up", "down", "unknown", "cannot resolve"]),
   text: PropTypes.string,
   customStyles: PropTypes.object,
 };

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

@@ -53,7 +53,8 @@ Host.propTypes = {
   params: PropTypes.shape({
     title: PropTypes.string,
     percentageColor: PropTypes.string,
-    percentage: PropTypes.number,
+    percentage: PropTypes.string,
+    url: PropTypes.string,
   }).isRequired,
 };
 

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

@@ -35,8 +35,8 @@ export const buildData = (monitors, isAdmin, navigate) => {
     if (monitor.uptimePercentage !== undefined) {
       uptimePercentage =
         monitor.uptimePercentage === 0
-          ? "0" 
-          : (monitor.uptimePercentage * 100).toFixed(2); 
+          ? "0"
+          : (monitor.uptimePercentage * 100).toFixed(2);
     }
 
     const params = {
@@ -47,7 +47,12 @@ export const buildData = (monitors, isAdmin, navigate) => {
         monitor.status === true
           ? theme.palette.success.main
           : theme.palette.error.text,
-      status: monitor.status === true ? "up" : "down",
+      status:
+        monitor.status === undefined
+          ? "unknown"
+          : monitor.status === true
+          ? "up"
+          : "down",
     };
 
     // Reverse checks so latest check is on the right
@@ -86,6 +91,3 @@ export const buildData = (monitors, isAdmin, navigate) => {
   });
   return data;
 };
-
-
-