From aff5afd4967483319af44dd00039dfcbc0430ab7 Mon Sep 17 00:00:00 2001
From: Kamoltat Sirivadhna <ksirivad@redhat.com>
Date: Thu, 1 Feb 2024 17:59:56 -0500
Subject: [PATCH] src/pages/Schedule: Added useMutation and CircularProgress

schedule feature uses useMutation to deal with cases
like onSuccess, onError and isLoading.

CircularProgress is added when button is clicked
and mutation is in the state of isLoading.

Signed-off-by: Kamoltat Sirivadhna <ksirivad@redhat.com>
---
 src/lib/teuthologyAPI.ts     |  15 ++--
 src/pages/Schedule/index.jsx | 140 ++++++++++++++++++++++++++++-------
 2 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/src/lib/teuthologyAPI.ts b/src/lib/teuthologyAPI.ts
index 1a7bcc7..707e275 100644
--- a/src/lib/teuthologyAPI.ts
+++ b/src/lib/teuthologyAPI.ts
@@ -25,26 +25,21 @@ function doLogout() {
     window.location.href = url;
 }
 
-function doSchedule(commandValue: any, dryRun = false) {
-    console.log("doSchedule");
-    console.log(commandValue);
-    let url;
-    if (dryRun) {
-        url = getURL("/suite?dry_run=true");
-    } else {
-        url = getURL("/suite?dry_run=false");
-    }
+async function doSchedule(commandValue: any) {
+    const url = getURL("/suite");
     if (commandValue['--user'] != useUserData().get("username")) {
         console.log("Error: --user doesn't match username of current logged in account");
         return false;
     }
-    axios.post(url, commandValue, {
+    await axios.post(url, commandValue, {
         withCredentials: true,
         headers: { "Content-Type": "application/json" },
     }).then((resp) => {
         console.log(resp);
+        return resp;
     }, (error) => {
         console.log(error);
+        throw new Error(error);
     });
 }
 
diff --git a/src/pages/Schedule/index.jsx b/src/pages/Schedule/index.jsx
index e17bc6e..7a1a1e9 100644
--- a/src/pages/Schedule/index.jsx
+++ b/src/pages/Schedule/index.jsx
@@ -21,7 +21,11 @@ import MenuItem from '@mui/material/MenuItem';
 import Checkbox from '@mui/material/Checkbox';
 import Tooltip from '@mui/material/Tooltip';
 import InfoIcon from '@mui/icons-material/Info';
+import Alert from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
+import CircularProgress from '@mui/material/CircularProgress';
 import { useUserData, doSchedule } from '../../lib/teuthologyAPI';
+import { useMutation } from "@tanstack/react-query";
 
 export default function Schedule() {
   const keyOptions =
@@ -85,13 +89,66 @@ export default function Schedule() {
   const [rowIndex, setRowIndex] = useLocalStorage("rowIndex", -1);
   const [commandBarValue, setCommandBarValue] = useState([]);
   const userData = useUserData();
-  let commandValue = {};
+
+  const [open, setOpenSuccess] = useState(false);
+  const [openErr, setOpenErr] = useState(false);
+
+  const handleOpenSuccess = () => {
+    setOpenSuccess(true);
+  };
+  const handleOpenErr = () => {
+    setOpenErr(true);
+  };
+
+  const handleCloseSuccess = () => {
+    setOpenSuccess(false);
+  };
+  const handleCloseErr = () => {
+    setOpenErr(false);
+  };
+
+  const clickRun = useMutation({
+    mutationFn: async (commandValue) => {
+      return await doSchedule(commandValue);
+    },
+    onSuccess: () => {
+      handleOpenSuccess();
+    },
+    onError: () => {
+      handleOpenErr();
+    }
+  })
+
+  const clickDryRun = useMutation({
+    mutationFn: async (commandValue) => {
+      return await doSchedule(commandValue);
+    },
+    onSuccess: () => {
+      handleOpenSuccess();
+    },
+    onError: () => {
+      handleOpenErr();
+    }
+  })
+
+  const clickForcePriority = useMutation({
+    mutationFn: async (commandValue) => {
+      commandValue['--force-priority'] = true;
+      return await doSchedule(commandValue);
+    },
+    onSuccess: () => {
+      handleOpenSuccess();
+    },
+    onError: () => {
+      handleOpenErr();
+    }
+  })
 
   useEffect(() => {
     setCommandBarValue(rowData);
   }, [rowData])
 
-  function getCommandValue() {
+  function getCommandValue(dry_run) {
     let retCommandValue = {};
     commandBarValue.map((data) => {
       if (data.checked) {
@@ -105,26 +162,19 @@ export default function Schedule() {
     } else {
       retCommandValue['--user'] = userData.get("username");
     }
+    if (dry_run) {
+      retCommandValue['--dry-run'] = true;
+    } else {
+      retCommandValue['--dry-run'] = false;
+    }
     return retCommandValue;
   }
 
-  const handleRun = () => {
-    let commandValue = getCommandValue();
-    doSchedule(commandValue);
-  };
-
   const handleDryRun = () => {
     let commandValue = getCommandValue();
     doSchedule(commandValue, true);
   };
 
-  const handleForcePriority = () => {
-    let commandValue = getCommandValue();
-    commandValue['--force-priority'] = true;
-    doSchedule(commandValue);
-    return false;
-  };
-
   const addNewRow = () => {
     console.log("addNewRow");
     const updatedRowIndex = rowIndex + 1;
@@ -207,32 +257,66 @@ export default function Schedule() {
         </Tooltip>
         <div style={{ display: "flex", paddingLeft: "20px" }}>
           <Tooltip title="Execute command with regards to the --priority value" arrow>
-            <Button // Run Button
+            <Snackbar open={open} onClose={handleCloseSuccess}>
+              <Alert
+                onClose={handleCloseSuccess}
+                severity="success"
+                variant="filled"
+                sx={{ width: '100%' }}
+              >
+                Run Scheduled!
+              </Alert>
+            </Snackbar>
+            {clickRun.isLoading ? (
+              <CircularProgress />
+            ) : <Button // Run Button
               style={{ height: "50px", width: "100px", backgroundColor: "#33b249", color: "#fff" }}
               variant="contained"
-              onClick={handleRun}
+              onClick={() => {
+                clickRun.mutate(getCommandValue(false)
+                )
+              }}
             >
               Run
-            </Button>
+            </Button>}
+            <Snackbar open={openErr} onClose={handleCloseErr}>
+              <Alert
+                onClose={handleCloseErr}
+                severity="error"
+                variant="filled"
+                sx={{ width: '100%' }}
+              >
+                Failed to Schedule Runs
+              </Alert>
+            </Snackbar>
           </Tooltip>
           <Tooltip title="Execute command without regards to the --priority value " arrow>
-            <Button // Force Priority Button
-              style={{ height: "50px", width: "100px", marginLeft: "20px" }}
-              variant="contained"
-              color="error"
-              onClick={handleForcePriority}
-            >
-              force priority
-            </Button>
+            {clickForcePriority.isLoading ? (
+              <CircularProgress />
+            ) :
+              <Button // Force Priority Button
+                style={{ height: "50px", width: "100px", marginLeft: "20px" }}
+                variant="contained"
+                color="error"
+                onClick={() => {
+                  clickForcePriority.mutate(getCommandValue(false)
+                  )
+                }}
+              >
+                force priority
+              </Button>}
           </Tooltip>
           <Tooltip title="Simulate the execution of the command to see what kind of jobs are scheduled, how many there are and etc." arrow>
-            <Button // Dry Run Button
+            {clickDryRun.isLoading ? <CircularProgress /> : (<Button // Dry Run Button
               style={{ height: "50px", width: "100px", backgroundColor: "#1976D2", color: "#fff", marginLeft: "20px" }}
               variant="contained"
-              onClick={handleDryRun}
+              onClick={() => {
+                clickDryRun.mutate(getCommandValue(true)
+                )
+              }}
             >
               Dry Run
-            </Button>
+            </Button>)}
           </Tooltip>
         </div>
       </div>