Compare commits

15 Commits

22 changed files with 3710 additions and 657 deletions

21
.cracorc.js Normal file
View File

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

2
.gitignore vendored
View File

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

5
.vscode/launch.json vendored
View File

@ -8,10 +8,9 @@
"name": "chrome",
"type": "chrome",
"request": "launch",
"reAttach": true,
"url": "http://fennec.localhost/",
"url": "http://fennec.localhost:7070/",
"webRoot": "${workspaceFolder}",
"userDataDir": "/Users/ivan/Projects/.chrome"
"userDataDir": ".vscode/chrome"
}
]
}

View File

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

View File

@ -1,5 +1,5 @@
overwrite: true
schema: "http://api.fennec.localhost/graphql"
schema: "http://localhost:7122/graphql"
# documents: "src/**/*.graphql"
generates:
src/generated/graphql.tsx:

View File

@ -1,7 +1,7 @@
module.exports = {
apps: [
{
name: "fennec-bs",
name: "fennec-fe",
script: "serve",
args: "",
watch: false,
@ -9,7 +9,7 @@ module.exports = {
log_date_format: "MM-DD HH:mm:ss.SSS Z",
env: {
PM2_SERVE_PATH: "./build",
PM2_SERVE_PORT: 7135,
PM2_SERVE_PORT: 7123,
PM2_SERVE_SPA: "true",
PM2_SERVE_HOMEPAGE: "/index.html",
},

3477
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,9 +1,10 @@
{
"name": "fennec-bs",
"version": "0.1.1",
"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",
"@date-io/date-fns": "^1.3.13",
@ -23,13 +24,14 @@
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"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.9.3",
"graphql-scalars": "^1.10.0",
"material-ui-confirm": "^2.1.2",
"notistack": "^1.0.6",
"ramda": "^0.27.1",
@ -42,10 +44,9 @@
"yup": "^0.32.9"
},
"scripts": {
"start": "PORT=7123 BROWSER=none react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "BROWSER=none craco start",
"build": "craco build",
"test": "craco test",
"prestart": "npm run graphql",
"graphql": "graphql-codegen --config codegen.yml"
},

View File

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

View File

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

View File

@ -0,0 +1,66 @@
import { makeStyles } from "@material-ui/core";
import { FC, Fragment, useEffect, useRef } from "react";
import { useAuth } from "./auth.provider";
const useStyles = makeStyles((theme) => ({
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>
);
};

View File

@ -5,6 +5,8 @@ import {
InMemoryCache,
split,
ApolloProvider,
fromPromise,
FetchResult,
} from "@apollo/client";
import { withScalars } from "apollo-link-scalars";
import { buildClientSchema, IntrospectionQuery } from "graphql";
@ -13,9 +15,16 @@ 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 } from "@apollo/client/utilities";
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
@ -37,8 +46,76 @@ const cleanTypeName = new ApolloLink((operation, forward) => {
);
});
export const FennecApolloClientProvider: FC = ({ children }) => {
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) => {
@ -65,6 +142,9 @@ export const FennecApolloClientProvider: FC = ({ children }) => {
}:${window.location.port}/api/graphql`,
options: {
reconnect: true,
connectionParams: () => ({
authorization: `Bearer ${accessTokenRef.current} `,
}),
},
});
const httpLink = new HttpLink({
@ -83,6 +163,7 @@ export const FennecApolloClientProvider: FC = ({ children }) => {
);
const link = ApolloLink.from([
errorLink,
authLink,
withScalars({ schema, typesMap }) as unknown as ApolloLink,
cleanTypeName,
splitLink,
@ -92,22 +173,12 @@ export const FennecApolloClientProvider: FC = ({ children }) => {
ssrMode: typeof window === "undefined",
link,
cache: new InMemoryCache({
typePolicies: {
// PipelineTaskLogs: {
// keyFields: ["unit"],
// },
// PipelineTask: {
// fields: {
// logs: {
// merge(existing = [], incoming: any[]) {
// return [...existing, ...incoming];
// },
// },
// },
// },
},
typePolicies: {},
}),
});
return client;
}, [enqueueSnackbar, loggedEventTarget]);
return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

View File

@ -2,7 +2,7 @@ import { useApolloClient } from "@apollo/client";
import { createRouterComponent } from "@curi/react-dom";
import { createRouter, announce } from "@curi/router";
import { browser } from "@hickory/browser";
import { FC, ReactNode, useEffect, useMemo, useState } from "react";
import { FC, useEffect, useState } from "react";
import routes from "../../routes";
import { LinearProgress } from "@material-ui/core";

View File

@ -167,6 +167,178 @@
"enumValues": 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",
"name": "CreatePipelineInput",
@ -844,6 +1016,39 @@
},
"isDeprecated": false,
"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,
@ -978,16 +1183,6 @@
"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": "OBJECT",
"name": "PipelineTask",
@ -1783,6 +1978,59 @@
},
"isDeprecated": false,
"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": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
@ -1790,6 +2038,81 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "SetConfigurationInput",
"description": null,
"fields": null,
"inputFields": [
{
"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
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Subscription",
@ -1949,22 +2272,6 @@
"description": null,
"fields": null,
"inputFields": [
{
"name": "projectId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "branch",
"description": null,

View File

@ -26,6 +26,23 @@ export type Commit = {
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'];
@ -75,6 +92,7 @@ export type Mutation = {
deletePipeline: Scalars['Float'];
createPipelineTask: PipelineTask;
stopPipelineTask: Scalars['Boolean'];
setConfiguration: Configuration;
};
@ -117,6 +135,11 @@ export type MutationStopPipelineTaskArgs = {
id: Scalars['String'];
};
export type MutationSetConfigurationArgs = {
setConfigurationInput: SetConfigurationInput;
};
export type Pipeline = {
__typename?: 'Pipeline';
id: Scalars['ID'];
@ -191,6 +214,7 @@ export type Query = {
commits?: Maybe<Array<Commit>>;
listPipelineTaskByPipelineId: Array<PipelineTask>;
pipelineTask: PipelineTask;
getConfiguration: Configuration;
};
@ -223,6 +247,20 @@ export type QueryPipelineTaskArgs = {
id: Scalars['String'];
};
export type QueryGetConfigurationArgs = {
pipelineId?: Maybe<Scalars['String']>;
projectId?: Maybe<Scalars['String']>;
id?: Maybe<Scalars['String']>;
};
export type SetConfigurationInput = {
pipelineId: Scalars['String'];
projectId: Scalars['String'];
content: Scalars['String'];
language: ConfigurationLanguage;
};
export type Subscription = {
__typename?: 'Subscription';
syncCommits?: Maybe<Scalars['String']>;
@ -255,7 +293,6 @@ export enum TaskStatuses {
}
export type UpdatePipelineInput = {
projectId: Scalars['String'];
branch: Scalars['String'];
name: Scalars['String'];
workUnitMetadata: WorkUnitMetadataInput;

View File

@ -4,30 +4,33 @@ import "./index.css";
import "fontsource-roboto";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { FennecApolloClientProvider } from "./commons/graphql/client";
import { AppApolloClientProvider } from "./commons/graphql/client";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import zhLocale from "date-fns/locale/zh-CN";
import { ConfirmProvider } from "material-ui-confirm";
import { SnackbarProvider } from "notistack";
import Router from './commons/route/router';
import Router from "./commons/route/router";
import { AuthProvider } from "./commons/auth/auth.provider";
ReactDOM.render(
ReactDOM.render(
<React.StrictMode>
<ConfirmProvider>
<SnackbarProvider maxSnack={5}>
<FennecApolloClientProvider>
<AuthProvider>
<AppApolloClientProvider>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
<Router>
<App />
</Router>
</MuiPickersUtilsProvider>
</FennecApolloClientProvider>
</AppApolloClientProvider>
</AuthProvider>
</SnackbarProvider>
</ConfirmProvider>
</React.StrictMode>,
document.getElementById("root")
);
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

View File

@ -1,4 +1,4 @@
import React, { FC, useCallback, useRef, useState } from "react";
import React, { FC, useCallback, useState } from "react";
import clsx from "clsx";
import {
createStyles,
@ -10,7 +10,6 @@ import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

View File

@ -56,9 +56,7 @@ const useStyles = makeStyles((theme) => ({
}));
export const PipelineTaskDetail: FC<Props> = ({ taskId }) => {
const [taskEvents, setTaskEvents] = useState(
() => new Array<PipelineTaskEvent>()
);
const [, setTaskEvents] = useState(() => new Array<PipelineTaskEvent>());
const { data, loading, error, client } = useQuery<{
pipelineTask: PipelineTask;
}>(PIPELINE_TASK, {

View File

@ -1,4 +1,4 @@
import { gql, Reference, useMutation, useQuery } from "@apollo/client";
import { gql, Reference, useMutation } from "@apollo/client";
import { useRouter } from "@curi/react-dom";
import {
Button,
@ -13,21 +13,14 @@ import {
import { Delete } from "@material-ui/icons";
import { FormikHelpers, Formik, Form, Field } from "formik";
import { TextField, TextFieldProps } from "formik-material-ui";
import { TextField as MuiTextField } from "@material-ui/core";
import { useConfirm } from "material-ui-confirm";
import { useSnackbar } from "notistack";
import { not, omit } from "ramda";
import { ChangeEvent, FC } from "react";
import {
Pipeline,
WorkUnitMetadata,
PipelineUnits,
} from "../generated/graphql";
import { Pipeline, PipelineUnits } from "../generated/graphql";
import { useHeaderContainer } from "../layouts";
import { CREATE_PIPELINE, DELETE_PIPELINE, UPDATE_PIPELINE } from "./mutations";
import { PIPELINE } from "./queries";
import * as Yup from "yup";
import { useField } from "formik";
type Values = Partial<Pipeline>;
@ -108,7 +101,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
if (isCreate) {
await createPipeline({
variables: {
input: values,
pipeline: values,
},
}).then(({ data }) => {
pipelineId = data!.createPipeline.id;
@ -273,11 +266,18 @@ const ScriptsField: FC<TextFieldProps> = ({ field, form, meta, ...props }) => {
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.trim()) ?? []
ev.target.value?.split("\n").map((it) => it) ?? []
),
}}
/>

View File

@ -11,8 +11,6 @@ import {
import { FC, MouseEventHandler, useMemo } from "react";
import { Pipeline, Project } from "../generated/graphql";
import { CallMerge, Edit } from "@material-ui/icons";
import { clone } from "ramda";
import { useEffect } from "react";
interface Props {
projectId: string;
@ -32,7 +30,7 @@ const PIPELINES = gql`
`;
export const PipelineList: FC<Props> = ({ projectId }) => {
const { data, loading } = useQuery<
const { data } = useQuery<
{ pipelines: Pipeline[]; project: Project },
{ projectId: string }
>(PIPELINES, {

View File

@ -1,10 +1,20 @@
import { Project } from "../generated/graphql";
import React, { FC, Fragment } from "react";
import { IconButton, Grid, makeStyles, Paper, Portal, Typography } from "@material-ui/core";
import {
IconButton,
Grid,
makeStyles,
Paper,
Portal,
Typography,
Box,
} from "@material-ui/core";
import { useHeaderContainer } from "../layouts";
import { PipelineList } from "../pipelines/pipeline-list";
import { Edit } from '@material-ui/icons';
import { Link } from '@curi/react-dom';
import { Button } from "@material-ui/core";
import { AddBox } from "@material-ui/icons";
interface Props {
project: Project;
@ -62,6 +72,18 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
>
<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>

View File

@ -1,16 +1,16 @@
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { prepareRoutes } from "@curi/router";
import { omit } from 'ramda';
import React from "react";
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 { 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 {
CreatePipelineInput,
CreateProjectInput,
Pipeline,
PipelineUnits,
Project,
} from "./generated/graphql";
import { PIPELINE } from "./pipelines";
@ -65,13 +65,20 @@ export default prepareRoutes([
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: units.map((util) => ({ type: util, scripts: [] })),
},
};
return {