diff --git a/src/commits/commit-list.tsx b/src/commits/commit-list.tsx index 5680c10..e633c8f 100644 --- a/src/commits/commit-list.tsx +++ b/src/commits/commit-list.tsx @@ -3,6 +3,7 @@ import { Link, useResponse, useRouter } from "@curi/react-dom"; import { faPlayCircle, faVial } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { + Backdrop, CircularProgress, Collapse, IconButton, @@ -14,12 +15,14 @@ import { ListItemText, makeStyles, useTheme, + withStyles, } from "@material-ui/core"; import { Cancel, CheckCircle, CloudDownload, ShoppingCart, + Stop, Timer, } from "@material-ui/icons"; import { format } from "date-fns"; @@ -28,6 +31,7 @@ import { complement, equals, find, propEq, takeWhile } from "ramda"; import { FC, Fragment, + MouseEventHandler, ReactNode, useCallback, useMemo, @@ -41,7 +45,7 @@ import { TaskStatuses, PipelineUnits, } from "../generated/graphql"; -import { CREATE_PIPELINE_TASK } from "./mutations"; +import { CREATE_PIPELINE_TASK, STOP_PIPELINE_TASK } from "./mutations"; import { COMMITS } from "./queries"; import { SYNC_COMMITS } from "./subscriptions"; @@ -229,6 +233,20 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => { ); } })(); + const [stopTask, { loading: stopTaskWaiting }] = useMutation( + STOP_PIPELINE_TASK, + { + variables: { taskId: task.id }, + } + ); + const stop: MouseEventHandler = useCallback( + (event) => { + event.stopPropagation(); + event.preventDefault(); + stopTask(); + }, + [stopTask] + ); return ( {statusIcon} @@ -237,6 +255,20 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => { task.startedAt && format(task.startedAt, "yyyy-MM-dd HH:mm:ss") } /> + + {task.status === TaskStatuses.Working && ( + + + + )} + + ); }; +const LimitedBackdrop = withStyles({ + root: { + position: "absolute", + zIndex: 1, + }, +})(Backdrop); diff --git a/src/commits/mutations.ts b/src/commits/mutations.ts index 6a7518e..eac9147 100644 --- a/src/commits/mutations.ts +++ b/src/commits/mutations.ts @@ -9,4 +9,9 @@ export const CREATE_PIPELINE_TASK = gql` endedAt } } -` +`; +export const STOP_PIPELINE_TASK = gql` + mutation StopPipelineTask($taskId: String!) { + stopPipelineTask(id: $taskId) + } +`; diff --git a/src/generated/graphql.schema.json b/src/generated/graphql.schema.json index 7093df1..0848f6d 100644 --- a/src/generated/graphql.schema.json +++ b/src/generated/graphql.schema.json @@ -1144,6 +1144,22 @@ }, "isDeprecated": false, "deprecationReason": null + }, + { + "name": "runOn", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "String", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null } ], "inputFields": null, diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index ac286c7..2bb15fd 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -138,6 +138,7 @@ export type PipelineTask = { status: TaskStatuses; startedAt?: Maybe; endedAt?: Maybe; + runOn: Scalars['String']; }; export type PipelineTaskEvent = {