From 81f7090307c15923ce11ab0b963f4742ff19acf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E6=B9=9B?= <0x1304570@gmail.com> Date: Tue, 27 Feb 2024 16:11:30 +1300 Subject: [PATCH] feat: missed circleci transformation (#7011) --- .../components/scope-config-form/index.tsx | 9 + .../components/scope-config-form/misc.ts | 4 + .../src/plugins/register/circleci/index.ts | 1 + .../register/circleci/transformation.tsx | 172 ++++++++++++++++++ config-ui/src/release/stable.ts | 1 + 5 files changed, 187 insertions(+) create mode 100644 config-ui/src/plugins/register/circleci/transformation.tsx 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 3e897143e2f..8892c03ddb3 100644 --- a/config-ui/src/plugins/components/scope-config-form/index.tsx +++ b/config-ui/src/plugins/components/scope-config-form/index.tsx @@ -32,6 +32,7 @@ import { BitbucketTransformation } from '@/plugins/register/bitbucket'; import { AzureTransformation } from '@/plugins/register/azure'; import { TapdTransformation } from '@/plugins/register/tapd'; import { BambooTransformation } from '@/plugins/register/bamboo'; +import { CircleCITransformation } from '@/plugins/register/circleci'; import { operator } from '@/utils'; import { TIPS_MAP } from './misc'; @@ -207,6 +208,14 @@ export const ScopeConfigForm = ({ /> )} + {plugin === 'circleci' && ( + + )} + {plugin === 'github' && ( = { name: 'BitBucket', link: DOC_URL.PLUGIN.BITBUCKET.TRANSFORMATION, }, + circleci: { + name: 'CircleCI', + link: DOC_URL.PLUGIN.CIRCLECI.TRANSFORMATION, + }, github: { name: 'GitHub', link: DOC_URL.PLUGIN.GITHUB.TRANSFORMATION, diff --git a/config-ui/src/plugins/register/circleci/index.ts b/config-ui/src/plugins/register/circleci/index.ts index de415db39ab..5f16858cbe4 100644 --- a/config-ui/src/plugins/register/circleci/index.ts +++ b/config-ui/src/plugins/register/circleci/index.ts @@ -17,3 +17,4 @@ */ export * from './config'; +export * from './transformation'; diff --git a/config-ui/src/plugins/register/circleci/transformation.tsx b/config-ui/src/plugins/register/circleci/transformation.tsx new file mode 100644 index 00000000000..90a00377d15 --- /dev/null +++ b/config-ui/src/plugins/register/circleci/transformation.tsx @@ -0,0 +1,172 @@ +/* + * 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 { CaretRightOutlined } from '@ant-design/icons'; +import { theme, Collapse, Tag, Input } from 'antd'; + +import { ExternalLink, HelpTooltip } from '@/components'; +import { DOC_URL } from '@/release'; + +interface Props { + entities: string[]; + transformation: any; + setTransformation: React.Dispatch>; +} + +export const CircleCITransformation = ({ entities, transformation, setTransformation }: Props) => { + const { token } = theme.useToken(); + + const panelStyle: React.CSSProperties = { + marginBottom: 24, + background: token.colorFillAlter, + borderRadius: token.borderRadiusLG, + border: 'none', + }; + + return ( + } + style={{ background: token.colorBgContainer }} + size="large" + items={renderCollapseItems({ + entities, + panelStyle, + transformation, + onChangeTransformation: setTransformation, + })} + /> + ); +}; + +const renderCollapseItems = ({ + entities, + panelStyle, + transformation, + onChangeTransformation, +}: { + entities: string[]; + panelStyle: React.CSSProperties; + transformation: any; + onChangeTransformation: any; +}) => + [ + { + key: 'CICD', + label: 'CI/CD', + style: panelStyle, + children: ( + <> +

+ Deployment + + DORA + +

+

+ Use Regular Expression to define Deployments in DevLake in order to measure DORA metrics.{' '} + Learn more +

+
Convert a CircleCI Workflow Run as a DevLake Deployment when:
+
+ + The name of the CircleCI workflow or one of its jobs matches + + + onChangeTransformation({ + ...transformation, + deploymentPattern: e.target.value, + productionPattern: !e.target.value ? '' : transformation.productionPattern, + }) + } + /> + * + +
+
+ If the name also matches + + onChangeTransformation({ + ...transformation, + productionPattern: e.target.value, + }) + } + /> + , this Deployment is a ‘Production Deployment’ + +
+ + ), + }, + { + key: 'ADDITIONAL', + label: 'Additional Settings', + style: panelStyle, + children: ( + <> +

+ Enable the RefDiff plugin to pre-calculate + version-based metrics + +

+
+ Compare the last + + onChangeTransformation({ + ...transformation, + refdiff: { + ...transformation?.refdiff, + tagsLimit: +e.target.value, + }, + }) + } + /> + tags that match the + + onChangeTransformation({ + ...transformation, + refdiff: { + ...transformation?.refdiff, + tagsPattern: e.target.value, + }, + }) + } + /> + for calculation +
+ + ), + }, + ].filter((it) => entities.includes(it.key) || it.key === 'ADDITIONAL'); diff --git a/config-ui/src/release/stable.ts b/config-ui/src/release/stable.ts index 142a3650ad6..8d3b7e7f81a 100644 --- a/config-ui/src/release/stable.ts +++ b/config-ui/src/release/stable.ts @@ -44,6 +44,7 @@ const URLS = { }, CIRCLECI: { RATE_LIMIT: 'https://devlake.apache.org/docs/Configuration/CircleCI#fixed-rate-limit-optional', + TRANSFORMATION: 'https://devlake.apache.org/docs/Configuration/CircleCI#step-13---adding-scope-config-optional', }, GITHUB: { BASIS: 'https://devlake.apache.org/docs/Configuration/GitHub',