Move useRunKill and it's payload from RunList to KillButton

Take run query as KillButton props. Then do all processing of payload and ownership in KillButton component. This is to refresh run page after killing a run. Signed-off-by: Vallari Agrawal <[email protected]>
ceph · Sep 25, 2024 · 380efc7 · 380efc7
1 parent e702359
commit 380efc7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 30 deletions.
diff --git a/src/components/KillButton/index.tsx b/src/components/KillButton/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { UseMutationResult } from "@tanstack/react-query";
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -11,15 +11,14 @@ import Typography from "@mui/material/Typography";
 import Tooltip from '@mui/material/Tooltip';
 
 import CodeBlock from "../CodeBlock";
+import type { Run as RunResponse } from "../../lib/paddles.d";
 import { KillRunPayload } from "../../lib/teuthologyAPI.d";
-import { useSession } from "../../lib/teuthologyAPI";
+import { useSession, useRunKill } from "../../lib/teuthologyAPI";
 import Alert from "../Alert";
 
 
 type KillButtonProps = {
-  mutation: UseMutationResult;
-  payload: KillRunPayload;
-  disabled?: boolean;
+  query: UseQueryResult<RunResponse>;
 };
 
 type KillButtonDialogProps = {
@@ -29,13 +28,21 @@ type KillButtonDialogProps = {
   handleClose: () => void;
 };
 
-export default function KillButton(props: KillButtonProps) {
+export default function KillButton({query: runQuery}: KillButtonProps) {
+  const killMutation = useRunKill();
   const [open, setOpen] = useState(false);
-  const mutation: UseMutationResult = props.mutation;
   const sessionQuery = useSession();
+  const data: RunResponse | undefined = runQuery.data;
+  const run_owner = data?.jobs[0].owner || "";
+  const killPayload: KillRunPayload = {
+    "--run": data?.name || "",
+    "--owner": run_owner,
+    "--machine-type": data?.machine_type || "",
+    "--preserve-queue": true,
+  }
   const loggedUser = sessionQuery.data?.session?.username;
   const isUserAdmin = sessionQuery.data?.session?.isUserAdmin;
-  const owner = props.payload["--owner"].toLowerCase()
+  const owner = killPayload["--owner"].toLowerCase()
   const isOwner = (loggedUser?.toLowerCase() == owner) || (`scheduled_${loggedUser?.toLowerCase()}@teuthology` == owner)
   const isButtonDisabled = (!isOwner && !isUserAdmin)
 
@@ -53,11 +60,14 @@ export default function KillButton(props: KillButtonProps) {
   };
 
   const refreshAndtoggle = () => {
+    if (open && !killMutation.isIdle) { // on closing confirmation dialog after kill-run
+      runQuery.refetch();
+    }
     toggleDialog();
-    mutation.reset();
+    killMutation.reset();
   }
 
-  if (props.disabled || !(sessionQuery.data?.session?.username)) {
+  if ((data?.status.includes("finished")) || !(sessionQuery.data?.session?.username)) {
     // run finished or user logged out
     return null;
   }
@@ -81,14 +91,14 @@ export default function KillButton(props: KillButtonProps) {
         </span>
       </Tooltip>
         <KillButtonDialog
-          mutation={mutation}
-          payload={props.payload}
+          mutation={killMutation}
+          payload={killPayload}
           open={open}
-          handleClose={toggleDialog}
+          handleClose={refreshAndtoggle}
         />
       </div>
-      { (mutation.isError) ? <Alert severity="error" message="Unable to kill run" /> : null }     
-      { (mutation.isSuccess) ? <Alert severity="success" message={`Run killed successfully! \n`} /> : null }
+      { (killMutation.isError) ? <Alert severity="error" message="Unable to kill run" /> : null }     
+      { (killMutation.isSuccess) ? <Alert severity="success" message={`Run killed successfully! \n`} /> : null }
   </div>
   );
 };

diff --git a/src/pages/Run/index.tsx b/src/pages/Run/index.tsx
@@ -9,11 +9,9 @@ import { Helmet } from "react-helmet";
 import type { Run as Run_, RunParams } from "../../lib/paddles.d";
 
 import { useRun } from "../../lib/paddles";
-import { useRunKill } from "../../lib/teuthologyAPI";
 import JobList from "../../components/JobList";
 import Link from "../../components/Link";
 import KillButton from "../../components/KillButton";
-import { KillRunPayload } from '../../lib/teuthologyAPI.d';
 
 const PREFIX = "index";
 
@@ -46,7 +44,6 @@ export default function Run() {
     pageSize: NumberParam,
   });
   const { name } = useParams<RunParams>();
-  const killMutation = useRunKill();
   const query = useRun(name === undefined ? "" : name);
   if (query === null) return <Typography>404</Typography>;
   if (query.isError) return null;
@@ -56,13 +53,6 @@ export default function Run() {
   const date = query.data?.scheduled
     ? format(new Date(query.data.scheduled), "yyyy-MM-dd")
     : null;
-  const run_owner = data?.jobs[0].owner || "";
-  const killPayload: KillRunPayload = {
-    "--run": data?.name || "",
-    "--owner": run_owner,
-    "--machine-type": data?.machine_type || "",
-    "--preserve-queue": true,
-  }
   return (
     <Root className={classes.root}>
       <Helmet>
@@ -83,11 +73,7 @@ export default function Run() {
           date
         </FilterLink>
       </div>
-      <KillButton 
-        mutation={killMutation} 
-        payload={killPayload} 
-        disabled={(data?.status.includes("finished"))} 
-      />
+      <KillButton query={query} />
       <JobList query={query} params={params} setter={setParams} />
     </Root>
   );