feat(commit-list): stop task.

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 (
     <ListItem button className={classes.nested}>
       <ListItemIcon>{statusIcon}</ListItemIcon>
@@ -237,6 +255,20 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
           task.startedAt && format(task.startedAt, "yyyy-MM-dd HH:mm:ss")
         }
       />
+      <ListItemSecondaryAction>
+        {task.status === TaskStatuses.Working && (
+          <IconButton edge="end" aria-label="stop" onClick={stop}>
+            <Stop />
+          </IconButton>
+        )}
+      </ListItemSecondaryAction>
+      <LimitedBackdrop open={stopTaskWaiting} />
     </ListItem>
   );
 };
+const LimitedBackdrop = withStyles({
+  root: {
+    position: "absolute",
+    zIndex: 1,
+  },
+})(Backdrop);

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)
+  }
+`;

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,

src/generated/graphql.tsx

@@ -138,6 +138,7 @@ export type PipelineTask = {
   status: TaskStatuses;
   startedAt?: Maybe<Scalars['DateTime']>;
   endedAt?: Maybe<Scalars['DateTime']>;
+  runOn: Scalars['String'];
 };
 
 export type PipelineTaskEvent = {