From 70e06d62f18a6fcc6a576cfb1d70aef09f4a48cc Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 11:29:25 -0700 Subject: [PATCH 01/20] Add status label and StatBox component --- Client/src/Pages/Details/index.jsx | 102 +++++++++++++++++++++++------ Client/src/main.jsx | 20 +++--- 2 files changed, 90 insertions(+), 32 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index c53054ccd..9764a66fc 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -1,9 +1,38 @@ import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; import { Box, Typography, useTheme } from "@mui/material"; import { useSelector } from "react-redux"; import { useParams } from "react-router-dom"; import axiosInstance from "../../Utils/axiosConfig"; import BasicTable from "../../Components/BasicTable"; +import StatusLabel from "../../Components/StatusLabel"; + +const formatDuration = (ms) => { + const seconds = Math.floor(ms / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + + let dateStr = ""; + + days && (dateStr += `${days}d `); + hours && (dateStr += `${hours % 24}h `); + minutes && (dateStr += `${minutes % 60}m `); + seconds && (dateStr += `${seconds % 60}s `); + + dateStr === "" && (dateStr = "0s"); + + return dateStr; +}; + +const StatBox = ({ title, value }) => { + return ( + + {title} + {value} + + ); +}; /** * Details page component displaying monitor details and related information. @@ -29,10 +58,22 @@ const DetailsPage = () => { { id: 3, name: "Message" }, ], rows: res.data.data.checks.map((check, idx) => { + const params = { + status: check.status === true ? "up" : "down", + backgroundColor: + check.status === true + ? "var(--env-var-color-20)" + : "var(--env-var-color-21)", + statusDotColor: + check.status === true + ? "var(--env-var-color-17)" + : "var(--env-var-color-19)", + }; + return { id: check._id, data: [ - { id: idx, data: check.status ? "Up" : "Down" }, + { id: idx, data: }, { id: idx + 1, data: new Date(check.createdAt).toLocaleString() }, { id: idx + 2, data: check.statusCode }, ], @@ -52,43 +93,47 @@ const DetailsPage = () => { * @param {Array} checks Array of check objects. * @returns {number} Uptime duration in ms. */ + + // TODO: This can be done more efficiently by iteratting backwards + // and breaking when the first down check is found, calculate current time - downtime const calculateUptimeDuration = (checks) => { if (!checks || checks.length === 0) { return 0; } - let longestDuration = 0; - let lastDownTimestamp = null; - let currentDuration = longestDuration; + const arr = [...checks]; - // Loop over the checks to find the most recent uptime duration - checks.forEach((check) => { + let lastDownTimestamp = null; + let lastUpTimestamp = null; + + arr.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt)); + arr.forEach((check) => { if (check.status === false) { - lastDownTimestamp = check.createdAt; - } else if (check.status === true && lastDownTimestamp) { - currentDuration = check.createdAt - lastDownTimestamp; - if (currentDuration > longestDuration) { - longestDuration = currentDuration; - } - lastDownTimestamp = null; + lastDownTimestamp = new Date(check.createdAt); + } else if (check.status === true) { + lastUpTimestamp = new Date(check.createdAt); } }); - lastDownTimestamp = null; - return longestDuration; + + if (lastDownTimestamp === null) { + return new Date() - new Date(arr[0].createdAt); + } else if (lastUpTimestamp === null) { + return 0; + } else if (lastDownTimestamp && lastUpTimestamp) { + return lastUpTimestamp - lastDownTimestamp; + } }; /** - * Helper function to get timestamp of the most recent check. + * Helper function to get duration since last check * @param {Array} checks Array of check objects. * @returns {number} Timestamp of the most recent check. */ - const getLastCheckedTimestamp = (checks) => { + const getLastChecked = (checks) => { if (!checks || checks.length === 0) { return 0; // Handle case when no checks are available } - - const mostRecentCheck = checks[0]; - return mostRecentCheck.createdAt; + return new Date() - new Date(checks[0].createdAt); }; /** @@ -101,15 +146,30 @@ const DetailsPage = () => { return 0; // Handle case when no checks are available } return checks.reduce((acc, check) => { - check.status === false ? (acc += 1) : acc; + return check.status === false ? (acc += 1) : acc; }, 0); }; return (
+
+ + + +
); }; +StatBox.propTypes = { + title: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), +}; export default DetailsPage; diff --git a/Client/src/main.jsx b/Client/src/main.jsx index 09754147d..f9fa3d640 100644 --- a/Client/src/main.jsx +++ b/Client/src/main.jsx @@ -13,15 +13,13 @@ import { injectStore } from "./Utils/axiosConfig.js"; injectStore(store); ReactDOM.createRoot(document.getElementById("root")).render( - - - - - - - - - - - + + + + + + + + + ); From b7e6e44b88d1c16f27f84ec7b298b177e65f34d7 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Wed, 17 Jul 2024 14:33:32 -0400 Subject: [PATCH 02/20] Added styling to basic table component --- Client/src/Components/BasicTable/index.css | 118 +++++++++++++++++++ Client/src/Components/BasicTable/index.jsx | 44 ++++--- Client/src/Components/MonitorTable/index.css | 4 +- Client/src/Components/MonitorTable/index.jsx | 13 +- 4 files changed, 161 insertions(+), 18 deletions(-) diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index e69de29bb..723f6c796 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -0,0 +1,118 @@ +.MuiTable-root .host-row { + display: flex; + align-items: center; +} + +.MuiTable-root .host-row a { + width: var(--env-var-img-width-2); + height: var(--env-var-img-width-2); + color: var(--env-var-color-5); + margin-right: 10px; + margin-bottom: 2px; +} +.MuiTable-root .host-row a svg { + width: var(--env-var-font-size-large); + height: var(--env-var-font-size-large); +} +.MuiTable-root .host-row .host-percentage { + font-size: var(--env-var-font-size-small); +} + +.MuiTable-root .host-name { + width: fit-content; + margin-right: 10px; + font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.MuiPaper-root:has(table.MuiTable-root) { + box-shadow: none; + border: solid 1px var(--env-var-color-16); + border-radius: var(--env-var-radius-1); +} +.MuiTable-root + .MuiTableBody-root + .MuiTableRow-root:last-child + .MuiTableCell-root { + border: none; +} +.MuiTable-root .MuiTableHead-root, +.MuiTable-root .MuiTableRow-root:hover { + background-color: var(--env-var-color-13); +} +.MuiTable-root .MuiTableHead-root .MuiTableCell-root, +.MuiTable-root .MuiTableBody-root .MuiTableCell-root { + font-size: var(--env-var-font-size-medium); +} +.MuiTable-root .MuiTableHead-root .MuiTableCell-root { + padding: var(--env-var-spacing-1) var(--env-var-spacing-2); + font-weight: 500; + color: var(--env-var-color-2); +} +.MuiTable-root .MuiTableHead-root span { + display: inline-block; + height: 17px; + width: 20px; + overflow: hidden; + margin-bottom: -3px; + margin-left: 3px; +} +.MuiTable-root .MuiTableHead-root span svg { + width: 20px; + height: 20px; +} +.MuiTable-root .MuiTableBody-root .MuiTableCell-root { + color: var(--env-var-color-5); + padding: 6px var(--env-var-spacing-2); +} + +.MuiPaper-root + .MuiPagination-root { + flex: 1; + margin-top: 35px; + border: solid 1px var(--env-var-color-16); + border-radius: var(--env-var-radius-1); + padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2); +} +.MuiPaper-root + .MuiPagination-root ul { + justify-content: center; +} +.MuiPaper-root + .MuiPagination-root ul li button { + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); + font-weight: 500; +} +.MuiPaper-root + .MuiPagination-root ul li:first-child { + margin-right: auto; +} +.MuiPaper-root + .MuiPagination-root ul li:last-child { + margin-left: auto; +} +.MuiPaper-root + .MuiPagination-root ul li:first-child button, +.MuiPaper-root + .MuiPagination-root ul li:last-child button { + border: solid 1px var(--env-var-color-16); + border-radius: var(--env-var-radius-1); +} +.MuiPaper-root + .MuiPagination-root ul li:first-child button { + padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus); +} +.MuiPaper-root + .MuiPagination-root ul li:last-child button { + padding: 0 var(--env-var-spacing-1-plus) 0 var(--env-var-spacing-1); +} +.MuiPaper-root + .MuiPagination-root ul li:first-child button::after, +.MuiPaper-root + .MuiPagination-root ul li:last-child button::before { + position: relative; + display: inline-block; +} +.MuiPaper-root + .MuiPagination-root ul li:first-child button::after { + content: "Previous"; + margin-left: 15px; +} +.MuiPaper-root + .MuiPagination-root ul li:last-child button::before { + content: "Next"; + margin-right: 15px; +} +.MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected { + background-color: var(--env-var-color-15); +} diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index bd716d793..393ba18ca 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -6,10 +6,14 @@ import { TableRow, TableCell, TableBody, - TablePagination, + Pagination, + PaginationItem, } from "@mui/material"; import React, { useState } from "react"; import PropTypes from "prop-types"; +import "./index.css"; +import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; +import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded"; /** * BasicTable Component @@ -66,17 +70,12 @@ const BasicTable = ({ data, paginated }) => { // Add headers to props validation const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const rowsPerPage = 5; const handleChangePage = (event, newPage) => { setPage(newPage); }; - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); // Reset to first page after changing rows per page - }; - let displayData = []; if (data && data.rows) { @@ -118,14 +117,29 @@ const BasicTable = ({ data, paginated }) => { {paginated === true && ( - handleChangePage(event, value - 1)} + shape="rounded" + renderItem={(item) => ( + + )} /> )} diff --git a/Client/src/Components/MonitorTable/index.css b/Client/src/Components/MonitorTable/index.css index 4339f261b..53ef45f30 100644 --- a/Client/src/Components/MonitorTable/index.css +++ b/Client/src/Components/MonitorTable/index.css @@ -1,4 +1,4 @@ -.host-row { +/* .host-row { display: flex; align-items: center; } @@ -109,4 +109,4 @@ .monitors .MuiPagination-root ul li:last-child button::before { content: "Next"; margin-right: 15px; -} +} */ diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx index 57bfd125c..58ebf6689 100644 --- a/Client/src/Components/MonitorTable/index.jsx +++ b/Client/src/Components/MonitorTable/index.jsx @@ -5,6 +5,7 @@ import BasicTable from "../BasicTable"; import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"; import { useNavigate } from "react-router-dom"; import StatusLabel from "../StatusLabel"; +import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; /** * Host component. @@ -54,7 +55,17 @@ const MonitorTable = ({ monitors = [] }) => { const data = { cols: [ { id: 1, name: "Host" }, - { id: 2, name: "Status" }, + { + id: 2, + name: ( + <> + Status + + + + + ), + }, { id: 3, name: "Response Time" }, { id: 4, name: "Actions" }, ], From 5c8aaccad8961c45833d50e265c4a8f9e08a618c Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Wed, 17 Jul 2024 14:59:37 -0400 Subject: [PATCH 03/20] Added some styling to monitor details page --- Client/src/Components/BasicTable/index.css | 3 +++ Client/src/Layouts/HomeLayout/index.css | 2 +- Client/src/Pages/Details/index.jsx | 10 +++++++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 723f6c796..a1fe7845d 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -67,6 +67,9 @@ color: var(--env-var-color-5); padding: 6px var(--env-var-spacing-2); } +.MuiTable-root .MuiTableBody-root .MuiTableRow-root { + height: 50px; +} .MuiPaper-root + .MuiPagination-root { flex: 1; diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index c9faf48d4..76065015b 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -8,6 +8,6 @@ .main-content>div:nth-child(2){ position: relative; - overflow-y: auto; + /* overflow-y: auto; */ flex: 1; } diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index c53054ccd..c5f57383a 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -106,7 +106,15 @@ const DetailsPage = () => { }; return ( -
+
+ + History +
); From 9f95d3d4bf88daa5bbd79d1da866cc0fa8875452 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 12:33:24 -0700 Subject: [PATCH 04/20] Add chart to detail page --- Client/src/Components/Charts/ChartUtils.js | 45 ++++++++++++ .../Charts/MonitorDetailsAreaChart/index.css | 0 .../Charts/MonitorDetailsAreaChart/index.jsx | 69 +++++++++++++++++++ Client/src/Pages/Details/index.jsx | 5 +- 4 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 Client/src/Components/Charts/ChartUtils.js create mode 100644 Client/src/Components/Charts/MonitorDetailsAreaChart/index.css create mode 100644 Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx diff --git a/Client/src/Components/Charts/ChartUtils.js b/Client/src/Components/Charts/ChartUtils.js new file mode 100644 index 000000000..a2c0faa9d --- /dev/null +++ b/Client/src/Components/Charts/ChartUtils.js @@ -0,0 +1,45 @@ +const RANGE_MAX = 100; +const RANGE_MIN = 1; + +const calculatePercentile = (arr, percentile) => { + const sorted = arr.slice().sort((a, b) => a.responseTime - b.responseTime); + const index = (percentile / 100) * (sorted.length - 1); + const lower = Math.floor(index); + const upper = lower + 1; + const weight = index % 1; + if (upper >= sorted.length) return sorted[lower].responseTime; + return ( + sorted[lower].responseTime * (1 - weight) + + sorted[upper].responseTime * weight + ); +}; + +export const NormalizeData = (checks) => { + if (checks.length > 1) { + // Get the 5th and 95th percentile + const min = calculatePercentile(checks, 5); + const max = calculatePercentile(checks, 95); + + const normalizedChecks = checks.map((check) => { + // Normalize the response time between 1 and 100 + let normalizedResponseTime = + RANGE_MIN + + ((check.responseTime - min) * (RANGE_MAX - RANGE_MIN)) / (max - min); + + // Put a floor on the response times so we don't have extreme outliers + // Better visuals + normalizedResponseTime = Math.max( + RANGE_MIN, + Math.min(RANGE_MAX, normalizedResponseTime) + ); + return { + ...check, + responseTime: normalizedResponseTime, + }; + }); + + return normalizedChecks; + } else { + return checks; + } +}; diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx new file mode 100644 index 000000000..2b5074ccb --- /dev/null +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -0,0 +1,69 @@ +import PropTypes from "prop-types"; +import { + AreaChart, + Area, + XAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, +} from "recharts"; +import { NormalizeData } from "../ChartUtils"; + +const MonitorDetailsAreaChart = ({ checks }) => { + // SQUASH ERROR, NOT PERMANENT SOLUTION + const error = console.error; + console.error = (...args) => { + if (/defaultProps/.test(args[0])) return; + error(...args); + }; + + // END SQUASH ERROR, NOT PERMANENT SOLUTION + + const formatDate = (timestamp) => { + const date = new Date(timestamp); + return date.toLocaleTimeString("en-US", { + hour: "numeric", + minute: "2-digit", + hour12: true, + }); + }; + + let normalizedChecks = []; + if (checks && checks.length > 0) { + normalizedChecks = NormalizeData(checks); + } + + return ( + + + + + + + + ); +}; + +MonitorDetailsAreaChart.propTypes = { + checks: PropTypes.array, +}; +export default MonitorDetailsAreaChart; diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index c53054ccd..e251cbfd0 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -4,7 +4,7 @@ import { useSelector } from "react-redux"; import { useParams } from "react-router-dom"; import axiosInstance from "../../Utils/axiosConfig"; import BasicTable from "../../Components/BasicTable"; - +import MonitorDetailsAreaChart from "../../Components/Charts/MonitorDetailsAreaChart"; /** * Details page component displaying monitor details and related information. * @component @@ -107,6 +107,9 @@ const DetailsPage = () => { return (
+
+ +
); From bb5589a2556b1430aaf7935e8faec620f32242d8 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 12:35:48 -0700 Subject: [PATCH 05/20] Extracted util functions --- .../Charts/ResponseTimeChart/index.jsx | 49 +------------------ 1 file changed, 2 insertions(+), 47 deletions(-) diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx index 2121169b6..7a9bf71b2 100644 --- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx +++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx @@ -1,55 +1,10 @@ import "./index.css"; import PropTypes from "prop-types"; import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts"; - -const RANGE_MAX = 100; -const RANGE_MIN = 1; - -const calculatePercentile = (arr, percentile) => { - const sorted = arr.slice().sort((a, b) => a.responseTime - b.responseTime); - const index = (percentile / 100) * (sorted.length - 1); - const lower = Math.floor(index); - const upper = lower + 1; - const weight = index % 1; - if (upper >= sorted.length) return sorted[lower].responseTime; - return ( - sorted[lower].responseTime * (1 - weight) + - sorted[upper].responseTime * weight - ); -}; - -const normalizeData = (checks) => { - if (checks.length > 1) { - // Get the 5th and 95th percentile - const min = calculatePercentile(checks, 5); - const max = calculatePercentile(checks, 95); - - const normalizedChecks = checks.map((check) => { - // Normalize the response time between 1 and 100 - let normalizedResponseTime = - RANGE_MIN + - ((check.responseTime - min) * (RANGE_MAX - RANGE_MIN)) / (max - min); - - // Put a floor on the response times so we don't have extreme outliers - // Better visuals - normalizedResponseTime = Math.max( - RANGE_MIN, - Math.min(RANGE_MAX, normalizedResponseTime) - ); - return { - ...check, - responseTime: normalizedResponseTime, - }; - }); - - return normalizedChecks; - } else { - return checks; - } -}; +import { NormalizeData } from "../ChartUtils"; const ResponseTimeChart = ({ checks = [] }) => { - const normalizedChecks = normalizeData(checks); + const normalizedChecks = NormalizeData(checks); return (
From 6eba561d2f70f5b26b2e11cd5f5a61c590971c1b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 13:32:45 -0700 Subject: [PATCH 06/20] Refactored uptime calculation for efficiency and clarity --- Client/src/Pages/Details/index.jsx | 27 +++++++-------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx index af46c896d..c551a93c5 100644 --- a/Client/src/Pages/Details/index.jsx +++ b/Client/src/Pages/Details/index.jsx @@ -101,28 +101,15 @@ const DetailsPage = () => { if (!checks || checks.length === 0) { return 0; } - - const arr = [...checks]; - - let lastDownTimestamp = null; - let lastUpTimestamp = null; - - arr.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt)); - arr.forEach((check) => { - if (check.status === false) { - lastDownTimestamp = new Date(check.createdAt); - } else if (check.status === true) { - lastUpTimestamp = new Date(check.createdAt); + const latestCheck = new Date(checks[0].createdAt); + let latestDownCheck = 0; + for (let i = 0; i < checks.length; i++) { + if (checks[i].status === false) { + latestDownCheck = new Date(checks[i].createdAt); + break; } - }); - - if (lastDownTimestamp === null) { - return new Date() - new Date(arr[0].createdAt); - } else if (lastUpTimestamp === null) { - return 0; - } else if (lastDownTimestamp && lastUpTimestamp) { - return lastUpTimestamp - lastDownTimestamp; } + return latestCheck - latestDownCheck; }; /** From ac161950eba51049f0a3cc03788eecd7d50cf3d7 Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 17 Jul 2024 14:21:25 -0700 Subject: [PATCH 07/20] Added validation to speedcheck route. --- Server/routes/pageSpeedCheckRoute.js | 74 ++++++++++++++++++++-------- 1 file changed, 53 insertions(+), 21 deletions(-) diff --git a/Server/routes/pageSpeedCheckRoute.js b/Server/routes/pageSpeedCheckRoute.js index 72f20d1ad..e62c45439 100644 --- a/Server/routes/pageSpeedCheckRoute.js +++ b/Server/routes/pageSpeedCheckRoute.js @@ -1,54 +1,86 @@ const router = require("express").Router(); +const Joi = require("joi"); const { verifyOwnership } = require("../middleware/verifyOwnership"); const Monitor = require("../models/Monitor"); -const { - getPageSpeedChecks, - createPageSpeedCheck, - deletePageSpeedCheck, -} = require("../controllers/pageSpeedCheckController"); +const { createPageSpeedCheck, getPageSpeedChecks, deletePageSpeedCheck } = require("../controllers/pageSpeedCheckController"); +const { getMonitorByIdValidation } = require("../validation/joi"); /** - * @route POST /:monitorId + * @route POST /pagespeed/:monitorId * @description Create a new PageSpeedCheck for a monitor * @access Private * @param {string} monitorId - The ID of the monitor * @middleware verifyOwnership - Ensures the user owns the monitor */ - router.post( - "/:monitorId", - verifyOwnership(Monitor, "monitorId"), - createPageSpeedCheck + "/pagespeed/:monitorId", + verifyOwnership(Monitor, "monitorId"), + async (req, res, next) => { + try { + // Validate monitorId parameter + const { error } = getMonitorByIdValidation.validate(req.params); + if (error) { + return res.status(400).json({ error: error.details[0].message }); + } + + next(); + } catch (error) { + next(error); + } + }, + createPageSpeedCheck ); - /** - * @route GET /:monitorId + * @route GET /pagespeed/:monitorId * @description Get all PageSpeedChecks for a monitor * @access Private * @param {string} monitorId - The ID of the monitor * @middleware verifyOwnership - Ensures the user owns the monitor */ - router.get( - "/:monitorId", - verifyOwnership(Monitor, "monitorId"), - getPageSpeedChecks + "/pagespeed/:monitorId", + verifyOwnership(Monitor, "monitorId"), + async (req, res, next) => { + try { + // Validate monitorId parameter + const { error } = getMonitorByIdValidation.validate(req.params); + if (error) { + return res.status(400).json({ error: error.details[0].message }); + } + + next(); + } catch (error) { + next(error); + } + }, + getPageSpeedChecks ); /** - * @route POST /delete/:monitorId + * @route DELETE /pagespeed/:monitorId * @description Delete all PageSpeedChecks for a monitor * @access Private * @param {string} monitorId - The ID of the monitor * @middleware verifyOwnership - Ensures the user owns the monitor */ - router.delete( - "/:monitorId", + "/pagespeed/:monitorId", verifyOwnership(Monitor, "monitorId"), - deletePageSpeedCheck + async (req, res, next) => { + try { + // Validate monitorId parameter + const { error } = getMonitorByIdValidation.validate(req.params); + if (error) { + return res.status(400).json({ error: error.details[0].message }); + } + + next(); + } catch (error) { + next(error); + } + }, + deletePageSpeedCheck ); - module.exports = router; From 9f68c0b60cb7811d535d465cef801131b30f2d8e Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Wed, 17 Jul 2024 17:44:29 -0400 Subject: [PATCH 08/20] Doomsday cleanup --- .../BackgroundPattern/BackgroundPattern.jsx | 9 -- .../BackgroundPattern/backgroundPattern.css | 7 - Client/src/Components/BasicTable/index.css | 7 +- .../src/Components/CustomizedTables/index.jsx | 152 ------------------ .../{ => Dashboard}/DashboardMenu/index.css | 0 .../{ => Dashboard}/DashboardMenu/index.jsx | 14 +- .../DashboardMenuButton/index.css | 0 .../DashboardMenuButton/index.jsx | 0 .../DashboardProgressBars}/index.css | 0 .../DashboardProgressBars/index.jsx | 0 .../DashboardSettingsIcon/index.css | 0 .../DashboardSettingsIcon/index.jsx | 0 .../DashboardSidebar/index.css | 0 .../DashboardSidebar/index.jsx | 4 +- .../DashboardProgressBars/index.css | 0 Client/src/Components/Dropdown/index.css | 1 - Client/src/Components/Dropdown/index.jsx | 29 ---- .../Components/DropdownTeamMember/index.css | 1 - .../Components/DropdownTeamMember/index.jsx | 39 ----- .../Icons/ComplexAlert/ComplexAlert.jsx | 36 ----- .../Icons/ComplexAlert/complexAlert.css | 44 ----- .../Inputs/Search/SearchTextField.jsx | 14 -- .../Inputs/Search/searchTextField.css | 26 --- Client/src/Components/Label/index.jsx | 32 ++-- Client/src/Components/MonitorTable/index.css | 112 ------------- Client/src/Components/MonitorTable/index.jsx | 116 ------------- Client/src/Components/Pagination/index.css | 33 ---- Client/src/Components/Pagination/index.jsx | 13 -- .../DualButtonPopupModal.jsx | 55 ------- .../dualButtonPopupModal.css | 52 ------ .../DualButtonPopupModalWithTextfields.jsx | 73 --------- .../dualButtonPopupModalWithTextfields.css | 55 ------- Client/src/Components/Section/index.jsx | 132 --------------- Client/src/Components/StatusLabel/index.css | 22 --- Client/src/Components/StatusLabel/index.jsx | 39 ----- Client/src/Layouts/HomeLayout/index.jsx | 2 +- Client/src/Pages/CheckEmail/index.jsx | 8 +- Client/src/Pages/Demo/Demo.jsx | 7 +- Client/src/Pages/Details/index.jsx | 17 +- Client/src/Pages/ForgotPassword/index.jsx | 9 +- Client/src/Pages/Login/index.jsx | 8 +- Client/src/Pages/Monitors/index.jsx | 104 +++++++++++- .../src/Pages/NewPasswordConfirmed/index.jsx | 8 +- .../PlayGround/PlayGround-Popup-Modals.jsx | 25 --- Client/src/Pages/PlayGround/PlayGround.jsx | 3 - Client/src/Pages/Register/index.jsx | 8 +- Client/src/Pages/SetNewPassword/index.jsx | 8 +- Client/src/index.css | 10 +- 48 files changed, 196 insertions(+), 1138 deletions(-) delete mode 100644 Client/src/Components/BackgroundPattern/BackgroundPattern.jsx delete mode 100644 Client/src/Components/BackgroundPattern/backgroundPattern.css delete mode 100644 Client/src/Components/CustomizedTables/index.jsx rename Client/src/Components/{ => Dashboard}/DashboardMenu/index.css (100%) rename Client/src/Components/{ => Dashboard}/DashboardMenu/index.jsx (81%) rename Client/src/Components/{ => Dashboard}/DashboardMenuButton/index.css (100%) rename Client/src/Components/{ => Dashboard}/DashboardMenuButton/index.jsx (100%) rename Client/src/Components/{CustomizedTables => Dashboard/DashboardProgressBars}/index.css (100%) rename Client/src/Components/{ => Dashboard}/DashboardProgressBars/index.jsx (100%) rename Client/src/Components/{ => Dashboard}/DashboardSettingsIcon/index.css (100%) rename Client/src/Components/{ => Dashboard}/DashboardSettingsIcon/index.jsx (100%) rename Client/src/Components/{ => Dashboard}/DashboardSidebar/index.css (100%) rename Client/src/Components/{ => Dashboard}/DashboardSidebar/index.jsx (84%) delete mode 100644 Client/src/Components/DashboardProgressBars/index.css delete mode 100644 Client/src/Components/Dropdown/index.css delete mode 100644 Client/src/Components/Dropdown/index.jsx delete mode 100644 Client/src/Components/DropdownTeamMember/index.css delete mode 100644 Client/src/Components/DropdownTeamMember/index.jsx delete mode 100644 Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx delete mode 100644 Client/src/Components/Icons/ComplexAlert/complexAlert.css delete mode 100644 Client/src/Components/Inputs/Search/SearchTextField.jsx delete mode 100644 Client/src/Components/Inputs/Search/searchTextField.css delete mode 100644 Client/src/Components/MonitorTable/index.css delete mode 100644 Client/src/Components/MonitorTable/index.jsx delete mode 100644 Client/src/Components/Pagination/index.css delete mode 100644 Client/src/Components/Pagination/index.jsx delete mode 100644 Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx delete mode 100644 Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css delete mode 100644 Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx delete mode 100644 Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css delete mode 100644 Client/src/Components/Section/index.jsx delete mode 100644 Client/src/Components/StatusLabel/index.css delete mode 100644 Client/src/Components/StatusLabel/index.jsx delete mode 100644 Client/src/Pages/PlayGround/PlayGround-Popup-Modals.jsx diff --git a/Client/src/Components/BackgroundPattern/BackgroundPattern.jsx b/Client/src/Components/BackgroundPattern/BackgroundPattern.jsx deleted file mode 100644 index 8b7a69a26..000000000 --- a/Client/src/Components/BackgroundPattern/BackgroundPattern.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import "./backgroundPattern.css"; -import React from "react"; -import Pattern from "../../assets/Images/background_pattern_decorative.png"; - -const BackgroundPattern = () => { - return Pattern; -}; - -export default BackgroundPattern; diff --git a/Client/src/Components/BackgroundPattern/backgroundPattern.css b/Client/src/Components/BackgroundPattern/backgroundPattern.css deleted file mode 100644 index dc4b1143c..000000000 --- a/Client/src/Components/BackgroundPattern/backgroundPattern.css +++ /dev/null @@ -1,7 +0,0 @@ -.background-pattern { - position: absolute; - top: -5%; - left: 50%; - transform: translate(-50%, -50%); - z-index: -1; -} diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index a1fe7845d..637e5e6dd 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -2,7 +2,6 @@ display: flex; align-items: center; } - .MuiTable-root .host-row a { width: var(--env-var-img-width-2); height: var(--env-var-img-width-2); @@ -18,6 +17,12 @@ font-size: var(--env-var-font-size-small); } +.MuiTable-root .label { + border-color: var(--env-var-color-4); + border-radius: var(--env-var-radius-2); + padding: calc(var(--env-var-spacing-1) / 2); +} + .MuiTable-root .host-name { width: fit-content; margin-right: 10px; diff --git a/Client/src/Components/CustomizedTables/index.jsx b/Client/src/Components/CustomizedTables/index.jsx deleted file mode 100644 index 2630d5671..000000000 --- a/Client/src/Components/CustomizedTables/index.jsx +++ /dev/null @@ -1,152 +0,0 @@ -import { styled, useTheme } from '@mui/material/styles'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { StatusLabel } from "../../Components/Label/"; -import PropTypes from 'prop-types'; - -const StyledTableCell = styled(TableCell)(({ theme }) => ({ - [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.action.hover, - color: theme.palette.common.black, - }, - [`&.${tableCellClasses.body}`]: { - fontSize: 14, - }, -})); - -const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.hover, - }, - '&:nth-of-type(even)': { - backgroundColor: theme.palette.common.white, - }, - '&:last-child td, &:last-child th': { - border: 0, - }, -})); - -function createData(name, date, message) { - return { name, date, message }; -} - -const CustomizedTables = ({ monitor }) => { - const theme = useTheme(); - - const rows = (monitor && monitor.checks) ? monitor.checks.map(check => createData( - , - new Date(check.createdAt).toLocaleString(), - `HTTP ${check.statusCode} - ${check.status ? 'OK' : 'NOK'}` - )) : []; - - return ( - - - {[...Array(4)].map((_, index) => ( - - - Currently up for - - - 4h 30m 2s - - - ))} - - - - History - - - - - - - Status - Date & Time - Message - - - - {rows.map((row) => ( - - - {row.name} - - {row.date} - {row.message} - - ))} - -
- - - ); -}; - -CustomizedTables.propTypes = { - monitor: PropTypes.shape({ - checks: PropTypes.arrayOf( - PropTypes.shape({ - status: PropTypes.bool.isRequired, - createdAt: PropTypes.string.isRequired, - statusCode: PropTypes.number.isRequired, - }) - ), - }), -}; - -CustomizedTables.defaultProps = { - monitor: { checks: [] }, -}; - -export default CustomizedTables; diff --git a/Client/src/Components/DashboardMenu/index.css b/Client/src/Components/Dashboard/DashboardMenu/index.css similarity index 100% rename from Client/src/Components/DashboardMenu/index.css rename to Client/src/Components/Dashboard/DashboardMenu/index.css diff --git a/Client/src/Components/DashboardMenu/index.jsx b/Client/src/Components/Dashboard/DashboardMenu/index.jsx similarity index 81% rename from Client/src/Components/DashboardMenu/index.jsx rename to Client/src/Components/Dashboard/DashboardMenu/index.jsx index a88274c5d..68b4dec99 100644 --- a/Client/src/Components/DashboardMenu/index.jsx +++ b/Client/src/Components/Dashboard/DashboardMenu/index.jsx @@ -1,15 +1,15 @@ import "./index.css"; import DashboardMenuButton from "../DashboardMenuButton"; -import Monitors from "../../assets/Images/Icon-monitor-gray.png"; -import Incidents from "../../assets/Images/Icon-warning-gray.png"; -import SensorsIcon from "../../assets/Images/Icon-signal-gray.png"; -import AllInclusiveIcon from "../../assets/Images/Icon-link-gray.png"; -import MaintenanceIcon from "../../assets/Images/Icon-maintenance-gray.png"; -import SettingsIcon from "../../assets/Images/Icon-setting-gray.png"; +import Monitors from "../../../assets/Images/Icon-monitor-gray.png"; +import Incidents from "../../../assets/Images/Icon-warning-gray.png"; +import SensorsIcon from "../../../assets/Images/Icon-signal-gray.png"; +import AllInclusiveIcon from "../../../assets/Images/Icon-link-gray.png"; +import MaintenanceIcon from "../../../assets/Images/Icon-maintenance-gray.png"; +import SettingsIcon from "../../../assets/Images/Icon-setting-gray.png"; import React, { useState, useEffect } from "react"; import { useNavigate, useLocation } from "react-router-dom"; -import pathMap from "../../Utils/PathMap"; +import pathMap from "../../../Utils/PathMap"; /** * @component diff --git a/Client/src/Components/DashboardMenuButton/index.css b/Client/src/Components/Dashboard/DashboardMenuButton/index.css similarity index 100% rename from Client/src/Components/DashboardMenuButton/index.css rename to Client/src/Components/Dashboard/DashboardMenuButton/index.css diff --git a/Client/src/Components/DashboardMenuButton/index.jsx b/Client/src/Components/Dashboard/DashboardMenuButton/index.jsx similarity index 100% rename from Client/src/Components/DashboardMenuButton/index.jsx rename to Client/src/Components/Dashboard/DashboardMenuButton/index.jsx diff --git a/Client/src/Components/CustomizedTables/index.css b/Client/src/Components/Dashboard/DashboardProgressBars/index.css similarity index 100% rename from Client/src/Components/CustomizedTables/index.css rename to Client/src/Components/Dashboard/DashboardProgressBars/index.css diff --git a/Client/src/Components/DashboardProgressBars/index.jsx b/Client/src/Components/Dashboard/DashboardProgressBars/index.jsx similarity index 100% rename from Client/src/Components/DashboardProgressBars/index.jsx rename to Client/src/Components/Dashboard/DashboardProgressBars/index.jsx diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/Dashboard/DashboardSettingsIcon/index.css similarity index 100% rename from Client/src/Components/DashboardSettingsIcon/index.css rename to Client/src/Components/Dashboard/DashboardSettingsIcon/index.css diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/Dashboard/DashboardSettingsIcon/index.jsx similarity index 100% rename from Client/src/Components/DashboardSettingsIcon/index.jsx rename to Client/src/Components/Dashboard/DashboardSettingsIcon/index.jsx diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/Dashboard/DashboardSidebar/index.css similarity index 100% rename from Client/src/Components/DashboardSidebar/index.css rename to Client/src/Components/Dashboard/DashboardSidebar/index.css diff --git a/Client/src/Components/DashboardSidebar/index.jsx b/Client/src/Components/Dashboard/DashboardSidebar/index.jsx similarity index 84% rename from Client/src/Components/DashboardSidebar/index.jsx rename to Client/src/Components/Dashboard/DashboardSidebar/index.jsx index 6538501d7..815fe861d 100644 --- a/Client/src/Components/DashboardSidebar/index.jsx +++ b/Client/src/Components/Dashboard/DashboardSidebar/index.jsx @@ -1,7 +1,7 @@ -import DashboardMenu from "../../Components/DashboardMenu"; +import DashboardMenu from "../DashboardMenu"; import SvgIcon from "@mui/material/SvgIcon"; import "./index.css"; -import SupportIcon from "../../assets/Images/Icon-support-gray.png"; +import SupportIcon from "../../../assets/Images/Icon-support-gray.png"; /** * @component diff --git a/Client/src/Components/DashboardProgressBars/index.css b/Client/src/Components/DashboardProgressBars/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/Client/src/Components/Dropdown/index.css b/Client/src/Components/Dropdown/index.css deleted file mode 100644 index a79cfcf78..000000000 --- a/Client/src/Components/Dropdown/index.css +++ /dev/null @@ -1 +0,0 @@ -/* dropdown styles*/ \ No newline at end of file diff --git a/Client/src/Components/Dropdown/index.jsx b/Client/src/Components/Dropdown/index.jsx deleted file mode 100644 index 2ee52ff74..000000000 --- a/Client/src/Components/Dropdown/index.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import PropTypes from "prop-types"; -import Autocomplete from "@mui/material/Autocomplete"; -import TextField from "@mui/material/TextField"; - -const Dropdown = (props) => { - return ( - (option.name ? option.name : "")} - value={props.value} - onChange={props.onChange} - // Add isOptionEqualToValue prop - isOptionEqualToValue={(option, value) => option.name === value} - renderInput={(params) => } - /> - ); -}; - -// Define PropTypes for DropDown component -Dropdown.propTypes = { - id: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - options: PropTypes.array.isRequired, - onChange: PropTypes.func.isRequired, - value: PropTypes.string.isRequired, -}; - -export default Dropdown; diff --git a/Client/src/Components/DropdownTeamMember/index.css b/Client/src/Components/DropdownTeamMember/index.css deleted file mode 100644 index 70ba13960..000000000 --- a/Client/src/Components/DropdownTeamMember/index.css +++ /dev/null @@ -1 +0,0 @@ -/*Dropdown Team Member styles*/ \ No newline at end of file diff --git a/Client/src/Components/DropdownTeamMember/index.jsx b/Client/src/Components/DropdownTeamMember/index.jsx deleted file mode 100644 index 44abe803a..000000000 --- a/Client/src/Components/DropdownTeamMember/index.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import { useState } from 'react' -import '@fontsource/roboto/300.css'; -import '@fontsource/roboto/400.css'; -import '@fontsource/roboto/500.css'; -import '@fontsource/roboto/700.css'; -// import DropDown from './Dropdown'; -import DropDown from '../Dropdown' - -const DropdownTeamMember = () => { - const [selectedTeamMember, setSelectedTeamMember] = useState(null); - - const teamMembers = [ - { id: 1, name: 'John Doe' }, - { id: 2, name: 'Jane Smith' }, - { id: 3, name: 'Alex Johnson' }, - // more team members... - ]; - - const handleTeamMemberChange = (event, value) => { - setSelectedTeamMember(value); - }; - - return ( - <> -
- -
- - ); - -} - -export default DropdownTeamMember \ No newline at end of file diff --git a/Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx deleted file mode 100644 index 67af3ab88..000000000 --- a/Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import "./complexAlert.css"; -import React from "react"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import PropTypes from "prop-types"; - -/** - * @component - * @param {Object} props - * @param {"red" | "green"} props.theme - The color theme for the alert (required) - must be either "red" or "green" - * @returns {JSX.Element} - Renders the complex alert component with dynamic color theme - */ -const ComplexAlert = ({ theme }) => { - if (theme === "red") { - return ( -
-
- -
-
- ); - } else if (theme === "green") { - return ( -
-
- -
-
- ); - } -}; - -ComplexAlert.propTypes = { - theme: PropTypes.string.isRequired, -}; - -export default ComplexAlert; diff --git a/Client/src/Components/Icons/ComplexAlert/complexAlert.css b/Client/src/Components/Icons/ComplexAlert/complexAlert.css deleted file mode 100644 index ab3cea714..000000000 --- a/Client/src/Components/Icons/ComplexAlert/complexAlert.css +++ /dev/null @@ -1,44 +0,0 @@ -.icon-holder-outer-red { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2px solid #d92d2019; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-inner-red { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid #d92d204d; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-outer-green { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2px solid #07945519; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-inner-green { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid #0794554d; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-core { - width: 20px; - height: 20px; -} diff --git a/Client/src/Components/Inputs/Search/SearchTextField.jsx b/Client/src/Components/Inputs/Search/SearchTextField.jsx deleted file mode 100644 index 7f7264faa..000000000 --- a/Client/src/Components/Inputs/Search/SearchTextField.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import "./searchTextField.css"; -import React from "react"; -import SearchSvg from "../../../assets/icons/search.svg?react"; - -const SearchTextField = () => { - return ( -
- - -
- ); -}; - -export default SearchTextField; diff --git a/Client/src/Components/Inputs/Search/searchTextField.css b/Client/src/Components/Inputs/Search/searchTextField.css deleted file mode 100644 index a3d560e15..000000000 --- a/Client/src/Components/Inputs/Search/searchTextField.css +++ /dev/null @@ -1,26 +0,0 @@ -.search-field-holder { - display: flex; - align-items: center; - width: 180px; - height: 9px; - padding: var(--env-var-spacing-1); - border: 1px solid var(--env-var-color-4); - border-radius: var(--env-var-radius-1); -} - -.search-field-icon { - width: var(--env-var-img-width-2); - height: var(--env-var-img-width-2); - margin-right: calc(var(--env-var-img-width-2) / 2); -} - -.search-field { - width: 150px; - border: none; - outline: none; - font-size: var(--env-var-font-size-medium); -} - -.search-field::placeholder { - color: var(--env-var-color-14); -} diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index d6c6adbd5..9de854fa2 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -27,10 +27,10 @@ const BaseLabel = ({ label, styles, children }) => { const padding = theme.spacing(1 * 0.75, 2); return ( -
{ > {children} {label} -
+ ); }; @@ -118,13 +118,14 @@ ColoredLabel.propTypes = { * @component * @param {Object} props * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label + * @param {string} props.dot - The color of the dot * @returns {JSX.Element} * @example * // Render an active label * */ -const StatusLabel = ({ status, customStyles }) => { +const StatusLabel = ({ status, dot, customStyles }) => { const theme = useTheme(); const colorLookup = { @@ -132,8 +133,7 @@ const StatusLabel = ({ status, customStyles }) => { Waiting: theme.palette.labelRed.color, New: theme.palette.labelOrange.color, Active: theme.palette.labelGreen.color, - Down: theme.palette.error.main, // Assuming theme.palette.error.main is red - + Down: theme.palette.error.main, // Assuming theme.palette.error.main is red }; // Look up the color for the status, default to labelGray if not found @@ -142,18 +142,26 @@ const StatusLabel = ({ status, customStyles }) => { return ( ); }; StatusLabel.propTypes = { - status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active", "Down", "Cannot resolve"]), + status: PropTypes.oneOf([ + "Seen", + "Waiting", + "New", + "Active", + "Up", + "Down", + "Cannot resolve", + ]), customStyles: PropTypes.object, }; diff --git a/Client/src/Components/MonitorTable/index.css b/Client/src/Components/MonitorTable/index.css deleted file mode 100644 index 53ef45f30..000000000 --- a/Client/src/Components/MonitorTable/index.css +++ /dev/null @@ -1,112 +0,0 @@ -/* .host-row { - display: flex; - align-items: center; -} - -.host-row a { - width: var(--env-var-img-width-2); - height: var(--env-var-img-width-2); - color: var(--env-var-color-5); - margin-right: 10px; - margin-bottom: 2px; -} -.host-row a svg { - width: var(--env-var-font-size-large); - height: var(--env-var-font-size-large); -} -.host-row .host-percentage { - font-size: var(--env-var-font-size-small); -} - -.host-name { - width: fit-content; - margin-right: 10px; - font-weight: 700; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.monitors .MuiPaper-root:has(table.MuiTable-root) { - box-shadow: none; - border: solid 1px var(--env-var-color-16); - border-radius: var(--env-var-radius-1); -} -.monitors .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root { - border: none; -} -.monitors .MuiTableHead-root, -.monitors .MuiTableRow-root:hover { - background-color: var(--env-var-color-13); -} -.monitors .MuiTableHead-root .MuiTableCell-root, -.monitors .MuiTableBody-root .MuiTableCell-root { - font-size: var(--env-var-font-size-medium); -} -.monitors .MuiTableHead-root .MuiTableCell-root { - padding: var(--env-var-spacing-1) var(--env-var-spacing-2); - font-weight: 500; - color: var(--env-var-color-2); -} -.monitors .MuiTableHead-root span { - display: inline-block; - height: 17px; - width: 20px; - overflow: hidden; - margin-bottom: -2px; - margin-left: 2px; -} -.monitors .MuiTableHead-root span svg { - width: 20px; - height: 20px; -} -.monitors .MuiTableBody-root .MuiTableCell-root { - color: var(--env-var-color-5); - padding: 6px var(--env-var-spacing-2); -} - -.monitors .MuiPagination-root { - flex: 1; - margin-top: 35px; - border: solid 1px var(--env-var-color-16); - border-radius: var(--env-var-radius-1); - padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2); -} -.monitors .MuiPagination-root ul { - justify-content: center; -} -.monitors .MuiPagination-root ul li button { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); - font-weight: 500; -} -.monitors .MuiPagination-root ul li:first-child { - margin-right: auto; -} -.monitors .MuiPagination-root ul li:last-child { - margin-left: auto; -} -.monitors .MuiPagination-root ul li:first-child button, -.monitors .MuiPagination-root ul li:last-child button { - border: solid 1px var(--env-var-color-16); - border-radius: var(--env-var-radius-1); -} -.monitors .MuiPagination-root ul li:first-child button { - padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus); -} -.monitors .MuiPagination-root ul li:last-child button { - padding: 0 var(--env-var-spacing-1-plus) 0 var(--env-var-spacing-1); -} -.monitors .MuiPagination-root ul li:first-child button::after, -.monitors .MuiPagination-root ul li:last-child button::before { - position: relative; - display: inline-block; -} -.monitors .MuiPagination-root ul li:first-child button::after { - content: "Previous"; - margin-left: 15px; -} -.monitors .MuiPagination-root ul li:last-child button::before { - content: "Next"; - margin-right: 15px; -} */ diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx deleted file mode 100644 index 58ebf6689..000000000 --- a/Client/src/Components/MonitorTable/index.jsx +++ /dev/null @@ -1,116 +0,0 @@ -import "./index.css"; -import PropTypes from "prop-types"; -import ResponseTimeChart from "../Charts/ResponseTimeChart"; -import BasicTable from "../BasicTable"; -import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"; -import { useNavigate } from "react-router-dom"; -import StatusLabel from "../StatusLabel"; -import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; - -/** - * Host component. - * This subcomponent receives a params object and displays the host details. - * - * @component - * @param {Object} params - An object containing the following properties: - * @param {string} params.url - The URL of the host. - * @param {string} params.title - The name of the host. - * @param {string} params.percentageColor - The color of the percentage text. - * @param {number} params.precentage - The percentage to display. - * @returns {React.ElementType} Returns a div element with the host details. - */ -const Host = ({ params }) => { - return ( -
- - - -
{params.title}
-
- {params.precentage}% -
-
- ); -}; - -/** - * MonitorTable component. - * Takes an array of monitor objects and displays them in a table. - * Each row in the table represents a monitor and includes the host, status, response time, and action. - * - * @component - * @param {Object[]} monitors - An array of monitor objects. Each object should have the following properties: - * @param {string} monitors[].url - The URL of the monitor. - * @param {string} monitors[].name - The name of the monitor. - * @param {boolean} monitors[].status - The status of the monitor. True if the monitor is up, false otherwise. - * @param {Object[]} monitors[].checks - An array of check objects for the response time chart. - * @returns {React.Component} Returns a table with the monitor data. - */ -const MonitorTable = ({ monitors = [] }) => { - const navigate = useNavigate(); - - const data = { - cols: [ - { id: 1, name: "Host" }, - { - id: 2, - name: ( - <> - Status - - - - - ), - }, - { id: 3, name: "Response Time" }, - { id: 4, name: "Actions" }, - ], - rows: [], - }; - - data.rows = monitors.map((monitor, idx) => { - const params = { - url: monitor.url, - title: monitor.name, - precentage: 100, - percentageColor: - monitor.status === true - ? "var(--env-var-color-17)" - : "var(--env-var-color-19)", - status: monitor.status === true ? "up" : "down", - backgroundColor: - monitor.status === true - ? "var(--env-var-color-20)" - : "var(--env-var-color-21)", - statusDotColor: - monitor.status === true - ? "var(--env-var-color-17)" - : "var(--env-var-color-19)", - }; - - return { - id: monitor._id, - handleClick: () => navigate(`/monitors/${monitor._id}`), - data: [ - { id: idx, data: }, - { id: idx + 1, data: }, - { id: idx + 2, data: }, - { id: idx + 3, data: "TODO" }, - ], - }; - }); - - return ; -}; - -MonitorTable.propTypes = { - monitors: PropTypes.arrayOf(PropTypes.object).isRequired, -}; - -Host.propTypes = { params: PropTypes.object.isRequired }; - -export default MonitorTable; diff --git a/Client/src/Components/Pagination/index.css b/Client/src/Components/Pagination/index.css deleted file mode 100644 index f9289b741..000000000 --- a/Client/src/Components/Pagination/index.css +++ /dev/null @@ -1,33 +0,0 @@ -.pagination-holder { - display: flex; - width: 100%; - justify-content: center; -} - -.MuiPagination-root { - .MuiPagination-ul { - flex-wrap: nowrap; - li { - &:first-child { - flex-basis: 100%; - display: flex; - justify-content: flex-start; - align-items: center; - > button::after { - margin-left: 10px; - content: "previous"; - } - } - &:last-child { - flex-basis: 100%; - display: flex; - justify-content: flex-end; - align-items: center; - > button::before { - margin-right: 10px; - content: "next"; - } - } - } - } -} diff --git a/Client/src/Components/Pagination/index.jsx b/Client/src/Components/Pagination/index.jsx deleted file mode 100644 index d2d4e18fe..000000000 --- a/Client/src/Components/Pagination/index.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import { Pagination as MuiPagination } from "@mui/material"; -import "./index.css"; - -const Pagination = () => { - return ( -
- -
- ); -}; - -export default Pagination; diff --git a/Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx deleted file mode 100644 index 42a3f2a8a..000000000 --- a/Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import "./dualButtonPopupModal.css"; -import React from "react"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {boolean} [props.open=true] - Controls the visibility of the modal (defaults to true) - * @param {string} props.subject - The title text for the modal (required) - * @param {string} props.description - The description text for the modal (required) - * @param {string} props.esc - The text for the discard button (usually "Cancel", "Dismiss" or "Discard") (required) - * @param {string} props.save - The text for the save button (required) - * @returns {JSX.Element} - Renders the dual button popup modal component - */ -const DualButtonPopupModal = ({ - open = true, - subject, - description, - esc, - save, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{subject}
-
{description}
-
-
- - -
-
- ); -}; - -DualButtonPopupModal.propTypes = { - open: PropTypes.bool, - subject: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - save: PropTypes.string.isRequired, -}; - -export default DualButtonPopupModal; diff --git a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css deleted file mode 100644 index e4ff13a7c..000000000 --- a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css +++ /dev/null @@ -1,52 +0,0 @@ -.dual-button-popup-modal-holder { - width: 380px; - height: 130px; - margin: 10px 20px; - padding: 30px; - box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), - 0px 20px 24px -4px rgba(16, 24, 40, 0.08); - border: 1px solid var(--env-var-color-9); - border-radius: var(--env-var-radius-1); -} - -.dual-button-popup-modal-subject { - color: var(--env-var-color-1); - font-weight: bolder; - font-size: 16px; -} - -.dual-button-popup-modal-description { - color: var(--env-var-color-2); - font-size: var(--env-var-font-size-medium); - margin-top: 10px; -} - -.dual-modal-spacing { - height: 40px; -} - -.dual-button-popup-modal-controllers { - display: flex; - justify-content: end; -} - -.blue-save-button { - width: 145px; - height: 35px; - padding: 5px 20px; - background-color: var(--env-var-color-3); - border: 1px solid var(--env-var-color-10); - border-radius: var(--env-var-radius-1); - margin: 5px 0; - margin-left: 20px; - color: var(--env-var-color-8); - cursor: pointer; - font-size: var(--env-var-font-size-medium); -} - -.transparent-discard-button { - border: none; - background-color: transparent; - margin: 5px 10px; - font-size: var(--env-var-font-size-medium); -} diff --git a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx deleted file mode 100644 index b8b424323..000000000 --- a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import "./dualButtonPopupModalWithTextfields.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the modal (required) - * @returns {JSX.Element} - Renders a single text field component within a popup modal - */ -const PopupModalTextfield = ({ title }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
- -
- ); -}; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the modal (required) - * @param {string} props.esc - The text for the cancel button (required) - * @param {string} props.save - The text for the save button (required) - * @returns {JSX.Element} - Renders the dual button popup modal component with text fields - */ -const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{title}
-
- -
-
-
- -
-
-
- - -
-
- ); -}; - -DualButtonPopupModalWithTextfields.propTypes = { - title: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - save: PropTypes.string.isRequired, -}; - -export default DualButtonPopupModalWithTextfields; diff --git a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css deleted file mode 100644 index be8930422..000000000 --- a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css +++ /dev/null @@ -1,55 +0,0 @@ -.popup-modal-holder { - width: 480px; - font-family: var(--popup-font-family-0); - padding: 50px 40px; - border-radius: var(--env-var-radius-1); - margin: 10px 20px; - border: 1px solid var(--env-var-color-9); - box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), - 0px 20px 24px -4px rgba(16, 24, 40, 0.08); -} - -.popup-modal-header { - display: flex; - justify-content: space-between; - font-weight: bold; -} - -.popup-modal-close { - cursor: pointer; -} - -.spacing-height { - height: 30px; -} - -.popup-modal-input-title { - margin-bottom: 15px; - color: var(--env-var-color-5); -} - -.popup-modal-text-field { - width: 100%; - height: 35px; - border: 1px solid var(--env-var-color-4); - border-radius: var(--env-var-radius-1); -} - -.popup-modal-controllers { - display: flex; - justify-content: end; -} - -.white-cancel-button { - border: none; - background-color: transparent; - font-family: var(--popup-font-family-0); - margin: 5px 10px; - width: 145px; - height: 35px; - padding: 5px 20px; - border: 1px solid var(--env-var-color-4); - border-radius: var(--env-var-radius-1); - cursor: pointer; - font-size: var(--env-var-font-size-medium); -} diff --git a/Client/src/Components/Section/index.jsx b/Client/src/Components/Section/index.jsx deleted file mode 100644 index a8c75717f..000000000 --- a/Client/src/Components/Section/index.jsx +++ /dev/null @@ -1,132 +0,0 @@ -import PropTypes from "prop-types"; -import { useState, useEffect } from "react"; -import { - Box, - Container, - useTheme, - Typography, - TextField, - Switch, -} from "@mui/material"; -import MenuIcon from "@mui/icons-material/Menu"; -import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; -import Button from "../Button/"; -import AddIcon from "@mui/icons-material/Add"; - -/** - * @component - * @param {Object} props - * @param { Array} props.monitors - Array of monitors associated with the section - * @returns {JSX.Element} - * @example - * // Renders a section component with a list of monitors - *
- */ - -const Section = ({ monitors }) => { - const [monitorStates, setMonitorStates] = useState( - monitors.map((monitor) => monitor.isActive) - ); - - useEffect(() => { - // Update DB here - }, [monitorStates]); - - const handleMonitor = (monitorIndex) => { - setMonitorStates((prevStates) => { - const newStates = [...prevStates]; - newStates[monitorIndex] = !newStates[monitorIndex]; - - return newStates; - // Need to update DB with new monitor state - }); - }; - const theme = useTheme(); - return ( - <> - - - Section Name - - - - Servers List -
-
    - {links.map((link) => ( -
  • - -
    • - ))} -
- -

Buttons

-
-
- -

Disabled Buttons

-
-
-
- -
- -

Labels

-
- - - - -
- -

Status Lables

-
- - - - - -
- -

Avatar

-
- - - - -
- -

Switches

-
- change(event, "Switch")} /> - - - -
- -

Checkboxes

-
- change(event, "Checkbox")} /> - - - -
- -

Radio

-
- - Demo Radio - -
- } label="1" /> - } label="2" /> - } - label="3" - /> - } - label="4" - /> -
- - -
- -

Table

-
- -
- -

Tabs

-
- {" "} - - - - - - -
- -

Date Picker

-
- - - -

{date}

-
- -

Stepper

-
- -
- -

Loading Buttons

- - - - - } - onClick={handleButtonSpinnerClick} - isLoading={isLoading} - /> - } - onClick={handleButtonSpinnerClick} - isLoading={isLoading} - /> - - - - - console.log("changed")} - /> - - - - } - label="image.jpg" - size="2 MB" - progress={50} - onClick={() => console.log("click")} - /> - - - - - - - - - - - - - - - - - - - -
- ); -}; -export default Demo; From c9694ed00be4004d0e78e6c76e32c9c4e4f920a3 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 19:24:03 -0700 Subject: [PATCH 18/20] Removed demo route --- Client/src/App.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 8c1250f13..bf23fb663 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -4,7 +4,6 @@ import NotFound from "./Pages/NotFound"; import Login from "./Pages/Auth/Login"; import Register from "./Pages/Auth/Register"; import HomeLayout from "./Layouts/HomeLayout"; -import Demo from "./Pages/Demo/Demo"; import PlayGround from "./Pages/PlayGround/PlayGround"; import Account from "./Pages/Account"; import Monitors from "./Pages/Monitors"; @@ -82,7 +81,6 @@ function App() { } /> } /> - } /> {/* } /> */} } /> } /> From 0560046686e814b94bfbf98ea58013cdcb88d6f4 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 19:24:57 -0700 Subject: [PATCH 19/20] Removed playground, prepare for release --- .../Pages/PlayGround/PlayGround-Charts.jsx | 25 ------ .../Pages/PlayGround/PlayGround-Tooltips.jsx | 34 -------- .../PlayGround/PlayGround-announcements.jsx | 73 ---------------- Client/src/Pages/PlayGround/PlayGround.jsx | 86 ------------------- Client/src/Pages/PlayGround/playGround.css | 19 ---- 5 files changed, 237 deletions(-) delete mode 100644 Client/src/Pages/PlayGround/PlayGround-Charts.jsx delete mode 100644 Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx delete mode 100644 Client/src/Pages/PlayGround/PlayGround-announcements.jsx delete mode 100644 Client/src/Pages/PlayGround/PlayGround.jsx delete mode 100644 Client/src/Pages/PlayGround/playGround.css diff --git a/Client/src/Pages/PlayGround/PlayGround-Charts.jsx b/Client/src/Pages/PlayGround/PlayGround-Charts.jsx deleted file mode 100644 index 906f2a84a..000000000 --- a/Client/src/Pages/PlayGround/PlayGround-Charts.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import "./playGround.css"; -import Statistic from "../../Components/Charts/Statistics/Statistic"; -import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; - -function PlayGroundCharts() { - return ( - <> -
- - - - -
-
-
- - - -
- - ); -} - -export default PlayGroundCharts; diff --git a/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx b/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx deleted file mode 100644 index 3713f889c..000000000 --- a/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import TooltipWithTail from "../../Components/Tooltips/TooltipWithTail/TooltipWithTail"; -import "./playGround.css"; - -function PlayGroundTooltips() { - return ( -
-
- -
- -
- -
- -
- ); -} - -export default PlayGroundTooltips; diff --git a/Client/src/Pages/PlayGround/PlayGround-announcements.jsx b/Client/src/Pages/PlayGround/PlayGround-announcements.jsx deleted file mode 100644 index aa4bd1913..000000000 --- a/Client/src/Pages/PlayGround/PlayGround-announcements.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import "./playGround.css"; -import React from "react"; -import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; -import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; -import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert"; -import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar"; -import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton"; -import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription"; - -function PlayGroundAnnouncements() { - return ( -
- - -
- } - subject="We’ve just released a new feature" - body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid - pariatur, ipsum dolor." - esc="Dismiss" - primary="View changes" - /> -
-
- } - subject="There was a problem with that action" - body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid - pariatur, ipsum dolor." - esc="Dismiss" - primary="Learn more" - /> -
-
- } - subject="Successfully updated profile" - body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid - pariatur, ipsum dolor." - esc="Dismiss" - primary="Learn more" - /> -
-
- -
-
- -
-
- -
-
-
- ); -} - -export default PlayGroundAnnouncements; diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx deleted file mode 100644 index 42f58148e..000000000 --- a/Client/src/Pages/PlayGround/PlayGround.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from "react"; -import PlayGroundCharts from "./PlayGround-Charts"; -import PlayGroundTooltips from "./PlayGround-Tooltips"; -import Field from "../../Components/Inputs/Field"; - -// This Component is just for the development and test -// purposes and just to see what my components look like while development -// and will be removed in the end -function PlayGround() { - return ( -
- {/* Default state of Email Text Fields */} -
- - {/* Email Text Field when validation error occures */} - -
- -
- - {/* Now, illustration of the Website text fields */} -
- - -
- -
- {/* Now, illustration of the Description text fields */} - -
- - -
-
- -
- -
- ); -} - -export default PlayGround; diff --git a/Client/src/Pages/PlayGround/playGround.css b/Client/src/Pages/PlayGround/playGround.css deleted file mode 100644 index cd6d5e87b..000000000 --- a/Client/src/Pages/PlayGround/playGround.css +++ /dev/null @@ -1,19 +0,0 @@ -.play-ground-charts { - display: flex; -} - -.play-ground-charts-spacing { - height: 110px; -} - -.tooltip-playground { - margin: auto; - padding: 5%; - width: 5%; - justify-content: center; - text-align: center; -} - -.playground { - padding: 40px; -} From 3576fcd740d78d2e233ecc9e806534872c68ed07 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 17 Jul 2024 19:26:08 -0700 Subject: [PATCH 20/20] Removed playground route --- Client/src/App.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index bf23fb663..0482aec5d 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -4,7 +4,6 @@ import NotFound from "./Pages/NotFound"; import Login from "./Pages/Auth/Login"; import Register from "./Pages/Auth/Register"; import HomeLayout from "./Layouts/HomeLayout"; -import PlayGround from "./Pages/PlayGround/PlayGround"; import Account from "./Pages/Account"; import Monitors from "./Pages/Monitors"; import CreateMonitor from "./Pages/Monitors/CreateMonitor"; @@ -83,7 +82,6 @@ function App() { } /> {/* } /> */} } /> - } /> } /> } /> } />