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

package-lock.json

@@ -14,9 +14,9 @@
         "@curi/router": "^2.1.2",
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
-        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/react-fontawesome": "^0.1.14",
+        "@fortawesome/react-fontawesome": "^0.1.16",
         "@hickory/browser": "^2.1.0",
         "@mui/icons-material": "^5.0.1",
         "@mui/lab": "^5.0.0-alpha.49",
@@ -79,7 +79,7 @@
         "@types/node": "^14.17.17",
         "rimraf": "^3.0.2",
         "ts-node": "^10.2.1",
-        "typescript": "^4.4.3"
+        "typescript": "^4.4.4"
       }
     },
     "node_modules/@apollo/client": {
@@ -2493,15 +2493,15 @@
       }
     },
     "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.15",
+      "version": "0.1.16",
-      "resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.15.tgz",
+      "resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.16.tgz",
-      "integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==",
+      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
       "license": "MIT",
       "dependencies": {
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
         "react": ">=16.x"
       }
     },
@@ -33044,9 +33044,9 @@
       }
     },
     "@fortawesome/react-fontawesome": {
-      "version": "0.1.15",
+      "version": "0.1.16",
-      "resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.15.tgz",
+      "resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.16.tgz",
-      "integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==",
+      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
       "requires": {
         "prop-types": "^15.7.2"
       }
@@ -38295,7 +38295,7 @@
         "js-yaml": "^4.1.0",
         "rimraf": "^3.0.2",
         "ts-node": "^10.2.1",
-        "typescript": "^4.4.3"
+        "typescript": "^4.4.4"
       }
     },
     "confusing-browser-globals": {

package.json

@@ -9,9 +9,9 @@
     "@curi/router": "^2.1.2",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@hickory/browser": "^2.1.0",
     "@mui/icons-material": "^5.0.1",
     "@mui/lab": "^5.0.0-alpha.49",

src/generated/graphql.schema.json

@@ -1176,6 +1176,22 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "environment",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

src/generated/graphql.tsx

@@ -148,6 +148,7 @@ export type Pipeline = {
   branch: Scalars['String'];
   name: Scalars['String'];
   workUnitMetadata: WorkUnitMetadata;
+  environment: Scalars['String'];
 };
 
 export type PipelineTask = {

src/pipelines/mutations.ts

@@ -7,6 +7,7 @@ export const CREATE_PIPELINE = gql`
       projectId
       branch
       name
+      environment
       workUnitMetadata {
         version
         units {
@@ -25,6 +26,7 @@ export const UPDATE_PIPELINE = gql`
       projectId
       branch
       name
+      environment
       workUnitMetadata {
         version
         units {

src/pipelines/pipeline-editor.tsx

@@ -61,6 +61,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
                     id
                     projectId
                     branch
+                    environment
                     name
                     workUnitMetadata {
                       version
@@ -173,7 +174,12 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
             {isCreate ? "Create" : "Edit"} Pipeline
           </Typography>
           {isCreate ? null : (
-            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
+            <IconButton
+              color="inherit"
+              onClick={handleDelete}
+              disabled={deleting}
+              size="large"
+            >
               <Delete />
             </IconButton>
           )}
@@ -186,7 +192,10 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
             .max(32, "Must be 32 characters or less")
             .required("Required"),
           branch: Yup.string()
-            .max(32, "Must be 32 characters or less")
+            .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}
@@ -202,6 +211,13 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
                 fullWidth
                 margin="normal"
               />
+              <Field
+                component={TextField}
+                name="environment"
+                label="Environment"
+                fullWidth
+                margin="normal"
+              />
               <Paper className={classes.metadataContainer}>
                 <Field
                   component={TextField}

src/pipelines/pipeline-list.tsx

@@ -13,6 +13,12 @@ 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;
@@ -24,6 +30,7 @@ const PIPELINES = gql`
       id
       name
       branch
+      environment
     }
     project(id: $projectId) {
       id
@@ -140,10 +147,44 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
       <ListItemText
         primary={pipeline.name}
         secondary={
-          <Typography component="span" variant="body2" color="textSecondary">
+          <Box sx={{ display: "flex", flexFlow: "column" }}>
-            <CallMerge fontSize="small" />
+            <Box
-            {pipeline.branch}
+              sx={{
-          </Typography>
+                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

@@ -7,6 +7,7 @@ export const PIPELINE = gql`
       name
       projectId
       branch
+      environment
       workUnitMetadata {
         version
         units {