From f49be00d05ce2f7aa30b468635db9dd89e2679be Mon Sep 17 00:00:00 2001
From: Yuki Murasawa <148930319+yuki-murasawa@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:56:54 +0900
Subject: [PATCH] added ATeam SSVC Priority page

---
 web/src/components/Drawer.jsx  |  10 +++
 web/src/index.jsx              |   4 +
 web/src/pages/App.jsx          |   2 +-
 web/src/pages/SSVCPriority.jsx | 146 +++++++++++++++++++++++++++++++++
 web/src/pages/index.js         |   2 +
 5 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 web/src/pages/SSVCPriority.jsx

diff --git a/web/src/components/Drawer.jsx b/web/src/components/Drawer.jsx
index 884f2065..48a1fe38 100644
--- a/web/src/components/Drawer.jsx
+++ b/web/src/components/Drawer.jsx
@@ -5,6 +5,7 @@ import {
   Home as HomeIcon,
   Topic as TopicIcon,
 } from "@mui/icons-material";
+import StarIcon from "@mui/icons-material/Star";
 import {
   Drawer as MuiDrawer,
   List,
@@ -111,6 +112,15 @@ export function Drawer() {
         )}
         {system.teamMode === "ateam" && (
           <>
+            <StyledListItemButton
+              onClick={() => navigate("/SSVCPriority")}
+              selected={location.pathname === "/SSVCPriority"}
+            >
+              <StyledListItemIcon>
+                <StarIcon />
+              </StyledListItemIcon>
+              <ListItemText>SSVC Priority</ListItemText>
+            </StyledListItemButton>
             <StyledListItemButton
               onClick={() => navigate("/analysis?" + queryParams)}
               selected={location.pathname === "/analysis"}
diff --git a/web/src/index.jsx b/web/src/index.jsx
index ccd98336..1d5a531c 100644
--- a/web/src/index.jsx
+++ b/web/src/index.jsx
@@ -17,6 +17,7 @@ import {
   ATeam,
   Login,
   ResetPassword,
+  SSVCPriority,
   Status,
   Tag,
   TopicDetail,
@@ -63,6 +64,9 @@ root.render(
                     <Route path=":tagId" element={<Tag />} />
                   </Route>
                   <Route path="*" element={<Navigate to="/" />} />
+                  <Route path="SSVCPriority">
+                    <Route index element={<SSVCPriority />} />
+                  </Route>
                   <Route path="analysis">
                     <Route index element={<Analysis />} />
                   </Route>
diff --git a/web/src/pages/App.jsx b/web/src/pages/App.jsx
index 47414b6c..22e6ad6c 100644
--- a/web/src/pages/App.jsx
+++ b/web/src/pages/App.jsx
@@ -66,7 +66,7 @@ export function App() {
   useEffect(() => {
     if (!userMe || userMeIsFetching) return;
     const params = new URLSearchParams(location.search);
-    if (["/analysis", "/ateam"].includes(location.pathname)) {
+    if (["/SSVCPriority", "/analysis", "/ateam"].includes(location.pathname)) {
       dispatch(setTeamMode("ateam"));
       if (!userMe.ateams.length > 0) {
         dispatch(setATeamId(undefined));
diff --git a/web/src/pages/SSVCPriority.jsx b/web/src/pages/SSVCPriority.jsx
new file mode 100644
index 00000000..e76bef55
--- /dev/null
+++ b/web/src/pages/SSVCPriority.jsx
@@ -0,0 +1,146 @@
+import SortIcon from "@mui/icons-material/Sort";
+import {
+  Box,
+  Card,
+  CardHeader,
+  Divider,
+  Grid,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import { amber, grey, orange, red } from "@mui/material/colors";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { ATeamLabel } from "../components/ATeamLabel";
+import { getATeam } from "../slices/ateam";
+
+export function SSVCPriority() {
+  const SSVCPriorityList = [
+    { title: "Immediate", color: red[600] },
+    { title: "Out-of-Cycle", color: orange[600] },
+    { title: "Scheduled", color: amber[600] },
+    { title: "Defer", color: grey[600] },
+  ];
+  const ateam = useSelector((state) => state.ateam.ateam);
+  const ateamId = useSelector((state) => state.ateam.ateamId);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!ateam) dispatch(getATeam(ateamId));
+  }, [dispatch, ateamId, ateam]);
+
+  if (!ateam) return <></>;
+
+  return (
+    <Box
+      sx={{
+        height: "calc(100vh - 96px)",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box sx={{ flex: 0 }}>
+        <ATeamLabel ateam={ateam} />
+      </Box>
+      <Grid container spacing={1} sx={{ flex: 1 }}>
+        {SSVCPriorityList.map((item) => (
+          <Grid key={item.title} item xs={3} sx={{ height: "100%" }}>
+            <Card sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
+              <Box sx={{ flex: 0 }}>
+                <CardHeader
+                  title={item.title}
+                  sx={{
+                    backgroundColor: item.color,
+                    color: "white",
+                    textWrap: "nowrap",
+                  }}
+                />
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    px: 2,
+                  }}
+                >
+                  <Typography
+                    variant="subtitle1"
+                    sx={{ color: "text.secondary", textWrap: "nowrap", overflow: "hidden" }}
+                  >
+                    999999 tickets
+                  </Typography>
+                  <IconButton>
+                    <SortIcon />
+                  </IconButton>
+                </Box>
+                <Divider />
+              </Box>
+              <Box
+                sx={{
+                  flexGrow: 1,
+                  flexBasis: 0,
+                  overflowY: "auto",
+                }}
+              >
+                <List
+                  sx={{
+                    p: 0,
+                  }}
+                >
+                  {[...Array(20)].map((_, i) => (
+                    <React.Fragment key={i}>
+                      <ListItemButton
+                        sx={{
+                          height: 152,
+                        }}
+                      >
+                        <ListItemText
+                          primary={
+                            <Typography
+                              variant="subtitle2"
+                              sx={{
+                                fontWeight: "bold",
+                                display: "-webkit-box",
+                                "-webkit-box-orient": "vertical",
+                                "-webkit-line-clamp": "2",
+                                overflow: "hidden",
+                                maxHeight: 44,
+                              }}
+                            >
+                              sqlparse: parsing heavily nested list leads to denial of service
+                            </Typography>
+                          }
+                          secondary={
+                            <>
+                              <Typography component="div" variant="caption" noWrap>
+                                Team: team_name
+                              </Typography>
+                              <Typography component="div" variant="caption" noWrap>
+                                Status: Alerted
+                              </Typography>
+                              <Typography component="div" variant="caption" noWrap>
+                                Service: service_name
+                              </Typography>
+                              <Typography component="div" variant="caption" noWrap>
+                                Assignees: test@example.com
+                              </Typography>
+                            </>
+                          }
+                        />
+                      </ListItemButton>
+                      <Divider />
+                    </React.Fragment>
+                  ))}
+                </List>
+              </Box>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}
diff --git a/web/src/pages/index.js b/web/src/pages/index.js
index 5d36c6da..75654149 100644
--- a/web/src/pages/index.js
+++ b/web/src/pages/index.js
@@ -8,6 +8,7 @@ import { App } from "./App";
 import { Login } from "./Login";
 import { PTeam } from "./PTeam";
 import { ResetPassword } from "./ResetPassword";
+import { SSVCPriority } from "./SSVCPriority";
 import { Status } from "./Status";
 import { Tag } from "./Tag";
 import { TopicDetail } from "./TopicDetail";
@@ -24,6 +25,7 @@ export {
   Login,
   PTeam,
   ResetPassword,
+  SSVCPriority,
   Status,
   Tag,
   TopicDetail,