diff --git a/peridot/ui/src/components/ProjectTaskDetails.tsx b/peridot/ui/src/components/ProjectTaskDetails.tsx
index 9e4b963..bd11dc3 100644
--- a/peridot/ui/src/components/ProjectTaskDetails.tsx
+++ b/peridot/ui/src/components/ProjectTaskDetails.tsx
@@ -40,6 +40,7 @@ import { packageApi, taskApi } from 'peridot/ui/src/api';
import {
V1GetTaskResponse,
V1TaskType,
+ V1TaskStatus,
} from 'bazel-bin/peridot/proto/v1/client_typescript';
import { ToolbarHeader } from 'common/mui/ToolbarHeader';
import Divider from '@mui/material/Divider';
@@ -54,12 +55,14 @@ import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
+import Button from '@mui/material/Button';
import TabPanel from '@mui/lab/TabPanel';
import ProjectTaskFullLog from 'peridot/ui/src/components/ProjectTaskFullLog';
import { RemoteErrors } from 'common/ui/types';
import Tabs from '@mui/material/Tabs';
import Toolbar from '@mui/material/Toolbar';
import { ProjectTasksSubtasks } from 'peridot/ui/src/components/ProjectTasksSubtasks';
+import { reqap } from 'common/ui/reqap';
export interface ProjectPackageDetailsRouteProps {
id: string;
@@ -77,6 +80,7 @@ export default function (
V1GetTaskResponse | undefined | null | RemoteErrors
>(undefined);
const [tabValue, setTabValue] = React.useState('1');
+ const [submitting, setSubmitting] = React.useState(false);
const handleTabValueChange = (event, newValue) => {
setTabValue(newValue);
@@ -91,6 +95,26 @@ export default function (
setTaskRes
);
+ const cancelTask = async () => {
+ if (!confirm('Are you sure you want to cancel this task?')) {
+ return;
+ }
+ setSubmitting(true);
+ const [err, res] = await reqap(() =>
+ taskApi.cancelTask({
+ id: props.match.params.id,
+ projectId: project.id || '',
+ })
+ );
+ if (err) {
+ alert(err);
+ setSubmitting(false);
+ return;
+ }
+
+ window.location.reload();
+ };
+
return (
<>
{suspenseRemoteResource(taskRes, (res) => {
@@ -119,31 +143,46 @@ export default function (