From 4aa31f8f4dade5e1d3aa5ddfddad7d80b0e46d9f Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 9 Sep 2024 11:10:51 -0700 Subject: [PATCH 1/8] Implement monitor states for Pagespeed pages --- .../Monitors/Home/MonitorTable/index.jsx | 2 - Client/src/Pages/Monitors/utils.jsx | 7 ++ .../src/Pages/PageSpeed/Configure/index.jsx | 16 ++--- Client/src/Pages/PageSpeed/Details/index.jsx | 71 +++---------------- .../src/Pages/PageSpeed/Details/skeleton.jsx | 51 +++++++++++++ Client/src/Pages/PageSpeed/card.jsx | 24 ++++--- Client/src/Pages/PageSpeed/index.jsx | 2 +- 7 files changed, 86 insertions(+), 87 deletions(-) create mode 100644 Client/src/Pages/PageSpeed/Details/skeleton.jsx diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx index f055a57a1..47c080284 100644 --- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx +++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx @@ -223,8 +223,6 @@ const MonitorTable = ({ isAdmin }) => { status: determineState(monitor), }; - console.log(params); - return ( { down: "Your site is down.", paused: "Pending...", }; + + const pagespeedStatusMsg = { + up: "Live (collecting data)", + down: "Inactive", + paused: "Paused", + }; const statusStyles = { up: { backgroundColor: theme.palette.success.bg, @@ -47,6 +53,7 @@ const useUtils = () => { determineState, statusColor, statusMsg, + pagespeedStatusMsg, statusStyles, }; }; diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 005583f2c..6ac2f2ba6 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -23,6 +23,7 @@ import LoadingButton from "@mui/lab/LoadingButton"; import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded"; import SkeletonLayout from "./skeleton"; import "./index.css"; +import useUtils from "../../Monitors/utils"; const PageSpeedConfigure = () => { const theme = useTheme(); @@ -34,6 +35,7 @@ const PageSpeedConfigure = () => { const { monitorId } = useParams(); const [monitor, setMonitor] = useState({}); const [errors, setErrors] = useState({}); + const { determineState, statusColor } = useUtils(); const frequencies = [ { _id: 3, name: "3 minutes" }, @@ -147,13 +149,7 @@ const PageSpeedConfigure = () => { gap={theme.spacing(12)} > - + { - Your pagespeed monitor is {monitor?.status ? "live" : "down"}. + Your pagespeed monitor is {determineState(monitor)}. diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 4004e1715..49040a48f 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -20,6 +20,8 @@ import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import PulseDot from "../../../Components/Animated/PulseDot"; import "./index.css"; +import useUtils from "../../Monitors/utils"; +import SkeletonLayout from "./skeleton"; const StatBox = ({ icon, title, value }) => { const theme = useTheme(); @@ -150,53 +152,6 @@ PieValueLabel.propTypes = { highlighted: PropTypes.bool, }; -/** - * Renders a skeleton layout. - * - * @returns {JSX.Element} - */ -const SkeletonLayout = () => { - const theme = useTheme(); - - return ( - <> - - - - - - - - - - - - - - - - - - - - ); -}; - const PageSpeedDetails = () => { const theme = useTheme(); const navigate = useNavigate(); @@ -204,6 +159,7 @@ const PageSpeedDetails = () => { const [audits, setAudits] = useState({}); const { monitorId } = useParams(); const { authToken } = useSelector((state) => state.auth); + const { determineState, statusColor, pagespeedStatusMsg } = useUtils(); useEffect(() => { const fetchMonitor = async () => { @@ -356,6 +312,8 @@ const PageSpeedDetails = () => { borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.background.main, }; + + const monitorState = determineState(monitor); return ( {loading ? ( @@ -369,13 +327,7 @@ const PageSpeedDetails = () => { ]} /> - + { > {monitor?.url} - - Your pagespeed monitor is live. + + {pagespeedStatusMsg[monitorState] || "Pending..."}