Compare commits
No commits in common. "develop" and "master" have entirely different histories.
21
.cracorc.js
21
.cracorc.js
@ -1,21 +0,0 @@
|
||||
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
2
.gitignore
vendored
@ -21,5 +21,3 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.vscode/chrome
|
||||
5
.vscode/launch.json
vendored
5
.vscode/launch.json
vendored
@ -8,9 +8,10 @@
|
||||
"name": "chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://fennec.localhost:7070/",
|
||||
"reAttach": true,
|
||||
"url": "http://fennec.localhost/",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"userDataDir": ".vscode/chrome"
|
||||
"userDataDir": "/Users/ivan/Projects/.chrome"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,9 +1,8 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"Formik",
|
||||
"clsx",
|
||||
"fontsource",
|
||||
"Formik",
|
||||
"noconflict",
|
||||
"notistack",
|
||||
"unmount",
|
||||
"vditor"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
module.exports = {
|
||||
client: {
|
||||
service: {
|
||||
name: "fennec-be",
|
||||
url: "http://localhost:7122/graphql",
|
||||
},
|
||||
},
|
||||
name: 'fennec-be',
|
||||
url: 'http://api.fennec.localhost/graphql'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
overwrite: true
|
||||
schema: "http://localhost:7122/graphql"
|
||||
schema: "http://api.fennec.localhost/graphql"
|
||||
# documents: "src/**/*.graphql"
|
||||
generates:
|
||||
src/generated/graphql.tsx:
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
name: "fennec-fe",
|
||||
name: "fennec-bs",
|
||||
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: 7123,
|
||||
PM2_SERVE_PORT: 7135,
|
||||
PM2_SERVE_SPA: "true",
|
||||
PM2_SERVE_HOMEPAGE: "/index.html",
|
||||
},
|
||||
|
||||
31050
package-lock.json
generated
31050
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@ -1,22 +1,20 @@
|
||||
{
|
||||
"name": "fennec-bs",
|
||||
"version": "0.2.0",
|
||||
"version": "0.1.1",
|
||||
"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",
|
||||
"@date-io/date-fns": "^1.3.13",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@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",
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "*",
|
||||
"@material-ui/pickers": "^3.3.10",
|
||||
"@testing-library/jest-dom": "^5.11.10",
|
||||
"@testing-library/react": "^11.2.6",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
@ -24,21 +22,18 @@
|
||||
"@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",
|
||||
"graphql-scalars": "^1.9.3",
|
||||
"material-ui-confirm": "^2.1.2",
|
||||
"notistack": "^2.0.2",
|
||||
"notistack": "^1.0.6",
|
||||
"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",
|
||||
@ -47,9 +42,10 @@
|
||||
"yup": "^0.32.9"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "BROWSER=none PORT=auto craco start",
|
||||
"build": "craco build",
|
||||
"test": "craco test",
|
||||
"start": "PORT=7123 BROWSER=none react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"prestart": "npm run graphql",
|
||||
"graphql": "graphql-codegen --config codegen.yml"
|
||||
},
|
||||
|
||||
@ -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>Fennec</title>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -6,9 +6,6 @@ function App() {
|
||||
const { response } = useResponse();
|
||||
|
||||
const { body: Body } = response;
|
||||
if (!Body) {
|
||||
return <DefaultLayout> Client has some wrong!</DefaultLayout>;
|
||||
}
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<Body response={response} />
|
||||
|
||||
@ -13,10 +13,10 @@ import {
|
||||
ListItemIcon,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
makeStyles,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
withStyles,
|
||||
} from "@material-ui/core";
|
||||
import {
|
||||
Cancel,
|
||||
CheckCircle,
|
||||
@ -24,7 +24,7 @@ import {
|
||||
ShoppingCart,
|
||||
Stop,
|
||||
Timer,
|
||||
} from "@mui/icons-material";
|
||||
} from "@material-ui/icons";
|
||||
import { format } from "date-fns";
|
||||
import { useSnackbar } from "notistack";
|
||||
import { complement, equals, find, propEq, takeWhile } from "ramda";
|
||||
@ -133,7 +133,8 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
|
||||
}) => {
|
||||
const [isOpen, setOpen] = useState(() => false);
|
||||
|
||||
const [createTask, { loading }] = useMutation<
|
||||
const [createTask, { loading }] =
|
||||
useMutation<
|
||||
{ createPipelineTask: PipelineTask },
|
||||
{ task: CreatePipelineTaskInput }
|
||||
>(CREATE_PIPELINE_TASK);
|
||||
@ -180,7 +181,6 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
|
||||
aria-label={pair[2]}
|
||||
disabled={loading}
|
||||
onClick={() => handleCreateTask(unit)}
|
||||
size="large"
|
||||
>
|
||||
{pair[1]}
|
||||
</IconButton>
|
||||
@ -257,7 +257,7 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
{task.status === TaskStatuses.Working && (
|
||||
<IconButton edge="end" aria-label="stop" onClick={stop} size="large">
|
||||
<IconButton edge="end" aria-label="stop" onClick={stop}>
|
||||
<Stop />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -1,68 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import { Typography } from '@mui/material';
|
||||
import { Typography } from '@material-ui/core';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
export const ErrorPage: FC = ({children}) => {
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
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),
|
||||
}));
|
||||
@ -5,8 +5,6 @@ import {
|
||||
InMemoryCache,
|
||||
split,
|
||||
ApolloProvider,
|
||||
fromPromise,
|
||||
FetchResult,
|
||||
} from "@apollo/client";
|
||||
import { withScalars } from "apollo-link-scalars";
|
||||
import { buildClientSchema, IntrospectionQuery } from "graphql";
|
||||
@ -15,16 +13,9 @@ 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 { getMainDefinition } 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
|
||||
@ -46,76 +37,8 @@ const cleanTypeName = new ApolloLink((operation, forward) => {
|
||||
);
|
||||
});
|
||||
|
||||
export const AppApolloClientProvider: FC = ({ children }) => {
|
||||
export const FennecApolloClientProvider: 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) => {
|
||||
@ -142,9 +65,6 @@ export const AppApolloClientProvider: FC = ({ children }) => {
|
||||
}:${window.location.port}/api/graphql`,
|
||||
options: {
|
||||
reconnect: true,
|
||||
connectionParams: () => ({
|
||||
authorization: `Bearer ${accessTokenRef.current} `,
|
||||
}),
|
||||
},
|
||||
});
|
||||
const httpLink = new HttpLink({
|
||||
@ -163,7 +83,6 @@ export const AppApolloClientProvider: FC = ({ children }) => {
|
||||
);
|
||||
const link = ApolloLink.from([
|
||||
errorLink,
|
||||
authLink,
|
||||
withScalars({ schema, typesMap }) as unknown as ApolloLink,
|
||||
cleanTypeName,
|
||||
splitLink,
|
||||
@ -173,12 +92,22 @@ export const AppApolloClientProvider: FC = ({ children }) => {
|
||||
ssrMode: typeof window === "undefined",
|
||||
link,
|
||||
cache: new InMemoryCache({
|
||||
typePolicies: {},
|
||||
typePolicies: {
|
||||
// PipelineTaskLogs: {
|
||||
// keyFields: ["unit"],
|
||||
// },
|
||||
// PipelineTask: {
|
||||
// fields: {
|
||||
// logs: {
|
||||
// merge(existing = [], incoming: any[]) {
|
||||
// return [...existing, ...incoming];
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
return client;
|
||||
}, [enqueueSnackbar, loggedEventTarget]);
|
||||
|
||||
return <ApolloProvider client={client}>{children}</ApolloProvider>;
|
||||
};
|
||||
|
||||
@ -2,9 +2,9 @@ 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 { FC, ReactNode, useEffect, useMemo, useState } from "react";
|
||||
import routes from "../../routes";
|
||||
import { LinearProgress } from "@mui/material";
|
||||
import { LinearProgress } from "@material-ui/core";
|
||||
|
||||
const Component: FC = ({ children }) => {
|
||||
const client = useApolloClient();
|
||||
|
||||
@ -167,178 +167,6 @@
|
||||
"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",
|
||||
@ -1016,39 +844,6 @@
|
||||
},
|
||||
"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,
|
||||
@ -1176,22 +971,6 @@
|
||||
},
|
||||
"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,
|
||||
@ -1199,6 +978,16 @@
|
||||
"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",
|
||||
@ -1994,55 +1783,6 @@
|
||||
},
|
||||
"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": "OBJECT",
|
||||
"name": "Configuration",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
}
|
||||
],
|
||||
"inputFields": null,
|
||||
@ -2050,105 +1790,6 @@
|
||||
"enumValues": 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",
|
||||
"name": "Subscription",
|
||||
@ -2308,6 +1949,22 @@
|
||||
"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,
|
||||
|
||||
@ -26,23 +26,6 @@ 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'];
|
||||
@ -92,7 +75,6 @@ export type Mutation = {
|
||||
deletePipeline: Scalars['Float'];
|
||||
createPipelineTask: PipelineTask;
|
||||
stopPipelineTask: Scalars['Boolean'];
|
||||
setConfiguration: Configuration;
|
||||
};
|
||||
|
||||
|
||||
@ -135,11 +117,6 @@ export type MutationStopPipelineTaskArgs = {
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationSetConfigurationArgs = {
|
||||
setConfigurationInput: SetConfigurationInput;
|
||||
};
|
||||
|
||||
export type Pipeline = {
|
||||
__typename?: 'Pipeline';
|
||||
id: Scalars['ID'];
|
||||
@ -148,7 +125,6 @@ export type Pipeline = {
|
||||
branch: Scalars['String'];
|
||||
name: Scalars['String'];
|
||||
workUnitMetadata: WorkUnitMetadata;
|
||||
environment: Scalars['String'];
|
||||
};
|
||||
|
||||
export type PipelineTask = {
|
||||
@ -215,7 +191,6 @@ export type Query = {
|
||||
commits?: Maybe<Array<Commit>>;
|
||||
listPipelineTaskByPipelineId: Array<PipelineTask>;
|
||||
pipelineTask: PipelineTask;
|
||||
getConfiguration?: Maybe<Configuration>;
|
||||
};
|
||||
|
||||
|
||||
@ -248,22 +223,6 @@ 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']>;
|
||||
@ -296,6 +255,7 @@ export enum TaskStatuses {
|
||||
}
|
||||
|
||||
export type UpdatePipelineInput = {
|
||||
projectId: Scalars['String'];
|
||||
branch: Scalars['String'];
|
||||
name: Scalars['String'];
|
||||
workUnitMetadata: WorkUnitMetadataInput;
|
||||
|
||||
@ -4,42 +4,26 @@ import "./index.css";
|
||||
import "fontsource-roboto";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import { AppApolloClientProvider } from "./commons/graphql/client";
|
||||
import { FennecApolloClientProvider } 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 { 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);
|
||||
import Router from './commons/route/router';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<ConfirmProvider>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<SnackbarProvider maxSnack={5}>
|
||||
<AuthProvider>
|
||||
<AppApolloClientProvider>
|
||||
<FennecApolloClientProvider>
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
</AppApolloClientProvider>
|
||||
</AuthProvider>
|
||||
</MuiPickersUtilsProvider>
|
||||
</FennecApolloClientProvider>
|
||||
</SnackbarProvider>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</ConfirmProvider>
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
import React, { FC, useCallback, useState } from "react";
|
||||
import React, { FC, useCallback, useRef, 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 {
|
||||
createStyles,
|
||||
makeStyles,
|
||||
useTheme,
|
||||
Theme,
|
||||
} from "@material-ui/core/styles";
|
||||
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";
|
||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
||||
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
|
||||
import { ProjectPanel } from "../projects/project-panel";
|
||||
import { HeaderContainerProvider } from "./header-container";
|
||||
const drawerWidth = 240;
|
||||
@ -124,7 +128,7 @@ export const DefaultLayout: FC = ({ children }) => {
|
||||
className={clsx(classes.menuButton, {
|
||||
[classes.hide]: open,
|
||||
})}
|
||||
size="large">
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<div className={classes.headerContaner} ref={onRefChange}></div>
|
||||
@ -144,7 +148,7 @@ export const DefaultLayout: FC = ({ children }) => {
|
||||
}}
|
||||
>
|
||||
<div className={classes.toolbar}>
|
||||
<IconButton onClick={handleDrawerClose} size="large">
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
{theme.direction === "rtl" ? (
|
||||
<ChevronRightIcon />
|
||||
) : (
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { gql, useQuery, useSubscription } from "@apollo/client";
|
||||
import { LinearProgress, Typography } from "@mui/material";
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
|
||||
import { format } from "date-fns";
|
||||
import { FC, useState } from "react";
|
||||
import { ErrorPage } from "../commons/fallbacks/error-page";
|
||||
@ -57,7 +56,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
}));
|
||||
|
||||
export const PipelineTaskDetail: FC<Props> = ({ taskId }) => {
|
||||
const [, setTaskEvents] = useState(() => new Array<PipelineTaskEvent>());
|
||||
const [taskEvents, setTaskEvents] = useState(
|
||||
() => new Array<PipelineTaskEvent>()
|
||||
);
|
||||
const { data, loading, error, client } = useQuery<{
|
||||
pipelineTask: PipelineTask;
|
||||
}>(PIPELINE_TASK, {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
export * from './pipeline-detail';
|
||||
export * from './pipeline-list';
|
||||
export * from './queries';
|
||||
export * from "./runtime-config-editor";
|
||||
|
||||
@ -7,7 +7,6 @@ export const CREATE_PIPELINE = gql`
|
||||
projectId
|
||||
branch
|
||||
name
|
||||
environment
|
||||
workUnitMetadata {
|
||||
version
|
||||
units {
|
||||
@ -26,7 +25,6 @@ export const UPDATE_PIPELINE = gql`
|
||||
projectId
|
||||
branch
|
||||
name
|
||||
environment
|
||||
workUnitMetadata {
|
||||
version
|
||||
units {
|
||||
@ -43,12 +41,3 @@ export const DELETE_PIPELINE = gql`
|
||||
deletePipeline(id: $id)
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
export const SET_CONFIGURATION = gql`
|
||||
mutation SetConfiguration($configuration: SetConfigurationInput!) {
|
||||
setConfiguration(setConfigurationInput: $configuration) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -1,18 +1,33 @@
|
||||
import { gql, Reference, useMutation } from "@apollo/client";
|
||||
import { gql, Reference, useMutation, useQuery } 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 {
|
||||
Button,
|
||||
Grid,
|
||||
IconButton,
|
||||
LinearProgress,
|
||||
makeStyles,
|
||||
Paper,
|
||||
Portal,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
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, PipelineUnits } from "../generated/graphql";
|
||||
import {
|
||||
Pipeline,
|
||||
WorkUnitMetadata,
|
||||
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>;
|
||||
|
||||
@ -61,7 +76,6 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
|
||||
id
|
||||
projectId
|
||||
branch
|
||||
environment
|
||||
name
|
||||
workUnitMetadata {
|
||||
version
|
||||
@ -94,7 +108,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
|
||||
if (isCreate) {
|
||||
await createPipeline({
|
||||
variables: {
|
||||
pipeline: values,
|
||||
input: values,
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
pipelineId = data!.createPipeline.id;
|
||||
@ -169,7 +183,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Portal container={headerContainer}>
|
||||
<Grid container justifyContent="space-between" alignItems="center">
|
||||
<Grid container justify="space-between" alignItems="center">
|
||||
<Typography variant="h6" component="h1">
|
||||
{isCreate ? "Create" : "Edit"} Pipeline
|
||||
</Typography>
|
||||
@ -178,7 +192,6 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
|
||||
color="inherit"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
size="large"
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
@ -192,10 +205,7 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
|
||||
.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")
|
||||
.max(32, "Must be 32 characters or less")
|
||||
.required("Required"),
|
||||
})}
|
||||
onSubmit={submitForm}
|
||||
@ -211,13 +221,6 @@ 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}
|
||||
@ -270,18 +273,11 @@ 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) ?? []
|
||||
ev.target.value?.split("\n").map((it) => it.trim()) ?? []
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -5,20 +5,14 @@ import {
|
||||
ListItem,
|
||||
Typography,
|
||||
ListItemText,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopoverPosition,
|
||||
} from "@mui/material";
|
||||
import { FC, useMemo, useState, MouseEvent } from "react";
|
||||
ListItemSecondaryAction,
|
||||
IconButton,
|
||||
} from "@material-ui/core";
|
||||
import { FC, MouseEventHandler, useMemo } 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";
|
||||
import { CallMerge, Edit } from "@material-ui/icons";
|
||||
import { clone } from "ramda";
|
||||
import { useEffect } from "react";
|
||||
|
||||
interface Props {
|
||||
projectId: string;
|
||||
@ -30,7 +24,6 @@ const PIPELINES = gql`
|
||||
id
|
||||
name
|
||||
branch
|
||||
environment
|
||||
}
|
||||
project(id: $projectId) {
|
||||
id
|
||||
@ -39,7 +32,7 @@ const PIPELINES = gql`
|
||||
`;
|
||||
|
||||
export const PipelineList: FC<Props> = ({ projectId }) => {
|
||||
const { data } = useQuery<
|
||||
const { data, loading } = useQuery<
|
||||
{ pipelines: Pipeline[]; project: Project },
|
||||
{ projectId: string }
|
||||
>(PIPELINES, {
|
||||
@ -51,142 +44,48 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
|
||||
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 }) => {
|
||||
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 (
|
||||
<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"
|
||||
>
|
||||
<Typography component="span" variant="body2" color="textSecondary">
|
||||
<CallMerge fontSize="small" />
|
||||
{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>
|
||||
}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="edit" onClick={modify}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { gql } from "@apollo/client";
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const PIPELINE = gql`
|
||||
query Pipeline($id: String!) {
|
||||
@ -7,7 +7,6 @@ export const PIPELINE = gql`
|
||||
name
|
||||
projectId
|
||||
branch
|
||||
environment
|
||||
workUnitMetadata {
|
||||
version
|
||||
units {
|
||||
@ -18,19 +17,3 @@ 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
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -1,13 +1,10 @@
|
||||
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 { IconButton, Grid, makeStyles, Paper, Portal, Typography } from "@material-ui/core";
|
||||
import { useHeaderContainer } from "../layouts";
|
||||
import { PipelineList } from "../pipelines/pipeline-list";
|
||||
import { Edit } from '@mui/icons-material';
|
||||
import { Edit } from '@material-ui/icons';
|
||||
import { Link } from '@curi/react-dom';
|
||||
import { Button } from "@mui/material";
|
||||
import { AddBox } from "@mui/icons-material";
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
@ -38,7 +35,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
|
||||
container
|
||||
spacing={3}
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
justify="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
@ -51,7 +48,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Link name="edit-project" params={{ projectId: project.id }}>
|
||||
<IconButton color="inherit" size="large">{<Edit />}</IconButton>
|
||||
<IconButton color="inherit">{<Edit />}</IconButton>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
@ -65,18 +62,6 @@ 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>
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
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 {
|
||||
Button,
|
||||
LinearProgress,
|
||||
makeStyles,
|
||||
Paper,
|
||||
Portal,
|
||||
Typography,
|
||||
Grid,
|
||||
IconButton,
|
||||
} from "@material-ui/core";
|
||||
import { Form, Formik, Field, FormikHelpers } from "formik";
|
||||
import { TextField } from "formik-material-ui";
|
||||
import { not } from "ramda";
|
||||
@ -9,7 +17,7 @@ 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 DeleteIcon from "@material-ui/icons/Delete";
|
||||
import { useConfirm } from "material-ui-confirm";
|
||||
import { useSnackbar } from "notistack";
|
||||
|
||||
@ -170,12 +178,16 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Portal container={headerContainer}>
|
||||
<Grid container justifyContent="space-between" alignItems="center">
|
||||
<Grid container justify="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">
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
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 { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
|
||||
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 { ListItemText } from "@material-ui/core";
|
||||
import { Button } from "@material-ui/core";
|
||||
import { AddBox } from "@material-ui/icons";
|
||||
import { ActiveLink } from "../commons/route/active-link";
|
||||
|
||||
const PROJECTS = gql`
|
||||
|
||||
@ -1,21 +1,19 @@
|
||||
import { ApolloClient, InMemoryCache } from "@apollo/client";
|
||||
import { prepareRoutes } from "@curi/router";
|
||||
import { omit } from "ramda";
|
||||
import { omit } from 'ramda';
|
||||
import React from "react";
|
||||
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 {
|
||||
Configuration,
|
||||
ConfigurationLanguage,
|
||||
CreatePipelineInput,
|
||||
CreateProjectInput,
|
||||
Pipeline,
|
||||
PipelineUnits,
|
||||
Project,
|
||||
} from "./generated/graphql";
|
||||
import { CONFIGURATION, PIPELINE, RuntimeConfigEditor } from "./pipelines";
|
||||
import { PIPELINE } from "./pipelines";
|
||||
|
||||
export default prepareRoutes([
|
||||
{
|
||||
@ -67,20 +65,13 @@ 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.map((util) => ({ type: util, scripts: [] })),
|
||||
units: [],
|
||||
},
|
||||
};
|
||||
return {
|
||||
@ -110,40 +101,6 @@ export default prepareRoutes([
|
||||
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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user