feat: pipeline-task details

src/pipeline-tasks/pipeline-task-detail.tsx

@@ -1,9 +1,92 @@
-import { FC } from 'react'
+import { gql, useQuery } from "@apollo/client";
+import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
+import { format } from 'date-fns';
+import React, { FC } from "react";
+import { ErrorPage } from "../commons/fallbacks/error-page";
+import { PipelineTask, PipelineTaskLogs } from "../generated/graphql";
 
 interface Props {
   taskId: string;
 }
 
-export const PipelineTaskDetail: FC<Props> = ({taskId}) => {
-  return <div>{taskId} detail</div>
-}
+const PIPELINE_TASK = gql`
+  query FindPipelineTask($taskId: String!) {
+    pipelineTask(id: $taskId) {
+      id
+      units
+      commit
+      status
+      startedAt
+      endedAt
+      logs {
+        unit
+        logs
+        status
+        startedAt
+        endedAt
+      }
+    }
+  }
+`;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+  },
+  groupTitle: {
+    backgroundColor: 'white',
+    fontWeight: 500,
+    borderTop: '1px solid #eee',
+    fontSize: '16px',
+    padding: '12px',
+    marginLeft: '1px',
+  },
+  logText: {
+    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+    whiteSpace: 'pre-wrap',
+    border: 'none',
+    margin: '6px 12px',
+    display: "block"
+  },
+}));
+
+export const PipelineTaskDetail: FC<Props> = ({ taskId }) => {
+  const { data, loading, error } = useQuery<{ pipelineTask: PipelineTask }>(
+    PIPELINE_TASK,
+    {
+      variables: { taskId },
+    }
+  );
+  const classes = useStyles();
+
+  if (error) {
+    return <ErrorPage>{error.message}</ErrorPage>;
+  }
+
+  if (loading) {
+    return <LinearProgress color="secondary" />;
+  }
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="h4" component="h2">
+        {taskId} detail
+      </Typography>
+
+      {data?.pipelineTask.logs.map((logs) => (
+        <LogGroup key={logs.unit} logs={logs} />
+      ))}
+    </div>
+  );
+};
+
+const LogGroup: FC<{ logs: PipelineTaskLogs }> = ({ logs }) => {
+  const classes = useStyles();
+  return (
+    <div>
+      <div className={classes.groupTitle}>
+        {logs.unit} {format(logs.startedAt, 'yyyy-MM-dd HH:mm:ss')} {logs.status}
+      </div>
+      <code className={classes.logText}>{logs.logs}</code>
+    </div>
+  );
+};