feat(commit-list): update BE apis.

src/commits/commit-list.tsx

@@ -1,5 +1,5 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
-import { Link, useResponse, useRouter } from '@curi/react-dom';
+import { Link, useResponse, useRouter } from "@curi/react-dom";
 import { faPlayCircle, faVial } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -23,19 +23,27 @@ import {
   Timer,
 } from "@material-ui/icons";
 import { format } from "date-fns";
-import { equals, find, propEq, takeWhile } from "ramda";
+import { useSnackbar } from "notistack";
-import React, { FC, Fragment, ReactNode, useMemo, useState } from "react";
+import { complement, equals, find, propEq, takeWhile } from "ramda";
+import {
+  FC,
+  Fragment,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import {
   Commit,
   CreatePipelineTaskInput,
   Pipeline,
   PipelineTask,
   TaskStatuses,
-  WorkUnit,
   PipelineUnits,
 } from "../generated/graphql";
-import { CREATE_PIPELINE_TASK } from "./muations";
+import { CREATE_PIPELINE_TASK } from "./mutations";
 import { COMMITS } from "./queries";
+import { SYNC_COMMITS } from "./subscriptions";
 
 interface Props {
   pipeline: Pipeline;
@@ -51,12 +59,35 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const CommitList: FC<Props> = ({ pipeline }) => {
-  const { data, loading } = useQuery<{ commits: Commit[] }>(COMMITS, {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const { data, loading, refetch } = useQuery<{ commits?: Commit[] }>(COMMITS, {
     variables: {
       pipelineId: pipeline.id,
     },
   });
 
+  const { loading: syncing } = useSubscription<{ syncCommits: boolean }>(
+    SYNC_COMMITS,
+    {
+      variables: {
+        pipelineId: pipeline.id,
+      },
+      onSubscriptionData({ subscriptionData: { data, error } }) {
+        if (error) {
+          enqueueSnackbar(error.message, {
+            variant: "warning",
+          });
+        }
+        if (data?.syncCommits) {
+          refetch({
+            appInstance: data.syncCommits,
+          });
+        }
+      },
+    }
+  );
+
   const classes = useStyles();
 
   return (
@@ -67,11 +98,14 @@ export const CommitList: FC<Props> = ({ pipeline }) => {
         }
 
         return (
+          <section>
+            {syncing && <LinearProgress color="secondary" />}
             <List>
-            {data?.commits.map((commit) => (
+              {data?.commits?.map((commit) => (
                 <Item key={commit.hash} commit={commit} pipeline={pipeline} />
               ))}
             </List>
+          </section>
         );
       })()}
     </section>
@@ -96,7 +130,8 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
   const [isOpen, setOpen] = useState(() => false);
   const classes = useStyles();
 
-  const [createTask, { loading }] = useMutation<
+  const [createTask, { loading }] =
+    useMutation<
       { createPipelineTask: PipelineTask },
       { task: CreatePipelineTaskInput }
     >(CREATE_PIPELINE_TASK);
@@ -106,11 +141,12 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
     [pipeline]
   );
 
-  const {navigate, url} = useRouter();
+  const { navigate, url } = useRouter();
   const { response } = useResponse();
 
-  const handleCreateTask = (unit: PipelineUnits) => {
+  const handleCreateTask = useCallback(
-    const _units = [...takeWhile(equals(unit), units), unit];
+    (unit: PipelineUnits) => {
+      const _units = [...takeWhile(complement(equals(unit)), units), unit];
       createTask({
         variables: {
           task: {
@@ -119,15 +155,17 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
             commit: commit.hash,
           },
         },
-    }).then(({data}) => {
+      }).then(({ data }) => {
         navigate({
           url: url({
             name: "pipeline-task-detail",
-          params: { ...response.params, taskId: data?.createPipelineTask.id},
+            params: { ...response.params, taskId: data?.createPipelineTask.id },
           }),
         });
       });
-  };
+    },
+    [commit, createTask, navigate, pipeline, response, units, url]
+  );
 
   const actions = useMemo(
     () =>
@@ -136,6 +174,7 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
         return (
           pair && (
             <IconButton
+              key={unit}
               aria-label={pair[2]}
               disabled={loading}
               onClick={() => handleCreateTask(unit)}
@@ -145,14 +184,14 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
           )
         );
       }),
-    [units]
+    [units, handleCreateTask, loading]
   );
   return (
     <Fragment>
       <ListItem button onClick={() => setOpen(!isOpen)}>
         <ListItemText
           primary={commit.message}
-          secondary={format(commit.date, "yyyy-MM-dd HH:mm:ss")}
+          secondary={commit.date && format(commit.date, "yyyy-MM-dd HH:mm:ss")}
         />
         <ListItemSecondaryAction>{actions}</ListItemSecondaryAction>
       </ListItem>
@@ -194,7 +233,11 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
   return (
     <ListItem button className={classes.nested}>
       <ListItemIcon>{statusIcon}</ListItemIcon>
-      <ListItemText primary={format(task.startedAt, "yyyy-MM-dd HH:mm:ss")} />
+      <ListItemText
+        primary={
+          task.startedAt && format(task.startedAt, "yyyy-MM-dd HH:mm:ss")
+        }
+      />
     </ListItem>
   );
 };

src/commits/subscriptions.ts

@@ -0,0 +1,28 @@
+import { gql } from "@apollo/client";
+
+export const SUBSCRIPTION_COMMITS = gql`
+  subscription SubscriptionCommits($pipelineId: String!) {
+    results: listLogsForPipeline(id: $pipelineId) {
+      all {
+        hash
+        date
+        message
+        body
+        author_name
+        author_email
+        tasks {
+          id
+          units
+          status
+          startedAt
+          endedAt
+        }
+      }
+    }
+  }
+`;
+export const SYNC_COMMITS = gql`
+  subscription SyncCommits($pipelineId: String!) {
+    syncCommits(pipelineId: $pipelineId)
+  }
+`;

src/generated/graphql.schema.json

@@ -576,83 +576,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "OBJECT",
-        "name": "LogList",
-        "description": null,
-        "fields": [
-          {
-            "name": "all",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "LIST",
-                "name": null,
-                "ofType": {
-                  "kind": "NON_NULL",
-                  "name": null,
-                  "ofType": {
-                    "kind": "OBJECT",
-                    "name": "LogFields",
-                    "ofType": null
-                  }
-                }
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "total",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Float",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "latest",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "LogFields",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          }
-        ],
-        "inputFields": null,
-        "interfaces": [],
-        "enumValues": null,
-        "possibleTypes": null
-      },
-      {
-        "kind": "SCALAR",
-        "name": "Float",
-        "description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "OBJECT",
         "name": "Mutation",
@@ -888,6 +811,39 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "stopPipelineTask",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -895,6 +851,26 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "SCALAR",
+        "name": "Float",
+        "description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "SCALAR",
+        "name": "Boolean",
+        "description": "The `Boolean` scalar type represents `true` or `false`.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Pipeline",
@@ -1246,16 +1222,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "SCALAR",
-        "name": "Boolean",
-        "description": "The `Boolean` scalar type represents `true` or `false`.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "OBJECT",
         "name": "PipelineTaskLogs",
@@ -1649,9 +1615,6 @@
               }
             ],
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
               "kind": "LIST",
               "name": null,
               "ofType": {
@@ -1663,7 +1626,6 @@
                   "ofType": null
                 }
               }
-              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -1754,11 +1716,23 @@
         "description": null,
         "fields": [
           {
-            "name": "listLogsForPipeline",
+            "name": "syncCommits",
             "description": null,
             "args": [
               {
-                "name": "id",
+                "name": "appInstance",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "pipelineId",
                 "description": null,
                 "type": {
                   "kind": "NON_NULL",
@@ -1775,13 +1749,9 @@
               }
             ],
             "type": {
-              "kind": "NON_NULL",
+              "kind": "SCALAR",
-              "name": null,
+              "name": "String",
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "LogList",
               "ofType": null
-              }
             },
             "isDeprecated": false,
             "deprecationReason": null

src/generated/graphql.tsx

@@ -65,13 +65,6 @@ export type LogFields = {
   tasks: Array<PipelineTask>;
 };
 
-export type LogList = {
-  __typename?: 'LogList';
-  all: Array<LogFields>;
-  total: Scalars['Float'];
-  latest: LogFields;
-};
-
 export type Mutation = {
   __typename?: 'Mutation';
   createProject: Project;
@@ -81,6 +74,7 @@ export type Mutation = {
   updatePipeline: Pipeline;
   deletePipeline: Scalars['Float'];
   createPipelineTask: PipelineTask;
+  stopPipelineTask: Scalars['Boolean'];
 };
 
 
@@ -118,6 +112,11 @@ export type MutationCreatePipelineTaskArgs = {
   task: CreatePipelineTaskInput;
 };
 
+
+export type MutationStopPipelineTaskArgs = {
+  id: Scalars['String'];
+};
+
 export type Pipeline = {
   __typename?: 'Pipeline';
   id: Scalars['ID'];
@@ -184,7 +183,7 @@ export type Query = {
   project: Project;
   pipelines: Array<Pipeline>;
   pipeline: Pipeline;
-  commits: Array<Commit>;
+  commits?: Maybe<Array<Commit>>;
   listPipelineTaskByPipelineId: Array<PipelineTask>;
   pipelineTask: PipelineTask;
 };
@@ -221,14 +220,15 @@ export type QueryPipelineTaskArgs = {
 
 export type Subscription = {
   __typename?: 'Subscription';
-  listLogsForPipeline: LogList;
+  syncCommits?: Maybe<Scalars['String']>;
   pipelineTaskLog: PipelineTaskLogMessage;
   pipelineTaskChanged: PipelineTask;
 };
 
 
-export type SubscriptionListLogsForPipelineArgs = {
+export type SubscriptionSyncCommitsArgs = {
-  id: Scalars['String'];
+  appInstance?: Maybe<Scalars['String']>;
+  pipelineId: Scalars['String'];
 };