Skip to content

Commit

Permalink
Add component Alert and KillButton
Browse files Browse the repository at this point in the history
1. create `Alert` and `KillButton` components
2. lib/teuthologyAPI: add useRunKill hook
    (which uses `useMutation` to send POST req at /kill to t-api)
3. create lib/teuthologyAPI.d.ts and add 'KillRun'

Signed-off-by: Vallari Agrawal <[email protected]>
  • Loading branch information
VallariAg committed Jan 3, 2024
1 parent 8398c0e commit 43a31c0
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 59 deletions.
29 changes: 29 additions & 0 deletions src/components/Alert/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
43 changes: 43 additions & 0 deletions src/components/KillButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
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 { KillRun } from "../../lib/teuthologyAPI.d";
import Alert from "../Alert";


type KillButtonProps = {
mutation: UseMutationResult;
text: string;
payload: KillRun;
};


export default function KillButton(props: KillButtonProps) {
const mutation: UseMutationResult = props.mutation;


return (
<div>
<div style={{ display: "flex" }}>
<Button
variant="contained"
color="error"
size="large"
onClick={() => mutation.mutate(props.payload)}
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>
);
};
2 changes: 2 additions & 0 deletions src/lib/paddles.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export type Run = {
jobs: Job[];
scheduled: string;
results: RunResults;
user: string;
machine_type: string;
};

export type Node = {
Expand Down
7 changes: 7 additions & 0 deletions src/lib/teuthologyAPI.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

export type KillRun = {
"--run": string,
"--owner": string,
"--machine-type": string,
"--user": string,
}
21 changes: 18 additions & 3 deletions src/lib/teuthologyAPI.ts
Original file line number Diff line number Diff line change
@@ -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 || "";
Expand Down Expand Up @@ -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,
}
67 changes: 11 additions & 56 deletions src/pages/Run/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,20 @@ 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";
import { KillRun } from '../../lib/teuthologyAPI.d';

const PREFIX = "index";

Expand Down Expand Up @@ -53,29 +51,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;
Expand All @@ -91,6 +68,12 @@ export default function Run() {
const date = query.data?.scheduled
? format(new Date(query.data.scheduled), "yyyy-MM-dd")
: null;
const killPayload: KillRun = {
"--run": data?.name || "",
"--owner": data?.user || "",
"--machine-type": data?.machine_type || "",
"--user": data?.user || "",
}
return (
<Root className={classes.root}>
<Helmet>
Expand All @@ -111,35 +94,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" payload={killPayload} />
<ButtonGroup style={{ display: "flex", justifyContent: "center" }}>
<Button
onClick={() => {
Expand Down

0 comments on commit 43a31c0

Please sign in to comment.