Fennec/fennec-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ivan Li 2021-10-19 23:05:59 +08:00
parent e8620c2818
commit 832d77d57a
8 changed files with 98 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@ -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/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@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",
@ -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",
"resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.15.tgz",
"integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==",
"version": "0.1.16",
"resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.16.tgz",
"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",
"resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.15.tgz",
"integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==",
"version": "0.1.16",
"resolved": "https://npm.ivanli.cc/@fortawesome%2freact-fontawesome/-/react-fontawesome-0.1.16.tgz",
"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": {

6
package.json
View File

@ -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/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@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",

16
src/generated/graphql.schema.json
View File

@ -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,

1
src/generated/graphql.tsx
View File

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

2
src/pipelines/mutations.ts
View File

@ -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 {

20
src/pipelines/pipeline-editor.tsx
View File

@ -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}

49
src/pipelines/pipeline-list.tsx
View File

@ -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">
<CallMerge fontSize="small" />
{pipeline.branch}
</Typography>
<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>

1
src/pipelines/queries.ts
View File

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