From 10de2caa2eac3cae69ae0d44bd52f0dca7b8b034 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 16 Jul 2024 15:00:30 -0700
Subject: [PATCH 1/2] Remove old tables

---
 Client/src/Components/StatusTable/index.css |   0
 Client/src/Components/StatusTable/index.jsx | 114 ----------------
 Client/src/Pages/Incidents/index.jsx        | 142 +++++++++++++++-----
 3 files changed, 110 insertions(+), 146 deletions(-)
 delete mode 100644 Client/src/Components/StatusTable/index.css
 delete mode 100644 Client/src/Components/StatusTable/index.jsx

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 (
-    <Box
-      sx={{
-        marginTop: theme.spacing(4),
-        marginX: 'auto',
-        width: '80%',
-        paddingX: theme.spacing(6),
-        [theme.breakpoints.down('md')]: {
-          width: '100%',
-        },
-      }}
-    >
-      <TableContainer component={Paper}>
-        <Table sx={{ minWidth: 700 }} aria-label="customized table">
-          <TableHead>
-            <TableRow>
-              {columns.map((column, index) => (
-                <StyledTableCell key={index} align={column.align || 'left'}>
-                  {column.header}
-                </StyledTableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {paginatedData.map((row, rowIndex) => (
-              <StyledTableRow key={rowIndex}>
-                {columns.map((column, colIndex) => (
-                  <StyledTableCell key={colIndex} align={column.align || 'left'}>
-                    {column.id === 'name' ? (
-                      <div style={row.name.props.customStyles}>
-                        {row.name}
-                      </div>
-                    ) : (
-                      row[column.id]
-                    )}
-                  </StyledTableCell>
-                ))}
-              </StyledTableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      {totalPages > 1 && (
-        <Pagination
-          page={currentPage}
-          count={totalPages}
-          onPageChange={onPageChange}
-        />
-      )}
-    </Box>
-  );
-}
-
-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={
             <React.Fragment>
-              <TuneIcon sx={{ marginRight: '0.5rem', position: 'relative', top: '6px' }} />
+              <TuneIcon
+                sx={{ marginRight: "0.5rem", position: "relative", top: "6px" }}
+              />
               Filter by status
             </React.Fragment>
           }
@@ -58,17 +59,82 @@ function Filter() {
 }
 
 const sampleData = [
-  { name: <StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' },
-  { name: <StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' },
-  { name: <StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' },
-  { name: <StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' },
-  { name: <StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' },
+  {
+    name: (
+      <StatusLabel
+        status="Down"
+        customStyles={{
+          backgroundColor: "#fff9f9",
+          borderColor: "#ffcac6",
+          color: "#344054",
+        }}
+      />
+    ),
+    date: "2024-03-14 21:41:09",
+    message: "HTTP 350 - NOK",
+  },
+  {
+    name: (
+      <StatusLabel
+        status="Down"
+        customStyles={{
+          backgroundColor: "#fff9f9",
+          borderColor: "#ffcac6",
+          color: "#344054",
+        }}
+      />
+    ),
+    date: "2024-03-14 21:41:09",
+    message: "timeout of 48000ms exceeded",
+  },
+  {
+    name: (
+      <StatusLabel
+        status="Cannot resolve"
+        customStyles={{
+          backgroundColor: "#f2f4f7",
+          borderColor: "#d2d6de",
+          color: "#344054",
+        }}
+      />
+    ),
+    date: "2024-03-14 21:41:09",
+    message: "timeout of 48000ms exceeded",
+  },
+  {
+    name: (
+      <StatusLabel
+        status="Cannot resolve"
+        customStyles={{
+          backgroundColor: "#f2f4f7",
+          borderColor: "#d2d6de",
+          color: "#344054",
+        }}
+      />
+    ),
+    date: "2024-03-14 21:41:09",
+    message: "timeout of 48000ms exceeded",
+  },
+  {
+    name: (
+      <StatusLabel
+        status="Down"
+        customStyles={{
+          backgroundColor: "#fff9f9",
+          borderColor: "#ffcac6",
+          color: "#344054",
+        }}
+      />
+    ),
+    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() {
     <Box
       sx={{
         marginTop: theme.spacing(4),
-        marginX: 'auto',
-        width: '80%',
+        marginX: "auto",
+        width: "80%",
         paddingX: theme.spacing(6),
-        [theme.breakpoints.down('md')]: {
-          width: '100%',
+        [theme.breakpoints.down("md")]: {
+          width: "100%",
         },
       }}
     >
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(2) }}>
-        <Typography variant="h6" component="div" sx={{ fontWeight: 600, fontSize: 16 }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: theme.spacing(2),
+        }}
+      >
+        <Typography
+          variant="h6"
+          component="div"
+          sx={{ fontWeight: 600, fontSize: 16 }}
+        >
           Incident History
         </Typography>
         <Filter />
       </Box>
-      <StatusTable data={sampleData} columns={columns} /> 
+      {/* TODO Replace with BasicTable */}
+      {/* <StatusTable data={sampleData} columns={columns} /> */}
     </Box>
   );
 }

From aca70001e54c4ea3041d0dffe42a3dc67704df4f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 16 Jul 2024 15:05:58 -0700
Subject: [PATCH 2/2] Refactored out status label

---
 Client/src/Components/MonitorTable/index.css | 23 ------------
 Client/src/Components/MonitorTable/index.jsx | 37 +------------------
 Client/src/Components/StatusLabel/index.css  | 22 +++++++++++
 Client/src/Components/StatusLabel/index.jsx  | 39 ++++++++++++++++++++
 4 files changed, 63 insertions(+), 58 deletions(-)
 create mode 100644 Client/src/Components/StatusLabel/index.css
 create mode 100644 Client/src/Components/StatusLabel/index.jsx

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 (
-    <div className="host-status">
-      <div
-        className="host-status-details"
-        style={{ backgroundColor: params.backgroundColor }}
-      >
-        <div
-          className="host-status-dot"
-          style={{ backgroundColor: params.statusDotColor }}
-        />
-        <span
-          className="host-status-text"
-          style={{ textTransform: "capitalize" }}
-        >
-          {params.status}
-        </span>
-      </div>
-    </div>
-  );
-};
-
 /**
  * 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: <Host params={params} /> },
-        { id: idx + 1, data: <Status params={params} /> },
+        { id: idx + 1, data: <StatusLabel params={params} /> },
         { id: idx + 2, data: <ResponseTimeChart checks={monitor.checks} /> },
         { 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 (
+    <div className="host-status">
+      <div
+        className="host-status-details"
+        style={{ backgroundColor: params.backgroundColor }}
+      >
+        <div
+          className="host-status-dot"
+          style={{ backgroundColor: params.statusDotColor }}
+        />
+        <span
+          className="host-status-text"
+          style={{ textTransform: "capitalize" }}
+        >
+          {params.status}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default StatusLabel;
+
+StatusLabel.propTypes = { params: PropTypes.object.isRequired };