diff --git a/Client/src/App.jsx b/Client/src/App.jsx index f1c24049a..0482aec5d 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,24 +1,22 @@ -import { Routes, Route, Navigate } from "react-router-dom"; +import { Routes, Route } from "react-router-dom"; // import "./App.css"; import NotFound from "./Pages/NotFound"; -import Login from "./Pages/Login"; -import Register from "./Pages/Register"; +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"; -import CreateNewMonitor from "./Pages/CreateNewMonitor"; +import CreateMonitor from "./Pages/Monitors/CreateMonitor"; import Incidents from "./Pages/Incidents"; import Status from "./Pages/Status"; import Integrations from "./Pages/Integrations"; import Settings from "./Pages/Settings"; -import ForgotPassword from "./Pages/ForgotPassword"; -import CheckEmail from "./Pages/CheckEmail"; -import SetNewPassword from "./Pages/SetNewPassword"; -import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed"; +import ForgotPassword from "./Pages/Auth/ForgotPassword"; +import CheckEmail from "./Pages/Auth/CheckEmail"; +import SetNewPassword from "./Pages/Auth/SetNewPassword"; +import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed"; import ProtectedRoute from "./Components/ProtectedRoute"; -import Details from "./Pages/Details"; +import Details from "./Pages/Monitors/Details"; import Maintenance from "./Pages/Maintenance"; import "react-toastify/dist/ReactToastify.css"; import { ToastContainer } from "react-toastify"; @@ -39,7 +37,7 @@ function App() { /> } + element={} /> } /> } /> - } /> {/* } /> */} } /> - } /> } /> } /> } /> 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 e69de29bb..637e5e6dd 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -0,0 +1,126 @@ +.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 .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; + 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); +} +.MuiTable-root .MuiTableBody-root .MuiTableRow-root { + height: 50px; +} + +.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/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/CustomizedTables/index.css b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css similarity index 100% rename from Client/src/Components/CustomizedTables/index.css rename to Client/src/Components/Charts/MonitorDetailsAreaChart/index.css 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/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 (
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/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.jsx b/Client/src/Components/DashboardProgressBars/index.jsx deleted file mode 100644 index 4b81c9d1a..000000000 --- a/Client/src/Components/DashboardProgressBars/index.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import { BarChart } from "@mui/x-charts/BarChart"; - -const ChartsOverviewDemo = () => { - return ( - - ); -}; - -export default ChartsOverviewDemo; diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/DashboardSettingsIcon/index.css deleted file mode 100644 index ab55dd558..000000000 --- a/Client/src/Components/DashboardSettingsIcon/index.css +++ /dev/null @@ -1,9 +0,0 @@ -#dashboard-setting-menu-item { - width: 135px; - padding: 6px; - margin: 5px 12px; -} - -#menu-appbar { - padding: var(--env-var-spacing-1); -} diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/DashboardSettingsIcon/index.jsx deleted file mode 100644 index f01e65900..000000000 --- a/Client/src/Components/DashboardSettingsIcon/index.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import "./index.css"; -import { useState } from "react"; -import Box from "@mui/material/Box"; -import IconButton from "@mui/material/IconButton"; -import Menu from "@mui/material/Menu"; -import Tooltip from "@mui/material/Tooltip"; -import MenuItem from "@mui/material/MenuItem"; -import Typography from "@mui/material/Typography"; -import SvgIcon from "@mui/material/SvgIcon"; -import SettingsIcon from "@mui/icons-material/Settings"; -import { useTheme } from "@mui/material/styles"; - -const settings = [ - "Open Site", - "Detailed View", - "Incidents", - "Configure", - "Remove", -]; - -/** - * DashboardSettings component - * - * A component that provides a settings menu accessible from an icon. - * - * @component - * @example - * return ( - * - * ) - */ -function DashboardSettings() { - const theme = useTheme(); - const [anchorElUser, setAnchorElUser] = useState(null); - - /** - * Handles opening the user menu. - * - * @param {React.MouseEvent} event - The event triggered by clicking the user menu button. - */ - const handleOpenUserMenu = (event) => { - setAnchorElUser(event.currentTarget); - }; - - /** - * Handles closing the user menu. - */ - const handleCloseUserMenu = () => { - setAnchorElUser(null); - }; - - return ( - - - - - - - - {settings.map((setting) => ( - - - {setting} - - - ))} - - - ); -} - -export default DashboardSettings; 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 4339f261b..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 57bfd125c..000000000 --- a/Client/src/Components/MonitorTable/index.jsx +++ /dev/null @@ -1,105 +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"; - -/** - * 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

-
- -
- -

Section

-
- -

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")} - /> - - - - - - - - - - - - - - - - - - - -