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 1282f6ef8d0e3ae595514c80e9974e007531b0cd
Author: mintsweet <0x1304...@gmail.com>
AuthorDate: Sat Sep 14 12:37:49 2024 +1200
feat: add github workflow run guideline
---
.../register/github/assets/workflow-run.jpeg | Bin 0 -> 189484 bytes
.../src/plugins/register/github/transformation.tsx | 40 ++++++--
.../src/plugins/register/github/workflow-run.tsx | 103 +++++++++++++++++++++
3 files changed, 137 insertions(+), 6 deletions(-)
diff --git a/config-ui/src/plugins/register/github/assets/workflow-run.jpeg
b/config-ui/src/plugins/register/github/assets/workflow-run.jpeg
new file mode 100644
index 000000000..468f28f64
Binary files /dev/null and
b/config-ui/src/plugins/register/github/assets/workflow-run.jpeg differ
diff --git a/config-ui/src/plugins/register/github/transformation.tsx
b/config-ui/src/plugins/register/github/transformation.tsx
index c4398c629..8a7d033ac 100644
--- a/config-ui/src/plugins/register/github/transformation.tsx
+++ b/config-ui/src/plugins/register/github/transformation.tsx
@@ -17,14 +17,22 @@
*/
import { useState, useEffect } from 'react';
-import { CheckCircleOutlined, CloseCircleOutlined, CaretRightOutlined } from
'@ant-design/icons';
+import {
+ CheckCircleOutlined,
+ CloseCircleOutlined,
+ CaretRightOutlined,
+ CaretDownFilled,
+ CaretRightFilled,
+} from '@ant-design/icons';
import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
-import { theme, Form, Collapse, Input, Tag, Checkbox } from 'antd';
+import { theme, Form, Collapse, Input, Tag, Checkbox, Button } from 'antd';
import { HelpTooltip, ExternalLink } from '@/components';
import { DOC_URL } from '@/release';
import { CheckMatchedItems, Deployments } from '@/plugins';
+import { WorkflowRun } from './workflow-run';
+
interface Props {
plugin: string;
connectionId: ID;
@@ -43,6 +51,7 @@ export const GitHubTransformation = ({
setHasError,
}: Props) => {
const [useCustom, setUseCustom] = useState(false);
+ const [showCICD, setShowCICD] = useState(false);
useEffect(() => {
if (transformation.deploymentPattern || transformation.productionPattern) {
@@ -95,6 +104,8 @@ export const GitHubTransformation = ({
onChangeTransformation: setTransformation,
useCustom,
onChangeUseCustom: handleChangeUseCustom,
+ showCICD,
+ onChangeShowCICD: setShowCICD,
})}
/>
);
@@ -109,6 +120,8 @@ const renderCollapseItems = ({
onChangeTransformation,
useCustom,
onChangeUseCustom,
+ showCICD,
+ onChangeShowCICD,
}: {
plugin: string;
connectionId: ID;
@@ -118,6 +131,8 @@ const renderCollapseItems = ({
onChangeTransformation: any;
useCustom: boolean;
onChangeUseCustom: any;
+ showCICD: boolean;
+ onChangeShowCICD: any;
}) =>
[
{
@@ -274,8 +289,21 @@ const renderCollapseItems = ({
Convert a GitHub workflow run as a DevLake Deployment when:
</Checkbox>
{useCustom && (
- <>
- <div style={{ margin: '8px 0', paddingLeft: 28 }}>
+ <div style={{ paddingLeft: 28 }}>
+ <p>
+ Select this option only if you are not enabling GitHub
Deployments.{' '}
+ <Button
+ type="link"
+ size="small"
+ icon={showCICD ? <CaretDownFilled /> : <CaretRightFilled />}
+ iconPosition="end"
+ onClick={() => onChangeShowCICD(!showCICD)}
+ >
+ See how to configure
+ </Button>
+ </p>
+ {showCICD && <WorkflowRun />}
+ <div style={{ margin: '8px 0' }}>
<span>
The name of the <strong>GitHub workflow run</strong> or
<strong> one of its jobs</strong> matches
</span>
@@ -294,7 +322,7 @@ const renderCollapseItems = ({
<i style={{ marginRight: 4, color: '#E34040' }}>*</i>
<HelpTooltip content="GitHub Workflow Runs:
https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow";
/>
</div>
- <div style={{ margin: '8px 0', paddingLeft: 28 }}>
+ <div style={{ margin: '8px 0' }}>
<span>If the name or its branch’s name also matches</span>
<Input
style={{ width: 180, margin: '0 8px' }}
@@ -311,7 +339,7 @@ const renderCollapseItems = ({
<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/github/workflow-run.tsx
b/config-ui/src/plugins/register/github/workflow-run.tsx
new file mode 100644
index 000000000..2f9beca89
--- /dev/null
+++ b/config-ui/src/plugins/register/github/workflow-run.tsx
@@ -0,0 +1,103 @@
+/*
+ * 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;
+ 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 workflow runs of ‘Build-Images-Push-Docker’ on the
‘release’ branch to production deployments
+ </h5>
+ <ol>
+ <li>
+ Go to your GitHub Actions page. Select the
‘Build-Images-Push-Docker’ workflow on the left menu (as shown in
+ the <span className="blue">blue</span> rectangle.).
+ </li>
+ <li>
+ Locate the workflow run names in the list (highlighted by the <span
className="yellow">yellow</span> text).
+ They are usually the same as the workflow name. The branch name are
shown in the second column in the label
+ format.
+ <img src={Picture} width="100%" alt="" />
+ </li>
+ <li>
+ <div>
+ In the first input field, enter the following regex to identify
deployments (highlighted by the{' '}
+ <span className="yellow">yellow</span>
+ rectangle):
+ </div>
+ <div style={{ marginTop: 10 }}>
+ The name of the <strong>GitHub workflow run</strong> or
<strong>one of its jobs</strong> matches{' '}
+ <Input style={{ width: 240 }} size="small" disabled
value="(?i)Build-Images-Push-Docker" />
+ </div>
+ </li>
+ <li>
+ <div>
+ In the second input field, enter the following regex to identify
production deployments (highlighted by 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 or branch matches <Input style={{ width: 100 }}
size="small" disabled value="release-.*" /> ,
+ this deployment will be regarded as ‘Production Deployment’
+ </div>
+ </li>
+ </ol>
+ <div>
+ For more information, please refer to{' '}
+ <ExternalLink
link="https://devlake.apache.org/docs/Configuration/GitHub/#cicd";>
+ this documentation
+ </ExternalLink>
+ .
+ </div>
+ </Wrapper>
+ );
+};
