components/KillButton: add KillButtonDialog component

This commit also removes "--user" from the t-api /kill
route request.

Signed-off-by: Vallari Agrawal <val.agl002@gmail.com>

src/components/KillButton/index.tsx

@@ -1,7 +1,13 @@
+import { useState } from "react";
 import type { UseMutationResult } from "@tanstack/react-query";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
-import { CircularProgress } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import Dialog from '@mui/material/Dialog';
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
 
 import { KillRunPayload } from "../../lib/teuthologyAPI.d";
 import { useSession } from "../../lib/teuthologyAPI";
@@ -15,37 +21,95 @@ type KillButtonProps = {
   disabled?: boolean;
 };
 
+type KillButtonDialogProps = {
+  mutation: UseMutationResult;
+  payload: KillRunPayload;
+  open: boolean;
+  handleClose: () => void;
+};
 
 export default function KillButton(props: KillButtonProps) {
+  const [open, setOpen] = useState(false);
   const mutation: UseMutationResult = props.mutation;
   const sessionQuery = useSession();
   const loggedUser = sessionQuery.data?.session.username;
 
-  if (loggedUser?.toLowerCase() != props.payload["--user"].toLowerCase()) {
+  if (loggedUser?.toLowerCase() != props.payload["--owner"].toLowerCase()) {
     // logged user and owner of the job should be equal (case insensitive)
     return null
   }
 
+  const toggleDialog = () => {
+    setOpen(!open);
+  };
+
+
   return (
   <div>
       <div style={{ display: "flex" }}>
         <Button
           variant="contained"
           color="error"
           size="large"
-          onClick={() => mutation.mutate(props.payload)}
+          onClick={toggleDialog}
           disabled={(props.disabled || mutation.isLoading)}
         >
           {props.text}
         </Button>
-        {(mutation.isLoading) ? (
-          <Box sx={{ p: 1 }}>
-            <CircularProgress size={20} color="inherit" />
-          </Box>
-        ) : null}
+        <KillButtonDialog
+          mutation={mutation}
+          payload={props.payload}
+          open={open}
+          handleClose={toggleDialog}
+        />
       </div>
       { (mutation.isError) ? <Alert severity="error" message="Unable to kill run" /> : null }     
-      { (mutation.isSuccess) ? <Alert severity="success" message="Run killed successfully" /> : null }
+      { (mutation.isSuccess) ? <Alert severity="success" message={`Run killed successfully! \n`} /> : null }
   </div>
   );
 };
+
+function KillButtonDialog({mutation, open, handleClose, payload}: KillButtonDialogProps) {
+  return (
+    <div>
+      <Dialog onClose={handleClose} open={open} scroll="paper" fullWidth={true} maxWidth="sm">
+        <DialogTitle>Kill confirmation</DialogTitle>
+        <DialogContent>
+          { (mutation.data && mutation.data.data ) ? 
+            <div>
+            <Typography variant="h6" display="block" gutterBottom>
+              {mutation.isSuccess ? "Successful!": "Failed!"}
+            </Typography>
+            <Paper>
+              <Typography variant="caption" display="block" gutterBottom>
+                {mutation.data.data.logs}
+              </Typography>
+            </Paper>
+            </div> : 
+            (mutation.isLoading) ? (
+              <Box sx={{ p: 1 }}>
+                <Typography variant="subtitle1" display="block" gutterBottom>
+                  <CircularProgress size={20} color="inherit" />
+                  Killing run...
+                </Typography>
+              </Box>
+            ) : 
+            <div>
+              <Typography variant="overline" display="block" gutterBottom>
+                Are you sure you want to kill this run/job?
+              </Typography>
+              <Button
+                variant="contained"
+                color="error"
+                size="large"
+                onClick={() => mutation.mutate(payload)}
+              >
+                Yes, I'm sure
+              </Button>
+            </div>
+          }
+        </DialogContent>
+      </Dialog>
+    </div>
+  ) 
+}

src/lib/teuthologyAPI.d.ts

@@ -9,6 +9,5 @@ export type Session = {
 export type KillRunPayload = {
     "--run": string,
     "--owner": string,
-    "--machine-type": string,
-    "--user": string,
+    "--machine-type": string, 
 }

src/pages/Run/index.tsx

@@ -61,7 +61,6 @@ export default function Run() {
     "--run": data?.name || "",
     "--owner": run_owner,
     "--machine-type": data?.machine_type || "",
-    "--user": data?.user || "",
   }
   return (
     <Root className={classes.root}>