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 80ae9034877dcc3c9ebdd3c3d1546e95f0842c4a
Author: mintsweet <0x1304...@gmail.com>
AuthorDate: Wed Sep 18 10:10:25 2024 +1200
feat: improve the azuredevops transformation cicd configuration
---
.../plugins/components/scope-config-form/index.tsx | 12 +--
.../register/azure/assets/workflow-run.jpeg | Bin 0 -> 149316 bytes
config-ui/src/plugins/register/azure/config.tsx | 2 -
.../src/plugins/register/azure/transformation.tsx | 30 +++++--
.../src/plugins/register/azure/workflow-run.tsx | 98 +++++++++++++++++++++
5 files changed, 123 insertions(+), 19 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 6a14f9ed8..dae5e8000 100644
--- a/config-ui/src/plugins/components/scope-config-form/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-form/index.tsx
@@ -193,16 +193,10 @@ export const ScopeConfigForm = ({
)}
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
- {plugin === 'azuredevops' && (
- <AzureTransformation
- entities={entities}
- transformation={transformation}
- setTransformation={setTransformation}
- />
- )}
-
- {plugin === 'azuredevops_go' && (
+ {(plugin === 'azuredevops' || plugin === 'azuredevops_go') && (
<AzureTransformation
+ plugin="azuredevops"
+ connectionId={connectionId}
entities={entities}
transformation={transformation}
setTransformation={setTransformation}
diff --git a/config-ui/src/plugins/register/azure/assets/workflow-run.jpeg
b/config-ui/src/plugins/register/azure/assets/workflow-run.jpeg
new file mode 100644
index 000000000..fb13088b8
Binary files /dev/null and
b/config-ui/src/plugins/register/azure/assets/workflow-run.jpeg differ
diff --git a/config-ui/src/plugins/register/azure/config.tsx
b/config-ui/src/plugins/register/azure/config.tsx
index 8a2324888..777a9fd73 100644
--- a/config-ui/src/plugins/register/azure/config.tsx
+++ b/config-ui/src/plugins/register/azure/config.tsx
@@ -119,8 +119,6 @@ export const AzureGoConfig: IPluginConfig = {
scopeConfig: {
entities: ['CODE', 'CODEREVIEW', 'CROSS', 'CICD'],
transformation: {
- deploymentPattern: '(deploy|push-image)',
- productionPattern: 'prod(.*)',
refdiff: {
tagsLimit: 10,
tagsPattern: '/v\\d+\\.\\d+(\\.\\d+(-rc)*\\d*)*$/',
diff --git a/config-ui/src/plugins/register/azure/transformation.tsx
b/config-ui/src/plugins/register/azure/transformation.tsx
index df57ceb04..0a7ad5c98 100644
--- a/config-ui/src/plugins/register/azure/transformation.tsx
+++ b/config-ui/src/plugins/register/azure/transformation.tsx
@@ -19,16 +19,21 @@
import { CaretRightOutlined } from '@ant-design/icons';
import { theme, Collapse, Tag, Input } from 'antd';
-import { ExternalLink, HelpTooltip } from '@/components';
+import { ShowMore, ExternalLink, HelpTooltip } from '@/components';
+import { 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>>;
}
-export const AzureTransformation = ({ entities, transformation,
setTransformation }: Props) => {
+export const AzureTransformation = ({ plugin, connectionId, entities,
transformation, setTransformation }: Props) => {
const { token } = theme.useToken();
const panelStyle: React.CSSProperties = {
@@ -46,6 +51,8 @@ export const AzureTransformation = ({ entities,
transformation, setTransformatio
style={{ background: token.colorBgContainer }}
size="large"
items={renderCollapseItems({
+ plugin,
+ connectionId,
entities,
panelStyle,
transformation,
@@ -56,11 +63,15 @@ export const AzureTransformation = ({ entities,
transformation, setTransformatio
};
const renderCollapseItems = ({
+ plugin,
+ connectionId,
entities,
panelStyle,
transformation,
onChangeTransformation,
}: {
+ plugin: string;
+ connectionId: ID;
entities: string[];
panelStyle: React.CSSProperties;
transformation: any;
@@ -79,10 +90,12 @@ const renderCollapseItems = ({
DORA
</Tag>
</h3>
- <p style={{ marginBottom: 16 }}>
- Use Regular Expression to define Deployments in DevLake in order
to measure DORA metrics.{' '}
- <ExternalLink
link={DOC_URL.PLUGIN.AZUREDEVOPS.TRANSFORMATION}>Learn more</ExternalLink>
- </p>
+ <ShowMore
+ text={<p>Use Regular Expression to define Deployments to measure
DORA metrics.</p>}
+ btnText="See how to configure"
+ >
+ <WorkflowRun />
+ </ShowMore>
<div>Convert a Azure Pipeline Run as a DevLake Deployment when:
</div>
<div style={{ margin: '8px 0', paddingLeft: 28 }}>
<span>
@@ -90,7 +103,7 @@ const renderCollapseItems = ({
</span>
<Input
style={{ width: 200, margin: '0 8px' }}
- placeholder="(deploy|push-image)"
+ placeholder="(?i)(deploy|push-image)"
value={transformation.deploymentPattern ?? ''}
onChange={(e) =>
onChangeTransformation({
@@ -107,7 +120,7 @@ const renderCollapseItems = ({
<span>If the name also matches</span>
<Input
style={{ width: 200, margin: '0 8px' }}
- placeholder="prod(.*)"
+ placeholder="(?i)(prod|release)"
value={transformation.productionPattern ?? ''}
onChange={(e) =>
onChangeTransformation({
@@ -119,6 +132,7 @@ const renderCollapseItems = ({
<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>
+ <CheckMatchedItems plugin={plugin} connectionId={connectionId}
transformation={transformation} />
</>
),
},
diff --git a/config-ui/src/plugins/register/azure/workflow-run.tsx
b/config-ui/src/plugins/register/azure/workflow-run.tsx
new file mode 100644
index 000000000..088ba53bb
--- /dev/null
+++ b/config-ui/src/plugins/register/azure/workflow-run.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 all runs of Azure pipeline ‘build-and-push-image’
to production deployments</h5>
+ <ol>
+ <li>Go to your Azure Pipelines page. </li>
+ <li>
+ Navigate to ‘Runs’ (See the <span className="blue">blue</span>
text), where you will see all runs of all
+ pipelines (including ‘build-and-push-image’) in this repository.
+ <img src={Picture} width="100%" alt="" />
+ </li>
+ <li>
+ <div>
+ In the first input field, enter the following regex to identify
deployments (highlighted in the{' '}
+ <span className="yellow">yellow</span> rectangle and text).
+ </div>
+ <div style={{ marginTop: 10 }}>
+ The name of the <strong>Azure pipeline</strong> or <strong>one of
its jobs</strong> matches
+ <Input style={{ width: 240 }} size="small" disabled
value="(?i)(build-and-push-image|deploy-to-test)" />
+ </div>
+ </li>
+ <li>
+ <div>
+ In the second input field, enter the following regex to identify
the production deployments (as shown in the{' '}
+ <span className="red">red</span> rectangle). If left empty, all
deployments in the{' '}
+ <span className="yellow">yellow</span> rectangle will be regarded
as Production Deployments.
+ </div>
+ <div style={{ marginTop: 10 }}>
+ If the name also matches{' '}
+ <Input style={{ width: 100 }} size="small" disabled
value="(?i)build-and-push-image" />, this deployment
+ will be classified as a ‘Production Deployment’
+ </div>
+ </li>
+ </ol>
+ <div>
+ For more information, please refer to{' '}
+ <ExternalLink
link="https://devlake.apache.org/docs/Configuration/AzureDevOps/#cicd";>
+ this documentation
+ </ExternalLink>
+ .
+ </div>
+ </Wrapper>
+ );
+};
