diff --git a/Client/src/Components/MonitorTable/index.css b/Client/src/Components/MonitorTable/index.css index 360526fc4..4339f261b 100644 --- a/Client/src/Components/MonitorTable/index.css +++ b/Client/src/Components/MonitorTable/index.css @@ -27,29 +27,6 @@ white-space: nowrap; } -.host-status { - width: fit-content; -} - -.host-status-details { - display: flex; - align-items: center; - border: 1px solid var(--env-var-color-4); - border-radius: var(--env-var-radius-2); - padding: calc(var(--env-var-spacing-1) / 2); -} - -.host-status-text { - font-size: var(--env-var-font-size-medium); - line-height: var(--env-var-font-size-medium); -} -.host-status-dot { - width: 6px; - height: 6px; - border-radius: 50%; - margin-right: calc(var(--env-var-spacing-1) / 2); -} - .monitors .MuiPaper-root:has(table.MuiTable-root) { box-shadow: none; border: solid 1px var(--env-var-color-16); diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx index 35b7a0fca..57bfd125c 100644 --- a/Client/src/Components/MonitorTable/index.jsx +++ b/Client/src/Components/MonitorTable/index.jsx @@ -4,6 +4,7 @@ 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. @@ -34,39 +35,6 @@ const Host = ({ params }) => { ); }; -/** - * Status component. - * This subcomponent receives a params object and displays the status details of a monitor. - * - * @component - * @param {Object} params - An object containing the following properties: - * @param {string} params.backgroundColor - The background color of the status box. - * @param {string} params.statusDotColor - The color of the status dot. - * @param {string} params.status - The status text to display. - * @returns {React.ElementType} Returns a div element with the host status. - */ -const Status = ({ params }) => { - return ( -
-
-
- - {params.status} - -
-
- ); -}; - /** * MonitorTable component. * Takes an array of monitor objects and displays them in a table. @@ -118,7 +86,7 @@ const MonitorTable = ({ monitors = [] }) => { handleClick: () => navigate(`/monitors/${monitor._id}`), data: [ { id: idx, data: }, - { id: idx + 1, data: }, + { id: idx + 1, data: }, { id: idx + 2, data: }, { id: idx + 3, data: "TODO" }, ], @@ -132,7 +100,6 @@ MonitorTable.propTypes = { monitors: PropTypes.arrayOf(PropTypes.object).isRequired, }; -Status.propTypes = { params: PropTypes.object.isRequired }; Host.propTypes = { params: PropTypes.object.isRequired }; export default MonitorTable; diff --git a/Client/src/Components/StatusLabel/index.css b/Client/src/Components/StatusLabel/index.css new file mode 100644 index 000000000..3dcb3e004 --- /dev/null +++ b/Client/src/Components/StatusLabel/index.css @@ -0,0 +1,22 @@ +.host-status { + width: fit-content; +} + +.host-status-details { + display: flex; + align-items: center; + border: 1px solid var(--env-var-color-4); + border-radius: var(--env-var-radius-2); + padding: calc(var(--env-var-spacing-1) / 2); +} + +.host-status-text { + font-size: var(--env-var-font-size-medium); + line-height: var(--env-var-font-size-medium); +} +.host-status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: calc(var(--env-var-spacing-1) / 2); +} diff --git a/Client/src/Components/StatusLabel/index.jsx b/Client/src/Components/StatusLabel/index.jsx new file mode 100644 index 000000000..36e405b53 --- /dev/null +++ b/Client/src/Components/StatusLabel/index.jsx @@ -0,0 +1,39 @@ +import "./index.css"; +import PropTypes from "prop-types"; + +/** + * Status component. + * This subcomponent receives a params object and displays the status details of a monitor. + * + * @component + * @param {Object} params - An object containing the following properties: + * @param {string} params.backgroundColor - The background color of the status box. + * @param {string} params.statusDotColor - The color of the status dot. + * @param {string} params.status - The status text to display. + * @returns {React.ElementType} Returns a div element with the host status. + */ +const StatusLabel = ({ params }) => { + return ( +
+
+
+ + {params.status} + +
+
+ ); +}; + +export default StatusLabel; + +StatusLabel.propTypes = { params: PropTypes.object.isRequired }; diff --git a/Client/src/Components/StatusTable/index.css b/Client/src/Components/StatusTable/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx deleted file mode 100644 index 9546d5742..000000000 --- a/Client/src/Components/StatusTable/index.jsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -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 Pagination from '../../Components/Pagination'; - -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, - }, -})); - -const itemsPerPage = 5; // Number of items per page - -export default function StatusTable({ data, columns }) { - const theme = useTheme(); - const [currentPage, setCurrentPage] = React.useState(1); - - const onPageChange = (page) => { - setCurrentPage(page); - }; - - // Calculate total pages based on data length and items per page - const totalPages = Math.ceil(data.length / itemsPerPage); - - // Slice data based on current page and items per page - const paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); - - return ( - - - - - - {columns.map((column, index) => ( - - {column.header} - - ))} - - - - {paginatedData.map((row, rowIndex) => ( - - {columns.map((column, colIndex) => ( - - {column.id === 'name' ? ( -
- {row.name} -
- ) : ( - row[column.id] - )} - - ))} - - ))} - -
- - {totalPages > 1 && ( - - )} - - ); -} - -StatusTable.propTypes = { - data: PropTypes.arrayOf(PropTypes.object).isRequired, - columns: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - header: PropTypes.node.isRequired, - align: PropTypes.oneOf(['left', 'right', 'center']), - }) - ).isRequired, -}; diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 4bb75a53d..da9851d11 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,22 +1,21 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; -import { useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import TuneIcon from '@mui/icons-material/Tune'; -import StatusTable from '../../Components/StatusTable'; +import * as React from "react"; +import TextField from "@mui/material/TextField"; +import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete"; +import { useTheme } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import TuneIcon from "@mui/icons-material/Tune"; import { StatusLabel } from "../../Components/Label/"; const filterOptions = createFilterOptions({ - matchFrom: 'start', + matchFrom: "start", stringify: (option) => option.title, }); const titles = [ - { title: 'Down' }, - { title: 'Cannot resolve' }, - { title: 'Clear / show all' }, + { title: "Down" }, + { title: "Cannot resolve" }, + { title: "Clear / show all" }, ]; /** @@ -32,11 +31,11 @@ function Filter() { filterOptions={filterOptions} sx={{ width: 170, - '& .MuiAutocomplete-inputRoot': { - height: '50px', + "& .MuiAutocomplete-inputRoot": { + height: "50px", }, - '& .MuiAutocomplete-listbox': { - maxHeight: '200px', + "& .MuiAutocomplete-listbox": { + maxHeight: "200px", }, }} disableClearable @@ -46,7 +45,9 @@ function Filter() { size="small" label={ - + Filter by status } @@ -58,17 +59,82 @@ function Filter() { } const sampleData = [ - { name: , date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' }, - { name: , date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' }, - { name: , date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' }, - { name: , date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' }, - { name: , date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' }, + { + name: ( + + ), + date: "2024-03-14 21:41:09", + message: "HTTP 350 - NOK", + }, + { + name: ( + + ), + date: "2024-03-14 21:41:09", + message: "timeout of 48000ms exceeded", + }, + { + name: ( + + ), + date: "2024-03-14 21:41:09", + message: "timeout of 48000ms exceeded", + }, + { + name: ( + + ), + date: "2024-03-14 21:41:09", + message: "timeout of 48000ms exceeded", + }, + { + name: ( + + ), + date: "2024-03-14 21:41:09", + message: "HTTP 350 - NOK", + }, ]; const columns = [ - { id: 'name', header: 'Status' }, - { id: 'date', header: 'Date & Time' }, - { id: 'message', header: 'Message' }, + { id: "name", header: "Status" }, + { id: "date", header: "Date & Time" }, + { id: "message", header: "Message" }, ]; /** @@ -82,21 +148,33 @@ export default function CustomizedTables() { - - + + Incident History - + {/* TODO Replace with BasicTable */} + {/* */} ); }