feat(pipeline-tasks): 任务详情页面效果优化。

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

@@ -11,6 +11,9 @@
   &:not(:first-child) {
     @apply border-l border-gray-200;
   }
+  & > svg {
+    @apply ml-2 text-sm;
+  }
 }
 .LogListOfUnit {
   @apply overflow-scroll;
@@ -19,7 +22,7 @@
   @apply bg-gray-200;
 }
 .unitLogs {
-  @apply whitespace-pre-line font-mono text-sm;
+  @apply whitespace-pre-line font-mono text-xs;
   @apply p-1 my-px;
   @apply bg-gray-100;
 }

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

@@ -1,7 +1,7 @@
 import { gql, useSubscription, useQuery } from '@apollo/client';
 import { h } from 'preact';
 import { useMemo } from 'preact/hooks';
-import { find, last, propEq } from 'ramda';
+import { find, findIndex, last, propEq } from 'ramda';
 import { observer, useLocalObservable, useObserver } from 'mobx-react';
 import { autorun, makeAutoObservable } from 'mobx';
 import styles from './pipeline-task-details.scss';
@@ -12,13 +12,7 @@ import {
   PipelineTask,
   PipelineTaskLogMessage
 } from '../../generated/graphql';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { PipelineTaskStatus } from './pipeline-task-status';
-import {
-  faExclamationCircle,
-  faPauseCircle,
-  faSpinner
-} from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
 interface Props {
   taskId: string;
 }
@@ -44,12 +38,26 @@ class Store {
   }
 
   addLogsFromTask(task: PipelineTask) {
+    if (task.status !== TaskStatuses.Pending) {
+      const unit = (task.logs[0]?.unit as unknown) as PipelineUnits;
+      if (unit) {
+        const log = find(propEq('unit', unit), this.logs);
+        if (!log) {
+          this.logs.push({
+            unit: unit,
+            status: TaskStatuses.Working,
+            startedAt: task.startedAt,
+            logs: ''
+          });
+        }
+      }
+    }
     for (const log of task.logs) {
-      const taskLog = find(propEq('unit', log.unit), this.logs);
+      const index = findIndex(propEq('unit', log.unit), this.logs);
-      if (!taskLog) {
+      if (index === -1) {
         this.logs.push(log);
       } else {
-        taskLog.logs = log.logs + taskLog.logs;
+        this.logs[index] = log;
       }
     }
   }
@@ -66,7 +74,6 @@ class Store {
       taskLog.logs += log.message;
     }
   }
-
   setTask(task: PipelineTask) {
     this.task = task;
   }
@@ -84,13 +91,16 @@ const FIND_PIPELINE_TASK = gql`
       logs {
         unit
         logs
+        status
+        startedAt
+        endedAt
       }
     }
   }
 `;
 
 const PIPELINE_TASK_CHANGED = gql`
-  subscription Pipelinetaskchanged($taskId: String!) {
+  subscription PipelineTaskChanged($taskId: String!) {
     task: pipelineTaskChanged(id: $taskId) {
       id
       units
@@ -98,6 +108,13 @@ const PIPELINE_TASK_CHANGED = gql`
       status
       startedAt
       endedAt
+      logs {
+        unit
+        status
+        logs
+        startedAt
+        endedAt
+      }
     }
   }
 `;
@@ -167,11 +184,15 @@ const UnitList = observer(({ store }: { store: Store }) => {
     return <div>Loading...</div>;
   }
 
-  const tabs = store.task.units.map(unit => (
+  const tabs = store.task.units.map(unit => {
+    const log = find(propEq('unit', unit), store.logs);
+    return (
       <li key={unit} className={styles.navItem}>
-      {unit}
+        <span>{unit}</span>
+        <PipelineTaskStatus status={log?.status || TaskStatuses.Pending} />
       </li>
-  ));
+    );
+  });
 
   return <ol className={styles.navContainer}>{tabs}</ol>;
 });
@@ -197,48 +218,9 @@ const TaskInfo = observer(({ store }: { store: Store }) => {
   }
   return (
     <header className={styles.taskInfo}>
-      <StatusIcon status={task.status} />
+      <PipelineTaskStatus 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;
-  }
-};