From 2f50893ead3da50cebb683d2ea1e58258f490e5c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:26:48 -0400
Subject: [PATCH] Added breadcrumbs to monitor details

---
 Client/src/Components/Breadcrumbs/index.css |  2 +-
 Client/src/Pages/Monitors/Details/index.jsx | 42 ++++++---------------
 Client/src/index.css                        |  4 ++
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css
index 28f75a4b4..b7d190de1 100644
--- a/Client/src/Components/Breadcrumbs/index.css
+++ b/Client/src/Components/Breadcrumbs/index.css
@@ -22,7 +22,7 @@
   cursor: pointer;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:last-child a {
-  font-weight: 600;
+  font-weight: 500;
   opacity: 1;
   cursor: default;
 }
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 15cfd2c82..79fba3b6b 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -7,7 +7,6 @@ import axiosInstance from "../../../Utils/axiosConfig";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
@@ -18,6 +17,7 @@ import {
 } from "../../../Utils/timeUtils";
 import "./index.css";
 import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -163,39 +163,19 @@ const DetailsPage = () => {
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate("/monitors")}
-            sx={{
-              backgroundColor: theme.palette.otherColors.fillGray,
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "monitors", path: "/monitors" },
+              { name: "details", path: `/monitors/${monitorId}` },
+            ]}
           />
-          <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-            <Stack
-              direction="row"
-              gap={theme.gap.small}
-              mt={theme.gap.small}
-              alignItems="baseline"
-            >
+          <Stack gap={theme.gap.large} mt={theme.gap.large}>
+            <Stack direction="row" gap={theme.gap.small}>
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
               <Box>
-                <Stack direction="row">
-                  <Typography
-                    component="h1"
-                    sx={{ lineHeight: 1, alignSelf: "flex-end" }}
-                  >
-                    {monitor.url?.replace(/^https?:\/\//, "") || "..."}
-                  </Typography>
-                  <MonitorDetails60MinChart data={monitor.statusBar} />
-                </Stack>
+                <Typography component="h1" sx={{ lineHeight: 1 }}>
+                  {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+                </Typography>
                 <Typography mt={theme.gap.small}>
                   <Typography
                     component="span"
diff --git a/Client/src/index.css b/Client/src/index.css
index ae0f49e0c..1c80b4dab 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -141,6 +141,10 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.MuiInputBase-root.Mui-disabled input {
+  cursor: not-allowed;
+}
+
 .Toastify__toast-container {
   width: auto;
 }