Optionally show & disable kill-run btn

new features: 1. Disable kill-run button for finished runs 2. Hide kill-run button for users who don't own the run Signed-off-by: Vallari Agrawal <[email protected]>
ceph · Jan 8, 2024 · 0771abe · 0771abe
1 parent 43a31c0
commit 0771abe
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/src/components/KillButton/index.tsx b/src/components/KillButton/index.tsx
@@ -3,20 +3,28 @@ import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import { CircularProgress } from "@mui/material";
 
-import { KillRun } from "../../lib/teuthologyAPI.d";
+import { KillRunPayload } from "../../lib/teuthologyAPI.d";
+import { useSession } from "../../lib/teuthologyAPI";
 import Alert from "../Alert";
 
 
 type KillButtonProps = {
   mutation: UseMutationResult;
   text: string;
-  payload: KillRun;
+  payload: KillRunPayload;
+  disabled?: boolean;
 };
 
 
 export default function KillButton(props: KillButtonProps) {
   const mutation: UseMutationResult = props.mutation;
-
+  const sessionQuery = useSession();
+  const loggedUser = sessionQuery.data?.session.username;
+
+  if (loggedUser?.toLowerCase() != props.payload["--owner"].toLowerCase()) {
+    // logged user and owner of the job should be equal (case insensitive)
+    return null
+  }
 
   return (
   <div>
@@ -26,7 +34,7 @@ export default function KillButton(props: KillButtonProps) {
           color="error"
           size="large"
           onClick={() => mutation.mutate(props.payload)}
-          disabled={(mutation.isLoading)}
+          disabled={(props.disabled || mutation.isLoading)}
         >
           {props.text}
         </Button>

diff --git a/src/lib/paddles.d.ts b/src/lib/paddles.d.ts
@@ -39,6 +39,7 @@ export type Run = {
   results: RunResults;
   user: string;
   machine_type: string;
+  status: string;
 };
 
 export type Node = {

diff --git a/src/lib/teuthologyAPI.d.ts b/src/lib/teuthologyAPI.d.ts
@@ -1,5 +1,12 @@
 
-export type KillRun = {
+export type Session = {
+    session: {
+        id: int,
+        username: string
+    }
+}
+
+export type KillRunPayload = {
     "--run": string,
     "--owner": string,
     "--machine-type": string,

diff --git a/src/lib/teuthologyAPI.ts b/src/lib/teuthologyAPI.ts
@@ -2,6 +2,7 @@ import axios from "axios";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { UseQueryResult, UseMutationResult } from "@tanstack/react-query";
 import { Cookies } from "react-cookie";
+import { Session } from "./teuthologyAPI.d"
 
 const TEUTHOLOGY_API_SERVER = 
     import.meta.env.VITE_TEUTHOLOGY_API || "";
@@ -25,9 +26,9 @@ function doLogout() {
     window.location.href = url;
 }
 
-function useSession(): UseQueryResult {
+function useSession(): UseQueryResult<Session> {
     const url = getURL("/");
-    const query = useQuery({
+    const query = useQuery<Session, Error>({
         queryKey: ['ping-api', { url }],
         queryFn: () => (
             axios.get(url, {

diff --git a/src/pages/Run/index.tsx b/src/pages/Run/index.tsx
@@ -15,7 +15,7 @@ import { useRunKill } from "../../lib/teuthologyAPI";
 import JobList from "../../components/JobList";
 import Link from "../../components/Link";
 import KillButton from "../../components/KillButton";
-import { KillRun } from '../../lib/teuthologyAPI.d';
+import { KillRunPayload } from '../../lib/teuthologyAPI.d';
 
 const PREFIX = "index";
 
@@ -68,7 +68,7 @@ export default function Run() {
   const date = query.data?.scheduled
     ? format(new Date(query.data.scheduled), "yyyy-MM-dd")
     : null;
-  const killPayload: KillRun = {
+  const killPayload: KillRunPayload = {
     "--run": data?.name || "",
     "--owner": data?.user || "",
     "--machine-type": data?.machine_type || "",
@@ -94,7 +94,12 @@ export default function Run() {
           date
         </FilterLink>
       </div>
-      <KillButton mutation={killMutation} text="Kill run" payload={killPayload} />
+      <KillButton 
+        mutation={killMutation} 
+        text="Kill run" 
+        payload={killPayload} 
+        disabled={(data?.status.includes("finished"))} 
+      />
       <ButtonGroup style={{ display: "flex", justifyContent: "center" }}>
         <Button
           onClick={() => {