From 49f9f1429a08e3b08a60b7313b43724db33f39f1 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 23 Jul 2024 17:32:41 -0400
Subject: [PATCH 1/2] Added styling and basic filtering to incidents page

---
 Client/src/Components/BasicTable/index.css    |  1 -
 .../TabPanels/Account/TeamPanel.jsx           | 15 +++-
 Client/src/Pages/Incidents/index.css          | 17 +++++
 Client/src/Pages/Incidents/index.jsx          | 69 ++++++++++++++-----
 Client/src/Utils/Theme.js                     |  2 +
 Client/src/index.css                          |  1 -
 6 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 221c66494..5e2a7424e 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -77,7 +77,6 @@
 }
 
 .MuiPaper-root + .MuiPagination-root {
-  flex: 1;
   margin-top: 35px;
   border: solid 1px var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 77b8ba12b..8745a3037 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -282,19 +282,28 @@ const TeamPanel = () => {
                 level="secondary"
                 label="All"
                 onClick={() => setFilter("all")}
-                sx={{ backgroundColor: filter === "all" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "all" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Administrator"
                 onClick={() => setFilter("admin")}
-                sx={{ backgroundColor: filter === "admin" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "admin" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Member"
                 onClick={() => setFilter("user")}
-                sx={{ backgroundColor: filter === "user" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "user" && theme.palette.otherColors.fillGray,
+                }}
               />
             </ButtonGroup>
           </Stack>
diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css
index e69de29bb..9d2ba8ee0 100644
--- a/Client/src/Pages/Incidents/index.css
+++ b/Client/src/Pages/Incidents/index.css
@@ -0,0 +1,17 @@
+.incidents h1.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
+.incidents h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  font-weight: 600;
+}
+.incidents button.MuiButtonBase-root {
+  font-size: var(--env-var-font-size-medium);
+  height: 34px;
+  border-color: var(--env-var-color-16);
+}
+
+/* remove later */
+.incidents .MuiSelect-select {
+  padding: 0 10px;
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 17f0323aa..34e3305d8 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,13 +1,23 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { Select, MenuItem, Typography, ButtonGroup } from "@mui/material";
+import {
+  Select,
+  MenuItem,
+  Typography,
+  ButtonGroup,
+  Stack,
+} from "@mui/material";
 
 import Button from "../../Components/Button";
 import axiosInstance from "../../Utils/axiosConfig";
 import BasicTable from "../../Components/BasicTable";
 import { StatusLabel } from "../../Components/Label";
+import { useTheme } from "@emotion/react";
+
+import "./index.css";
 
 const Incidents = () => {
+  const theme = useTheme();
   const authState = useSelector((state) => state.auth);
   const [monitors, setMonitors] = useState({});
   const [selectedMonitor, setSelectedMonitor] = useState("0");
@@ -65,6 +75,11 @@ const Incidents = () => {
     .sort((a, b) => {
       return new Date(b.createdAt) - new Date(a.createdAt);
     })
+    .filter((incident) => {
+      if (filter === "all") return true;
+      else if (filter === "resolve") return incident.statusCode === 5000;
+      else if (filter === "down") return incident.status === false;
+    })
     .map((incident, idx) => {
       const params = {
         status: "Down",
@@ -94,41 +109,57 @@ const Incidents = () => {
   data.rows = incidents;
 
   return (
-    <div>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <div style={{ display: "flex" }}>
-          <Typography>Incident history for: </Typography>
-          <Select value={selectedMonitor} onChange={handleSelect}>
-            <MenuItem value={"0"}>All servers</MenuItem>
-            {Object.values(monitors).map((monitor) => {
-              return (
-                <MenuItem key={monitor._id} value={monitor._id}>
-                  {monitor.name}
-                </MenuItem>
-              );
-            })}
-          </Select>
-        </div>
-        <ButtonGroup>
+    <Stack
+      className="incidents"
+      gap={theme.gap.large}
+      style={{
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+      }}
+    >
+      <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
+        <Typography component="h1">Incident history for: </Typography>
+        <Select value={selectedMonitor} onChange={handleSelect}>
+          <MenuItem value={"0"}>All servers</MenuItem>
+          {Object.values(monitors).map((monitor) => {
+            return (
+              <MenuItem key={monitor._id} value={monitor._id}>
+                {monitor.name}
+              </MenuItem>
+            );
+          })}
+        </Select>
+        <ButtonGroup sx={{ ml: "auto" }}>
           <Button
             level="secondary"
             label="All"
             onClick={() => setFilter("all")}
+            sx={{
+              backgroundColor:
+                filter === "all" && theme.palette.otherColors.fillGray,
+            }}
           />
           <Button
             level="secondary"
             label="Down"
             onClick={() => setFilter("down")}
+            sx={{
+              backgroundColor:
+                filter === "down" && theme.palette.otherColors.fillGray,
+            }}
           />
           <Button
             level="secondary"
             label="Cannot Resolve"
             onClick={() => setFilter("resolve")}
+            sx={{
+              backgroundColor:
+                filter === "resolve" && theme.palette.otherColors.fillGray,
+            }}
           />
         </ButtonGroup>
-      </div>
+      </Stack>
       <BasicTable data={data} paginated={true} />
-    </div>
+    </Stack>
   );
 };
 
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index e758bfe2a..c252da3a8 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -26,6 +26,7 @@ const otherColorsWhite = "#fff";
 const otherColorsGraishWhiteLight = "#f2f2f2";
 const otherColorsStrongBlue = "#f2f2f2";
 const otherColorsSlateGray = "#667085";
+const otherColorsFillGray = "#f4f4f4";
 
 //box shadow
 const shadow =
@@ -74,6 +75,7 @@ const theme = createTheme({
       graishWhiteLight: otherColorsGraishWhiteLight,
       strongBlue: otherColorsStrongBlue,
       slateGray: otherColorsSlateGray,
+      fillGray: otherColorsFillGray,
     },
   },
   font: {
diff --git a/Client/src/index.css b/Client/src/index.css
index daf95c0a4..4551d7586 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -1,6 +1,5 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
   font-weight: 400;
 
   /* color-scheme: light dark;

From d897f0be83fd93268c1456537889f23af2b46010 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 23 Jul 2024 17:39:26 -0400
Subject: [PATCH 2/2] Added prop to display # of rows

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

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 93eba2024..2a580d512 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -33,6 +33,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  *       @param {function} props.data.rows.data.handleClick - Function to call when the row is clicked.
  * @param {boolean} [props.paginated=false] - Flag to enable pagination.
  * @param {boolean} [props.reversed=false] - Flag to enable reverse order.
+ * @param {number} props.rowsPerPage- Number of rows per page (table).
  *
  * @example
  * const data = {
@@ -67,11 +68,10 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed }) => {
+const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
-  const rowsPerPage = 5;
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -158,6 +158,7 @@ BasicTable.propTypes = {
   data: PropTypes.object.isRequired,
   paginated: PropTypes.bool,
   reversed: PropTypes.bool,
+  rowPerPage: PropTypes.number,
 };
 
 export default BasicTable;
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 34e3305d8..241e99c3b 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -158,7 +158,7 @@ const Incidents = () => {
           />
         </ButtonGroup>
       </Stack>
-      <BasicTable data={data} paginated={true} />
+      <BasicTable data={data} paginated={true} rowsPerPage={12}/>
     </Stack>
   );
 };