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

Compare commits

base: Fennec:60d7d7fe5cba8a4446fa2a79c940f3e641069e67
Branches Tags
Fennec:master Fennec:develop Fennec:v0.1.0-preact-version
..
compare: Fennec:develop
Branches Tags
Fennec:develop Fennec:master Fennec:v0.1.0-preact-version

4 Commits
60d7d7fe5c ... develop

Author SHA1 Message Date
Ivan Li
832d77d57a feat: 添加 pipeline 的部署环境配置与展示。 2021-10-19 23:05:59 +08:00
Ivan Li
e8620c2818 fix: snackbar 导致界面不可点击的问题 2021-10-04 11:05:59 +08:00
Ivan Li
320506af68 feat(pipelines): runtime configuration. 2021-10-04 09:54:10 +08:00
Ivan Li
5d01389f3b feat(pipelines): 列表添加右键菜单。 2021-10-01 15:40:21 +08:00
16 changed files with 6613 additions and 2408 deletions
Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -1,8 +1,9 @@
{ {
"cSpell.words": [ "cSpell.words": [
"Formik",
"clsx", "clsx",
"fontsource", "fontsource",
"Formik",
"noconflict",
"notistack", "notistack",
"unmount", "unmount",
"vditor" "vditor"

8249
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@@ -9,9 +9,9 @@
"@curi/router": "^2.1.2", "@curi/router": "^2.1.2",
"@emotion/react": "^11.4.1", "@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0", "@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", "@hickory/browser": "^2.1.0",
"@mui/icons-material": "^5.0.1", "@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.49", "@mui/lab": "^5.0.0-alpha.49",
@@ -24,6 +24,7 @@
"@types/node": "^12.20.10", "@types/node": "^12.20.10",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3", "@types/react-dom": "^17.0.3",
"ace-builds": "^1.4.13",
"apollo-link-scalars": "^2.1.3", "apollo-link-scalars": "^2.1.3",
"configuration": "file:../configuration", "configuration": "file:../configuration",
"date-fns": "^2.21.1", "date-fns": "^2.21.1",
@@ -34,9 +35,10 @@
"graphql": "^15.5.0", "graphql": "^15.5.0",
"graphql-scalars": "^1.10.0", "graphql-scalars": "^1.10.0",
"material-ui-confirm": "^2.1.2", "material-ui-confirm": "^2.1.2",
"notistack": "^1.0.6", "notistack": "^2.0.2",
"ramda": "^0.27.1", "ramda": "^0.27.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-ace": "^9.4.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"typescript": "^4.2.4", "typescript": "^4.2.4",

3
src/App.tsx
View File

@@ -6,6 +6,9 @@ function App() {
const { response } = useResponse(); const { response } = useResponse();
const { body: Body } = response; const { body: Body } = response;
if (!Body) {
return <DefaultLayout> Client has some wrong!</DefaultLayout>;
}
return ( return (
<DefaultLayout> <DefaultLayout>
<Body response={response} /> <Body response={response} />

1
src/commons/auth/login.tsx
View File

@@ -2,7 +2,6 @@ import makeStyles from "@mui/styles/makeStyles";
import { FC, Fragment, useEffect, useRef } from "react"; import { FC, Fragment, useEffect, useRef } from "react";
import { useAuth } from "./auth.provider"; import { useAuth } from "./auth.provider";
const useStyles = makeStyles((theme) => { const useStyles = makeStyles((theme) => {
debugger;
return { return {
iframe: { iframe: {
height: "300px", height: "300px",

28
src/commons/form/yaml-editor/yaml-editor.tsx Normal file
View File

@@ -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),
}));

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

@@ -167,6 +167,178 @@
"enumValues": null, "enumValues": null,
"possibleTypes": null "possibleTypes": null
}, },
{
"kind": "OBJECT",
"name": "Configuration",
"description": null,
"fields": [
{
"name": "id",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "ID",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "pipeline",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Pipeline",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "pipelineId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "project",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Project",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "content",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "language",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "ConfigurationLanguage",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "ID",
"description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "ENUM",
"name": "ConfigurationLanguage",
"description": null,
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": [
{
"name": "JavaScript",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "YAML",
"description": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"possibleTypes": null
},
{ {
"kind": "INPUT_OBJECT", "kind": "INPUT_OBJECT",
"name": "CreatePipelineInput", "name": "CreatePipelineInput",
@@ -844,6 +1016,39 @@
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "deprecationReason": null
},
{
"name": "setConfiguration",
"description": null,
"args": [
{
"name": "setConfigurationInput",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "SetConfigurationInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
} }
], ],
"inputFields": null, "inputFields": null,
@@ -971,6 +1176,22 @@
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "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, "inputFields": null,
@@ -978,16 +1199,6 @@
"enumValues": null, "enumValues": null,
"possibleTypes": null "possibleTypes": null
}, },
{
"kind": "SCALAR",
"name": "ID",
"description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{ {
"kind": "OBJECT", "kind": "OBJECT",
"name": "PipelineTask", "name": "PipelineTask",
@@ -1783,6 +1994,55 @@
}, },
"isDeprecated": false, "isDeprecated": false,
"deprecationReason": null "deprecationReason": null
},
{
"name": "getConfiguration",
"description": null,
"args": [
{
"name": "pipelineId",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "id",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
},
"isDeprecated": false,
"deprecationReason": null
} }
], ],
"inputFields": null, "inputFields": null,
@@ -1790,6 +2050,105 @@
"enumValues": null, "enumValues": null,
"possibleTypes": null "possibleTypes": null
}, },
{
"kind": "INPUT_OBJECT",
"name": "SetConfigurationInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "id",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "pipelineId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "content",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "language",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "ConfigurationLanguage",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": "\"Default Configuration\"",
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{ {
"kind": "OBJECT", "kind": "OBJECT",
"name": "Subscription", "name": "Subscription",

41
src/generated/graphql.tsx
View File

@@ -26,6 +26,23 @@ export type Commit = {
tasks: Array<PipelineTask>; 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 = { export type CreatePipelineInput = {
projectId: Scalars['String']; projectId: Scalars['String'];
branch: Scalars['String']; branch: Scalars['String'];
@@ -75,6 +92,7 @@ export type Mutation = {
deletePipeline: Scalars['Float']; deletePipeline: Scalars['Float'];
createPipelineTask: PipelineTask; createPipelineTask: PipelineTask;
stopPipelineTask: Scalars['Boolean']; stopPipelineTask: Scalars['Boolean'];
setConfiguration: Configuration;
}; };
@@ -117,6 +135,11 @@ export type MutationStopPipelineTaskArgs = {
id: Scalars['String']; id: Scalars['String'];
}; };
export type MutationSetConfigurationArgs = {
setConfigurationInput: SetConfigurationInput;
};
export type Pipeline = { export type Pipeline = {
__typename?: 'Pipeline'; __typename?: 'Pipeline';
id: Scalars['ID']; id: Scalars['ID'];
@@ -125,6 +148,7 @@ export type Pipeline = {
branch: Scalars['String']; branch: Scalars['String'];
name: Scalars['String']; name: Scalars['String'];
workUnitMetadata: WorkUnitMetadata; workUnitMetadata: WorkUnitMetadata;
environment: Scalars['String'];
}; };
export type PipelineTask = { export type PipelineTask = {
@@ -191,6 +215,7 @@ export type Query = {
commits?: Maybe<Array<Commit>>; commits?: Maybe<Array<Commit>>;
listPipelineTaskByPipelineId: Array<PipelineTask>; listPipelineTaskByPipelineId: Array<PipelineTask>;
pipelineTask: PipelineTask; pipelineTask: PipelineTask;
getConfiguration?: Maybe<Configuration>;
}; };
@@ -223,6 +248,22 @@ export type QueryPipelineTaskArgs = {
id: Scalars['String']; 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 = { export type Subscription = {
__typename?: 'Subscription'; __typename?: 'Subscription';
syncCommits?: Maybe<Scalars['String']>; syncCommits?: Maybe<Scalars['String']>;

7
src/index.tsx
View File

@@ -9,8 +9,7 @@ import { ConfirmProvider } from "material-ui-confirm";
import { SnackbarProvider } from "notistack"; import { SnackbarProvider } from "notistack";
import Router from "./commons/route/router"; import Router from "./commons/route/router";
import { AuthProvider } from "./commons/auth/auth.provider"; import { AuthProvider } from "./commons/auth/auth.provider";
import { LocalizationProvider } from "@mui/lab"; import { zhCN } from "@mui/material/locale";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import { import {
ThemeProvider, ThemeProvider,
Theme, Theme,
@@ -23,7 +22,7 @@ declare module "@mui/styles/defaultTheme" {
interface DefaultTheme extends Theme {} interface DefaultTheme extends Theme {}
} }
const theme = createTheme(); const theme = createTheme({}, zhCN);
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
@@ -33,11 +32,9 @@ ReactDOM.render(
<SnackbarProvider maxSnack={5}> <SnackbarProvider maxSnack={5}>
<AuthProvider> <AuthProvider>
<AppApolloClientProvider> <AppApolloClientProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Router> <Router>
<App /> <App />
</Router> </Router>
</LocalizationProvider>
</AppApolloClientProvider> </AppApolloClientProvider>
</AuthProvider> </AuthProvider>
</SnackbarProvider> </SnackbarProvider>

1
src/pipelines/index.ts
View File

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

11
src/pipelines/mutations.ts
View File

@@ -7,6 +7,7 @@ export const CREATE_PIPELINE = gql`
projectId projectId
branch branch
name name
environment
workUnitMetadata { workUnitMetadata {
version version
units { units {
@@ -25,6 +26,7 @@ export const UPDATE_PIPELINE = gql`
projectId projectId
branch branch
name name
environment
workUnitMetadata { workUnitMetadata {
version version
units { units {
@@ -41,3 +43,12 @@ export const DELETE_PIPELINE = gql`
deletePipeline(id: $id) deletePipeline(id: $id)
} }
`; `;
export const SET_CONFIGURATION = gql`
mutation SetConfiguration($configuration: SetConfigurationInput!) {
setConfiguration(setConfigurationInput: $configuration) {
id
}
}
`;

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

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

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

@@ -5,16 +5,20 @@ import {
ListItem, ListItem,
Typography, Typography,
ListItemText, ListItemText,
ListItemSecondaryAction,
IconButton,
Menu, Menu,
MenuItem, MenuItem,
PopoverPosition, PopoverPosition,
} from "@mui/material"; } from "@mui/material";
import { FC, MouseEventHandler, useMemo, useState } from "react"; import { FC, useMemo, useState, MouseEvent } from "react";
import { Pipeline, Project } from "../generated/graphql"; import { Pipeline, Project } from "../generated/graphql";
import { CallMerge, Edit } from "@mui/icons-material"; import { CallMerge } from "@mui/icons-material";
import { any, values } from "ramda"; 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 { interface Props {
projectId: string; projectId: string;
@@ -26,6 +30,7 @@ const PIPELINES = gql`
id id
name name
branch branch
environment
} }
project(id: $projectId) { project(id: $projectId) {
id id
@@ -47,17 +52,48 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
})); }));
}, [data]); }, [data]);
const [contextMenu, setContextMenu] = useState<PopoverPosition>(); const [contextMenu, setContextMenu] = useState<[PopoverPosition, Pipeline]>();
const { navigate, url } = useRouter();
const handleContextMenu: MouseEventHandler = (event) => { const handleContextMenu = (event: MouseEvent, pipeline: Pipeline | false) => {
event.preventDefault(); event.preventDefault();
setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 }); if (pipeline) {
setContextMenu([
{ top: event.clientY - 4, left: event.clientX - 2 },
pipeline,
]);
} else {
setContextMenu(undefined);
}
}; };
const handleClose = () => { const handleClose = () => {
setContextMenu(undefined); 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 ( return (
<> <>
<List> <List>
@@ -66,7 +102,7 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
name="pipeline-commits" name="pipeline-commits"
params={{ pipelineId: pipeline.id, projectId: projectId }} params={{ pipelineId: pipeline.id, projectId: projectId }}
key={pipeline.id} key={pipeline.id}
onContextMenu={handleContextMenu} onContextMenu={(ev) => handleContextMenu(ev, pipeline)}
> >
<Item pipeline={pipeline} /> <Item pipeline={pipeline} />
</Link> </Link>
@@ -76,49 +112,81 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
keepMounted keepMounted
open={!!contextMenu} open={!!contextMenu}
onClose={handleClose} onClose={handleClose}
onContextMenu={(ev) => handleContextMenu(ev, false)}
anchorReference="anchorPosition" anchorReference="anchorPosition"
anchorPosition={ anchorPosition={contextMenu?.[0]}
contextMenu && any(Boolean, values(contextMenu))
? contextMenu
: undefined
}
> >
<MenuItem onClick={handleClose}>Copy</MenuItem> <MenuItem
<MenuItem onClick={handleClose}>Print</MenuItem> onClick={() => {
<MenuItem onClick={handleClose}>Highlight</MenuItem> modifyRuntimeConfiguration();
<MenuItem onClick={handleClose}>Email</MenuItem> handleClose();
}}
>
Runtime Config
</MenuItem>
<MenuItem
onClick={() => {
modify();
handleClose();
}}
>
Pipeline Config
</MenuItem>
<Divider />
<MenuItem sx={{ color: "error.main" }} onClick={handleClose}>
Delete
</MenuItem>
</Menu> </Menu>
</> </>
); );
}; };
const Item = ({ pipeline }: { pipeline: Pipeline }) => { const Item = ({ pipeline }: { pipeline: Pipeline }) => {
const { navigate, url } = useRouter();
const modify: MouseEventHandler = (ev) => {
ev.preventDefault();
navigate({
url: url({
name: "edit-pipeline",
params: { pipelineId: pipeline.id, projectId: pipeline.project.id },
}),
});
};
return ( return (
<ListItem button> <ListItem button>
<ListItemText <ListItemText
primary={pipeline.name} primary={pipeline.name}
secondary={ secondary={
<Typography component="span" variant="body2" color="textSecondary"> <Box sx={{ display: "flex", flexFlow: "column" }}>
<CallMerge fontSize="small" /> <Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<FontAwesomeIcon
style={{ width: "1em", marginRight: "0.5em" }}
icon={faCodeBranch}
/>
<Typography
component="span"
variant="body2"
color="textSecondary"
>
{pipeline.branch} {pipeline.branch}
</Typography> </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>
} }
/> />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="edit" onClick={modify} size="large">
<Edit />
</IconButton>
</ListItemSecondaryAction>
</ListItem> </ListItem>
); );
}; };

19
src/pipelines/queries.ts
View File

@@ -1,4 +1,4 @@
import { gql } from '@apollo/client'; import { gql } from "@apollo/client";
export const PIPELINE = gql` export const PIPELINE = gql`
query Pipeline($id: String!) { query Pipeline($id: String!) {
@@ -7,6 +7,7 @@ export const PIPELINE = gql`
name name
projectId projectId
branch branch
environment
workUnitMetadata { workUnitMetadata {
version version
units { units {
@@ -17,3 +18,19 @@ export const PIPELINE = gql`
} }
} }
`; `;
export const CONFIGURATION = gql`
query QueryGetConfigurationArgs($pipelineId: String!, $projectId: String!) {
configuration: getConfiguration(
pipelineId: $pipelineId
projectId: $projectId
) {
id
content
language
pipelineId
projectId
name
}
}
`;

49
src/pipelines/runtime-config-editor.tsx Normal file
View File

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

38
src/routes.tsx
View File

@@ -7,13 +7,15 @@ import { CommitList } from "./commits/commit-list";
import { PipelineTaskDetail } from "./pipeline-tasks/pipeline-task-detail"; import { PipelineTaskDetail } from "./pipeline-tasks/pipeline-task-detail";
import { PipelineEditor } from "./pipelines/pipeline-editor"; import { PipelineEditor } from "./pipelines/pipeline-editor";
import { import {
Configuration,
ConfigurationLanguage,
CreatePipelineInput, CreatePipelineInput,
CreateProjectInput, CreateProjectInput,
Pipeline, Pipeline,
PipelineUnits, PipelineUnits,
Project, Project,
} from "./generated/graphql"; } from "./generated/graphql";
import { PIPELINE } from "./pipelines"; import { CONFIGURATION, PIPELINE, RuntimeConfigEditor } from "./pipelines";
export default prepareRoutes([ export default prepareRoutes([
{ {
@@ -108,6 +110,40 @@ export default prepareRoutes([
return resolved; return resolved;
}, },
}, // edit-pipeline }, // 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", name: "project-detail",
path: "projects/:projectId", path: "projects/:projectId",