You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/03/15 07:43:23 UTC
[incubator-devlake] branch main updated: feat(config-ui): adjust the transformation field (#4671)
This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 094d1876d feat(config-ui): adjust the transformation field (#4671)
094d1876d is described below
commit 094d1876d94e45dd638afe3319b1997c66d1ba1b
Author: 青湛 <0x...@gmail.com>
AuthorDate: Wed Mar 15 15:43:17 2023 +0800
feat(config-ui): adjust the transformation field (#4671)
---
.../src/plugins/register/bitbucket/config.tsx | 4 +-
config-ui/src/plugins/register/bitbucket/styled.ts | 24 +++++-
.../plugins/register/bitbucket/transformation.tsx | 84 ++++++++-----------
config-ui/src/plugins/register/github/styled.ts | 23 +++++-
.../src/plugins/register/github/transformation.tsx | 79 ++++++++----------
.../register/gitlab/components/ci-cd/index.tsx | 96 ----------------------
.../plugins/register/gitlab/components/index.ts | 19 -----
config-ui/src/plugins/register/gitlab/styled.ts | 31 ++++---
.../src/plugins/register/gitlab/transformation.tsx | 83 ++++++++++++++++++-
.../register/jenkins/components/ci-cd/index.tsx | 96 ----------------------
.../plugins/register/jenkins/components/index.ts | 1 -
config-ui/src/plugins/register/jenkins/styled.ts | 31 ++++---
.../plugins/register/jenkins/transformation.tsx | 82 +++++++++++++++++-
13 files changed, 311 insertions(+), 342 deletions(-)
diff --git a/config-ui/src/plugins/register/bitbucket/config.tsx b/config-ui/src/plugins/register/bitbucket/config.tsx
index 85532db91..e53ff18c9 100644
--- a/config-ui/src/plugins/register/bitbucket/config.tsx
+++ b/config-ui/src/plugins/register/bitbucket/config.tsx
@@ -64,8 +64,8 @@ export const BitBucketConfig: PluginConfigType = {
issueStatusInProgress: '',
issueStatusDone: 'closed',
issueStatusOther: 'on hold,wontfix,duplicate,invalid',
- productionPattern: '',
- deploymentPattern: '',
+ deploymentPattern: '(deploy|push-image)',
+ productionPattern: 'production',
refdiff: {
tagsOrder: 10,
tagsPattern: '/v\\d+\\.\\d+(\\.\\d+(-rc)*\\d*)*$/',
diff --git a/config-ui/src/plugins/register/bitbucket/styled.ts b/config-ui/src/plugins/register/bitbucket/styled.ts
index 876b88901..e583dcd91 100644
--- a/config-ui/src/plugins/register/bitbucket/styled.ts
+++ b/config-ui/src/plugins/register/bitbucket/styled.ts
@@ -34,11 +34,33 @@ export const TransformationWrapper = styled.div`
.ci-cd {
h3 {
margin-top: 16px;
- margin-bottom: 8px;
+
+ .bp4-tag {
+ margin-left: 4px;
+ }
}
.radio {
padding-left: 20px;
+ margin-bottom: 16px;
+
+ .input {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+
+ & + .input {
+ margin-top: 8px;
+ }
+
+ p {
+ color: #292b3f;
+ }
+
+ .bp4-input-group {
+ margin: 0 4px;
+ }
+ }
}
}
diff --git a/config-ui/src/plugins/register/bitbucket/transformation.tsx b/config-ui/src/plugins/register/bitbucket/transformation.tsx
index 5105cadf3..c24a7a7e9 100644
--- a/config-ui/src/plugins/register/bitbucket/transformation.tsx
+++ b/config-ui/src/plugins/register/bitbucket/transformation.tsx
@@ -51,13 +51,7 @@ export const BitbucketTransformation = ({ transformation, setTransformation }: P
);
const handleChangeCICDEnable = (b: boolean) => {
- if (b) {
- setTransformation({
- ...transformation,
- deploymentPattern: undefined,
- productionPattern: undefined,
- });
- } else {
+ if (!b) {
setTransformation({
...transformation,
deploymentPattern: '',
@@ -151,7 +145,7 @@ export const BitbucketTransformation = ({ transformation, setTransformation }: P
<h2>CI/CD</h2>
<h3>
<span>Deployment</span>
- <Tag minimal intent={Intent.PRIMARY} style={{ marginLeft: 4, fontWeight: 400 }}>
+ <Tag minimal intent={Intent.PRIMARY}>
DORA
</Tag>
</h3>
@@ -172,50 +166,42 @@ export const BitbucketTransformation = ({ transformation, setTransformation }: P
onChange={(e) => handleChangeCICDEnable((e.target as HTMLInputElement).checked)}
/>
{enableCICD && (
- <>
- <div className="radio">
- <FormGroup
- inline
- label={
- <>
- <span>Deployment</span>
- <HelpTooltip content="A BitBucket build with a name that matches the RegEx will be considered as a deployment in DevLake." />
- </>
+ <div className="radio">
+ <div className="input">
+ <p>The Pipeline step name that matches</p>
+ <InputGroup
+ placeholder="(deploy|push-image)"
+ value={transformation.deploymentPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ deploymentPattern: e.target.value,
+ })
}
- >
- <InputGroup
- placeholder="(deploy|push-image)"
- value={transformation.deploymentPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- deploymentPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- <FormGroup
- inline
- label={
- <>
- <span>Production Environment</span>
- <HelpTooltip content="DevLake is only concerned with deployments in production environment when calculating DORA metrics. A BitBucket build with a name that matches the given RegEx will be considered as a job in the Production environment. If you leave this field empty, all data will be tagged as in the Production environment. " />
- </>
+ />
+ <p>
+ will be registered as a `Deployment` in DevLake. <span style={{ color: '#E34040' }}>*</span>
+ </p>
+ </div>
+ <div className="input">
+ <p>The Pipeline step name that matches</p>
+ <InputGroup
+ disabled={!transformation.deploymentPattern}
+ placeholder="production"
+ value={transformation.productionPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ productionPattern: e.target.value,
+ })
}
- >
- <InputGroup
- placeholder="production"
- value={transformation.productionPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- productionPattern: e.target.value,
- })
- }
- />
- </FormGroup>
+ />
+ <p>
+ will be registered as a `Deployment` to the Production environment in DevLake.
+ <HelpTooltip content="If you leave this field empty, all data will be tagged as in the Production environment. " />
+ </p>
</div>
- </>
+ </div>
)}
</div>
<Divider />
diff --git a/config-ui/src/plugins/register/github/styled.ts b/config-ui/src/plugins/register/github/styled.ts
index 876b88901..e8358d9ea 100644
--- a/config-ui/src/plugins/register/github/styled.ts
+++ b/config-ui/src/plugins/register/github/styled.ts
@@ -34,11 +34,32 @@ export const TransformationWrapper = styled.div`
.ci-cd {
h3 {
margin-top: 16px;
- margin-bottom: 8px;
+
+ .bp4-tag {
+ margin-left: 4px;
+ }
}
.radio {
padding-left: 20px;
+ margin-bottom: 16px;
+
+ .input {
+ display: flex;
+ align-items: center;
+
+ & + .input {
+ margin-top: 8px;
+ }
+
+ p {
+ color: #292b3f;
+ }
+
+ .bp4-input-group {
+ margin: 0 4px;
+ }
+ }
}
}
diff --git a/config-ui/src/plugins/register/github/transformation.tsx b/config-ui/src/plugins/register/github/transformation.tsx
index 4293c1139..0c24b6897 100644
--- a/config-ui/src/plugins/register/github/transformation.tsx
+++ b/config-ui/src/plugins/register/github/transformation.tsx
@@ -210,7 +210,7 @@ export const GitHubTransformation = ({ transformation, setTransformation }: Prop
<h2>CI/CD</h2>
<h3>
<span>Deployment</span>
- <Tag minimal intent={Intent.PRIMARY} style={{ marginLeft: 4, fontWeight: 400 }}>
+ <Tag minimal intent={Intent.PRIMARY}>
DORA
</Tag>
</h3>
@@ -221,56 +221,49 @@ export const GitHubTransformation = ({ transformation, setTransformation }: Prop
>
<Radio label="Detect Deployment from Jobs in GitHub Action" value={1} />
{enableCICD === 1 && (
- <>
+ <div className="radio">
<p>
- Not sure what a GitHub Action is?{' '}
+ Please fill in the following RegEx, as DevLake ONLY accounts for deployments in the production
+ environment for DORA metrics. Not sure what a GitHub Action job is?{' '}
<ExternalLink link="https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow">
See it here
</ExternalLink>
</p>
- <div className="radio">
- <FormGroup
- inline
- label={
- <>
- <span>Deployment</span>
- <HelpTooltip content="A GitHub Action job with a name that matches the RegEx will be considered as a deployment in DevLake." />
- </>
+ <div className="input">
+ <p>The Job name that matches</p>
+ <InputGroup
+ placeholder="(deploy|push-image)"
+ value={transformation.deploymentPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ deploymentPattern: e.target.value,
+ })
}
- >
- <InputGroup
- placeholder="(deploy|push-image)"
- value={transformation.deploymentPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- deploymentPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- <FormGroup
- inline
- label={
- <>
- <span>Production</span>
- <HelpTooltip content="DevLake is only concerned with deployments in production environment when calculating DORA metrics.A GitHub Action job with a name that matches the given RegEx will be considered as a job in the Production environment. If you leave this field empty, all data will be tagged as in the Production environment." />
- </>
+ />
+ <p>
+ will be registered as a `Deployment` in DevLake. <span style={{ color: '#E34040' }}>*</span>
+ </p>
+ </div>
+ <div className="input">
+ <p>The Job name that matches</p>
+ <InputGroup
+ disabled={!transformation.deploymentPattern}
+ placeholder="production"
+ value={transformation.productionPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ productionPattern: e.target.value,
+ })
}
- >
- <InputGroup
- placeholder="production"
- value={transformation.productionPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- productionPattern: e.target.value,
- })
- }
- />
- </FormGroup>
+ />
+ <p>
+ will be registered as a `Deployment` to the Production environment in DevLake.
+ <HelpTooltip content="If you leave this field empty, all data will be tagged as in the Production environment. " />
+ </p>
</div>
- </>
+ </div>
)}
<Radio label="Not using any GitHub entities as Deployment" value={0} />
</RadioGroup>
diff --git a/config-ui/src/plugins/register/gitlab/components/ci-cd/index.tsx b/config-ui/src/plugins/register/gitlab/components/ci-cd/index.tsx
deleted file mode 100644
index 00fabc485..000000000
--- a/config-ui/src/plugins/register/gitlab/components/ci-cd/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import React, { useState } from 'react';
-import { Tag, Intent, RadioGroup, Radio, FormGroup, InputGroup } from '@blueprintjs/core';
-
-interface Props {
- transformation: any;
- setTransformation: React.Dispatch<React.SetStateAction<any>>;
-}
-
-export const CiCd = ({ transformation, setTransformation }: Props) => {
- const [enable, setEnable] = useState(1);
-
- const handleChangeEnable = (e: number) => {
- if (e === 0) {
- setTransformation({
- ...transformation,
- deploymentPattern: undefined,
- productionPattern: undefined,
- });
- } else {
- setTransformation({
- ...transformation,
- deploymentPattern: '',
- productionPattern: '',
- });
- }
- setEnable(e);
- };
-
- return (
- <>
- <h3>CI/CD</h3>
- <p>
- <strong>What is a deployment?</strong>{' '}
- <Tag minimal intent={Intent.PRIMARY} style={{ fontSize: '10px' }}>
- DORA
- </Tag>
- </p>
- <p>Define Deployment using one of the following options.</p>
- <RadioGroup selectedValue={enable} onChange={(e) => handleChangeEnable(+(e.target as HTMLInputElement).value)}>
- <Radio label="Detect Deployment from Jobs in GitLab CI" value={1} />
- {enable === 1 && (
- <div style={{ paddingLeft: 20 }}>
- <p>A GitLab CI job with a name that matches the given regEx will be considered as a Deployment.</p>
- <FormGroup inline label="Deployment">
- <InputGroup
- placeholder="(deploy|push-image)"
- value={transformation.deploymentPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- deploymentPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- <p>
- A GitLab CI job that with a name matches the given regEx will be considered as a job in the Production
- environment. If you leave this field empty, all data will be tagged as in the Production environment.
- </p>
- <FormGroup inline label="Production">
- <InputGroup
- placeholder="production"
- value={transformation.productionPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- productionPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- </div>
- )}
- <Radio label="Not using GitLab Builds as Deployments" value={0} />
- </RadioGroup>
- </>
- );
-};
diff --git a/config-ui/src/plugins/register/gitlab/components/index.ts b/config-ui/src/plugins/register/gitlab/components/index.ts
deleted file mode 100644
index a8a5796be..000000000
--- a/config-ui/src/plugins/register/gitlab/components/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-export * from './ci-cd';
diff --git a/config-ui/src/plugins/register/gitlab/styled.ts b/config-ui/src/plugins/register/gitlab/styled.ts
index 11365fb72..8c64ba989 100644
--- a/config-ui/src/plugins/register/gitlab/styled.ts
+++ b/config-ui/src/plugins/register/gitlab/styled.ts
@@ -20,27 +20,32 @@ import styled from 'styled-components';
export const TransformationWrapper = styled.div`
h3 {
- margin: 0 0 8px;
+ margin-top: 16px;
.bp4-tag {
- margin-left: 6px;
+ margin-left: 4px;
}
}
- p {
- margin: 0 0 8px;
- }
+ .radio {
+ padding-left: 20px;
+ margin-bottom: 16px;
- .bp4-form-group {
- display: flex;
- align-items: center;
+ .input {
+ display: flex;
+ align-items: center;
- .bp4-label {
- flex: 0 0 150px;
- }
+ & + .input {
+ margin-top: 8px;
+ }
+
+ p {
+ color: #292b3f;
+ }
- .bp4-form-content {
- flex: auto;
+ .bp4-input-group {
+ margin: 0 4px;
+ }
}
}
`;
diff --git a/config-ui/src/plugins/register/gitlab/transformation.tsx b/config-ui/src/plugins/register/gitlab/transformation.tsx
index 04073aa2b..de631cb3d 100644
--- a/config-ui/src/plugins/register/gitlab/transformation.tsx
+++ b/config-ui/src/plugins/register/gitlab/transformation.tsx
@@ -16,9 +16,11 @@
*
*/
-import React from 'react';
+import React, { useState } from 'react';
+import { Tag, Intent, RadioGroup, Radio, InputGroup } from '@blueprintjs/core';
+
+import { ExternalLink, HelpTooltip } from '@/components';
-import { CiCd } from './components';
import * as S from './styled';
interface Props {
@@ -26,10 +28,83 @@ interface Props {
setTransformation: React.Dispatch<React.SetStateAction<any>>;
}
-export const GitLabTransformation = ({ ...props }: Props) => {
+export const GitLabTransformation = ({ transformation, setTransformation }: Props) => {
+ const [enable, setEnable] = useState(1);
+
+ const handleChangeEnable = (e: number) => {
+ if (e === 0) {
+ setTransformation({
+ ...transformation,
+ deploymentPattern: undefined,
+ productionPattern: undefined,
+ });
+ } else {
+ setTransformation({
+ ...transformation,
+ deploymentPattern: '',
+ productionPattern: '',
+ });
+ }
+ setEnable(e);
+ };
+
return (
<S.TransformationWrapper>
- <CiCd {...props} />
+ <h2>CI/CD</h2>
+ <h3>
+ <span>Deployment</span>
+ <Tag minimal intent={Intent.PRIMARY}>
+ DORA
+ </Tag>
+ </h3>
+ <p>Tell DevLake what CI jobs are Deployments.</p>
+ <RadioGroup selectedValue={enable} onChange={(e) => handleChangeEnable(+(e.target as HTMLInputElement).value)}>
+ <Radio label="Detect Deployments from Jobs in GitLab CI" value={1} />
+ {enable === 1 && (
+ <div className="radio">
+ <p>
+ Please fill in the following RegEx, as DevLake ONLY accounts for deployments in the production environment
+ for DORA metrics. Not sure what a GitLab CI job is?{' '}
+ <ExternalLink link="https://docs.gitlab.com/ee/ci/jobs/">See it here</ExternalLink>
+ </p>
+ <div className="input">
+ <p>The Job name that matches</p>
+ <InputGroup
+ placeholder="(deploy|push-image)"
+ value={transformation.deploymentPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ deploymentPattern: e.target.value,
+ })
+ }
+ />
+ <p>
+ will be registered as a `Deployment` in DevLake. <span style={{ color: '#E34040' }}>*</span>
+ </p>
+ </div>
+ <div className="input">
+ <p>The Job name that matches</p>
+ <InputGroup
+ disabled={!transformation.deploymentPattern}
+ placeholder="production"
+ value={transformation.productionPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ productionPattern: e.target.value,
+ })
+ }
+ />
+ <p>
+ will be registered as a `Deployment` to the Production environment in DevLake.
+ <HelpTooltip content="If you leave this field empty, all data will be tagged as in the Production environment. " />
+ </p>
+ </div>
+ </div>
+ )}
+ <Radio label="Not using GitLab CI Jobs as Deployment" value={0} />
+ </RadioGroup>
</S.TransformationWrapper>
);
};
diff --git a/config-ui/src/plugins/register/jenkins/components/ci-cd/index.tsx b/config-ui/src/plugins/register/jenkins/components/ci-cd/index.tsx
deleted file mode 100644
index 2756fc37c..000000000
--- a/config-ui/src/plugins/register/jenkins/components/ci-cd/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import React, { useState } from 'react';
-import { Tag, Intent, RadioGroup, Radio, FormGroup, InputGroup } from '@blueprintjs/core';
-
-interface Props {
- transformation: any;
- setTransformation: React.Dispatch<React.SetStateAction<any>>;
-}
-
-export const CiCd = ({ transformation, setTransformation }: Props) => {
- const [enable, setEnable] = useState(1);
-
- const handleChangeEnable = (e: number) => {
- if (e === 0) {
- setTransformation({
- ...transformation,
- deploymentPattern: undefined,
- productionPattern: undefined,
- });
- } else {
- setTransformation({
- ...transformation,
- deploymentPattern: '',
- productionPattern: '',
- });
- }
- setEnable(e);
- };
-
- return (
- <>
- <h3>CI/CD</h3>
- <p>
- <strong>What is a deployment?</strong>{' '}
- <Tag minimal intent={Intent.PRIMARY} style={{ fontSize: '10px' }}>
- DORA
- </Tag>
- </p>
- <p>Define Deployment using one of the following options.</p>
- <RadioGroup selectedValue={enable} onChange={(e) => handleChangeEnable(+(e.target as HTMLInputElement).value)}>
- <Radio label="Detect Deployment from Builds in Jenkins" value={1} />
- {enable === 1 && (
- <div style={{ paddingLeft: 20 }}>
- <p>A Jenkins build with a name that matches the given regEx will be considered as a Deployment.</p>
- <FormGroup inline label="Deployment">
- <InputGroup
- placeholder="(?i)deploy"
- value={transformation.deploymentPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- deploymentPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- <p>
- A Jenkins build with a name that matches the given regEx will be considered as a build in the Production
- environment. If you leave this field empty, all data will be tagged as in the Production environment.
- </p>
- <FormGroup inline label="Production">
- <InputGroup
- placeholder="(?i)production"
- value={transformation.productionPattern}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- productionPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- </div>
- )}
- <Radio label="Not using Jenkins Builds as Deployments" value={0} />
- </RadioGroup>
- </>
- );
-};
diff --git a/config-ui/src/plugins/register/jenkins/components/index.ts b/config-ui/src/plugins/register/jenkins/components/index.ts
index 627989eb2..30c0d1fa0 100644
--- a/config-ui/src/plugins/register/jenkins/components/index.ts
+++ b/config-ui/src/plugins/register/jenkins/components/index.ts
@@ -17,4 +17,3 @@
*/
export * from './miller-columns';
-export * from './ci-cd';
diff --git a/config-ui/src/plugins/register/jenkins/styled.ts b/config-ui/src/plugins/register/jenkins/styled.ts
index 11365fb72..8c64ba989 100644
--- a/config-ui/src/plugins/register/jenkins/styled.ts
+++ b/config-ui/src/plugins/register/jenkins/styled.ts
@@ -20,27 +20,32 @@ import styled from 'styled-components';
export const TransformationWrapper = styled.div`
h3 {
- margin: 0 0 8px;
+ margin-top: 16px;
.bp4-tag {
- margin-left: 6px;
+ margin-left: 4px;
}
}
- p {
- margin: 0 0 8px;
- }
+ .radio {
+ padding-left: 20px;
+ margin-bottom: 16px;
- .bp4-form-group {
- display: flex;
- align-items: center;
+ .input {
+ display: flex;
+ align-items: center;
- .bp4-label {
- flex: 0 0 150px;
- }
+ & + .input {
+ margin-top: 8px;
+ }
+
+ p {
+ color: #292b3f;
+ }
- .bp4-form-content {
- flex: auto;
+ .bp4-input-group {
+ margin: 0 4px;
+ }
}
}
`;
diff --git a/config-ui/src/plugins/register/jenkins/transformation.tsx b/config-ui/src/plugins/register/jenkins/transformation.tsx
index 15f22d37c..17fef0c46 100644
--- a/config-ui/src/plugins/register/jenkins/transformation.tsx
+++ b/config-ui/src/plugins/register/jenkins/transformation.tsx
@@ -16,20 +16,94 @@
*
*/
-import React from 'react';
+import React, { useState } from 'react';
+import { Tag, Intent, RadioGroup, Radio, InputGroup } from '@blueprintjs/core';
-import { CiCd } from './components';
import * as S from './styled';
+import { ExternalLink, HelpTooltip } from '@/components';
interface Props {
transformation: any;
setTransformation: React.Dispatch<React.SetStateAction<any>>;
}
-export const JenkinsTransformation = ({ ...props }: Props) => {
+export const JenkinsTransformation = ({ transformation, setTransformation }: Props) => {
+ const [enable, setEnable] = useState(1);
+
+ const handleChangeEnable = (e: number) => {
+ if (e === 0) {
+ setTransformation({
+ ...transformation,
+ deploymentPattern: undefined,
+ productionPattern: undefined,
+ });
+ } else {
+ setTransformation({
+ ...transformation,
+ deploymentPattern: '',
+ productionPattern: '',
+ });
+ }
+ setEnable(e);
+ };
+
return (
<S.TransformationWrapper>
- <CiCd {...props} />
+ <h2>CI/CD</h2>
+ <h3>
+ <span>Deployment</span>
+ <Tag minimal intent={Intent.PRIMARY}>
+ DORA
+ </Tag>
+ </h3>
+ <p>Tell DevLake what CI builds are Deployments.</p>
+ <RadioGroup selectedValue={enable} onChange={(e) => handleChangeEnable(+(e.target as HTMLInputElement).value)}>
+ <Radio label="Detect Deployments from Jenkins Builds" value={1} />
+ {enable === 1 && (
+ <div className="radio">
+ <p>
+ Please fill in the following RegEx, as DevLake ONLY accounts for deployments in the production environment
+ for DORA metrics. Not sure what a Jenkins Build is?{' '}
+ <ExternalLink link="https://www.jenkins.io/doc/book/pipeline/#overview">See it here</ExternalLink>
+ </p>
+ <div className="input">
+ <p>The Build name that matches</p>
+ <InputGroup
+ placeholder="(deploy|push-image)"
+ value={transformation.deploymentPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ deploymentPattern: e.target.value,
+ })
+ }
+ />
+ <p>
+ will be registered as a `Deployment` in DevLake. <span style={{ color: '#E34040' }}>*</span>
+ </p>
+ </div>
+ <div className="input">
+ <p>The Build name that matches</p>
+ <InputGroup
+ disabled={!transformation.deploymentPattern}
+ placeholder="production"
+ value={transformation.productionPattern}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ productionPattern: e.target.value,
+ })
+ }
+ />
+ <p>
+ will be registered as a `Deployment` to the Production environment in DevLake.
+ <HelpTooltip content="If you leave this field empty, all data will be tagged as in the Production environment. " />
+ </p>
+ </div>
+ </div>
+ )}
+ <Radio label="Not using Jenkins Builds as Deployments" value={0} />
+ </RadioGroup>
</S.TransformationWrapper>
);
};