Merge pull request #433 from bluewave-labs/feat/incidents-styling

Incidents page styling

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);

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;

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>

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;
+}

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>
-      <BasicTable data={data} paginated={true} />
-    </div>
+      </Stack>
+      <BasicTable data={data} paginated={true} rowsPerPage={12}/>
+    </Stack>
   );
 };
 

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: {

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;