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 6dab810d8 feat(config-ui): support advanced on the bp detail (#3990)
6dab810d8 is described below
commit 6dab810d82a475dbb4f94137ad487c77b92ae4c6
Author: 青湛 <[email protected]>
AuthorDate: Wed Dec 21 10:36:55 2022 +0800
feat(config-ui): support advanced on the bp detail (#3990)
---
.../advanced-editor}/example/dbt.ts | 0
.../advanced-editor}/example/feishu.ts | 0
.../advanced-editor}/example/general.ts | 0
.../advanced-editor}/example/gitextractor.ts | 0
.../advanced-editor}/example/github.ts | 0
.../advanced-editor}/example/gitlab.ts | 0
.../advanced-editor}/example/index.ts | 2 +-
.../advanced-editor}/example/jenkins.ts | 0
.../advanced-editor}/example/jira.ts | 0
.../advanced-editor}/example/refdiff.ts | 0
.../advanced-editor}/example/starrocks.ts | 0
.../blueprint/components/advanced-editor/index.tsx | 107 +++++++++++++++++++++
.../example/feishu.ts => components/index.ts} | 9 +-
.../src/pages/blueprint/create/bp-context.tsx | 14 +--
.../src/pages/blueprint/create/step-one/index.tsx | 63 +-----------
config-ui/src/pages/blueprint/create/styled.ts | 8 --
.../pages/blueprint/detail/blueprint-detail.tsx | 2 +-
.../pages/blueprint/detail/panel/configuration.tsx | 43 +++++++--
config-ui/src/pages/blueprint/detail/styled.ts | 5 +
config-ui/src/pages/blueprint/detail/types.ts | 4 +-
.../step-one/example/feishu.ts => types.ts} | 12 +--
.../step-one/example/jenkins.ts => utils.ts} | 20 ++--
22 files changed, 175 insertions(+), 114 deletions(-)
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/dbt.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/dbt.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/dbt.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/dbt.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/feishu.ts
similarity index 100%
copy from config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
copy to
config-ui/src/pages/blueprint/components/advanced-editor/example/feishu.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/general.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/general.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/general.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/general.ts
diff --git
a/config-ui/src/pages/blueprint/create/step-one/example/gitextractor.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/gitextractor.ts
similarity index 100%
rename from
config-ui/src/pages/blueprint/create/step-one/example/gitextractor.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/gitextractor.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/github.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/github.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/github.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/github.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/gitlab.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/gitlab.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/gitlab.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/gitlab.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/index.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/index.ts
similarity index 98%
rename from config-ui/src/pages/blueprint/create/step-one/example/index.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/index.ts
index 29966362a..b722140fd 100644
--- a/config-ui/src/pages/blueprint/create/step-one/example/index.ts
+++ b/config-ui/src/pages/blueprint/components/advanced-editor/example/index.ts
@@ -27,7 +27,7 @@ import feishu from './feishu'
import dbt from './dbt'
import starrocks from './starrocks'
-export const DEFAULT_CONFIG = [
+export const EXAMPLE_CONFIG = [
{
id: 'general',
name: 'Load General Configuration',
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/jenkins.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/jenkins.ts
similarity index 100%
copy from config-ui/src/pages/blueprint/create/step-one/example/jenkins.ts
copy to
config-ui/src/pages/blueprint/components/advanced-editor/example/jenkins.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/jira.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/jira.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/jira.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/jira.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/refdiff.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/refdiff.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/refdiff.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/refdiff.ts
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/starrocks.ts
b/config-ui/src/pages/blueprint/components/advanced-editor/example/starrocks.ts
similarity index 100%
rename from config-ui/src/pages/blueprint/create/step-one/example/starrocks.ts
rename to
config-ui/src/pages/blueprint/components/advanced-editor/example/starrocks.ts
diff --git a/config-ui/src/pages/blueprint/components/advanced-editor/index.tsx
b/config-ui/src/pages/blueprint/components/advanced-editor/index.tsx
new file mode 100644
index 000000000..8d09007be
--- /dev/null
+++ b/config-ui/src/pages/blueprint/components/advanced-editor/index.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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 from 'react'
+import {
+ TextArea,
+ ButtonGroup,
+ Button,
+ Menu,
+ MenuItem,
+ Position
+} from '@blueprintjs/core'
+import { Popover2 } from '@blueprintjs/popover2'
+import styled from 'styled-components'
+
+import { EXAMPLE_CONFIG } from './example'
+
+const Wrapper = styled.div`
+ h2 {
+ margin: 0;
+ padding: 0;
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ h3 {
+ margin: 0 0 8px;
+ padding: 0;
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ p {
+ margin: 0 0 8px;
+ }
+
+ textarea {
+ margin-bottom: 8px;
+ min-height: 240px;
+ font-size: 12px;
+ font-family: 'JetBrains Mono', monospace;
+ }
+`
+
+interface Props {
+ value: string
+ onChange: (value: string) => void
+}
+
+export const AdvancedEditor = ({ value, onChange }: Props) => {
+ return (
+ <Wrapper>
+ <h3>Task Editor</h3>
+ <p>Enter JSON Configuration or preload from a template</p>
+ <TextArea fill value={value} onChange={(e) => onChange(e.target.value)}
/>
+ <ButtonGroup minimal>
+ <Button
+ small
+ text='Reset'
+ icon='eraser'
+ onClick={() => onChange(JSON.stringify([[]], null, ' '))}
+ />
+ <Popover2
+ placement={Position.TOP}
+ content={
+ <Menu>
+ {EXAMPLE_CONFIG.map((it) => (
+ <MenuItem
+ key={it.id}
+ icon='code'
+ text={it.name}
+ onClick={() =>
+ onChange(JSON.stringify(it.config, null, ' '))
+ }
+ />
+ ))}
+ </Menu>
+ }
+ renderTarget={({ isOpen, ref, ...targetProps }) => (
+ <Button
+ {...targetProps}
+ elementRef={ref}
+ small
+ text='Load Templates'
+ rightIcon='caret-down'
+ />
+ )}
+ />
+ </ButtonGroup>
+ </Wrapper>
+ )
+}
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
b/config-ui/src/pages/blueprint/components/index.ts
similarity index 90%
copy from config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
copy to config-ui/src/pages/blueprint/components/index.ts
index 443d45d2b..e615f5d3c 100644
--- a/config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
+++ b/config-ui/src/pages/blueprint/components/index.ts
@@ -16,11 +16,4 @@
*
*/
-export default [
- [
- {
- plugin: 'feishu',
- options: {}
- }
- ]
-]
+export * from './advanced-editor'
diff --git a/config-ui/src/pages/blueprint/create/bp-context.tsx
b/config-ui/src/pages/blueprint/create/bp-context.tsx
index e4a705b6e..39d1105cd 100644
--- a/config-ui/src/pages/blueprint/create/bp-context.tsx
+++ b/config-ui/src/pages/blueprint/create/bp-context.tsx
@@ -23,6 +23,8 @@ import type { ConnectionItemType } from '@/store'
import { useConnection, ConnectionStatusEnum } from '@/store'
import { operator } from '@/utils'
+import { validRawPlan } from '../utils'
+
import type { BPContextType } from './types'
import { FromEnum, ModeEnum } from './types'
import * as API from './api'
@@ -89,18 +91,6 @@ export const BPContextProvider = ({ from, projectName,
children }: Props) => {
const { connections } = useConnection()
- const validRawPlan = (rp: string) => {
- try {
- const p = JSON.parse(rp)
- if (p.flat().length === 0) {
- return true
- }
- return false
- } catch {
- return true
- }
- }
-
const error = useMemo(() => {
switch (true) {
case !name:
diff --git a/config-ui/src/pages/blueprint/create/step-one/index.tsx
b/config-ui/src/pages/blueprint/create/step-one/index.tsx
index cdf077115..6506c4360 100644
--- a/config-ui/src/pages/blueprint/create/step-one/index.tsx
+++ b/config-ui/src/pages/blueprint/create/step-one/index.tsx
@@ -17,24 +17,15 @@
*/
import React from 'react'
-import {
- InputGroup,
- TextArea,
- ButtonGroup,
- Button,
- Menu,
- MenuItem,
- Position
-} from '@blueprintjs/core'
-import { Popover2 } from '@blueprintjs/popover2'
+import { InputGroup } from '@blueprintjs/core'
import { useConnection } from '@/store'
import { Card, Divider, MultiSelector, Loading } from '@/components'
-import { ModeEnum } from '../types'
+import { ModeEnum } from '../../types'
+import { AdvancedEditor } from '../../components'
import { useCreateBP } from '../bp-context'
-import { DEFAULT_CONFIG } from './example'
import * as S from './styled'
export const StepOne = () => {
@@ -120,53 +111,7 @@ export const StepOne = () => {
<Card className='card'>
<h2>JSON Configuration</h2>
<Divider />
- <h3>Task Editor</h3>
- <p>Enter JSON Configuration or preload from a template</p>
- <TextArea
- fill
- value={rawPlan}
- onChange={(e) => onChangeRawPlan(e.target.value)}
- />
- <div className='btns'>
- <ButtonGroup className='btns' minimal>
- <Button
- small
- text='Reset'
- icon='eraser'
- onClick={() =>
- onChangeRawPlan(JSON.stringify([[]], null, ' '))
- }
- />
- <Popover2
- placement={Position.TOP}
- content={
- <Menu>
- {DEFAULT_CONFIG.map((it) => (
- <MenuItem
- key={it.id}
- icon='code'
- text={it.name}
- onClick={() =>
- onChangeRawPlan(
- JSON.stringify(it.config, null, ' ')
- )
- }
- />
- ))}
- </Menu>
- }
- renderTarget={({ isOpen, ref, ...targetProps }) => (
- <Button
- {...targetProps}
- elementRef={ref}
- small
- text='Load Templates'
- rightIcon='caret-down'
- />
- )}
- />
- </ButtonGroup>
- </div>
+ <AdvancedEditor value={rawPlan} onChange={onChangeRawPlan} />
</Card>
<S.Tips>
<span>To visually define blueprint tasks, please use </span>
diff --git a/config-ui/src/pages/blueprint/create/styled.ts
b/config-ui/src/pages/blueprint/create/styled.ts
index d50f1fd9d..4e32c2b83 100644
--- a/config-ui/src/pages/blueprint/create/styled.ts
+++ b/config-ui/src/pages/blueprint/create/styled.ts
@@ -43,14 +43,6 @@ export const Content = styled.div`
font-weight: 600;
}
- textarea {
- margin-bottom: 8px;
- min-height: 240px;
- font-size: 12px;
- background-color: #f9f9f9;
- font-family: 'JetBrains Mono', monospace;
- }
-
.back {
display: flex;
align-items: center;
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index 91eb1061a..6efa3834c 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
@@ -32,7 +32,7 @@ import Status from '@/pages/blueprints/blueprint-detail'
interface Props extends UseDetailProps {}
export const BlueprintDetail = ({ id }: Props) => {
- const [activeTab, setActiveTab] = useState<TabId>('status')
+ const [activeTab, setActiveTab] = useState<TabId>('configuration')
const { loading, blueprint, connections, saving, onUpdate } = useDetail({
id
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index 120b93b1a..4903fa9b4 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -16,14 +16,17 @@
*
*/
-import React, { useState, useMemo } from 'react'
-import { Icon, Colors } from '@blueprintjs/core'
+import React, { useState, useEffect, useMemo } from 'react'
+import { Icon, Button, Colors, Intent } from '@blueprintjs/core'
import dayjs from 'dayjs'
import { Table, ColumnType } from '@/components'
import { getCron } from '@/config'
import { DataScopeList } from '@/plugins'
+import { ModeEnum } from '../../types'
+import { validRawPlan } from '../../utils'
+import { AdvancedEditor } from '../../components'
import type { BlueprintType, ConnectionItemType } from '../types'
import {
UpdateNameDialog,
@@ -50,6 +53,11 @@ export const Configuration = ({
}: Props) => {
const [type, setType] = useState<Type>()
const [curConnection, setCurConnection] = useState<ConnectionItemType>()
+ const [rawPlan, setRawPlan] = useState('')
+
+ useEffect(() => {
+ setRawPlan(JSON.stringify(blueprint.plan, null, ' '))
+ }, [blueprint])
const cron = useMemo(
() => getCron(blueprint.isManual, blueprint.cronConfig),
@@ -84,6 +92,14 @@ export const Configuration = ({
})
}
+ const handleUpdatePlan = async () => {
+ await onUpdate({
+ plan: !validRawPlan(rawPlan)
+ ? JSON.parse(rawPlan)
+ : JSON.stringify([[]], null, ' ')
+ })
+ }
+
const columns = useMemo(
() =>
[
@@ -197,10 +213,25 @@ export const Configuration = ({
</div>
</div>
</div>
- <div className='bottom'>
- <h3>Data Scope and Transformation</h3>
- <Table columns={columns} dataSource={connections} />
- </div>
+ {blueprint.mode === ModeEnum.normal && (
+ <div className='bottom'>
+ <h3>Data Scope and Transformation</h3>
+ <Table columns={columns} dataSource={connections} />
+ </div>
+ )}
+ {blueprint.mode === ModeEnum.advanced && (
+ <div className='bottom'>
+ <h3>JSON Configuration</h3>
+ <AdvancedEditor value={rawPlan} onChange={setRawPlan} />
+ <div className='btns'>
+ <Button
+ intent={Intent.PRIMARY}
+ text='Save'
+ onClick={handleUpdatePlan}
+ />
+ </div>
+ </div>
+ )}
{type === 'name' && (
<UpdateNameDialog
name={blueprint.name}
diff --git a/config-ui/src/pages/blueprint/detail/styled.ts
b/config-ui/src/pages/blueprint/detail/styled.ts
index a0790596f..4d719325f 100644
--- a/config-ui/src/pages/blueprint/detail/styled.ts
+++ b/config-ui/src/pages/blueprint/detail/styled.ts
@@ -41,6 +41,11 @@ export const ConfigurationPanel = styled.div`
.bottom {
margin-top: 32px;
+
+ .btns {
+ margin-top: 16px;
+ text-align: right;
+ }
}
`
diff --git a/config-ui/src/pages/blueprint/detail/types.ts
b/config-ui/src/pages/blueprint/detail/types.ts
index 21d81d4a1..61ceef1d7 100644
--- a/config-ui/src/pages/blueprint/detail/types.ts
+++ b/config-ui/src/pages/blueprint/detail/types.ts
@@ -17,7 +17,8 @@
*/
import { Plugins } from '@/plugins'
-import {ModeEnum} from "@/pages/blueprint/create/types";
+
+import { ModeEnum } from '../types'
export type ConnectionItemType = {
icon: string
@@ -35,6 +36,7 @@ export type BlueprintType = {
isManual: boolean
cronConfig: string
skipOnFail: boolean
+ plan: any
settings: {
version: string
createdDateAfter: null | string
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
b/config-ui/src/pages/blueprint/types.ts
similarity index 90%
rename from config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
rename to config-ui/src/pages/blueprint/types.ts
index 443d45d2b..0f5ec9031 100644
--- a/config-ui/src/pages/blueprint/create/step-one/example/feishu.ts
+++ b/config-ui/src/pages/blueprint/types.ts
@@ -16,11 +16,7 @@
*
*/
-export default [
- [
- {
- plugin: 'feishu',
- options: {}
- }
- ]
-]
+export enum ModeEnum {
+ advanced = 'ADVANCED',
+ normal = 'NORMAL'
+}
diff --git a/config-ui/src/pages/blueprint/create/step-one/example/jenkins.ts
b/config-ui/src/pages/blueprint/utils.ts
similarity index 81%
rename from config-ui/src/pages/blueprint/create/step-one/example/jenkins.ts
rename to config-ui/src/pages/blueprint/utils.ts
index e0cbc463c..4af29e36c 100644
--- a/config-ui/src/pages/blueprint/create/step-one/example/jenkins.ts
+++ b/config-ui/src/pages/blueprint/utils.ts
@@ -16,14 +16,14 @@
*
*/
-export default [
- [
- {
- plugin: 'jenkins',
- options: {
- connectionId: 1,
- jobName: 'unit_test'
- }
+export const validRawPlan = (rp: string) => {
+ try {
+ const p = JSON.parse(rp)
+ if (p.flat().length === 0) {
+ return true
}
- ]
-]
+ return false
+ } catch {
+ return true
+ }
+}
