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 <[email protected]>
ceph · Feb 14, 2024 · aff5afd · aff5afd
1 parent fc1b5d6
commit aff5afd
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 38 deletions.
diff --git 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
@@ -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>