This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch feat-5949 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 9dd3c00226a61aa82d2106e05342925512c581c1 Author: mintsweet <[email protected]> AuthorDate: Wed Oct 18 19:18:43 2023 +1300 feat(config-ui): improve the transformation for github and gitlab --- config-ui/src/plugins/register/github/styled.ts | 24 +--- .../src/plugins/register/github/transformation.tsx | 130 +++++++++++--------- config-ui/src/plugins/register/gitlab/styled.ts | 24 +--- .../src/plugins/register/gitlab/transformation.tsx | 132 +++++++++++---------- 4 files changed, 155 insertions(+), 155 deletions(-) diff --git a/config-ui/src/plugins/register/github/styled.ts b/config-ui/src/plugins/register/github/styled.ts index e97be4235..107a79d6f 100644 --- a/config-ui/src/plugins/register/github/styled.ts +++ b/config-ui/src/plugins/register/github/styled.ts @@ -48,28 +48,16 @@ export const Transformation = styled.div` export const CICD = styled.div` h3 { margin-top: 16px; - - .switch { - display: inline-flex; - align-items: center; - margin-left: 16px; - font-size: 14px; - font-weight: 400; - - .bp5-switch { - margin-bottom: 0; - } - } } - .text { + .text, + .sub-text { display: flex; align-items: baseline; - margin-top: 16px; - padding-left: 24px; + margin-bottom: 8px; + } - .bp5-radio { - margin-right: 0; - } + .sub-text { + padding-left: 28px; } `; diff --git a/config-ui/src/plugins/register/github/transformation.tsx b/config-ui/src/plugins/register/github/transformation.tsx index ee3deb944..397df17fe 100644 --- a/config-ui/src/plugins/register/github/transformation.tsx +++ b/config-ui/src/plugins/register/github/transformation.tsx @@ -17,7 +17,7 @@ */ import { useState, useEffect } from 'react'; -import { FormGroup, InputGroup, TextArea, Tag, Switch, Icon, Intent, Colors } from '@blueprintjs/core'; +import { FormGroup, InputGroup, TextArea, Tag, Checkbox, Icon, Intent, Colors } from '@blueprintjs/core'; import { ExternalLink, HelpTooltip, Divider } from '@/components'; import { DOC_URL } from '@/release'; @@ -31,26 +31,28 @@ interface Props { } export const GitHubTransformation = ({ entities, transformation, setTransformation }: Props) => { - const [enableCICD, setEnableCICD] = useState(true); + const [useCustom, setUseCustom] = useState(false); useEffect(() => { - if (!transformation.deploymentPattern) { - setEnableCICD(false); + if (transformation.deploymentPattern || transformation.productionPattern) { + setUseCustom(true); + } else { + setUseCustom(false); } - }, []); + }, [transformation]); - const handleChangeEnableCICD = (e: React.FormEvent<HTMLInputElement>) => { + const handleChangeUseCustom = (e: React.FormEvent<HTMLInputElement>) => { const checked = (e.target as HTMLInputElement).checked; if (!checked) { setTransformation({ ...transformation, - deploymentPattern: undefined, - productionPattern: undefined, + deploymentPattern: '', + productionPattern: '', }); } - setEnableCICD(checked); + setUseCustom(checked); }; return ( @@ -188,57 +190,67 @@ export const GitHubTransformation = ({ entities, transformation, setTransformati <Tag minimal intent={Intent.PRIMARY} style={{ marginLeft: 8 }}> DORA </Tag> - <div className="switch"> - <span>Enable</span> - <Switch alignIndicator="right" inline checked={enableCICD} onChange={handleChangeEnableCICD} /> - </div> </h3> - {enableCICD && ( - <> - <p> - Use Regular Expression to define Deployments in DevLake in order to measure DORA metrics.{' '} - <ExternalLink link={DOC_URL.PLUGIN.GITHUB.TRANSFORMATION}>Learn more</ExternalLink> - </p> - <div style={{ marginTop: 16 }}>Convert a GitHub Workflow run as a DevLake Deployment when: </div> - <div className="text"> - <span> - The name of the <strong>GitHub workflow run</strong> or <strong>one of its jobs</strong> matches - </span> - <InputGroup - style={{ width: 200, margin: '0 8px' }} - placeholder="(deploy|push-image)" - value={transformation.deploymentPattern ?? ''} - onChange={(e) => - setTransformation({ - ...transformation, - deploymentPattern: e.target.value, - productionPattern: !e.target.value ? '' : transformation.productionPattern, - }) - } - /> - <i style={{ color: '#E34040' }}>*</i> - <HelpTooltip content="GitHub Workflow Runs: https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow"; /> - </div> - <div className="text"> - <span>If the name also matches</span> - <InputGroup - style={{ width: 200, margin: '0 8px' }} - disabled={!transformation.deploymentPattern} - placeholder="prod(.*)" - value={transformation.productionPattern ?? ''} - onChange={(e) => - setTransformation({ - ...transformation, - productionPattern: e.target.value, - }) - } - /> - <span>, this Deployment is a ‘Production Deployment’</span> - <HelpTooltip content="If you leave this field empty, all DevLake Deployments will be tagged as in the Production environment. " /> - </div> - </> - )} - <Divider /> + <p style={{ marginBottom: 16 }}> + Use Regular Expression to define Deployments in DevLake in order to measure DORA metrics.{' '} + <ExternalLink link={DOC_URL.PLUGIN.GITHUB.TRANSFORMATION}>Learn more</ExternalLink> + </p> + <div className="text"> + <Checkbox disabled checked /> + <span>Convert a GitHub Workflow to a DevLake Deployment </span> + </div> + <div className="sub-text"> + <span>If its environment name matches</span> + <InputGroup + style={{ width: 180, margin: '0 8px' }} + placeholder="(?i)prod(.*)" + value={transformation.envNamePattern} + onChange={(e) => + setTransformation({ + ...transformation, + envNamePattern: e.target.value, + }) + } + /> + <span>, this deployment is a ‘Production Deployment’</span> + </div> + <div className="text"> + <Checkbox checked={useCustom} onChange={handleChangeUseCustom} /> + <span>Convert a GitHub Workflow to a DevLake Deployment</span> + </div> + <div className="sub-text"> + <span>Its branch/tag name or one of its jobs matches</span> + <InputGroup + style={{ width: 180, margin: '0 8px' }} + placeholder="(deploy|push-image)" + value={transformation.deploymentPattern ?? ''} + onChange={(e) => + setTransformation({ + ...transformation, + deploymentPattern: e.target.value, + productionPattern: !e.target.value ? '' : transformation.productionPattern, + }) + } + /> + <i style={{ color: '#E34040' }}>*</i> + <HelpTooltip content="GitHub Workflow Runs: https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow"; /> + </div> + <div className="sub-text"> + <span>If the name also matches</span> + <InputGroup + style={{ width: 180, margin: '0 8px' }} + placeholder="prod(.*)" + value={transformation.productionPattern ?? ''} + onChange={(e) => + setTransformation({ + ...transformation, + productionPattern: e.target.value, + }) + } + /> + <span>, this Deployment is a ‘Production Deployment’</span> + <HelpTooltip content="If you leave this field empty, all Deployments will be tagged as in the Production environment. " /> + </div> </S.CICD> )} {entities.includes('CODEREVIEW') && ( diff --git a/config-ui/src/plugins/register/gitlab/styled.ts b/config-ui/src/plugins/register/gitlab/styled.ts index dd82971ed..88bf19ae1 100644 --- a/config-ui/src/plugins/register/gitlab/styled.ts +++ b/config-ui/src/plugins/register/gitlab/styled.ts @@ -23,28 +23,16 @@ export const Transformation = styled.div``; export const CICD = styled.div` h3 { margin-top: 16px; - - .switch { - display: inline-flex; - align-items: center; - margin-left: 16px; - font-size: 14px; - font-weight: 400; - - .bp5-switch { - margin-bottom: 0; - } - } } - .text { + .text, + .sub-text { display: flex; align-items: baseline; - margin-top: 16px; - padding-left: 24px; + margin-bottom: 8px; + } - .bp5-radio { - margin-right: 0; - } + .sub-text { + padding-left: 28px; } `; diff --git a/config-ui/src/plugins/register/gitlab/transformation.tsx b/config-ui/src/plugins/register/gitlab/transformation.tsx index ee006745a..5c09f239f 100644 --- a/config-ui/src/plugins/register/gitlab/transformation.tsx +++ b/config-ui/src/plugins/register/gitlab/transformation.tsx @@ -17,9 +17,9 @@ */ import { useState, useEffect } from 'react'; -import { Tag, Intent, Switch, InputGroup } from '@blueprintjs/core'; +import { Tag, Intent, Checkbox, InputGroup } from '@blueprintjs/core'; -import { ExternalLink, HelpTooltip, Divider } from '@/components'; +import { ExternalLink, HelpTooltip } from '@/components'; import { DOC_URL } from '@/release'; import * as S from './styled'; @@ -31,26 +31,28 @@ interface Props { } export const GitLabTransformation = ({ entities, transformation, setTransformation }: Props) => { - const [enableCICD, setEnableCICD] = useState(true); + const [useCustom, setUseCustom] = useState(false); useEffect(() => { - if (!transformation.deploymentPattern) { - setEnableCICD(false); + if (transformation.deploymentPattern || transformation.productionPattern) { + setUseCustom(true); + } else { + setUseCustom(false); } - }, []); + }, [transformation]); - const handleChangeCICDEnable = (e: React.FormEvent<HTMLInputElement>) => { + const handleChangeUseCustom = (e: React.FormEvent<HTMLInputElement>) => { const checked = (e.target as HTMLInputElement).checked; if (!checked) { setTransformation({ ...transformation, - deploymentPattern: undefined, - productionPattern: undefined, + deploymentPattern: '', + productionPattern: '', }); } - setEnableCICD(checked); + setUseCustom(checked); }; return ( @@ -63,57 +65,67 @@ export const GitLabTransformation = ({ entities, transformation, setTransformati <Tag minimal intent={Intent.PRIMARY} style={{ marginLeft: 8 }}> DORA </Tag> - <div className="switch"> - <span>Enable</span> - <Switch alignIndicator="right" inline checked={enableCICD} onChange={handleChangeCICDEnable} /> - </div> </h3> - {enableCICD && ( - <> - <p> - Use Regular Expression to define Deployments in DevLake in order to measure DORA metrics.{' '} - <ExternalLink link={DOC_URL.PLUGIN.GITLAB.TRANSFORMATION}>Learn more</ExternalLink> - </p> - <div style={{ marginTop: 16 }}>Convert a GitLab Pipeline as a DevLake Deployment when: </div> - <div className="text"> - <span> - Its branch/tag name or <strong>one of its jobs</strong> matches - </span> - <InputGroup - style={{ width: 200, margin: '0 8px' }} - placeholder="(deploy|push-image)" - value={transformation.deploymentPattern ?? ''} - onChange={(e) => - setTransformation({ - ...transformation, - deploymentPattern: e.target.value, - productionPattern: !e.target.value ? '' : transformation.productionPattern, - }) - } - /> - <i style={{ color: '#E34040' }}>*</i> - <HelpTooltip content="GitLab Pipelines: https://docs.gitlab.com/ee/ci/pipelines/"; /> - </div> - <div className="text"> - <span>If the name also matches</span> - <InputGroup - style={{ width: 200, margin: '0 8px' }} - disabled={!transformation.deploymentPattern} - placeholder="prod(.*)" - value={transformation.productionPattern ?? ''} - onChange={(e) => - setTransformation({ - ...transformation, - productionPattern: e.target.value, - }) - } - /> - <span>, this Deployment is a ‘Production Deployment’</span> - <HelpTooltip content="If you leave this field empty, all DevLake Deployments will be tagged as in the Production environment. " /> - </div> - </> - )} - <Divider /> + <p style={{ marginBottom: 16 }}> + Use Regular Expression to define Deployments in DevLake in order to measure DORA metrics.{' '} + <ExternalLink link={DOC_URL.PLUGIN.GITLAB.TRANSFORMATION}>Learn more</ExternalLink> + </p> + <div className="text"> + <Checkbox disabled checked /> + <span>Convert a GitLab Deployment to a DevLake Deployment</span> + </div> + <div className="sub-text"> + <span>If its environment name matches</span> + <InputGroup + style={{ width: 180, margin: '0 8px' }} + placeholder="(?i)prod(.*)" + value={transformation.envNamePattern} + onChange={(e) => + setTransformation({ + ...transformation, + envNamePattern: e.target.value, + }) + } + /> + <span>, this deployment is a ‘Production Deployment’</span> + </div> + <div className="text"> + <Checkbox checked={useCustom} onChange={handleChangeUseCustom} /> + <span>Convert a GitLab Pipeline as a DevLake Deployment when:</span> + </div> + <div className="sub-text"> + <span>Its branch/tag name or one of its jobs matches</span> + <InputGroup + style={{ width: 180, margin: '0 8px' }} + placeholder="(deploy|push-image)" + value={transformation.deploymentPattern ?? ''} + onChange={(e) => + setTransformation({ + ...transformation, + deploymentPattern: e.target.value, + productionPattern: !e.target.value ? '' : transformation.productionPattern, + }) + } + /> + <i style={{ color: '#E34040' }}>*</i> + <HelpTooltip content="GitLab Pipelines: https://docs.gitlab.com/ee/ci/pipelines/"; /> + </div> + <div className="sub-text"> + <span>If the name also matches</span> + <InputGroup + style={{ width: 180, margin: '0 8px' }} + placeholder="prod(.*)" + value={transformation.productionPattern ?? ''} + onChange={(e) => + setTransformation({ + ...transformation, + productionPattern: e.target.value, + }) + } + /> + <span>, this deployment is a ‘Production Deployment’</span> + <HelpTooltip content="If you leave this field empty, all Deployments will be tagged as in the Production environment. " /> + </div> </S.CICD> )} </S.Transformation>
