feat: 添加 pipeline 的部署环境配置与展示。

.cracorc.js

@@ -0,0 +1,21 @@
+const { ServiceRegister } = require("configuration");
+
+module.exports = {
+  devServer: (devServerConfig) => {
+    devServerConfig.port = "auto";
+    devServerConfig.onListening = function (devServer) {
+      if (!devServer) {
+        throw new Error("webpack-dev-server is not defined");
+      }
+
+      const port = devServer.listeningApp.address().port;
+      const register = new ServiceRegister({
+        etcd: { hosts: ["http://rpi:2379"] },
+      });
+      register.register("fennec", `http://localhost:${port}/`);
+      console.log("Listening on port:", port);
+    };
+
+    return devServerConfig;
+  },
+};

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode/chrome

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://fennec.localhost:7070/",
+      "webRoot": "${workspaceFolder}",
+      "userDataDir": ".vscode/chrome"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "cSpell.words": [
+    "clsx",
+    "fontsource",
+    "Formik",
+    "noconflict",
+    "notistack",
+    "unmount",
+    "vditor"
+  ]
+}

apollo.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "fennec-be",
+      url: "http://localhost:7122/graphql",
+    },
+  },
+};

codegen.yml

@@ -0,0 +1,12 @@
+overwrite: true
+schema: "http://localhost:7122/graphql"
+# documents: "src/**/*.graphql"
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+  src/generated/graphql.schema.json:
+    plugins:
+      - "introspection"

ecosystem.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  apps: [
+    {
+      name: "fennec-fe",
+      script: "serve",
+      args: "",
+      watch: false,
+      ignore_watch: ["node_modules"],
+      log_date_format: "MM-DD HH:mm:ss.SSS Z",
+      env: {
+        PM2_SERVE_PATH: "./build",
+        PM2_SERVE_PORT: 7123,
+        PM2_SERVE_SPA: "true",
+        PM2_SERVE_HOMEPAGE: "/index.html",
+      },
+      max_restarts: 5,
+    },
+  ],
+};

package.json

@@ -1,8 +1,22 @@
 {
-  "name": "blog-bs",
+  "name": "fennec-bs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.3.15",
+    "@craco/craco": "^6.3.0",
+    "@curi/react-dom": "^2.0.4",
+    "@curi/router": "^2.1.2",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@hickory/browser": "^2.1.0",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/lab": "^5.0.0-alpha.49",
+    "@mui/material": "^5.0.2",
+    "@mui/styles": "^5.0.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
@@ -10,17 +24,34 @@
     "@types/node": "^12.20.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "ace-builds": "^1.4.13",
+    "apollo-link-scalars": "^2.1.3",
+    "configuration": "file:../configuration",
+    "date-fns": "^2.21.1",
+    "fontsource-roboto": "^4.0.0",
+    "formik": "^2.2.6",
+    "formik-material-ui": "^3.0.1",
+    "formik-material-ui-pickers": "^0.0.12",
+    "graphql": "^15.5.0",
+    "graphql-scalars": "^1.10.0",
+    "material-ui-confirm": "^2.1.2",
+    "notistack": "^2.0.2",
+    "ramda": "^0.27.1",
     "react": "^17.0.2",
+    "react-ace": "^9.4.4",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
+    "vditor": "^3.8.4",
+    "web-vitals": "^1.1.1",
+    "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER=none PORT=auto craco start",
-    "build": "react-scripts build",
+    "build": "craco build",
-    "test": "react-scripts test",
+    "test": "craco test",
-    "eject": "react-scripts eject"
+    "prestart": "npm run graphql",
+    "graphql": "graphql-codegen --config codegen.yml"
   },
   "eslintConfig": {
     "extends": [
@@ -39,5 +70,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "1.21.3",
+    "@graphql-codegen/introspection": "1.18.1",
+    "@graphql-codegen/typescript": "1.21.1",
+    "@graphql-codegen/typescript-operations": "1.17.15",
+    "@graphql-codegen/typescript-react-apollo": "2.2.3",
+    "@types/date-fns": "^2.6.0",
+    "@types/ramda": "^0.27.41",
+    "@types/yup": "^0.29.11",
+    "autoprefixer": "^9.8.6",
+    "postcss": "^7.0.35"
   }
 }

public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Fennec</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,25 +1,18 @@
-import React from 'react';
+import { useResponse } from '@curi/react-dom';
-import logo from './logo.svg';
 import './App.css';
+import { DefaultLayout } from './layouts';
 
 function App() {
+  const { response } = useResponse();
+
+  const { body: Body } = response;
+  if (!Body) {
+    return <DefaultLayout> Client has some wrong!</DefaultLayout>;
+  }
   return (
-    <div className="App">
+    <DefaultLayout>
-      <header className="App-header">
+      <Body response={response} />
-        <img src={logo} className="App-logo" alt="logo" />
+    </DefaultLayout>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
   );
 }
 

src/commits/commit-list.tsx

@@ -0,0 +1,274 @@
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
+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,
+  LinearProgress,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  useTheme,
+} from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import withStyles from "@mui/styles/withStyles";
+import {
+  Cancel,
+  CheckCircle,
+  CloudDownload,
+  ShoppingCart,
+  Stop,
+  Timer,
+} from "@mui/icons-material";
+import { format } from "date-fns";
+import { useSnackbar } from "notistack";
+import { complement, equals, find, propEq, takeWhile } from "ramda";
+import {
+  FC,
+  Fragment,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import {
+  Commit,
+  CreatePipelineTaskInput,
+  Pipeline,
+  PipelineTask,
+  TaskStatuses,
+  PipelineUnits,
+} from "../generated/graphql";
+import { CREATE_PIPELINE_TASK, STOP_PIPELINE_TASK } from "./mutations";
+import { COMMITS } from "./queries";
+import { SYNC_COMMITS } from "./subscriptions";
+
+interface Props {
+  pipeline: Pipeline;
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flex: "1 1 100%",
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+}));
+
+export const CommitList: FC<Props> = ({ pipeline }) => {
+  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 (
+    <section className={classes.root}>
+      {(() => {
+        if (loading) {
+          return <LinearProgress color="secondary" />;
+        }
+
+        return (
+          <section>
+            {syncing && <LinearProgress color="secondary" />}
+            <List>
+              {data?.commits?.map((commit) => (
+                <Item key={commit.hash} commit={commit} pipeline={pipeline} />
+              ))}
+            </List>
+          </section>
+        );
+      })()}
+    </section>
+  );
+};
+
+const unitActionPairs: Array<[PipelineUnits, ReactNode, string]> = [
+  [PipelineUnits.Checkout, <ShoppingCart />, "checkout"],
+  [
+    PipelineUnits.InstallDependencies,
+    <CloudDownload />,
+    "install dependencies",
+  ],
+  [PipelineUnits.Test, <FontAwesomeIcon icon={faVial} />, "test"],
+  [PipelineUnits.Deploy, <FontAwesomeIcon icon={faPlayCircle} />, "deploy"],
+];
+
+const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
+  commit,
+  pipeline,
+}) => {
+  const [isOpen, setOpen] = useState(() => false);
+
+  const [createTask, { loading }] = useMutation<
+    { createPipelineTask: PipelineTask },
+    { task: CreatePipelineTaskInput }
+  >(CREATE_PIPELINE_TASK);
+
+  const units = useMemo(
+    () => pipeline.workUnitMetadata.units.map((unit) => unit.type),
+    [pipeline]
+  );
+
+  const { navigate, url } = useRouter();
+  const { response } = useResponse();
+
+  const handleCreateTask = useCallback(
+    (unit: PipelineUnits) => {
+      const _units = [...takeWhile(complement(equals(unit)), units), unit];
+      createTask({
+        variables: {
+          task: {
+            units: _units,
+            pipelineId: pipeline.id,
+            commit: commit.hash,
+          },
+        },
+      }).then(({ data }) => {
+        navigate({
+          url: url({
+            name: "pipeline-task-detail",
+            params: { ...response.params, taskId: data?.createPipelineTask.id },
+          }),
+        });
+      });
+    },
+    [commit, createTask, navigate, pipeline, response, units, url]
+  );
+
+  const actions = useMemo(
+    () =>
+      units.map((unit) => {
+        const pair = find(propEq(0, unit), unitActionPairs);
+        return (
+          pair && (
+            <IconButton
+              key={unit}
+              aria-label={pair[2]}
+              disabled={loading}
+              onClick={() => handleCreateTask(unit)}
+              size="large"
+            >
+              {pair[1]}
+            </IconButton>
+          )
+        );
+      }),
+    [units, handleCreateTask, loading]
+  );
+  return (
+    <Fragment>
+      <ListItem button onClick={() => setOpen(!isOpen)}>
+        <ListItemText
+          primary={commit.message}
+          secondary={commit.date && format(commit.date, "yyyy-MM-dd HH:mm:ss")}
+        />
+        <ListItemSecondaryAction>{actions}</ListItemSecondaryAction>
+      </ListItem>
+      {loading && <LinearProgress color="secondary" />}
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {commit.tasks.map((task) => (
+            <Link
+              key={task.id}
+              name="pipeline-task-detail"
+              params={{ ...response.params, taskId: task.id }}
+            >
+              <TaskItem task={task} />
+            </Link>
+          ))}
+        </List>
+      </Collapse>
+    </Fragment>
+  );
+};
+
+const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const statusIcon: ReactNode = (() => {
+    switch (task.status) {
+      case TaskStatuses.Pending:
+        return <Timer style={{ color: theme.palette.info.main }} />;
+      case TaskStatuses.Success:
+        return <CheckCircle style={{ color: theme.palette.success.main }} />;
+      case TaskStatuses.Failed:
+        return <Cancel style={{ color: theme.palette.error.main }} />;
+      case TaskStatuses.Working:
+        return (
+          <CircularProgress style={{ color: theme.palette.secondary.main }} />
+        );
+    }
+  })();
+  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>
+      <ListItemText
+        primary={
+          task.startedAt && format(task.startedAt, "yyyy-MM-dd HH:mm:ss")
+        }
+      />
+      <ListItemSecondaryAction>
+        {task.status === TaskStatuses.Working && (
+          <IconButton edge="end" aria-label="stop" onClick={stop} size="large">
+            <Stop />
+          </IconButton>
+        )}
+      </ListItemSecondaryAction>
+      <LimitedBackdrop open={stopTaskWaiting} />
+    </ListItem>
+  );
+};
+const LimitedBackdrop = withStyles({
+  root: {
+    position: "absolute",
+    zIndex: 1,
+  },
+})(Backdrop);

src/commits/mutations.ts

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_PIPELINE_TASK = gql`
+  mutation CreatePipelineTask($task: CreatePipelineTaskInput!) {
+    createPipelineTask(task: $task) {
+      id
+      status
+      startedAt
+      endedAt
+    }
+  }
+`;
+export const STOP_PIPELINE_TASK = gql`
+  mutation StopPipelineTask($taskId: String!) {
+    stopPipelineTask(id: $taskId)
+  }
+`;

src/commits/queries.ts

@@ -0,0 +1,20 @@
+import { gql } from '@apollo/client';
+
+export const COMMITS = gql`
+  query Commits($pipelineId: String!) {
+    commits(pipelineId: $pipelineId) {
+      message
+      hash
+      date
+      body
+      author_name
+      tasks {
+        id
+        units
+        status
+        startedAt
+        endedAt
+      }
+    }
+  }
+`;

src/commits/subscriptions.ts

@@ -0,0 +1,6 @@
+import { gql } from "@apollo/client";
+export const SYNC_COMMITS = gql`
+  subscription SyncCommits($pipelineId: String!) {
+    syncCommits(pipelineId: $pipelineId)
+  }
+`;

src/commons/auth/auth.provider.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useState } from "react";
+import { FC } from "react";
+import { Login } from "./login";
+
+export interface AuthContext {
+  accessToken: string | null;
+  setAccessToken: (token: string) => void;
+  setRefreshToken: (token: string) => void;
+  refreshToken: string | undefined;
+  login: (dto: any) => void;
+  account?: any;
+  setAccount: (dto: any) => void;
+  logout: () => void;
+}
+const Context = createContext({} as AuthContext);
+
+export const useAuth = () => useContext(Context);
+
+export const AuthProvider: FC = ({ children }) => {
+  const [accessToken, setAccessToken] = useState<string | null>(
+    localStorage.getItem("accessToken")
+  );
+  const [refreshToken, setRefreshToken] = useState<string>();
+  const [account, setAccount] = useState<any>();
+
+  const login = (dto: any) => {
+    setAccessToken(dto.accessToken);
+    setRefreshToken(dto.refreshToken);
+    setAccount(dto.account);
+    localStorage.setItem("accessToken", dto.accessToken);
+  };
+  const logout = () => {
+    setAccessToken(null);
+    setRefreshToken(undefined);
+    setAccount(undefined);
+  };
+
+  return (
+    <Context.Provider
+      value={{
+        accessToken,
+        setAccessToken,
+        refreshToken,
+        setRefreshToken,
+        login,
+        account,
+        setAccount,
+        logout,
+      }}
+    >
+      {children}
+      {accessToken ? null : <Login />}
+    </Context.Provider>
+  );
+};

src/commons/auth/login.tsx

@@ -0,0 +1,68 @@
+import makeStyles from "@mui/styles/makeStyles";
+import { FC, Fragment, useEffect, useRef } from "react";
+import { useAuth } from "./auth.provider";
+const useStyles = makeStyles((theme) => {
+  return {
+    iframe: {
+      height: "300px",
+      width: "500px",
+      position: "absolute",
+      top: "100px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: theme.zIndex.modal,
+      border: "none",
+      boxShadow: theme.shadows[4],
+    },
+    mask: {
+      top: "0",
+      left: "0",
+      bottom: "0",
+      right: "0",
+      position: "absolute",
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      zIndex: theme.zIndex.modal,
+    },
+  };
+});
+
+export const Login: FC = () => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { login } = useAuth();
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      return;
+    }
+    let messagePort: MessagePort;
+    const onLoad = (ev: MessageEvent) => {
+      if (ev.data !== "init-channel") {
+        return;
+      }
+      messagePort = ev.ports?.[0] as MessagePort;
+      messagePort.onmessage = (ev: MessageEvent) => {
+        if (ev.data?.type === "logged") {
+          login(ev.data.payload);
+        }
+      };
+    };
+    window.addEventListener("message", onLoad);
+
+    return () => {
+      window.removeEventListener("message", onLoad);
+    };
+  }, [login]);
+
+  const classes = useStyles();
+  return (
+    <Fragment>
+      <div className={classes.mask} />
+      <iframe
+        ref={iframeRef}
+        className={classes.iframe}
+        title="Auth"
+        src="https://user.rpi.ivanli.cc/auth/login"
+      ></iframe>
+    </Fragment>
+  );
+};

src/commons/fallbacks/error-page.tsx

@@ -0,0 +1,11 @@
+import { Typography } from '@mui/material';
+import React, { FC } from 'react';
+
+export const ErrorPage: FC = ({children}) => {
+  return (
+    <section>
+      <Typography component="h2">Something is wrong :(</Typography>
+      <Typography variant="body1" component="div">{children}</Typography>
+    </section>
+  );
+}

src/commons/form/yaml-editor/yaml-editor.tsx

@@ -0,0 +1,28 @@
+import { FC } from "@curi/react-universal/node_modules/@types/react";
+import { FieldConfig, useField } from "formik";
+import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-yaml";
+import "ace-builds/src-noconflict/theme-github";
+import { styled } from "@mui/system";
+
+const Editor: FC<FieldConfig<string> & { label?: string; className?: string }> =
+  ({ label, className, ...props }) => {
+    const [field, , helper] = useField(props);
+    return (
+      <AceEditor
+        className={className}
+        style={{ width: "100%" }}
+        {...field}
+        onChange={(value) => helper.setValue(value)}
+        {...props}
+        mode="yaml"
+        theme="github"
+        editorProps={{ $blockScrolling: true }}
+      />
+    );
+  };
+
+export const YamlEditor = Editor;
+styled(Editor)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));

src/commons/graphql/client.tsx

@@ -0,0 +1,184 @@
+import {
+  ApolloClient,
+  ApolloLink,
+  HttpLink,
+  InMemoryCache,
+  split,
+  ApolloProvider,
+  fromPromise,
+  FetchResult,
+} from "@apollo/client";
+import { withScalars } from "apollo-link-scalars";
+import { buildClientSchema, IntrospectionQuery } from "graphql";
+import { DateTimeResolver } from "graphql-scalars";
+import { FC } from "react";
+import introspectionResult from "../../generated/graphql.schema.json";
+import { onError } from "@apollo/client/link/error";
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { getMainDefinition, Observable } from "@apollo/client/utilities";
+import { useSnackbar } from "notistack";
+import { deepOmit } from "../../utils/deep-omit";
+import { useMemo } from "react";
+import { EventEmitter } from "events";
+import { useState } from "react";
+import { useAuth } from "../auth/auth.provider";
+import { useEffect } from "react";
+import { useRef } from "react";
+import { setContext } from "@apollo/client/link/context";
+
+const schema = buildClientSchema(
+  introspectionResult as unknown as IntrospectionQuery
+);
+
+const typesMap = {
+  DateTime: DateTimeResolver,
+};
+
+const cleanTypeName = new ApolloLink((operation, forward) => {
+  if (operation.variables) {
+    operation.variables = deepOmit(["__typename"], operation.variables);
+  }
+  const rt = forward(operation);
+  return (
+    rt.map?.((data) => {
+      return data;
+    }) ?? rt
+  );
+});
+
+export const AppApolloClientProvider: FC = ({ children }) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const { accessToken, logout } = useAuth();
+
+  const [loggedEventTarget] = useState(() => new EventEmitter());
+  const accessTokenRef = useRef(accessToken);
+  const logoutRef = useRef(logout);
+
+  useEffect(() => {
+    accessTokenRef.current = accessToken;
+    if (accessToken) {
+      loggedEventTarget.emit("logged", accessToken);
+    }
+  }, [loggedEventTarget, accessToken]);
+  useEffect(() => {
+    logoutRef.current = logout;
+  }, [logout]);
+  const client = useMemo(() => {
+    const authLink = onError(
+      ({ graphQLErrors, networkError, operation, forward }) => {
+        if (graphQLErrors) {
+          for (const error of graphQLErrors) {
+            if (error.extensions?.code === "401") {
+              return fromPromise(
+                new Promise<Observable<FetchResult>>((resolve) => {
+                  loggedEventTarget.once("logged", (accessToken: string) => {
+                    const oldHeaders = operation.getContext().headers;
+                    operation.setContext({
+                      headers: {
+                        ...oldHeaders,
+                        authorization: `Bearer ${accessToken}`,
+                      },
+                    });
+                    const subscriptionClient = (wsLink as any)
+                      .subscriptionClient;
+                    subscriptionClient?.close(false, false);
+                    resolve(forward(operation));
+                  });
+                  logoutRef.current();
+                })
+              ).flatMap((v) => v);
+            }
+          }
+        }
+        const httpResult = (networkError as any)?.result;
+        if (httpResult?.statusCode === 401) {
+          return fromPromise(
+            new Promise<Observable<FetchResult>>((resolve) => {
+              loggedEventTarget.once("logged", (accessToken: string) => {
+                const oldHeaders = operation.getContext().headers;
+                operation.setContext({
+                  headers: {
+                    ...oldHeaders,
+                    authorization: `Bearer ${accessToken}`,
+                  },
+                });
+                resolve(forward(operation));
+              });
+              logoutRef.current();
+            })
+          ).flatMap((v) => v);
+        }
+      }
+    ).concat(
+      setContext(() => ({
+        headers: {
+          authorization: `Bearer ${accessTokenRef.current}`,
+        },
+      }))
+    );
+    const errorLink = onError(({ graphQLErrors, networkError }) => {
+      if (graphQLErrors) {
+        graphQLErrors.forEach((error) => {
+          enqueueSnackbar(error.message, {
+            variant: "error",
+          });
+        });
+        graphQLErrors.forEach(({ message, locations, path }) => {
+          console.error(
+            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+          );
+        });
+      }
+      if (networkError) {
+        console.log(`[Network error]: ${networkError}`);
+        enqueueSnackbar(networkError.message, {
+          variant: "error",
+        });
+      }
+    });
+    const wsLink = new WebSocketLink({
+      uri: `${window.location.protocol.replace("http", "ws")}//${
+        window.location.hostname
+      }:${window.location.port}/api/graphql`,
+      options: {
+        reconnect: true,
+        connectionParams: () => ({
+          authorization: `Bearer ${accessTokenRef.current} `,
+        }),
+      },
+    });
+    const httpLink = new HttpLink({
+      uri: "/api/graphql",
+    });
+    const splitLink = split(
+      ({ query }) => {
+        const definition = getMainDefinition(query);
+        return (
+          definition.kind === "OperationDefinition" &&
+          definition.operation === "subscription"
+        );
+      },
+      wsLink,
+      httpLink
+    );
+    const link = ApolloLink.from([
+      errorLink,
+      authLink,
+      withScalars({ schema, typesMap }) as unknown as ApolloLink,
+      cleanTypeName,
+      splitLink,
+    ]);
+    const client = new ApolloClient({
+      connectToDevTools: true,
+      ssrMode: typeof window === "undefined",
+      link,
+      cache: new InMemoryCache({
+        typePolicies: {},
+      }),
+    });
+
+    return client;
+  }, [enqueueSnackbar, loggedEventTarget]);
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};

src/commons/graphql/queries.ts

@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+export const COMMIT_LIST_QUERY = gql`
+  query CommitListQuery($projectId: String!, $pipelineId: String!) {
+    project(id: $projectId) {
+      id
+      name
+      comment
+      webUrl
+      sshUrl
+      webHookSecret
+    }
+    pipeline(id: $pipelineId) {
+      id
+      name
+      branch
+      workUnitMetadata {
+        version
+        units {
+          type
+          scripts
+        }
+      }
+    }
+  }
+`;

src/commons/route/active-link.tsx

@@ -0,0 +1,20 @@
+import { ActiveHookProps, Link, LinkProps, useActive } from '@curi/react-dom';
+import React, { FC, ReactNode } from 'react';
+
+export type ActiveLinkProps = ActiveHookProps &
+  LinkProps & {
+    className?: string;
+    children: ReactNode;
+  };
+
+export const ActiveLink:FC<ActiveLinkProps> = ({ name, params, partial, className = "", ...rest }) => {
+  const active = useActive({ name, params, partial });
+  return (
+    <Link
+      name={name}
+      params={params}
+      {...rest}
+      className={active ? `${className} active` : className}
+    />
+  );
+};

src/commons/route/router.tsx

@@ -0,0 +1,31 @@
+import { useApolloClient } from "@apollo/client";
+import { createRouterComponent } from "@curi/react-dom";
+import { createRouter, announce } from "@curi/router";
+import { browser } from "@hickory/browser";
+import { FC, useEffect, useState } from "react";
+import routes from "../../routes";
+import { LinearProgress } from "@mui/material";
+
+const Component: FC = ({ children }) => {
+  const client = useApolloClient();
+  const [body, setBody] = useState<any>(null);
+
+  useEffect(() => {
+    const router = createRouter(browser, routes, {
+      sideEffects: [
+        announce(({ response }) => {
+          return `Navigated to ${response.location.pathname}`;
+        }),
+      ],
+      external: { client },
+    });
+    const Router = createRouterComponent(router);
+    router.once(() => {
+      setBody(<Router>{children}</Router>);
+    });
+  }, [setBody, client, children]);
+
+  return body ?? <LinearProgress />;
+};
+
+export default Component;

src/generated/graphql.tsx

@@ -0,0 +1,334 @@
+import { gql } from '@apollo/client';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  /** A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format. */
+  DateTime: any;
+};
+
+export type Commit = {
+  __typename?: 'Commit';
+  hash: Scalars['String'];
+  date: Scalars['DateTime'];
+  message: Scalars['String'];
+  refs: Scalars['String'];
+  body: Scalars['String'];
+  author_name: Scalars['String'];
+  author_email: Scalars['String'];
+  tasks: Array<PipelineTask>;
+};
+
+export type Configuration = {
+  __typename?: 'Configuration';
+  id: Scalars['ID'];
+  pipeline: Pipeline;
+  pipelineId: Scalars['String'];
+  project: Project;
+  projectId: Scalars['String'];
+  content: Scalars['String'];
+  name: Scalars['String'];
+  language: ConfigurationLanguage;
+};
+
+export enum ConfigurationLanguage {
+  JavaScript = 'JavaScript',
+  Yaml = 'YAML'
+}
+
+export type CreatePipelineInput = {
+  projectId: Scalars['String'];
+  branch: Scalars['String'];
+  name: Scalars['String'];
+  workUnitMetadata: WorkUnitMetadataInput;
+};
+
+export type CreatePipelineTaskInput = {
+  pipelineId: Scalars['String'];
+  commit: Scalars['String'];
+  units: Array<PipelineUnits>;
+};
+
+export type CreateProjectInput = {
+  name: Scalars['String'];
+  comment: Scalars['String'];
+  sshUrl: Scalars['String'];
+  webUrl?: Maybe<Scalars['String']>;
+  webHookSecret?: Maybe<Scalars['String']>;
+};
+
+
+export type Hello = {
+  __typename?: 'Hello';
+  message: Scalars['String'];
+};
+
+export type LogFields = {
+  __typename?: 'LogFields';
+  hash: Scalars['String'];
+  date: Scalars['String'];
+  message: Scalars['String'];
+  refs: Scalars['String'];
+  body: Scalars['String'];
+  author_name: Scalars['String'];
+  author_email: Scalars['String'];
+  tasks: Array<PipelineTask>;
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  createProject: Project;
+  updateProject: Project;
+  removeProject: Scalars['Float'];
+  createPipeline: Pipeline;
+  updatePipeline: Pipeline;
+  deletePipeline: Scalars['Float'];
+  createPipelineTask: PipelineTask;
+  stopPipelineTask: Scalars['Boolean'];
+  setConfiguration: Configuration;
+};
+
+
+export type MutationCreateProjectArgs = {
+  project: CreateProjectInput;
+};
+
+
+export type MutationUpdateProjectArgs = {
+  project: UpdateProjectInput;
+};
+
+
+export type MutationRemoveProjectArgs = {
+  id: Scalars['String'];
+};
+
+
+export type MutationCreatePipelineArgs = {
+  pipeline: CreatePipelineInput;
+};
+
+
+export type MutationUpdatePipelineArgs = {
+  pipeline: UpdatePipelineInput;
+};
+
+
+export type MutationDeletePipelineArgs = {
+  id: Scalars['String'];
+};
+
+
+export type MutationCreatePipelineTaskArgs = {
+  task: CreatePipelineTaskInput;
+};
+
+
+export type MutationStopPipelineTaskArgs = {
+  id: Scalars['String'];
+};
+
+
+export type MutationSetConfigurationArgs = {
+  setConfigurationInput: SetConfigurationInput;
+};
+
+export type Pipeline = {
+  __typename?: 'Pipeline';
+  id: Scalars['ID'];
+  project: Project;
+  projectId: Scalars['String'];
+  branch: Scalars['String'];
+  name: Scalars['String'];
+  workUnitMetadata: WorkUnitMetadata;
+  environment: Scalars['String'];
+};
+
+export type PipelineTask = {
+  __typename?: 'PipelineTask';
+  id: Scalars['ID'];
+  pipeline: Pipeline;
+  pipelineId: Scalars['String'];
+  commit: Scalars['String'];
+  units: Array<PipelineUnits>;
+  logs: Array<PipelineTaskLogs>;
+  status: TaskStatuses;
+  startedAt?: Maybe<Scalars['DateTime']>;
+  endedAt?: Maybe<Scalars['DateTime']>;
+  runOn: Scalars['String'];
+};
+
+export type PipelineTaskEvent = {
+  __typename?: 'PipelineTaskEvent';
+  taskId: Scalars['String'];
+  pipelineId: Scalars['String'];
+  projectId: Scalars['String'];
+  unit?: Maybe<PipelineUnits>;
+  emittedAt: Scalars['DateTime'];
+  message: Scalars['String'];
+  messageType: Scalars['String'];
+  status: TaskStatuses;
+};
+
+export type PipelineTaskLogs = {
+  __typename?: 'PipelineTaskLogs';
+  unit: PipelineUnits;
+  status: TaskStatuses;
+  startedAt?: Maybe<Scalars['DateTime']>;
+  endedAt?: Maybe<Scalars['DateTime']>;
+  logs: Scalars['String'];
+};
+
+/** 流水线单元 */
+export enum PipelineUnits {
+  Checkout = 'checkout',
+  InstallDependencies = 'installDependencies',
+  Test = 'test',
+  Deploy = 'deploy',
+  CleanUp = 'cleanUp'
+}
+
+export type Project = {
+  __typename?: 'Project';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+  comment: Scalars['String'];
+  sshUrl: Scalars['String'];
+  webUrl?: Maybe<Scalars['String']>;
+  webHookSecret?: Maybe<Scalars['String']>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  hello: Hello;
+  projects: Array<Project>;
+  project: Project;
+  pipelines: Array<Pipeline>;
+  pipeline: Pipeline;
+  commits?: Maybe<Array<Commit>>;
+  listPipelineTaskByPipelineId: Array<PipelineTask>;
+  pipelineTask: PipelineTask;
+  getConfiguration?: Maybe<Configuration>;
+};
+
+
+export type QueryProjectArgs = {
+  id: Scalars['String'];
+};
+
+
+export type QueryPipelinesArgs = {
+  projectId?: Maybe<Scalars['String']>;
+};
+
+
+export type QueryPipelineArgs = {
+  id: Scalars['String'];
+};
+
+
+export type QueryCommitsArgs = {
+  pipelineId: Scalars['String'];
+};
+
+
+export type QueryListPipelineTaskByPipelineIdArgs = {
+  pipelineId: Scalars['String'];
+};
+
+
+export type QueryPipelineTaskArgs = {
+  id: Scalars['String'];
+};
+
+
+export type QueryGetConfigurationArgs = {
+  pipelineId?: Maybe<Scalars['String']>;
+  projectId?: Maybe<Scalars['String']>;
+  id?: Maybe<Scalars['String']>;
+};
+
+export type SetConfigurationInput = {
+  id?: Maybe<Scalars['String']>;
+  pipelineId: Scalars['String'];
+  projectId: Scalars['String'];
+  content: Scalars['String'];
+  language: ConfigurationLanguage;
+  name?: Maybe<Scalars['String']>;
+};
+
+export type Subscription = {
+  __typename?: 'Subscription';
+  syncCommits?: Maybe<Scalars['String']>;
+  pipelineTaskEvent: PipelineTaskEvent;
+  pipelineTaskChanged: PipelineTask;
+};
+
+
+export type SubscriptionSyncCommitsArgs = {
+  appInstance?: Maybe<Scalars['String']>;
+  pipelineId: Scalars['String'];
+};
+
+
+export type SubscriptionPipelineTaskEventArgs = {
+  taskId: Scalars['String'];
+};
+
+
+export type SubscriptionPipelineTaskChangedArgs = {
+  id: Scalars['String'];
+};
+
+/** 任务状态 */
+export enum TaskStatuses {
+  Success = 'success',
+  Failed = 'failed',
+  Working = 'working',
+  Pending = 'pending'
+}
+
+export type UpdatePipelineInput = {
+  branch: Scalars['String'];
+  name: Scalars['String'];
+  workUnitMetadata: WorkUnitMetadataInput;
+  id: Scalars['String'];
+};
+
+export type UpdateProjectInput = {
+  name: Scalars['String'];
+  comment: Scalars['String'];
+  sshUrl: Scalars['String'];
+  webUrl?: Maybe<Scalars['String']>;
+  webHookSecret?: Maybe<Scalars['String']>;
+  id: Scalars['String'];
+};
+
+export type WorkUnit = {
+  __typename?: 'WorkUnit';
+  type: PipelineUnits;
+  scripts: Array<Scalars['String']>;
+};
+
+export type WorkUnitInput = {
+  type: PipelineUnits;
+  scripts: Array<Scalars['String']>;
+};
+
+export type WorkUnitMetadata = {
+  __typename?: 'WorkUnitMetadata';
+  version: Scalars['Int'];
+  units: Array<WorkUnit>;
+};
+
+export type WorkUnitMetadataInput = {
+  version?: Maybe<Scalars['Int']>;
+  units: Array<WorkUnitInput>;
+};

src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+a {
+  text-decoration: none;
+  color: inherit;
+}

src/index.tsx

@@ -1,14 +1,48 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import "fontsource-roboto";
-import reportWebVitals from './reportWebVitals';
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { AppApolloClientProvider } from "./commons/graphql/client";
+import { ConfirmProvider } from "material-ui-confirm";
+import { SnackbarProvider } from "notistack";
+import Router from "./commons/route/router";
+import { AuthProvider } from "./commons/auth/auth.provider";
+import { zhCN } from "@mui/material/locale";
+import {
+  ThemeProvider,
+  Theme,
+  StyledEngineProvider,
+  createTheme,
+} from "@mui/material/styles";
+
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
+const theme = createTheme({}, zhCN);
 
 ReactDOM.render(
   <React.StrictMode>
+    <ConfirmProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <SnackbarProvider maxSnack={5}>
+            <AuthProvider>
+              <AppApolloClientProvider>
+                <Router>
                   <App />
+                </Router>
+              </AppApolloClientProvider>
+            </AuthProvider>
+          </SnackbarProvider>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    </ConfirmProvider>
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

src/layouts/default.tsx

@@ -0,0 +1,168 @@
+import React, { FC, useCallback, useState } from "react";
+import clsx from "clsx";
+import { useTheme, Theme } from "@mui/material/styles";
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import Drawer from "@mui/material/Drawer";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import CssBaseline from "@mui/material/CssBaseline";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { ProjectPanel } from "../projects/project-panel";
+import { HeaderContainerProvider } from "./header-container";
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      overflow: "hidden",
+    },
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+    },
+    appBarShift: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    },
+    menuButton: {
+      marginRight: 36,
+    },
+    hide: {
+      display: "none",
+    },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+    },
+    drawerOpen: {
+      width: drawerWidth,
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    },
+    drawerClose: {
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      overflowX: "hidden",
+      width: 0,
+    },
+    toolbar: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      padding: theme.spacing(0, 1),
+      flex: "none",
+      // necessary for content to be below app bar
+      ...theme.mixins.toolbar,
+    },
+    headerContaner: {
+      flex: "auto",
+    },
+    content: {
+      flexGrow: 1,
+      height: "100vh",
+      display: "flex",
+      flexFlow: "column",
+      padding: theme.spacing(0),
+    },
+  })
+);
+
+export const DefaultLayout: FC = ({ children }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(true);
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  const [headerContainer, setHeaderContainer] = useState(undefined);
+  const onRefChange = useCallback(
+    (node) => {
+      setHeaderContainer(node);
+    },
+    [setHeaderContainer]
+  );
+
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open,
+        })}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            className={clsx(classes.menuButton, {
+              [classes.hide]: open,
+            })}
+            size="large">
+            <MenuIcon />
+          </IconButton>
+          <div className={classes.headerContaner} ref={onRefChange}></div>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        className={clsx(classes.drawer, {
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open,
+        })}
+        classes={{
+          paper: clsx({
+            [classes.drawerOpen]: open,
+            [classes.drawerClose]: !open,
+          }),
+        }}
+      >
+        <div className={classes.toolbar}>
+          <IconButton onClick={handleDrawerClose} size="large">
+            {theme.direction === "rtl" ? (
+              <ChevronRightIcon />
+            ) : (
+              <ChevronLeftIcon />
+            )}
+          </IconButton>
+        </div>
+        <Divider />
+        <ProjectPanel />
+        <Divider />
+      </Drawer>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+
+        <HeaderContainerProvider value={headerContainer}>
+          {children}
+        </HeaderContainerProvider>
+      </main>
+    </div>
+  );
+};

src/layouts/header-container.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const Context = createContext<HTMLElement| undefined>(undefined);
+
+export const HeaderContainerProvider = Context.Provider;
+
+export const useHeaderContainer = () => useContext(Context);

src/layouts/index.tsx

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './header-container';

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

@@ -0,0 +1,188 @@
+import { gql, useQuery, useSubscription } from "@apollo/client";
+import { LinearProgress, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { format } from "date-fns";
+import { FC, useState } from "react";
+import { ErrorPage } from "../commons/fallbacks/error-page";
+import {
+  PipelineTask,
+  PipelineTaskEvent,
+  PipelineTaskLogs,
+  TaskStatuses,
+} from "../generated/graphql";
+import { PIPELINE_TASK_EVENT } from "./subscriptions";
+import { clone, find, propEq } from "ramda";
+
+interface Props {
+  taskId: string;
+}
+
+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 [, setTaskEvents] = useState(() => new Array<PipelineTaskEvent>());
+  const { data, loading, error, client } = useQuery<{
+    pipelineTask: PipelineTask;
+  }>(PIPELINE_TASK, {
+    variables: { taskId },
+  });
+  const task = data?.pipelineTask;
+  useSubscription<{ pipelineTaskEvent: PipelineTaskEvent }>(
+    PIPELINE_TASK_EVENT,
+    {
+      variables: { taskId },
+      onSubscriptionData({ subscriptionData: { data } }) {
+        const event = data?.pipelineTaskEvent;
+        console.log(event);
+        if (event && task) {
+          setTaskEvents((prev) => [...prev, event]);
+          if (event.unit) {
+            // event of running scripts
+            client.cache.modify({
+              id: client.cache.identify(task!),
+              fields: {
+                logs(before: PipelineTaskLogs[]) {
+                  before = clone(before);
+                  let l = find(propEq("unit", event.unit), before);
+                  if (l) {
+                    l.logs += event.message;
+                  } else {
+                    l = {
+                      unit: event.unit!,
+                      logs: event.message,
+                      status: event.status,
+                      startedAt: event.emittedAt,
+                      endedAt: null,
+                      __typename: "PipelineTaskLogs",
+                    };
+                    before.push(l);
+                  }
+                  if (event.status === TaskStatuses.Working) {
+                    l.startedAt || (l.startedAt = event.emittedAt);
+                  }
+                  if (
+                    [TaskStatuses.Failed, TaskStatuses.Success].includes(
+                      event.status
+                    )
+                  ) {
+                    l.startedAt && (l.startedAt = event.emittedAt);
+                    l.endedAt = event.emittedAt;
+                  }
+                  l.status = event.status;
+                  return before;
+                },
+              },
+            });
+          } else {
+            // event of task status change
+            client.cache.modify({
+              id: client.cache.identify(task!),
+              fields: {
+                status() {
+                  return event.status;
+                },
+                startedAt(before) {
+                  if (event.status === TaskStatuses.Working) {
+                    return event.emittedAt;
+                  } else {
+                    return before;
+                  }
+                },
+                endedAt(before) {
+                  if (
+                    [TaskStatuses.Success, TaskStatuses.Failed].includes(
+                      event.status
+                    )
+                  ) {
+                    return event.emittedAt;
+                  } else {
+                    return before;
+                  }
+                },
+              },
+            });
+          }
+        }
+      },
+    }
+  );
+  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>
+      <Typography variant="h5" component="h3">
+        {task?.status}
+      </Typography>
+      <Typography variant="h5" component="h3">
+        {task?.startedAt && format(task?.startedAt, "yyyy-MM-dd HH:mm:ss.SSS")}-
+        {task?.endedAt && format(task?.endedAt, "yyyy-MM-dd HH:mm:ss.SSS")}
+      </Typography>
+
+      {task?.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}{" "}
+        {logs.startedAt && format(logs.startedAt, "yyyy-MM-dd HH:mm:ss")}{" "}
+        {logs.endedAt && format(logs.endedAt, "yyyy-MM-dd HH:mm:ss")} {logs.status}
+      </div>
+      <code className={classes.logText}>{logs.logs}</code>
+    </div>
+  );
+};

src/pipeline-tasks/subscriptions.ts

@@ -0,0 +1,16 @@
+import { gql } from "@apollo/client";
+
+export const PIPELINE_TASK_EVENT = gql`
+  subscription PipelineTaskEvent($taskId: String!) {
+    pipelineTaskEvent(taskId: $taskId) {
+      taskId
+      pipelineId
+      projectId
+      unit
+      emittedAt
+      message
+      messageType
+      status
+    }
+  }
+`;

src/pipelines/index.ts

@@ -0,0 +1,4 @@
+export * from './pipeline-detail';
+export * from './pipeline-list';
+export * from './queries';
+export * from "./runtime-config-editor";

src/pipelines/mutations.ts

@@ -0,0 +1,54 @@
+import { gql } from "@apollo/client";
+
+export const CREATE_PIPELINE = gql`
+  mutation CreatePipeline($pipeline: CreatePipelineInput!) {
+    createPipeline(pipeline: $pipeline) {
+      id
+      projectId
+      branch
+      name
+      environment
+      workUnitMetadata {
+        version
+        units {
+          type
+          scripts
+        }
+      }
+    }
+  }
+`;
+
+export const UPDATE_PIPELINE = gql`
+  mutation UpdatePipeline($pipeline: UpdatePipelineInput!) {
+    updatePipeline(pipeline: $pipeline) {
+      id
+      projectId
+      branch
+      name
+      environment
+      workUnitMetadata {
+        version
+        units {
+          type
+          scripts
+        }
+      }
+    }
+  }
+`;
+
+export const DELETE_PIPELINE = gql`
+  mutation DeletePipeline($id: String!) {
+    deletePipeline(id: $id)
+  }
+`;
+
+
+export const SET_CONFIGURATION = gql`
+  mutation SetConfiguration($configuration: SetConfigurationInput!) {
+    setConfiguration(setConfigurationInput: $configuration) {
+      id
+    }
+  }
+`;

src/pipelines/pipeline-detail.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Pipeline } from '../generated/graphql';
+
+interface Props {
+  pipeline: Pipeline;
+}
+
+export const PipelineDetail: FC<Props> = ({pipeline}) => {
+
+  return <div>PipelineDetail</div>
+}

src/pipelines/pipeline-editor.tsx

@@ -0,0 +1,289 @@
+import { gql, Reference, useMutation } from "@apollo/client";
+import { useRouter } from "@curi/react-dom";
+import { Button, Grid, IconButton, LinearProgress, Paper, Portal, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Delete } from "@mui/icons-material";
+import { FormikHelpers, Formik, Form, Field } from "formik";
+import { TextField, TextFieldProps } from "formik-material-ui";
+import { useConfirm } from "material-ui-confirm";
+import { useSnackbar } from "notistack";
+import { not, omit } from "ramda";
+import { ChangeEvent, FC } from "react";
+import { Pipeline, PipelineUnits } from "../generated/graphql";
+import { useHeaderContainer } from "../layouts";
+import { CREATE_PIPELINE, DELETE_PIPELINE, UPDATE_PIPELINE } from "./mutations";
+import * as Yup from "yup";
+
+type Values = Partial<Pipeline>;
+
+interface Props {
+  pipeline: Values;
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flex: "1 1 100%",
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+  form: {
+    margin: 16,
+  },
+  metadataList: {
+    padding: 0,
+  },
+  metadataItem: {
+    listStyle: "none",
+  },
+  metadataContainer: {
+    padding: "10px 30px",
+    margin: "10px 0",
+  },
+}));
+
+export const PipelineEditor: FC<Props> = ({ pipeline }) => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const isCreate = not("id" in pipeline);
+
+  const [createPipeline] = useMutation<{ createPipeline: Pipeline }>(
+    CREATE_PIPELINE,
+    {
+      update(cache, { data }) {
+        cache.modify({
+          fields: {
+            pipelines(exiting = []) {
+              const pipelineRef = cache.writeFragment({
+                data: data!.createPipeline,
+                fragment: gql`
+                  fragment newPipeline on Pipeline {
+                    id
+                    projectId
+                    branch
+                    environment
+                    name
+                    workUnitMetadata {
+                      version
+                      units {
+                        type
+                        scripts
+                      }
+                    }
+                  }
+                `,
+              });
+              return [pipelineRef, ...exiting];
+            },
+          },
+        });
+      },
+    }
+  );
+  const [updatePipeline] = useMutation(UPDATE_PIPELINE);
+
+  const router = useRouter();
+
+  const submitForm = async (
+    values: Values,
+    formikHelpers: FormikHelpers<Values>
+  ) => {
+    try {
+      let pipelineId = pipeline.id;
+      let projectId = pipeline.projectId;
+      if (isCreate) {
+        await createPipeline({
+          variables: {
+            pipeline: values,
+          },
+        }).then(({ data }) => {
+          pipelineId = data!.createPipeline.id;
+          projectId = data!.createPipeline.projectId;
+        });
+      } else {
+        await updatePipeline({
+          variables: {
+            pipeline: omit(["projectId"], values),
+          },
+        });
+      }
+      enqueueSnackbar("Saved successfully", {
+        variant: "success",
+      });
+      router.navigate({
+        url: router.url({
+          name: "pipeline-commits",
+          params: {
+            pipelineId,
+            projectId,
+          },
+        }),
+        method: "replace",
+      });
+    } finally {
+      formikHelpers.setSubmitting(false);
+    }
+  };
+
+  const [deletePipeline, { loading: deleting }] = useMutation(DELETE_PIPELINE, {
+    variables: { id: pipeline.id },
+    update(cache) {
+      cache.modify({
+        fields: {
+          projects(exiting: Reference[] = [], { readField }) {
+            return exiting.filter(
+              (ref) => pipeline.id !== readField("id", ref)
+            );
+          },
+        },
+      });
+    },
+  });
+
+  const confirm = useConfirm();
+  const handleDelete = async () => {
+    try {
+      await confirm({ description: `This will delete ${pipeline.name}.` });
+      await deletePipeline();
+      enqueueSnackbar("Deleted successfully", {
+        variant: "success",
+      });
+      router.navigate({
+        url: router.url({
+          name: "dashboard",
+        }),
+      });
+    } catch {}
+  };
+
+  const headerContainer = useHeaderContainer();
+
+  const units = [
+    PipelineUnits.Checkout,
+    PipelineUnits.InstallDependencies,
+    PipelineUnits.Test,
+    PipelineUnits.Deploy,
+    PipelineUnits.CleanUp,
+  ];
+  const classes = useStyles();
+  return (
+    <Paper className={classes.root}>
+      <Portal container={headerContainer}>
+        <Grid container justifyContent="space-between" alignItems="center">
+          <Typography variant="h6" component="h1">
+            {isCreate ? "Create" : "Edit"} Pipeline
+          </Typography>
+          {isCreate ? null : (
+            <IconButton
+              color="inherit"
+              onClick={handleDelete}
+              disabled={deleting}
+              size="large"
+            >
+              <Delete />
+            </IconButton>
+          )}
+        </Grid>
+      </Portal>
+      <Formik
+        initialValues={pipeline}
+        validationSchema={Yup.object({
+          name: Yup.string()
+            .max(32, "Must be 32 characters or less")
+            .required("Required"),
+          branch: Yup.string()
+            .max(64, "Must be 64 characters or less")
+            .required("Required"),
+          environment: Yup.string()
+            .max(64, "Must be 64 characters or less")
+            .required("Required"),
+        })}
+        onSubmit={submitForm}
+      >
+        {({ submitForm, isSubmitting, values }) => {
+          return (
+            <Form className={classes.form}>
+              <Field component={TextField} name="name" label="Name" fullWidth />
+              <Field
+                component={TextField}
+                name="branch"
+                label="Branch"
+                fullWidth
+                margin="normal"
+              />
+              <Field
+                component={TextField}
+                name="environment"
+                label="Environment"
+                fullWidth
+                margin="normal"
+              />
+              <Paper className={classes.metadataContainer}>
+                <Field
+                  component={TextField}
+                  name="workUnitMetadata.version"
+                  label="Version"
+                  fullWidth
+                  readonly
+                  margin="normal"
+                />
+                <ol className={classes.metadataList}>
+                  {units.map((unit, index) => {
+                    return (
+                      <li key={unit} className={classes.metadataItem}>
+                        <Field
+                          name={`workUnitMetadata.units[${index}].scripts]`}
+                          component={ScriptsField}
+                          label={`${unit} Scripts`}
+                          fullWidth
+                          multiline
+                          margin="normal"
+                        />
+                      </li>
+                    );
+                  })}
+                </ol>
+              </Paper>
+              {isSubmitting && <LinearProgress />}
+              <Button
+                variant="contained"
+                color="primary"
+                disabled={isSubmitting}
+                onClick={submitForm}
+                fullWidth
+              >
+                Submit
+              </Button>
+            </Form>
+          );
+        }}
+      </Formik>
+    </Paper>
+  );
+};
+
+const ScriptsField: FC<TextFieldProps> = ({ field, form, meta, ...props }) => {
+  return (
+    <TextField
+      {...props}
+      form={form}
+      meta={meta}
+      field={{
+        ...field,
+        onBlur: (ev: React.FocusEvent) => {
+          form.setFieldValue(
+            field.name,
+            field.value.filter((it: string) => !!it)
+          );
+          return field.onBlur(ev);
+        },
+        value: field.value?.join("\n") ?? "",
+        onChange: (ev: ChangeEvent<HTMLInputElement>) =>
+          form.setFieldValue(
+            field.name,
+            ev.target.value?.split("\n").map((it) => it) ?? []
+          ),
+      }}
+    />
+  );
+};

src/pipelines/pipeline-list.tsx

@@ -0,0 +1,192 @@
+import { gql, useQuery } from "@apollo/client";
+import { Link, useRouter } from "@curi/react-dom";
+import {
+  List,
+  ListItem,
+  Typography,
+  ListItemText,
+  Menu,
+  MenuItem,
+  PopoverPosition,
+} from "@mui/material";
+import { FC, useMemo, useState, MouseEvent } from "react";
+import { Pipeline, Project } from "../generated/graphql";
+import { CallMerge } from "@mui/icons-material";
+import { Divider } from "@material-ui/core";
+import { Box } from "@mui/system";
+import {
+  faCodeBranch,
+  faMapMarkerAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface Props {
+  projectId: string;
+}
+
+const PIPELINES = gql`
+  query Pipelines($projectId: String!) {
+    pipelines(projectId: $projectId) {
+      id
+      name
+      branch
+      environment
+    }
+    project(id: $projectId) {
+      id
+    }
+  }
+`;
+
+export const PipelineList: FC<Props> = ({ projectId }) => {
+  const { data } = useQuery<
+    { pipelines: Pipeline[]; project: Project },
+    { projectId: string }
+  >(PIPELINES, {
+    variables: { projectId },
+  });
+  const pipelines = useMemo(() => {
+    return data?.pipelines?.map((pipeline) => ({
+      ...pipeline,
+      project: data?.project,
+    }));
+  }, [data]);
+
+  const [contextMenu, setContextMenu] = useState<[PopoverPosition, Pipeline]>();
+  const { navigate, url } = useRouter();
+
+  const handleContextMenu = (event: MouseEvent, pipeline: Pipeline | false) => {
+    event.preventDefault();
+    if (pipeline) {
+      setContextMenu([
+        { top: event.clientY - 4, left: event.clientX - 2 },
+        pipeline,
+      ]);
+    } else {
+      setContextMenu(undefined);
+    }
+  };
+
+  const handleClose = () => {
+    setContextMenu(undefined);
+  };
+
+  const modify = () => {
+    navigate({
+      url: url({
+        name: "edit-pipeline",
+        params: {
+          pipelineId: contextMenu![1].id,
+          projectId: contextMenu![1].project.id,
+        },
+      }),
+    });
+  };
+  const modifyRuntimeConfiguration = () => {
+    navigate({
+      url: url({
+        name: "edit-runtime-configuration",
+        params: {
+          pipelineId: contextMenu![1].id,
+          projectId: contextMenu![1].project.id,
+        },
+      }),
+    });
+  };
+
+  return (
+    <>
+      <List>
+        {pipelines?.map((pipeline) => (
+          <Link
+            name="pipeline-commits"
+            params={{ pipelineId: pipeline.id, projectId: projectId }}
+            key={pipeline.id}
+            onContextMenu={(ev) => handleContextMenu(ev, pipeline)}
+          >
+            <Item pipeline={pipeline} />
+          </Link>
+        ))}
+      </List>
+      <Menu
+        keepMounted
+        open={!!contextMenu}
+        onClose={handleClose}
+        onContextMenu={(ev) => handleContextMenu(ev, false)}
+        anchorReference="anchorPosition"
+        anchorPosition={contextMenu?.[0]}
+      >
+        <MenuItem
+          onClick={() => {
+            modifyRuntimeConfiguration();
+            handleClose();
+          }}
+        >
+          Runtime Config
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            modify();
+            handleClose();
+          }}
+        >
+          Pipeline Config
+        </MenuItem>
+        <Divider />
+        <MenuItem sx={{ color: "error.main" }} onClick={handleClose}>
+          Delete
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+const Item = ({ pipeline }: { pipeline: Pipeline }) => {
+  return (
+    <ListItem button>
+      <ListItemText
+        primary={pipeline.name}
+        secondary={
+          <Box sx={{ display: "flex", flexFlow: "column" }}>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <FontAwesomeIcon
+                style={{ width: "1em", marginRight: "0.5em" }}
+                icon={faCodeBranch}
+              />
+              <Typography
+                component="span"
+                variant="body2"
+                color="textSecondary"
+              >
+                {pipeline.branch}
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <FontAwesomeIcon
+                style={{ width: "1em", marginRight: "0.5em" }}
+                icon={faMapMarkerAlt}
+              />
+              <Typography
+                component="span"
+                variant="body2"
+                color="textSecondary"
+              >
+                {pipeline.environment}
+              </Typography>
+            </Box>
+          </Box>
+        }
+      />
+    </ListItem>
+  );
+};

src/pipelines/queries.ts

@@ -0,0 +1,36 @@
+import { gql } from "@apollo/client";
+
+export const PIPELINE = gql`
+  query Pipeline($id: String!) {
+    pipeline(id: $id) {
+      id
+      name
+      projectId
+      branch
+      environment
+      workUnitMetadata {
+        version
+        units {
+          type
+          scripts
+        }
+      }
+    }
+  }
+`;
+
+export const CONFIGURATION = gql`
+  query QueryGetConfigurationArgs($pipelineId: String!, $projectId: String!) {
+    configuration: getConfiguration(
+      pipelineId: $pipelineId
+      projectId: $projectId
+    ) {
+      id
+      content
+      language
+      pipelineId
+      projectId
+      name
+    }
+  }
+`;

src/pipelines/runtime-config-editor.tsx

@@ -0,0 +1,49 @@
+import { useMutation } from "@apollo/client";
+import { useRouter } from "@curi/react-universal";
+import { Button, Paper } from "@mui/material";
+import { Form, Formik } from "formik";
+import { FC, useCallback } from "react";
+import { YamlEditor } from "../commons/form/yaml-editor/yaml-editor";
+import { Configuration } from "../generated/graphql";
+import { SET_CONFIGURATION } from "./mutations";
+
+type Values = Configuration;
+
+interface Props {
+  configuration: Configuration;
+}
+export const RuntimeConfigEditor: FC<Props> = ({ configuration }) => {
+  const { history } = useRouter();
+  const [setConfiguration] =
+    useMutation<{ configuration: Configuration }>(SET_CONFIGURATION);
+  const submitForm = useCallback(
+    async (values: Values) => {
+      await setConfiguration({ variables: { configuration: values } });
+      history.go(-1);
+    },
+    [setConfiguration, history]
+  );
+  return (
+    <Paper sx={{ p: 2 }}>
+      <Formik<Values> initialValues={configuration ?? {}} onSubmit={submitForm}>
+        {({ submitForm, isSubmitting, values }) => {
+          return (
+            <Form>
+              <YamlEditor label="YAML" name="content" />
+              <Button
+                variant="contained"
+                color="primary"
+                type="submit"
+                disabled={isSubmitting}
+                onClick={submitForm}
+                fullWidth
+              >
+                Submit
+              </Button>
+            </Form>
+          );
+        }}
+      </Formik>
+    </Paper>
+  );
+};

src/projects/index.ts

@@ -0,0 +1,4 @@
+export * from './project-detail';
+export * from './project-panel';
+export * from './project-editor';
+export * from './queries';

src/projects/project-detail.tsx

@@ -0,0 +1,94 @@
+import { Project } from "../generated/graphql";
+import React, { FC, Fragment } from "react";
+import { IconButton, Grid, Paper, Portal, Typography, Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { useHeaderContainer } from "../layouts";
+import { PipelineList } from "../pipelines/pipeline-list";
+import { Edit } from '@mui/icons-material';
+import { Link } from '@curi/react-dom';
+import { Button } from "@mui/material";
+import { AddBox } from "@mui/icons-material";
+
+interface Props {
+  project: Project;
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    height: "100%",
+    flex: "auto",
+    overflow: "hidden"
+  },
+  pipelineListContainer: {
+    height: "100%",
+    width: "100%",
+    overflow: "auto"
+  },
+}));
+
+export const ProjectDetail: FC<Props> = ({ project, children }) => {
+  const headerContainer = useHeaderContainer();
+
+  const classes = useStyles();
+
+  return (
+    <Fragment>
+      <Portal container={headerContainer}>
+        <Grid
+          container
+          spacing={3}
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Grid item>
+            <Typography component="h1" variant="h6" noWrap>
+              {project.name}
+            </Typography>
+            <Typography variant="subtitle2" gutterBottom noWrap>
+              {project.comment}
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Link name="edit-project" params={{ projectId: project.id }}>
+              <IconButton color="inherit" size="large">{<Edit />}</IconButton>
+            </Link>
+          </Grid>
+        </Grid>
+      </Portal>
+      <Grid
+        container
+        spacing={0}
+        direction="row"
+        alignItems="stretch"
+        className={classes.root}
+      >
+        <Grid item xs={3} lg={2} style={{ height: "100%", display: "flex" }}>
+          <Paper className={classes.pipelineListContainer}>
+            <Box m={2}>
+              <Link name="create-pipeline" params={{ projectId: project.id }}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  title="New Pipeline"
+                  startIcon={<AddBox />}
+                >
+                  New Pipeline
+                </Button>
+              </Link>
+            </Box>
+            <PipelineList projectId={project.id} />
+          </Paper>
+        </Grid>
+        <Grid
+          item
+          xs={9}
+          lg={10}
+          style={{ height: "100%", display: "flex", overflowY: "auto" }}
+        >
+          {children}
+        </Grid>
+      </Grid>
+    </Fragment>
+  );
+};

src/projects/project-editor.tsx

@@ -0,0 +1,261 @@
+import { gql, Reference, useMutation } from "@apollo/client";
+import { Button, LinearProgress, Paper, Portal, Typography, Grid, IconButton } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Form, Formik, Field, FormikHelpers } from "formik";
+import { TextField } from "formik-material-ui";
+import { not } from "ramda";
+import { FC } from "react";
+import { Project } from "../generated/graphql";
+import * as Yup from "yup";
+import { useRouter } from "@curi/react-dom";
+import { useHeaderContainer } from "../layouts";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useConfirm } from "material-ui-confirm";
+import { useSnackbar } from "notistack";
+
+type Values = Partial<Project>;
+
+interface Props {
+  project: Values;
+}
+
+const useStyles = makeStyles({
+  root: {
+    overflow: "hidden",
+  },
+  form: {
+    margin: 16,
+  },
+});
+
+const CREATE_PROJECT = gql`
+  mutation CreateProject($input: CreateProjectInput!) {
+    createProject(project: $input) {
+      id
+      name
+      comment
+      webUrl
+      webHookSecret
+      sshUrl
+    }
+  }
+`;
+
+const UPDATE_PROJECT = gql`
+  mutation UpdateProject($input: UpdateProjectInput!) {
+    updateProject(project: $input) {
+      id
+      name
+      comment
+      webUrl
+      webHookSecret
+      sshUrl
+    }
+  }
+`;
+
+const REMOVE_PROJECT = gql`
+  mutation RemoveProject($id: String!) {
+    removeProject(id: $id)
+  }
+`;
+
+export const ProjectEditor: FC<Props> = ({ project }) => {
+  const isCreate = not("id" in project);
+
+  const [createProject] = useMutation<{ createProject: Project }>(
+    CREATE_PROJECT,
+    {
+      update(cache, { data }) {
+        cache.modify({
+          fields: {
+            projects(exitingProjects = []) {
+              const newProjectRef = cache.writeFragment({
+                data: data!.createProject,
+                fragment: gql`
+                  fragment newProject on Project {
+                    id
+                    name
+                    comment
+                    webUrl
+                    sshUrl
+                    webHookSecret
+                  }
+                `,
+              });
+              return [newProjectRef, ...exitingProjects];
+            },
+          },
+        });
+      },
+    }
+  );
+  const [updateProject] = useMutation(UPDATE_PROJECT);
+
+  const router = useRouter();
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const submitForm = async (
+    values: Values,
+    formikHelpers: FormikHelpers<Values>
+  ) => {
+    try {
+      let projectId: string | undefined = project.id;
+      if (isCreate) {
+        await createProject({
+          variables: {
+            input: values,
+          },
+        }).then(({ data }) => (projectId = data!.createProject.id));
+      } else {
+        await updateProject({
+          variables: {
+            id: (project as Project).id,
+            input: values,
+          },
+        });
+      }
+      enqueueSnackbar("Saved successfully", {
+        variant: "success",
+      });
+      router.navigate({
+        url: router.url({
+          name: "project-detail",
+          params: {
+            projectId,
+          },
+        }),
+        method: "replace",
+      });
+    } finally {
+      formikHelpers.setSubmitting(false);
+    }
+  };
+
+  const [removeProject, { loading: deleting }] = useMutation(REMOVE_PROJECT, {
+    variables: { id: project.id },
+    update(cache) {
+      cache.modify({
+        fields: {
+          projects(exitingProjects: Reference[] = [], { readField }) {
+            return exitingProjects.filter(
+              (ref) => project.id !== readField("id", ref)
+            );
+          },
+        },
+      });
+    },
+  });
+
+  const confirm = useConfirm();
+  const handleDelete = async () => {
+    try {
+      await confirm({ description: `This will delete ${project.name}.` });
+      await removeProject();
+      enqueueSnackbar("Deleted successfully", {
+        variant: "success",
+      });
+      router.navigate({
+        url: router.url({
+          name: "dashboard",
+        }),
+      });
+    } catch {}
+  };
+
+  const headerContainer = useHeaderContainer();
+
+  const classes = useStyles();
+  return (
+    <Paper className={classes.root}>
+      <Portal container={headerContainer}>
+        <Grid container justifyContent="space-between" alignItems="center">
+          <Typography variant="h6" component="h1">
+            {isCreate ? "Create" : "Edit"} Project
+          </Typography>
+          {isCreate ? null : (
+            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
+              <DeleteIcon />
+            </IconButton>
+          )}
+        </Grid>
+      </Portal>
+      <Formik
+        initialValues={project}
+        validationSchema={Yup.object({
+          name: Yup.string()
+            .max(32, "Must be 32 characters or less")
+            .required("Required"),
+          comment: Yup.string()
+            .max(32, "Must be 32 characters or less")
+            .required("Required"),
+          webUrl: Yup.string()
+            .matches(
+              /^(https?:\/\/)?([\da-z.-]+\.[a-z.]{2,6}|[\d.]+)([\\/:?=&#]{1}[\da-z.-]+)*[/\\?]?$/i,
+              "Enter correct url!"
+            )
+            .max(256, "Must be 256 characters or less")
+            .required("Required"),
+          sshUrl: Yup.string()
+            .matches(
+              /^(?:ssh:\/\/)?(?:[\w\d-_]+@)?(?:[\w\d-_]+\.)*\w{2,10}(?::\d{1,5})?(?:\/[\w\d-_.]+)*$/,
+              "Enter correct url!"
+            )
+            .max(256, "Must be 256 characters or less")
+            .required("Required"),
+          webHookSecret: Yup.string()
+            .max(16, "Must be 16 characters or less")
+            .required("Required"),
+        })}
+        onSubmit={submitForm}
+      >
+        {({ submitForm, isSubmitting }) => (
+          <Form className={classes.form}>
+            <Field component={TextField} name="name" label="Name" fullWidth />
+            <Field
+              component={TextField}
+              name="comment"
+              label="Comment"
+              fullWidth
+              margin="normal"
+            />
+            <Field
+              component={TextField}
+              name="webUrl"
+              label="Project URL"
+              placeholder="The project website url"
+              fullWidth
+              margin="normal"
+            />
+            <Field
+              component={TextField}
+              name="sshUrl"
+              label="Git SSH URL"
+              placeholder="The Git remote SSH URL"
+              fullWidth
+              margin="normal"
+            />
+            <Field
+              component={TextField}
+              name="webHookSecret"
+              label="Webhook Secret"
+              fullWidth
+              margin="normal"
+            />
+            {isSubmitting && <LinearProgress />}
+            <Button
+              variant="contained"
+              color="primary"
+              disabled={isSubmitting}
+              onClick={submitForm}
+              fullWidth
+            >
+              Submit
+            </Button>
+          </Form>
+        )}
+      </Formik>
+    </Paper>
+  );
+};

src/projects/project-panel.tsx

@@ -0,0 +1,85 @@
+import { gql, useQuery } from "@apollo/client";
+import { Link } from "@curi/react-dom";
+import { Box, List, ListItem, Theme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { FC } from "react";
+import { Project } from "../generated/graphql";
+import { ListItemText } from "@mui/material";
+import { Button } from "@mui/material";
+import { AddBox } from "@mui/icons-material";
+import { ActiveLink } from "../commons/route/active-link";
+
+const PROJECTS = gql`
+  query Projects {
+    projects {
+      id
+      name
+      comment
+      sshUrl
+      webUrl
+      webHookSecret
+    }
+  }
+`;
+
+const useStyles = makeStyles((theme: Theme) => ({
+  item: {
+    position: "relative",
+    ".active &": {
+      backgroundColor: theme.palette.background.default,
+    },
+    ".active &::before": {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      content: '""',
+      display: "block",
+      borderLeftColor: theme.palette.secondary.main,
+      borderLeftWidth: 4,
+      borderLeftStyle: "solid",
+    },
+  },
+}));
+
+export function ProjectPanel() {
+  return (
+    <section>
+      <Box m={2}>
+        <Link name="create-project">
+          <Button
+            variant="contained"
+            color="primary"
+            title="New Project"
+            startIcon={<AddBox />}
+          >
+            New Project
+          </Button>
+        </Link>
+      </Box>
+      <ProjectList />
+    </section>
+  );
+}
+
+const ProjectList: FC<{}> = () => {
+  const { data } = useQuery<{
+    projects: Project[];
+  }>(PROJECTS);
+  const projects = data?.projects;
+
+  const classes = useStyles();
+
+  const items = projects?.map((item) => (
+    <ActiveLink
+      name="project-detail"
+      params={{ projectId: item.id }}
+      key={item.id}
+    >
+      <ListItem button className={classes.item}>
+        <ListItemText primary={item.name} secondary={item.comment} />
+      </ListItem>
+    </ActiveLink>
+  ));
+  return <List>{items}</List>;
+};

src/projects/queries.ts

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const PROJECT = gql`
+query Project($id:String!) {
+  project(id: $id) {
+    id
+    name
+    comment
+    webUrl
+    sshUrl
+    webHookSecret
+  }
+}
+`

src/routes.tsx

@@ -0,0 +1,228 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+import { prepareRoutes } from "@curi/router";
+import { omit } from "ramda";
+import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
+import { COMMIT_LIST_QUERY } from "./commons/graphql/queries";
+import { CommitList } from "./commits/commit-list";
+import { PipelineTaskDetail } from "./pipeline-tasks/pipeline-task-detail";
+import { PipelineEditor } from "./pipelines/pipeline-editor";
+import {
+  Configuration,
+  ConfigurationLanguage,
+  CreatePipelineInput,
+  CreateProjectInput,
+  Pipeline,
+  PipelineUnits,
+  Project,
+} from "./generated/graphql";
+import { CONFIGURATION, PIPELINE, RuntimeConfigEditor } from "./pipelines";
+
+export default prepareRoutes([
+  {
+    name: "dashboard",
+    path: "",
+    respond() {
+      return { body: () => <div>DashBoard</div> };
+    },
+  }, // dashboard
+  {
+    name: "create-project",
+    path: "projects/create",
+    respond({ resolved }) {
+      const input: CreateProjectInput = {
+        name: "",
+        comment: "",
+        webHookSecret: "",
+        sshUrl: "",
+        webUrl: "",
+      };
+      return { body: () => <ProjectEditor project={input} /> };
+    },
+  }, // create-project
+  {
+    name: "edit-project",
+    path: "projects/:projectId/edit",
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      const { data } = await client.query<{ project: Project }>({
+        query: PROJECT,
+        variables: { id: matched?.params.projectId },
+      });
+      return {
+        body: () => (
+          <ProjectEditor project={omit(["__typename"], data.project)} />
+        ),
+      };
+    },
+    respond({ resolved }) {
+      return resolved;
+    },
+  }, // edit-project
+  {
+    name: "create-pipeline",
+    path: "projects/:projectId/pipelines/create",
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      const units = [
+        PipelineUnits.Checkout,
+        PipelineUnits.InstallDependencies,
+        PipelineUnits.Test,
+        PipelineUnits.Deploy,
+        PipelineUnits.CleanUp,
+      ];
+      const input: CreatePipelineInput = {
+        name: "",
+        branch: "",
+        projectId: matched!.params.projectId,
+        workUnitMetadata: {
+          version: 1,
+          units: units.map((util) => ({ type: util, scripts: [] })),
+        },
+      };
+      return {
+        body: () => <PipelineEditor pipeline={input as any} />,
+      };
+    },
+    respond({ resolved }) {
+      return resolved;
+    },
+  }, // create-pipeline
+  {
+    name: "edit-pipeline",
+    path: "projects/:projectId/pipelines/:pipelineId/edit",
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      const { data } = await client.query<{ pipeline: Pipeline }>({
+        query: PIPELINE,
+        variables: { id: matched?.params.pipelineId },
+      });
+      return {
+        body: () => <PipelineEditor pipeline={data.pipeline} />,
+      };
+    },
+    respond({ resolved }) {
+      return resolved;
+    },
+  }, // edit-pipeline
+  {
+    name: "edit-runtime-configuration",
+    path: "projects/:projectId/pipelines/:pipelineId/runtime-configuration",
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      const { data } = await client.query<{ configuration: Configuration }>({
+        query: CONFIGURATION,
+        variables: {
+          pipelineId: matched?.params.pipelineId,
+          projectId: matched?.params.projectId,
+        },
+      });
+      return {
+        body: () => (
+          <RuntimeConfigEditor
+            configuration={
+              data.configuration ?? {
+                name: "Default Configuration",
+                pipelineId: matched?.params.pipelineId,
+                projectId: matched?.params.projectId,
+                language: ConfigurationLanguage.Yaml,
+                content: null,
+              }
+            }
+          />
+        ),
+      };
+    },
+    respond({ resolved }) {
+      return resolved;
+    },
+  }, // edit-pipeline
+  {
+    name: "project-detail",
+    path: "projects/:projectId",
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      const { data } = await client.query<{ project: Project }>({
+        query: PROJECT,
+        variables: { id: matched?.params.projectId },
+      });
+      return {
+        body: () => (
+          <ProjectDetail project={omit(["__typename"], data.project)} />
+        ),
+      };
+    },
+    respond({ resolved }) {
+      return resolved;
+    },
+    children: [
+      {
+        name: "pipeline-commits",
+        path: "pipelines/:pipelineId/commits",
+        async resolve(
+          matched,
+          { client }: { client: ApolloClient<InMemoryCache> }
+        ) {
+          const { data } = await client.query<{
+            pipeline: Pipeline;
+            project: Project;
+          }>({
+            query: COMMIT_LIST_QUERY,
+            variables: {
+              projectId: matched?.params.projectId,
+              pipelineId: matched?.params.pipelineId,
+            },
+          });
+          return {
+            body: () => (
+              <ProjectDetail project={omit(["__typename"], data.project)}>
+                <CommitList pipeline={omit(["__typename"], data.pipeline)} />
+              </ProjectDetail>
+            ),
+          };
+        },
+        respond({ resolved, error }) {
+          return resolved || <div>Failed</div>;
+        },
+      }, // pipeline-commits
+      {
+        name: "pipeline-task-detail",
+        path: "pipelines/:pipelineId/tasks/:taskId",
+        async resolve(
+          matched,
+          { client }: { client: ApolloClient<InMemoryCache> }
+        ) {
+          const { data } = await client.query<{
+            pipeline: Pipeline;
+            project: Project;
+          }>({
+            query: COMMIT_LIST_QUERY,
+            variables: {
+              projectId: matched?.params.projectId,
+              pipelineId: matched?.params.pipelineId,
+            },
+          });
+          return {
+            body: () => (
+              <ProjectDetail project={omit(["__typename"], data.project)}>
+                <PipelineTaskDetail taskId={matched?.params.taskId} />
+              </ProjectDetail>
+            ),
+          };
+        },
+        respond({ resolved, error }) {
+          return resolved || <div>Failed</div>;
+        },
+      }, // pipeline-task-detail
+    ],
+  }, // project-detail
+]);

src/utils/deep-omit.ts

@@ -0,0 +1,22 @@
+import { fromPairs, map, omit, pipe, toPairs, type } from "ramda";
+
+export const deepOmit = <T = any, K = any>(
+  names: readonly string[],
+  value: K
+): T => {
+  switch (type(value)) {
+    case "Array":
+      return (value as unknown as Array<any>).map((item: any) =>
+        deepOmit(names, item)
+      ) as unknown as T;
+    case "Object":
+      return pipe(
+        omit(names),
+        toPairs,
+        map(([key, val]) => [key, deepOmit(names, val)] as any),
+        fromPairs
+      )(value) as unknown as T;
+    default:
+      return value as unknown as T;
+  }
+};