varnitgoyal95/deployment-portal-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

INFRA-3279 | reduce pipelineYaml component scope to just create template (no db interaction)

Browse Source
This commit is contained in:
dhruvjoshi
2024-05-20 13:29:56 +05:30
parent c816d23204
commit faea4cf203
10 changed files with 43 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/common/GeneratePipelineButton.tsx
View File

@@ -1,101 +0,0 @@
import * as React from 'react';
import {
Button,
DialogActions,
DialogContent,
DialogTitle,
makeStyles,
TextareaAutosize,
} from '@material-ui/core';
import Dialog from '@material-ui/core/Dialog';
import { toast } from 'react-toastify';
import { getFormattedRuntimeException, post } from '../../helper/api-client';
import { text } from '../../coreform/Styles';
import { generateAwsTemplate } from '@src/coreform/baseform/Pipeline/util';
const API_TO_POST_PIPELINE_MANIFEST = '/api/pipelines';
const YAML = require('js-yaml');
const useStyles = makeStyles({
text,
});
const GeneratePipelineButton = props => {
const { values } = props;
const [open, setOpen] = React.useState(false);
const [yamlText, setYamlText] = React.useState();
const classes = useStyles();
const handleClickOpen = () => {
submitManifest(generateAwsTemplate(values.name, values.environment, props.type));
};
const handleClose = () => {
setOpen(false);
};
const descriptionElementRef = React.useRef(null);
React.useEffect(() => {
if (open) {
const { current: descriptionElement } = descriptionElementRef;
if (descriptionElement !== null) {
// @ts-ignore
descriptionElement.focus();
}
}
}, [open]);
const submitManifest = (body: any) => {
const toastId = toast.info('In Progress ...', {
autoClose: 50000,
});
post(body, API_TO_POST_PIPELINE_MANIFEST).then(r => {
r.json().then(resJson => {
if (r.ok) {
toast.update(toastId, {
render: 'Updated',
type: 'success',
autoClose: 3000,
});
setYamlText(resJson);
setOpen(true);
} else {
toast.update(toastId, {
render: `${getFormattedRuntimeException(resJson)}`,
type: 'error',
autoClose: 3000,
});
}
});
});
};
return (
<>
<Button
color="secondary"
variant="contained"
size="large"
style={{ marginLeft: 10 }}
onClick={handleClickOpen}
>
Generate Pipeline
</Button>
<Dialog open={open} onClose={handleClose} scroll="paper" fullWidth={true} maxWidth={'lg'}>
<DialogTitle id="scroll-dialog-title">Pipeline</DialogTitle>
<DialogContent dividers={true} style={{ textAlign: 'center' }}>
<TextareaAutosize
disabled
className={classes.text}
value={YAML.dump(yamlText, { sortKeys: true })}
/>
</DialogContent>
<DialogActions>
<Button variant="outlined" onClick={handleClose}>
Okay
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default GeneratePipelineButton;

10
src/components/gocd-yaml/PipelineBaseForm.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { toast } from 'react-toastify';
import { withCookies } from 'react-cookie';
import { makeStyles } from '@material-ui/core/styles';
import { Button, TextareaAutosize, TextField } from '@material-ui/core';
@@ -7,14 +8,14 @@ import { Form, Formik } from 'formik';
import { FormikTextField } from '../common/FormikTextField';
import { pipelineManifestValidationSchema } from './PipelineManifestValidationSchema';
import { cardStyles, text } from '../../coreform/Styles';
import { toast } from 'react-toastify';
import { getFormattedRuntimeException, httpClient, post } from '../../helper/api-client';
import { DeploymentPipeline } from '@src/types/Types';
import { PipelineList } from './PipelineList';
import Header from '../layout/Header';
import { API_PIPELINE_MANIFEST } from '@src/constants/Pipeline';
const YAML = require('js-yaml');
const API_TO_GET_TEMPLATE_PIPELINE_MANIFEST = '/api/pipelines/template';
const useStyles = makeStyles({
...cardStyles,
text,
@@ -55,11 +56,12 @@ const PipelineBaseForm = () => {
const [yamlText, setYamlText] = useState('');
const [manifest, setManifest] = useState(_p.initData);
const submitManifest = (pipelineManifest: any) => {
const submitManifest = (pipelineManifest: DeploymentPipeline) => {
const toastId = toast.info('In Progress ...', {
autoClose: 50000,
});
post(pipelineManifest, API_TO_GET_TEMPLATE_PIPELINE_MANIFEST).then(r => {
const requestBody = _p.addUpstream(pipelineManifest);
post(requestBody, API_PIPELINE_MANIFEST + '/template').then(r => {
r.json().then(resJson => {
if (r.ok) {
toast.update(toastId, {

11
src/components/gocd-yaml/pipeline.ts
View File

@@ -1,5 +1,7 @@
import { toast } from 'react-toastify';
import { getFormattedRuntimeException, httpClient } from '../../helper/api-client';
import { DeploymentPipeline } from '@src/types/Types';
import _ from 'lodash';
export const initData = {
name: '',
@@ -58,3 +60,12 @@ export const initData = {
export const addStage = () => {
return { type: '', approvalType: '' };
};
export const addUpstream = (pipelineManifest: DeploymentPipeline) => {
const newPipelineManifest = _.cloneDeep(pipelineManifest);
const upstream: string[] = [];
newPipelineManifest.pipelines.forEach((pipeline, i) => {
newPipelineManifest.pipelines[i].upstream = [...upstream];
upstream.push(pipeline.env);
});
return newPipelineManifest;
};

2
src/constants/Pipeline.tsx
View File

@@ -64,3 +64,5 @@ export const approvalTypeMap = {
uat: 'manual',
prod: 'manual',
};
export const API_PIPELINE_MANIFEST = '/api/pipelines';

1
src/coreform/awsaccess/AWSAccessForm.tsx
View File

@@ -6,7 +6,6 @@ import { FormikTextField } from '../../components/common/FormikTextField';
import { FormikCardList } from '../../components/common/FormikCardList';
import * as _m from '../../models/Manifest';
import NotConfigured from '../NotConfiguredPanel';
import GeneratePipelineButton from '../../components/common/GeneratePipelineButton';
import { Environment } from '../../constants/Environment';
const useStyles = makeStyles({

4
src/coreform/baseform/Pipeline/GenratePipeline.tsx
View File

@@ -15,10 +15,10 @@ const GeneratePipeline: React.FC<GeneratePipelineProp> = (props: GeneratePipelin
const { manifestName, environment } = props;
const [openDialog, setOpenDialog] = useState(false);
const formSubmitButtonRef = useRef<HTMLButtonElement>(null);
const handleClose = () => {
const handleClose = (): void => {
setOpenDialog(false);
};
const handleSubmit = () => {
const handleSubmit = (): void => {
formSubmitButtonRef.current?.click();
};
return (

40
src/coreform/baseform/Pipeline/PipelineCard.tsx
View File

@@ -1,28 +1,34 @@
import React, { RefObject, useState } from 'react';
import React, { FC, RefObject, useEffect, useState } from 'react';
import { Form, Formik } from 'formik';
import { toast } from 'react-toastify';
import { getFormattedRuntimeException, httpClient, post } from '@src/helper/api-client';
import { PipelineList } from '@src/components/gocd-yaml/PipelineList';
import { createPipeLineInitData, createPipelineManifestObject, generateAwsTemplate } from './util';
import { Checkbox, DialogTitle, FormControlLabel } from '@material-ui/core';
import { resourceMap, upstreamMap, upstreamOrder } from '@src/constants/Pipeline';
import { Pipeline } from '@src/types/Types';
import {
API_PIPELINE_MANIFEST,
resourceMap,
upstreamMap,
upstreamOrder,
} from '@src/constants/Pipeline';
import { DeploymentPipeline, Pipeline } from '@src/types/Types';
import { addToArray, removeFromArray } from '../utils';
import './PipelineCard.module.css';
const API_TO_POST_PIPELINE_MANIFEST = '/api/pipelines';
interface PipelineCardProps {
environment: string;
manifestName: string;
formSubmitButtonRef: RefObject<HTMLButtonElement>;
}
export const PipelineCard = (props: PipelineCardProps) => {
export const PipelineCard: FC<PipelineCardProps> = (props: PipelineCardProps) => {
const { environment, manifestName, formSubmitButtonRef } = props;
const [manifest, setManifest] = useState(createPipeLineInitData(environment, manifestName));
const [manifest, setManifest] = useState<DeploymentPipeline>(
createPipeLineInitData(environment, manifestName),
);
const [upstream, setUpstream] = useState<string[]>([]);
const [resource, setResource] = useState<Pipeline[]>([]);
const handleUpstreamSelectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handleUpstreamSelectionChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const { name, checked } = event.target;
const updatedUpstream: string[] = checked
? (addToArray(name, upstream) as string[])
@@ -30,7 +36,7 @@ export const PipelineCard = (props: PipelineCardProps) => {
updatedUpstream.sort((a, b) => upstreamOrder[a] - upstreamOrder[b]);
setUpstream(updatedUpstream);
};
const handleResourceSelectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handleResourceSelectionChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const { name, checked } = event.target;
const updatedResources: Pipeline[] = checked
? (addToArray(generateAwsTemplate(manifestName, environment, name), resource) as Pipeline[])
@@ -40,11 +46,11 @@ export const PipelineCard = (props: PipelineCardProps) => {
) as Pipeline[]);
setResource(updatedResources);
};
const submitManifest = (pipelineManifest: any) => {
const submitPipeline = (pipelineManifest: DeploymentPipeline): void => {
const toastId = toast.info('In Progress ...', {
autoClose: 50000,
});
post(pipelineManifest, API_TO_POST_PIPELINE_MANIFEST).then(r => {
post(pipelineManifest, API_PIPELINE_MANIFEST).then(r => {
r.json().then(resJson => {
if (r.ok) {
toast.update(toastId, {
@@ -52,7 +58,6 @@ export const PipelineCard = (props: PipelineCardProps) => {
type: 'success',
autoClose: 3000,
});
// setYamlText(resJson);
} else {
toast.update(toastId, {
render: `${getFormattedRuntimeException(resJson)}`,
@@ -64,11 +69,11 @@ export const PipelineCard = (props: PipelineCardProps) => {
});
};
const getManifestByName = (name: string) => {
const getPipelineManifestByNameAndEnvironment = (name: string, env: string): void => {
const toastId = toast.info('In Progress ...', {
autoClose: 50000,
});
httpClient(`${API_TO_POST_PIPELINE_MANIFEST}/name/${name}`).then(r => {
httpClient(`${API_PIPELINE_MANIFEST}?name=${name}&env=${env}`).then(r => {
r.json().then(resJson => {
if (r.ok) {
toast.update(toastId, {
@@ -87,6 +92,9 @@ export const PipelineCard = (props: PipelineCardProps) => {
});
});
};
useEffect(() => {
getPipelineManifestByNameAndEnvironment(manifestName, environment);
}, [manifestName, environment]);
return (
<div>
@@ -95,7 +103,7 @@ export const PipelineCard = (props: PipelineCardProps) => {
initialValues={manifest}
validateOnChange={false}
onSubmit={values => {
console.log(createPipelineManifestObject(values, upstream, resource));
submitPipeline(createPipelineManifestObject(values, upstream, resource));
}}
>
<Form>
@@ -127,10 +135,6 @@ export const PipelineCard = (props: PipelineCardProps) => {
))}
</div>
</div>
{/* <div className="resource-pipeline">
<DialogTitle className="title">Include resource pipeline</DialogTitle>
<Checkbox onChange={handleResourceCheckboxChange} />
</div> */}
</div>
);
};

1
src/coreform/documentdb/DocumentDbForm.tsx
View File

@@ -17,7 +17,6 @@ import {
TableRow,
Tooltip,
} from '@material-ui/core';
import GeneratePipelineButton from '../../components/common/GeneratePipelineButton';
import { cardStyles } from '../Styles';
import CardLayout from '../../components/common/CardLayout';
import { toMenuItems } from '../FormUtil';

1
src/coreform/elasticcache/ElasticCacheForm.tsx
View File

@@ -16,7 +16,6 @@ import { FormikTextField } from '../../components/common/FormikTextField';
import * as _m from '../../models/Manifest';
import { FormikCheckbox } from '../../components/common/FormikCheckbox';
import CardLayout from '../../components/common/CardLayout';
import GeneratePipelineButton from '../../components/common/GeneratePipelineButton';
import { Environment } from '../../constants/Environment';
import NotConfigured from '../NotConfiguredPanel';
import { toMenuItems } from '../FormUtil';

5
src/coreform/s3bucket/S3BucketForm.tsx
View File

@@ -11,15 +11,10 @@ import AddRemoveButton from '../../components/common/AddRemoveButton';
import NotConfigured from '../NotConfiguredPanel';
import CardLayout from '../../components/common/CardLayout';
import { FormikCheckbox } from '../../components/common/FormikCheckbox';
import GeneratePipelineButton from '../../components/common/GeneratePipelineButton';
import { List } from 'material-ui';
import { FormikAutocomplete } from '../../components/common/FormikAutocomplete';
import FormikMultiSelect from '../../components/common/FormikMultiSelect';
import { FormikTable } from '../../components/common/FormikTable';
import { Announcement } from '../../components/common/Announcement';
import { Environment } from '../../constants/Environment';
import { boolean } from 'yup';
import { hasS3Bucket } from '../../models/Manifest';
import MenuItem from '@material-ui/core/MenuItem';
import { environmentsNeedingAllMetadataFields } from '../../components/manifest/MetadataForm';