feat(pipeline-tasks): 任务详情添加实时任务状态展示

src/components/pipeline-tasks/pipeline-task-details.scss

@@ -23,3 +23,9 @@
   @apply p-1 my-px;
   @apply bg-gray-100;
 }
+.taskStatusIcon {
+  @apply text-lg;
+}
+.taskInfo {
+  @apply grid grid-flow-col;
+}

src/components/pipeline-tasks/pipeline-task-details.scss.d.ts

@@ -5,6 +5,8 @@ declare namespace PipelineTaskDetailsScssNamespace {
     details: string;
     navContainer: string;
     navItem: string;
+    taskInfo: string;
+    taskStatusIcon: string;
     unitLogs: string;
     unitLogsContainer: string;
   }

src/components/pipeline-tasks/pipeline-task-details.tsx

@@ -1,9 +1,9 @@
 import { gql, useSubscription, useQuery } from '@apollo/client';
 import { h } from 'preact';
 import { useMemo } from 'preact/hooks';
-import { find, propEq } from 'ramda';
+import { find, last, propEq } from 'ramda';
 import { observer, useLocalObservable, useObserver } from 'mobx-react';
-import { makeAutoObservable } from 'mobx';
+import { autorun, makeAutoObservable } from 'mobx';
 import styles from './pipeline-task-details.scss';
 import {
   PipelineTaskLogs,
@@ -12,6 +12,13 @@ import {
   PipelineTask,
   PipelineTaskLogMessage
 } from '../../generated/graphql';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faExclamationCircle,
+  faPauseCircle,
+  faSpinner
+} from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
 interface Props {
   taskId: string;
 }
@@ -19,8 +26,21 @@ interface Props {
 class Store {
   logs: PipelineTaskLogs[] = [];
   task?: PipelineTask;
+  currUnit?: PipelineUnits;
   constructor() {
     makeAutoObservable(this);
+    autorun(() => {
+      const units = this.task?.units.filter(unit =>
+        this.logs.find(log => log.unit === unit)
+      );
+      if (units) {
+        this.setCurrUnit(last(units));
+      }
+    });
+  }
+
+  private setCurrUnit(unit?: PipelineUnits) {
+    this.currUnit = unit;
   }
 
   addLogsFromTask(task: PipelineTask) {
@@ -58,6 +78,9 @@ const FIND_PIPELINE_TASK = gql`
       id
       units
       commit
+      status
+      startedAt
+      endedAt
       logs {
         unit
         logs
@@ -66,6 +89,19 @@ const FIND_PIPELINE_TASK = gql`
   }
 `;
 
+const PIPELINE_TASK_CHANGED = gql`
+  subscription Pipelinetaskchanged($taskId: String!) {
+    task: pipelineTaskChanged(id: $taskId) {
+      id
+      units
+      commit
+      status
+      startedAt
+      endedAt
+    }
+  }
+`;
+
 const PIPELINE_TASK_LOG = gql`
   subscription PipelineTaskLog($taskId: String!) {
     log: pipelineTaskLog(taskId: $taskId) {
@@ -77,10 +113,15 @@ const PIPELINE_TASK_LOG = gql`
 `;
 
 export const PipelineTaskDetails = ({ taskId }: Props) => {
-  const { data } = useQuery<{ task: PipelineTask }, { taskId: string }>(
-    FIND_PIPELINE_TASK,
-    { variables: { taskId } }
-  );
+  const { data, subscribeToMore } = useQuery<
+    { task: PipelineTask },
+    { taskId: string }
+  >(FIND_PIPELINE_TASK, { variables: { taskId } });
+
+  subscribeToMore({
+    document: PIPELINE_TASK_CHANGED,
+    variables: { taskId }
+  });
 
   const store = useLocalObservable(() => new Store());
 
@@ -109,6 +150,7 @@ export const PipelineTaskDetails = ({ taskId }: Props) => {
   });
   return useObserver(() => (
     <section className={styles.details}>
+      <TaskInfo store={store} />
       <UnitList store={store} />
 
       <LogListOfUnit store={store} />
@@ -143,3 +185,56 @@ const LogListOfUnit = observer(({ store }: { store: Store }) => {
     </div>
   );
 });
+
+const TaskInfo = observer(({ store }: { store: Store }) => {
+  const task = store.task;
+  if (!task) {
+    return <header></header>;
+  }
+  return (
+    <header className={styles.taskInfo}>
+      <StatusIcon status={task.status} />
+      <p>{task.startedAt}</p>
+      <p>{task.status}</p>
+    </header>
+  );
+});
+
+const StatusIcon = ({ status }: { status: TaskStatuses }) => {
+  switch (status) {
+    case TaskStatuses.Working:
+      return (
+        <FontAwesomeIcon
+          icon={faSpinner}
+          className={classNames([
+            'animate-spin',
+            styles.taskStatusIcon,
+            'text-purple-500'
+          ])}
+        />
+      );
+    case TaskStatuses.Failed:
+      return (
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className={classNames([styles.taskStatusIcon, 'text-red-700'])}
+        />
+      );
+    case TaskStatuses.Success:
+      return (
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className={classNames([styles.taskStatusIcon, 'text-green-500'])}
+        />
+      );
+    case TaskStatuses.Pending:
+      return (
+        <FontAwesomeIcon
+          icon={faPauseCircle}
+          className={classNames([styles.taskStatusIcon, 'text-yellow-500'])}
+        />
+      );
+    default:
+      return null;
+  }
+};