Skip to content

Commit

Permalink
feat(config-ui): improve the transformation for github and gitlab (#6273
Browse files Browse the repository at this point in the history 
)

* fix(config-ui): the style for help-tooltip component

* feat(config-ui): improve the transformation for github and gitlab
  • Loading branch information
@mintsweet
mintsweet authored Oct 18, 2023
1 parent f53d9ca commit 0d77e7c
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 160 deletions.
9 changes: 4 additions & 5 deletions config-ui/src/components/tooltip/help-tooltip/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,13 @@
*
*/

import { Icon, Position } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import { Icon, Tooltip, Position } from '@blueprintjs/core';
import styled from 'styled-components';

const Wrapper = styled.span`
margin-left: 4px;
& > .bp5-popover2-target {
& > .bp5-popover-target {
display: inline-block !important;
.bp5-icon {
Expand All @@ -41,9 +40,9 @@ interface Props {
export const HelpTooltip = ({ content, style }: Props) => {
return (
<Wrapper style={style}>
<Tooltip2 position={Position.TOP} content={content}>
<Tooltip position={Position.TOP} content={content}>
<Icon icon="help" size={12} color="#94959f" />
</Tooltip2>
</Tooltip>
</Wrapper>
);
};
24 changes: 6 additions & 18 deletions config-ui/src/plugins/register/github/styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
130 changes: 71 additions & 59 deletions config-ui/src/plugins/register/github/transformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
Expand Down Expand Up @@ -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') && (
Expand Down
24 changes: 6 additions & 18 deletions config-ui/src/plugins/register/gitlab/styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
Loading

0 comments on commit 0d77e7c

Please sign in to comment.