From 4252e7a1c563682371f01fdc5f73e98ad5bac21a Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Thu, 27 Jun 2024 21:13:21 -0700
Subject: [PATCH 1/7] Initial commit for the table of the incidents page.

---
 Client/src/Pages/Incidents/index.jsx | 78 +++++++++++++++++++++++++---
 1 file changed, 72 insertions(+), 6 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index e1aa44740..579c64815 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,9 +1,75 @@
-import React from 'react'
+import * as React from 'react';
+import { styled } 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';
 
-const Incidents = () => {
-    return (
-        <div>Incidents</div>
-    )
+
+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(1)': {
+    backgroundColor: theme.palette.action.hover, 
+  },
+  '&:nth-of-type(n+1)': {
+    backgroundColor: theme.palette.common.white, 
+  },
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
 }
 
-export default Incidents
\ No newline at end of file
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function CustomizedTables() {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 700 }} aria-label="customized table">
+        <TableHead>
+          <TableRow>
+            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+            <StyledTableCell align="right">Calories</StyledTableCell>
+            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
+            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
+            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <StyledTableRow key={row.name}>
+              <StyledTableCell component="th" scope="row">
+                {row.name}
+              </StyledTableCell>
+              <StyledTableCell align="right">{row.calories}</StyledTableCell>
+              <StyledTableCell align="right">{row.fat}</StyledTableCell>
+              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
+              <StyledTableCell align="right">{row.protein}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

From ecd3b6f8dbc0cca2977c4acc561cba2ce588aa63 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 28 Jun 2024 16:41:27 -0700
Subject: [PATCH 2/7] Change table to 3 rows.

---
 Client/src/Pages/Incidents/index.jsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 579c64815..f104e29ff 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -49,11 +49,9 @@ export default function CustomizedTables() {
       <Table sx={{ minWidth: 700 }} aria-label="customized table">
         <TableHead>
           <TableRow>
-            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
-            <StyledTableCell align="right">Calories</StyledTableCell>
-            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
-            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
-            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
+            <StyledTableCell>Status</StyledTableCell>
+            <StyledTableCell align="right">Date & Time</StyledTableCell>
+            <StyledTableCell align="right">Message</StyledTableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -64,8 +62,6 @@ export default function CustomizedTables() {
               </StyledTableCell>
               <StyledTableCell align="right">{row.calories}</StyledTableCell>
               <StyledTableCell align="right">{row.fat}</StyledTableCell>
-              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
-              <StyledTableCell align="right">{row.protein}</StyledTableCell>
             </StyledTableRow>
           ))}
         </TableBody>

From b254c9058e68db1bed90747558d087e3a4e9e58e Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 28 Jun 2024 17:00:33 -0700
Subject: [PATCH 3/7] Added status labels to table.

---
 Client/src/Pages/Incidents/index.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index f104e29ff..31840c915 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -7,6 +6,7 @@ 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 { ColoredLabel, StatusLabel } from "../../Components/Label/";
 
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -36,11 +36,11 @@ function createData(name, calories, fat, carbs, protein) {
 }
 
 const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
+  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
+  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Cannot resolve" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
+  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
 ];
 
 export default function CustomizedTables() {

From d954b5876611570a311656e4c0974565d7fe30ad Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 28 Jun 2024 17:42:28 -0700
Subject: [PATCH 4/7] Added styling to the labels.

---
 Client/src/Components/Label/index.jsx |  7 +++++--
 Client/src/Pages/Incidents/index.jsx  | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index c47b53cb8..984b45da2 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/index.jsx
@@ -124,7 +124,7 @@ ColoredLabel.propTypes = {
  * <StatusLabel status="Active" />
  */
 
-const StatusLabel = ({ status }) => {
+const StatusLabel = ({ status, customStyles }) => {
   const theme = useTheme();
 
   const colorLookup = {
@@ -132,13 +132,15 @@ const StatusLabel = ({ status }) => {
     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
+    
   };
 
   // Look up the color for the status, default to labelGray if not found
   const color = colorLookup[status] || theme.palette.labelGray.color;
 
   return (
-    <BaseLabel label={status}>
+    <BaseLabel label={status} styles={customStyles}>
       <Box
         width={12}
         height={12}
@@ -152,6 +154,7 @@ const StatusLabel = ({ status }) => {
 
 StatusLabel.propTypes = {
   status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+  customStyles: PropTypes.object,
 };
 
 export { ColoredLabel, StatusLabel };
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 31840c915..9246b882f 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -36,13 +36,14 @@ function createData(name, calories, fat, carbs, protein) {
 }
 
 const rows = [
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
-  createData(<StatusLabel status="Cannot resolve" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
-  createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
+  createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
+  createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
+  createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
 ];
 
+
 export default function CustomizedTables() {
   return (
     <TableContainer component={Paper}>

From e4c29e77aa19d4b84b324686490c0d7293f618f8 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 28 Jun 2024 18:00:09 -0700
Subject: [PATCH 5/7] quick fix for eslint.

---
 Client/src/Pages/Incidents/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 9246b882f..e07890e20 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -6,7 +6,7 @@ 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 { ColoredLabel, StatusLabel } from "../../Components/Label/";
+import StatusLabel from "../../Components/Label/";
 
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({

From 264410ca91e7336ec30f886456a6d1dfbf3d8c27 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sat, 29 Jun 2024 17:07:04 -0700
Subject: [PATCH 6/7] Fixed import statement.

---
 Client/src/Pages/Incidents/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index e07890e20..c2d40428e 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -6,7 +6,7 @@ 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 StatusLabel from "../../Components/Label/";
+import { StatusLabel } from "../../Components/Label/";
 
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({

From b7a35a67b18eca1a98562f85144d784094de5e02 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sat, 29 Jun 2024 17:26:19 -0700
Subject: [PATCH 7/7] Added statuses to label prop types and fixed console
 errors.

---
 Client/src/Components/Label/index.jsx | 2 +-
 Client/src/Pages/Incidents/index.jsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index 984b45da2..d6c6adbd5 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/index.jsx
@@ -153,7 +153,7 @@ const StatusLabel = ({ status, customStyles }) => {
 };
 
 StatusLabel.propTypes = {
-  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active", "Down", "Cannot resolve"]),
   customStyles: PropTypes.object,
 };
 
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index c2d40428e..a2cb59517 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -57,7 +57,7 @@ export default function CustomizedTables() {
         </TableHead>
         <TableBody>
           {rows.map((row, index) => (
-            <StyledTableRow key={row.name}>
+            <StyledTableRow key={index}>
               <StyledTableCell component="th" scope="row">
                 {row.name}
               </StyledTableCell>