From 380efc72d521d04e24a816d88b4ad8fa8f8ba02e Mon Sep 17 00:00:00 2001
From: Vallari Agrawal <val.agl002@gmail.com>
Date: Thu, 26 Sep 2024 01:02:38 +0530
Subject: [PATCH] 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 <val.agl002@gmail.com>
---
 src/components/KillButton/index.tsx | 40 ++++++++++++++++++-----------
 src/pages/Run/index.tsx             | 16 +-----------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/KillButton/index.tsx b/src/components/KillButton/index.tsx
index 45e4ae3..77479f2 100644
--- 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
index 281c3a3..4827669 100644
--- 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>
   );