src/pages/Schedule: Added useMutation and CircularProgress

schedule feature uses useMutation to deal with cases like onSuccess, onError and isLoading. Signed-off-by: Kamoltat Sirivadhna <ksirivad@redhat.com>
ceph · Feb 7, 2024 · 5cefc09 · 5cefc09
1 parent fc1b5d6
commit 5cefc09
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 23 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,65 @@ 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) => {
+      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,14 +161,14 @@ 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);
@@ -207,13 +263,38 @@ 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
@@ -226,13 +307,16 @@ export default function Schedule() {
             </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>