Skip to content

Commit 8ef72fc

Browse files
songjianetsongjianet
authored
[Feature][UI Next] Add workflow relation layout and format. (#8125)
1 parent 45f6c41 commit 8ef72fc

47 files changed

Lines changed: 619 additions & 473 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx‎

Lines changed: 121 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -20,129 +20,133 @@ import initChart from '@/components/chart'
2020
import type { Ref } from 'vue'
2121

2222
const props = {
23-
height: {
24-
type: [String, Number] as PropType<string | number>,
25-
default: 400
26-
},
27-
width: {
28-
type: [String, Number] as PropType<string | number>,
29-
default: '100%'
30-
},
31-
tooltipFormat: {
32-
type: String as PropType<string>,
33-
default: ''
34-
},
35-
legendData: {
36-
type: Array as PropType<Array<string>>,
37-
default: () => []
38-
},
39-
seriesData: {
40-
type: Array as PropType<Array<string>>,
41-
default: () => []
42-
},
43-
labelShow: {
44-
type: Array as PropType<Array<string>>,
45-
default: () => []
46-
},
47-
linksData: {
48-
type: Array as PropType<Array<string>>,
49-
default: () => []
50-
},
51-
labelFormat: {
52-
type: String as PropType<string>,
53-
default: ''
54-
}
23+
height: {
24+
type: [String, Number] as PropType<string | number>,
25+
default: 400
26+
},
27+
width: {
28+
type: [String, Number] as PropType<string | number>,
29+
default: '100%'
30+
},
31+
tooltipFormat: {
32+
type: String as PropType<string>,
33+
default: ''
34+
},
35+
legendData: {
36+
type: Array as PropType<Array<string>>,
37+
default: () => []
38+
},
39+
seriesData: {
40+
type: Array as PropType<Array<string>>,
41+
default: () => []
42+
},
43+
labelShow: {
44+
type: Array as PropType<Array<string>>,
45+
default: () => []
46+
},
47+
linksData: {
48+
type: Array as PropType<Array<string>>,
49+
default: () => []
50+
},
51+
labelFormat: {
52+
type: String as PropType<string>,
53+
default: ''
54+
}
5555
}
5656

5757
const GraphChart = defineComponent({
58-
name: 'GraphChart',
59-
props,
60-
setup(props) {
61-
const graphChartRef: Ref<HTMLDivElement | null> = ref(null)
58+
name: 'GraphChart',
59+
props,
60+
setup(props) {
61+
const graphChartRef: Ref<HTMLDivElement | null> = ref(null)
6262

63-
const option = {
64-
tooltip: {
65-
trigger: 'item',
66-
triggerOn: 'mousemove',
67-
backgroundColor: '#2D303A',
68-
padding: [8, 12],
69-
formatter: props.tooltipFormat,
70-
color: '#2D303A',
71-
textStyle: {
72-
rich: {
73-
a: {
74-
fontSize: 12,
75-
color: '#2D303A',
76-
lineHeight: 12,
77-
align: 'left',
78-
padding: [4, 4, 4, 4]
79-
}
80-
}
81-
}
82-
},
83-
legend: [{
84-
orient: 'horizontal',
85-
top: 6,
86-
left: 6,
87-
data: props.legendData
88-
}],
89-
series: [{
90-
type: 'graph',
91-
layout: 'force',
92-
nodeScaleRatio: 1.2,
93-
draggable: true,
94-
animation: false,
95-
data: props.seriesData,
96-
roam: true,
97-
symbol: 'roundRect',
98-
symbolSize: 70,
99-
categories: props.legendData,
100-
label: {
101-
show: props.labelShow,
102-
position: 'inside',
103-
formatter: props.labelFormat,
104-
color: '#222222',
105-
textStyle: {
106-
rich: {
107-
a: {
108-
fontSize: 12,
109-
color: '#222222',
110-
lineHeight: 12,
111-
align: 'left',
112-
padding: [4, 4, 4, 4]
113-
}
114-
}
115-
}
116-
},
117-
edgeSymbol: ['circle', 'arrow'],
118-
edgeSymbolSize: [4, 12],
119-
force: {
120-
repulsion: 1000,
121-
edgeLength: 300
122-
},
123-
links: props.linksData,
124-
lineStyle: {
125-
color: '#999999'
126-
}
127-
}]
128-
}
63+
const option = {
64+
tooltip: {
65+
trigger: 'item',
66+
triggerOn: 'mousemove',
67+
backgroundColor: '#2D303A',
68+
padding: [8, 12],
69+
formatter: props.tooltipFormat,
70+
color: '#2D303A',
71+
textStyle: {
72+
rich: {
73+
a: {
74+
fontSize: 12,
75+
color: '#2D303A',
76+
lineHeight: 12,
77+
align: 'left',
78+
padding: [4, 4, 4, 4]
79+
}
80+
}
81+
}
82+
},
83+
legend: [
84+
{
85+
orient: 'horizontal',
86+
top: 6,
87+
left: 6,
88+
data: props.legendData
89+
}
90+
],
91+
series: [
92+
{
93+
type: 'graph',
94+
layout: 'force',
95+
nodeScaleRatio: 1.2,
96+
draggable: true,
97+
animation: false,
98+
data: props.seriesData,
99+
roam: true,
100+
symbol: 'roundRect',
101+
symbolSize: 70,
102+
categories: props.legendData,
103+
label: {
104+
show: props.labelShow,
105+
position: 'inside',
106+
formatter: props.labelFormat,
107+
color: '#222222',
108+
textStyle: {
109+
rich: {
110+
a: {
111+
fontSize: 12,
112+
color: '#222222',
113+
lineHeight: 12,
114+
align: 'left',
115+
padding: [4, 4, 4, 4]
116+
}
117+
}
118+
}
119+
},
120+
edgeSymbol: ['circle', 'arrow'],
121+
edgeSymbolSize: [4, 12],
122+
force: {
123+
repulsion: 1000,
124+
edgeLength: 300
125+
},
126+
links: props.linksData,
127+
lineStyle: {
128+
color: '#999999'
129+
}
130+
}
131+
]
132+
}
129133

130-
initChart(graphChartRef, option)
134+
initChart(graphChartRef, option)
131135

132-
return { graphChartRef }
133-
},
134-
render() {
135-
const { height, width } = this
136-
return (
137-
<div
138-
ref='graphChartRef'
139-
style={{
140-
height: typeof height === 'number' ? height + 'px' : height,
141-
width: typeof width === 'number' ? width + 'px' : width
142-
}}
143-
/>
144-
)
145-
}
136+
return { graphChartRef }
137+
},
138+
render() {
139+
const { height, width } = this
140+
return (
141+
<div
142+
ref='graphChartRef'
143+
style={{
144+
height: typeof height === 'number' ? height + 'px' : height,
145+
width: typeof width === 'number' ? width + 'px' : width
146+
}}
147+
/>
148+
)
149+
}
146150
})
147151

148152
export default GraphChart

‎dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ export function useDataList() {
9292
icon: renderIcon(FundProjectionScreenOutlined)
9393
},
9494
{
95-
label: t('menu.workflow_relationships'),
96-
key: 'workflow-relationships',
95+
label: t('menu.workflow_relation'),
96+
key: 'workflow-relation',
9797
icon: renderIcon(PartitionOutlined)
9898
},
9999
{

‎dolphinscheduler-ui-next/src/locales/modules/en_US.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const menu = {
4848
monitor: 'Monitor',
4949
security: 'Security',
5050
workflow_monitoring: 'Workflow Monitoring',
51-
workflow_relationships: 'Workflow Relationships',
51+
workflow_relation: 'Workflow Relation',
5252
workflow: 'Workflow',
5353
workflow_definition: 'Workflow Definition',
5454
workflow_instance: 'Workflow Instance',
@@ -287,8 +287,11 @@ const project = {
287287
cancel: 'Cancel',
288288
delete_confirm: 'Delete?'
289289
},
290+
workflow_relation: {
291+
workflow_relation: 'Workflow Relation'
292+
},
290293
dag: {
291-
createWorkflow: "Create Workflow",
294+
createWorkflow: 'Create Workflow',
292295
search: 'Search',
293296
download_png: 'Download PNG',
294297
fullscreen_open: 'Open Fullscreen',

‎dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const menu = {
4848
monitor: '监控中心',
4949
security: '安全中心',
5050
workflow_monitoring: '工作流监控',
51-
workflow_relationships: '工作流关系',
51+
workflow_relation: '工作流关系',
5252
workflow: '工作流',
5353
workflow_definition: '工作流定义',
5454
workflow_instance: '工作流实例',
@@ -287,8 +287,11 @@ const project = {
287287
cancel: '取消',
288288
delete_confirm: '确定删除吗?'
289289
},
290+
workflow_relation: {
291+
workflow_relation: '工作流关系'
292+
},
290293
dag: {
291-
createWorkflow: "创建工作流",
294+
createWorkflow: '创建工作流',
292295
search: '搜索',
293296
download_png: '下载工作流图片',
294297
fullscreen_open: '全屏',

‎dolphinscheduler-ui-next/src/router/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ router.beforeEach(
5050
) => {
5151
NProgress.start()
5252
const menuStore = useMenuStore()
53-
const metaData:metaData = to.meta
53+
const metaData: metaData = to.meta
5454
menuStore.setShowSideStatus(metaData.showSide || false)
5555
next()
5656
NProgress.done()

‎dolphinscheduler-ui-next/src/router/modules/projects.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,29 @@ export default {
4747
showSide: true
4848
}
4949
},
50+
{
51+
path: '/projects/:projectCode/workflow-relation',
52+
name: 'workflow-relation',
53+
component: components['workflow-relation'],
54+
meta: {
55+
title: '工作流定义'
56+
}
57+
},
5058
{
5159
path: '/projects/:projectCode/workflow/definitions/create',
5260
name: 'workflow-definition-create',
5361
component: components['workflow-definition-create'],
5462
meta: {
55-
title: '创建工作流定义',
56-
},
63+
title: '创建工作流定义'
64+
}
5765
},
5866
{
5967
path: '/projects/:projectCode/workflow/definitions/:code',
6068
name: 'workflow-definition-details',
6169
component: components['workflow-definition-details'],
6270
meta: {
63-
title: '工作流定义详情',
64-
},
71+
title: '工作流定义详情'
72+
}
6573
}
6674
]
6775
}

‎dolphinscheduler-ui-next/src/service/modules/task-definition/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,7 @@ export function save(
4949
})
5050
}
5151

52-
export function genTaskCodeList(
53-
num: number,
54-
projectCode: number
55-
) {
52+
export function genTaskCodeList(num: number, projectCode: number) {
5653
return axios.request<unknown, number[]>({
5754
url: `/projects/${projectCode}/task-definition/gen-task-codes`,
5855
method: 'get',

‎dolphinscheduler-ui-next/src/store/menu/menu.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,6 @@ export const useMenuStore = defineStore({
4646
},
4747
setSideMenuKey(sideMenuKey: string): void {
4848
this.sideMenuKey = sideMenuKey
49-
},
49+
}
5050
}
5151
})

‎dolphinscheduler-ui-next/src/store/menu/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
*/
1717

1818
interface MenuState {
19-
menuKey: string,
20-
isShowSide: boolean,
19+
menuKey: string
20+
isShowSide: boolean
2121
sideMenuKey: string
2222
}
2323

‎dolphinscheduler-ui-next/src/utils/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717

1818
import mapping from './mapping'
1919
import regex from './regex'
20-
import truncateText from './truncate-text'
20+
import truncateText from './truncate-text'
2121

2222
const utils = {
2323
mapping,
2424
regex,
25-
truncateText,
25+
truncateText
2626
}
2727

2828
export default utils

0 commit comments

Comments
 (0)