Add component Alert and KillButton

1. Move Alert and kill-run Button from Run Page
    to `Alert` and `KillButton` component respectively
2. lib/teuthologyAPI: add useRunKill
    (which uses `useMutation` to send POST req at /kill to t-api)

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

src/components/Alert/index.tsx

@@ -0,0 +1,29 @@
+import Snackbar from "@mui/material/Snackbar";
+import Alert from "@mui/material/Alert";
+import { useState } from "react";
+
+type AlertProps = {
+    severity: "success" | "error",
+    message: string,
+};
+
+export default function AlertComponent(props: AlertProps) {
+    const [isOpen, setIsOpen] = useState(true);
+    const handleClose = (
+        event?: React.SyntheticEvent | Event,
+        reason?: string
+    ) => {
+        if (reason === "clickaway") {
+          return;
+        }
+        setIsOpen(false);
+    };
+
+    return (
+        <Snackbar autoHideDuration={3000} open={isOpen} onClose={handleClose}>
+            <Alert onClose={handleClose} severity={props.severity} sx={{ width: "100%" }}>
+              {props.message}
+            </Alert>
+        </Snackbar>
+    );
+}

src/components/KillButton/index.tsx

@@ -0,0 +1,50 @@
+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 { Run } from "../../lib/paddles.d"
+import Alert from "../Alert";
+
+
+type KillButtonProps = {
+  mutation: UseMutationResult;
+  text: string;
+  runDetails?: Run;
+};
+
+
+// TODO: make this generic for killing runs and job
+export default function KillButton(props: KillButtonProps) {
+  const mutation: UseMutationResult = props.mutation;
+
+  const killPayload = {
+    "--run": props.runDetails?.name,
+    "--owner": props.runDetails?.user,
+    "--machine-type": props.runDetails?.machine_type,
+    "--user": props.runDetails?.user,
+  }
+
+  return (
+  <div>
+      <div style={{ display: "flex" }}>
+        <Button
+          variant="contained"
+          color="error"
+          size="large"
+          onClick={() => mutation.mutate(killPayload)}
+          disabled={(mutation.isLoading)}
+        >
+          {props.text}
+        </Button>
+        {(mutation.isLoading) ? (
+          <Box sx={{ p: 1 }}>
+            <CircularProgress size={20} color="inherit" />
+          </Box>
+        ) : null}
+      </div>
+      { (mutation.isError) ? <Alert severity="error" message="Unable to kill run" /> : null }     
+      { (mutation.isSuccess) ? <Alert severity="success" message="Run killed successfully" /> : null }
+  </div>
+  );
+};

src/lib/paddles.d.ts

@@ -37,6 +37,8 @@ export type Run = {
   jobs: Job[];
   scheduled: string;
   results: RunResults;
+  user: string;
+  machine_type: string;
 };
 
 export type Node = {

src/lib/teuthologyAPI.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import type { UseQueryResult, UseMutationResult } from "@tanstack/react-query";
 import { Cookies } from "react-cookie";
-import type { UseQueryResult } from "@tanstack/react-query";
 
 const TEUTHOLOGY_API_SERVER = 
     import.meta.env.VITE_TEUTHOLOGY_API || "";
@@ -56,9 +56,24 @@ function useUserData(): Map<string, string> {
     return new Map();
 }
 
+function useRunKill(): UseMutationResult {
+    const url = getURL("/kill?dry_run=false&logs=true");
+    const mutation: UseMutationResult = useMutation({
+        mutationKey: ['run-kill', { url }],
+        mutationFn: (payload) => (
+            axios.post(url, payload, {
+                withCredentials: true
+            })
+        ),
+        retry: 0,
+    });
+    return mutation;
+}
+
 export {
     doLogin,
     doLogout,
     useSession,
-    useUserData
+    useUserData,
+    useRunKill,
 }

src/pages/Run/index.tsx

@@ -2,22 +2,19 @@ import { PropsWithChildren } from 'react'
 import { useQueryParams, StringParam, NumberParam } from "use-query-params";
 import { styled } from "@mui/material/styles";
 import { useParams } from "react-router-dom";
-import { useState } from "react";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
-import Alert from "@mui/material/Alert";
-import Box from "@mui/material/Box";
-import CircularProgress from "@mui/material/CircularProgress";
-import Snackbar from "@mui/material/Snackbar";
 import { format } from "date-fns";
 import { Helmet } from "react-helmet";
 
 import type { 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";
 
 const PREFIX = "index";
 
@@ -53,29 +50,8 @@ export default function Run() {
     page: NumberParam,
     pageSize: NumberParam,
   });
-  const [kill, setKill] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [error, setError] = useState(false);
-  const killRun = async () => {
-    setKill(true);
-    // Using a mock API endpoint for testing
-    const response = await fetch("https://reqres.in/api/users/2?delay=3");
-    const status = response.status;
-    if (status === 200) setSuccess(true);
-    else setError(true);
-    setKill(false);
-  };
-  const handleClose = (
-    event?: React.SyntheticEvent | Event,
-    reason?: string
-  ) => {
-    if (reason === "clickaway") {
-      return;
-    }
-    setSuccess(false);
-    setError(false);
-  };
   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;
@@ -111,35 +87,7 @@ export default function Run() {
           date
         </FilterLink>
       </div>
-      <div
-        style={{
-          display: "flex",
-        }}
-      >
-        <Button
-          variant="contained"
-          color="error"
-          size="large"
-          onClick={killRun}
-        >
-          Kill Run
-        </Button>
-        {kill ? (
-          <Box sx={{ p: 1 }}>
-            <CircularProgress size={20} color="inherit" />
-          </Box>
-        ) : null}
-      </div>
-      <Snackbar autoHideDuration={3000} open={success} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
-          Run killed successfully
-        </Alert>
-      </Snackbar>
-      <Snackbar autoHideDuration={3000} open={error} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="error" sx={{ width: "100%" }}>
-          Unable to kill run
-        </Alert>
-      </Snackbar>
+      <KillButton mutation={killMutation} text="Kill run" runDetails={data} />
       <ButtonGroup style={{ display: "flex", justifyContent: "center" }}>
         <Button
           onClick={() => {