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]>

Author: VallariAg

Diff for: 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 for: 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>
   );