You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2024/09/20 04:23:04 UTC
(incubator-devlake) 27/39: feat: imporve the gitlab transformation cicd configuration
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch feat-dora-config
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 9654785cb0f7e2dfab14122bc975a777c3ca6cb4
Author: mintsweet <0x...@gmail.com>
AuthorDate: Tue Sep 17 21:28:23 2024 +1200
feat: imporve the gitlab transformation cicd configuration
---
.../plugins/components/scope-config-form/index.tsx | 6 +-
.../register/gitlab/assets/workflow-run.jpeg | Bin 0 -> 193279 bytes
config-ui/src/plugins/register/gitlab/config.tsx | 6 +-
.../src/plugins/register/gitlab/transformation.tsx | 131 +++++++++++++--------
.../src/plugins/register/gitlab/workflow-run.tsx | 100 ++++++++++++++++
5 files changed, 186 insertions(+), 57 deletions(-)
diff --git a/config-ui/src/plugins/components/scope-config-form/index.tsx b/config-ui/src/plugins/components/scope-config-form/index.tsx
index 50f7ee1a9..b3341d1bd 100644
--- a/config-ui/src/plugins/components/scope-config-form/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-form/index.tsx
@@ -243,7 +243,7 @@ export const ScopeConfigForm = ({
{plugin === 'github' && (
<GitHubTransformation
- plugin={plugin}
+ plugin="github"
connectionId={connectionId}
entities={entities}
transformation={transformation}
@@ -254,6 +254,8 @@ export const ScopeConfigForm = ({
{plugin === 'gitlab' && (
<GitLabTransformation
+ plugin="gitlab"
+ connectionId={connectionId}
entities={entities}
transformation={transformation}
setTransformation={setTransformation}
@@ -263,7 +265,7 @@ export const ScopeConfigForm = ({
{plugin === 'jenkins' && (
<JenkinsTransformation
- plugin={plugin}
+ plugin="jenkins"
connectionId={connectionId}
entities={entities}
transformation={transformation}
diff --git a/config-ui/src/plugins/register/gitlab/assets/workflow-run.jpeg b/config-ui/src/plugins/register/gitlab/assets/workflow-run.jpeg
new file mode 100644
index 000000000..17ecf7362
Binary files /dev/null and b/config-ui/src/plugins/register/gitlab/assets/workflow-run.jpeg differ
diff --git a/config-ui/src/plugins/register/gitlab/config.tsx b/config-ui/src/plugins/register/gitlab/config.tsx
index 9caf5260a..c2f381e8c 100644
--- a/config-ui/src/plugins/register/gitlab/config.tsx
+++ b/config-ui/src/plugins/register/gitlab/config.tsx
@@ -74,10 +74,6 @@ export const GitLabConfig: IPluginConfig = {
},
scopeConfig: {
entities: ['CODE', 'TICKET', 'CODEREVIEW', 'CROSS', 'CICD'],
- transformation: {
- envNamePattern: '(?i)prod(.*)',
- deploymentPattern: '',
- productionPattern: '',
- },
+ transformation: {},
},
};
diff --git a/config-ui/src/plugins/register/gitlab/transformation.tsx b/config-ui/src/plugins/register/gitlab/transformation.tsx
index 3ad9b97c6..a0c55a25e 100644
--- a/config-ui/src/plugins/register/gitlab/transformation.tsx
+++ b/config-ui/src/plugins/register/gitlab/transformation.tsx
@@ -20,17 +20,29 @@ import { useState, useEffect } from 'react';
import { CaretRightOutlined } from '@ant-design/icons';
import { theme, Collapse, Tag, Input, Checkbox } from 'antd';
-import { ExternalLink, HelpTooltip } from '@/components';
+import { ShowMore, ExternalLink, HelpTooltip } from '@/components';
+import { Deployments, CheckMatchedItems } from '@/plugins';
import { DOC_URL } from '@/release';
+import { WorkflowRun } from './workflow-run';
+
interface Props {
+ plugin: string;
+ connectionId: ID;
entities: string[];
transformation: any;
setTransformation: React.Dispatch<React.SetStateAction<any>>;
setHasError: React.Dispatch<React.SetStateAction<boolean>>;
}
-export const GitLabTransformation = ({ entities, transformation, setTransformation, setHasError }: Props) => {
+export const GitLabTransformation = ({
+ plugin,
+ connectionId,
+ entities,
+ transformation,
+ setTransformation,
+ setHasError,
+}: Props) => {
const [useCustom, setUseCustom] = useState(false);
useEffect(() => {
@@ -39,7 +51,7 @@ export const GitLabTransformation = ({ entities, transformation, setTransformati
} else {
setUseCustom(false);
}
- }, [transformation]);
+ }, []);
useEffect(() => {
setHasError(useCustom && !transformation.deploymentPattern);
@@ -49,6 +61,12 @@ export const GitLabTransformation = ({ entities, transformation, setTransformati
const checked = (e.target as HTMLInputElement).checked;
if (!checked) {
+ setTransformation({
+ ...transformation,
+ deploymentPattern: undefined,
+ productionPattern: undefined,
+ });
+ } else {
setTransformation({
...transformation,
deploymentPattern: '',
@@ -76,6 +94,8 @@ export const GitLabTransformation = ({ entities, transformation, setTransformati
style={{ background: token.colorBgContainer }}
size="large"
items={renderCollapseItems({
+ plugin,
+ connectionId,
entities,
panelStyle,
transformation,
@@ -88,6 +108,8 @@ export const GitLabTransformation = ({ entities, transformation, setTransformati
};
const renderCollapseItems = ({
+ plugin,
+ connectionId,
entities,
panelStyle,
transformation,
@@ -95,6 +117,8 @@ const renderCollapseItems = ({
useCustom,
onChangeUseCustom,
}: {
+ plugin: string;
+ connectionId: ID;
entities: string[];
panelStyle: React.CSSProperties;
transformation: any;
@@ -123,58 +147,65 @@ const renderCollapseItems = ({
Convert a GitLab Deployment to a DevLake Deployment
</Checkbox>
<div style={{ margin: '8px 0', paddingLeft: 28 }}>
- <span>If its environment name matches</span>
- <Input
- style={{ width: 180, margin: '0 8px' }}
- placeholder="(?i)prod(.*)"
- value={transformation.envNamePattern}
- onChange={(e) =>
- onChangeTransformation({
- ...transformation,
- envNamePattern: e.target.value,
- })
- }
+ <span>If the environment</span>
+ <Deployments
+ style={{ margin: '0 4px' }}
+ plugin={plugin}
+ connectionId={connectionId}
+ transformation={transformation}
+ setTransformation={onChangeTransformation}
/>
- <span>, this deployment is a ‘Production Deployment’</span>
+ <span>, this Deployment is a ‘Production Deployment’</span>
</div>
<Checkbox checked={useCustom} onChange={onChangeUseCustom}>
Convert a GitLab Pipeline as a DevLake Deployment when:
</Checkbox>
- <div style={{ margin: '8px 0', paddingLeft: 28 }}>
- <span>
- Its branch/tag name or <strong>one of its jobs</strong> matches
- </span>
- <Input
- style={{ width: 180, margin: '0 8px' }}
- placeholder="(deploy|push-image)"
- value={transformation.deploymentPattern ?? ''}
- onChange={(e) =>
- onChangeTransformation({
- ...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 style={{ margin: '8px 0', paddingLeft: 28 }}>
- <span>If the name also matches</span>
- <Input
- style={{ width: 180, margin: '0 8px' }}
- placeholder="prod(.*)"
- value={transformation.productionPattern ?? ''}
- onChange={(e) =>
- onChangeTransformation({
- ...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>
+ {useCustom && (
+ <div style={{ paddingLeft: 28 }}>
+ <ShowMore
+ text={<p>Select this option only if you are not enabling GitLab Deployments. </p>}
+ btnText="See how to configure"
+ >
+ <WorkflowRun />
+ </ShowMore>
+ <div style={{ margin: '8px 0' }}>
+ <span>
+ Its branch/tag name or <strong>one of its jobs</strong> matches
+ </span>
+ <Input
+ style={{ width: 180, margin: '0 8px' }}
+ placeholder="(?i)(deploy|push-image)"
+ value={transformation.deploymentPattern ?? ''}
+ onChange={(e) =>
+ onChangeTransformation({
+ ...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 style={{ margin: '8px 0' }}>
+ <span>If the name also matches</span>
+ <Input
+ style={{ width: 180, margin: '0 8px' }}
+ placeholder="(?i)(prod|release)"
+ value={transformation.productionPattern ?? ''}
+ onChange={(e) =>
+ onChangeTransformation({
+ ...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>
+ <CheckMatchedItems plugin={plugin} connectionId={connectionId} transformation={transformation} />
+ </div>
+ )}
</>
),
},
diff --git a/config-ui/src/plugins/register/gitlab/workflow-run.tsx b/config-ui/src/plugins/register/gitlab/workflow-run.tsx
new file mode 100644
index 000000000..7245c4d0c
--- /dev/null
+++ b/config-ui/src/plugins/register/gitlab/workflow-run.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 { Input } from 'antd';
+import styled from 'styled-components';
+
+import { ExternalLink } from '@/components';
+
+import Picture from './assets/workflow-run.jpeg';
+
+const Wrapper = styled.div`
+ padding: 8px 16px;
+ width: 100%;
+ font-size: 12px;
+ background-color: #fff;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ li {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ span.blue {
+ color: #7497f7;
+ }
+
+ span.yellow {
+ color: #f4be55;
+ }
+
+ span.red {
+ color: #ff8b8b;
+ }
+`;
+
+export const WorkflowRun = () => {
+ return (
+ <Wrapper>
+ <h5>
+ Example - Convert GitLab pipeline runs that have executed the ‘build-image’ job on the ‘master’ branch to
+ production deployments
+ </h5>
+ <ol>
+ <li>Go to your GitLab/Build/Jobs page, where you will see the job run history.</li>
+ <li>
+ Search for the job ‘build-image’, and you will see all pipelines that have executed this job (highlighted in
+ the <span className="yellow">yellow</span> rectangle).
+ <img src={Picture} width="100%" alt="" />
+ </li>
+ <li>
+ <div>
+ In the first input field, enter the following regex to identify deployments (as highlighted in the{' '}
+ <span className="yellow">yellow</span> rectangle):
+ </div>
+ <div style={{ marginTop: 10 }}>
+ Its branch or <strong>one of its jobs</strong> matches
+ <Input style={{ width: 240 }} size="small" disabled value="(?i)build-image" />
+ </div>
+ </li>
+ <li>
+ <div>
+ In the second input field, enter the following regex to identify the production deployments (highlighted in
+ the <span className="red">red</span> rectangle). If left empty, all deployments will be regarded as
+ Production Deployments.
+ </div>
+ <div style={{ marginTop: 10 }}>
+ If the branch or the job also matches <Input style={{ width: 100 }} size="small" disabled value="master" />,
+ this deployment will be regarded as a ‘Production Deployment’
+ </div>
+ </li>
+ </ol>
+ <div>
+ For more information, please refer to{' '}
+ <ExternalLink link="https://devlake.apache.org/docs/Configuration/GitLab/#step-13---add-scope-config-optional">
+ this documentation
+ </ExternalLink>
+ .
+ </div>
+ </Wrapper>
+ );
+};