This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 075c078 [Feature][UI Next] Add workflow instance variables params
(#8505)
075c078 is described below
commit 075c078e02bcc981243624768177d8349a8b8429
Author: Devosend <[email protected]>
AuthorDate: Wed Feb 23 16:22:22 2022 +0800
[Feature][UI Next] Add workflow instance variables params (#8505)
* add variables view on workflow instance
* change parameters header on toolbar
---
.../src/locales/modules/en_US.ts | 5 +-
.../src/locales/modules/zh_CN.ts | 5 +-
.../src/service/modules/process-instances/index.ts | 2 +-
.../workflow/components/dag/dag-toolbar.tsx | 57 ++++---
.../workflow/components/dag/dag.module.scss | 2 +-
.../instance/components/variables-view.tsx | 169 +++++++++++++++++++++
.../instance/components/variables.module.scss | 66 ++++++++
7 files changed, 282 insertions(+), 24 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 00ba16e..d19e8b6 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -474,7 +474,10 @@ const project = {
serial_wait: 'Serial wait',
executing: 'Executing',
startup_type: 'Startup Type',
- complement_range: 'Complement Range'
+ complement_range: 'Complement Range',
+ parameters_variables: 'Parameters variables',
+ global_parameters: 'Global parameters',
+ local_parameters: 'Local parameters'
},
task: {
task_name: 'Task Name',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index f653803..1edd12f 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -472,7 +472,10 @@ const project = {
serial_wait: '串行等待',
executing: '正在执行',
startup_type: '启动类型',
- complement_range: '补数范围'
+ complement_range: '补数范围',
+ parameters_variables: '参数变量',
+ global_parameters: '全局参数',
+ local_parameters: '局部参数'
},
task: {
task_name: '任务名称',
diff --git
a/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
b/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
index 1910c8d..92ec13e 100644
--- a/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
@@ -125,7 +125,7 @@ export function vieGanttTree(id: IdReq, code: CodeReq): any
{
})
}
-export function viewVariables(id: IdReq, code: CodeReq): any {
+export function viewVariables(id: number, code: number): any {
return axios({
url: `/projects/${code}/process-instances/${id}/view-variables`,
method: 'get'
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
index 8d0c5f4..cb60d49 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
@@ -37,7 +37,8 @@ import { useFullscreen } from '@vueuse/core'
import { useRoute, useRouter } from 'vue-router'
import { useThemeStore } from '@/store/theme/theme'
import type { Graph } from '@antv/x6'
-import StartParam from './dag-startup-param'
+import StartupParam from './dag-startup-param'
+import VariablesView from
'@/views/projects/workflow/instance/components/variables-view'
const props = {
layoutToggle: {
@@ -63,7 +64,8 @@ export default defineComponent({
setup(props, context) {
const { t } = useI18n()
- const startupPopover = ref(false)
+ const startupPopoverRef = ref(false)
+ const paramPopoverRef = ref(false)
const themeStore = useThemeStore()
@@ -152,10 +154,6 @@ export default defineComponent({
}
}
- // const handleUpdateShow = () => {
- // startupPopover.value
- // }
-
return () => (
<div
class={[
@@ -173,7 +171,7 @@ export default defineComponent({
quaternary
circle
onClick={() => copy(props.definition?.processDefinition?.name)}
- class={Styles['copy-btn']}
+ class={Styles['toolbar-btn']}
>
<NIcon>
<CopyOutlined />
@@ -182,18 +180,37 @@ export default defineComponent({
)}
{route.name === 'workflow-instance-detail' && (
<>
- <NButton
- quaternary
- circle
- onClick={() => copy(props.definition?.processDefinition?.name)}
- class={Styles['copy-btn']}
+ <NPopover
+ show={paramPopoverRef.value}
+ placement='bottom'
+ trigger='manual'
>
- <NIcon>
- <FundViewOutlined />
- </NIcon>
- </NButton>
+ {{
+ trigger: () => (
+ <NButton
+ quaternary
+ circle
+ onClick={() =>
+ (paramPopoverRef.value = !paramPopoverRef.value)
+ }
+ class={Styles['toolbar-btn']}
+ >
+ <NIcon>
+ <FundViewOutlined />
+ </NIcon>
+ </NButton>
+ ),
+ header: () => (
+ <NText strong depth={1}>
+ {t('project.workflow.parameters_variables')}
+ </NText>
+ ),
+ default: () => <VariablesView onCopy={copy} />
+ }}
+ </NPopover>
+
<NPopover
- show={startupPopover.value}
+ show={startupPopoverRef.value}
placement='bottom'
trigger='manual'
>
@@ -203,9 +220,9 @@ export default defineComponent({
quaternary
circle
onClick={() =>
- (startupPopover.value = !startupPopover.value)
+ (startupPopoverRef.value = !startupPopoverRef.value)
}
- class={Styles['copy-btn']}
+ class={Styles['toolbar-btn']}
>
<NIcon>
<RightCircleOutlined />
@@ -218,7 +235,7 @@ export default defineComponent({
</NText>
),
default: () => (
- <StartParam startupParam={props.instance.value} />
+ <StartupParam startupParam={props.instance.value} />
)
}}
</NPopover>
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
index 2720f11..b4b3951 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
@@ -77,7 +77,7 @@ $bgLight: #ffffff;
font-size: 14px;
}
-.copy-btn {
+.toolbar-btn {
margin-left: 5px;
}
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables-view.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables-view.tsx
new file mode 100644
index 0000000..ae1adb4
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables-view.tsx
@@ -0,0 +1,169 @@
+/*
+ * 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 { useRoute } from 'vue-router'
+import { defineComponent, onMounted, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { viewVariables } from '@/service/modules/process-instances'
+import styles from './variables.module.scss'
+import { NButton } from 'naive-ui'
+
+export default defineComponent({
+ name: 'variables-view',
+ emits: ['copy'],
+ setup(props, ctx) {
+ const paramsRef = ref<any>()
+ const route = useRoute()
+
+ const projectCode = Number(route.params.projectCode)
+ const instanceId = Number(route.params.id)
+
+ const globalParams = computed(() => {
+ return paramsRef.value ? paramsRef.value.globalParams : []
+ })
+
+ const localParams = computed(() => {
+ return paramsRef.value ? paramsRef.value.localParams : {}
+ })
+
+ const getViewVariables = () => {
+ viewVariables(instanceId, projectCode).then((res: any) => {
+ paramsRef.value = res
+ })
+ }
+
+ const handleCopy = (text: string) => {
+ ctx.emit('copy', text)
+ }
+
+ /**
+ * Copyed text processing
+ */
+ const rtClipboard = (el: any, taskType: string) => {
+ const arr: Array<string> = []
+ Object.keys(el).forEach((key) => {
+ if (taskType === 'SQL' || taskType === 'PROCEDURE') {
+ if (key !== 'direct' && key !== 'type') {
+ arr.push(`${key}=${el[key]}`)
+ }
+ } else {
+ arr.push(`${key}=${el[key]}`)
+ }
+ })
+ return arr.join(' ')
+ }
+
+ const localButton = (index: number, taskType: string, el: any) => {
+ return (
+ <NButton
+ key={index}
+ type='primary'
+ style={'margin-right: 10px'}
+ onClick={() => handleCopy(rtClipboard(el, taskType))}
+ >
+ {Object.keys(el).map((key: string) => {
+ if (taskType === 'SQL' || taskType === 'PROCEDURE') {
+ return key !== 'direct' && key !== 'type' ? (
+ <span style={'margin-right: 5px'}>
+ <strong style='color: #2A455B;'>{key}</strong> = {el[key]}
+ </span>
+ ) : (
+ ''
+ )
+ } else {
+ return (
+ <span style={'margin-right: 5px'}>
+ <strong style='color: #2A455B;'>{key}</strong> = {el[key]}
+ </span>
+ )
+ }
+ })}
+ </NButton>
+ )
+ }
+
+ onMounted(() => {
+ getViewVariables()
+ })
+
+ return {
+ globalParams,
+ localParams,
+ localButton,
+ handleCopy
+ }
+ },
+ render() {
+ const { t } = useI18n()
+
+ return (
+ <div class={styles.variable}>
+ <div class={styles.list}>
+ <div class={styles.name}>
+ <em class='ri-code-s-slash-line'></em>
+ <strong style='padding-top: 3px;display: inline-block'>
+ {t('project.workflow.global_parameters')}
+ </strong>
+ </div>
+ <div class={styles['var-cont']}>
+ {this.globalParams.map((item: any, index: number) => (
+ <NButton
+ key={index}
+ type='primary'
+ style={{ marginRight: '5px' }}
+ onClick={() => this.handleCopy(`${item.prop}=${item.value}`)}
+ >
+ <strong style='color: #2A455B; margin-right: 4px'>
+ {item.prop}
+ </strong>{' '}
+ = {item.value}
+ </NButton>
+ ))}
+ </div>
+ </div>
+ <div class={styles.list} style='height: 30px;'>
+ <div class={styles.name}>
+ <em class='ri-code-s-slash-line'></em>
+ <strong style='padding-top: 3px;display: inline-block'>
+ {t('project.workflow.local_parameters')}
+ </strong>
+ </div>
+ <div class={styles['var-cont']}> </div>
+ </div>
+ {Object.keys(this.localParams).map(
+ (node_name: string, index: number) => (
+ <div class={`${styles['list']} ${styles['list-t']}`}>
+ <div class={styles['task-name']}>
+ Task({index}): {node_name}
+ </div>
+ <div class={styles['var-cont']}>
+ {this.localParams[node_name].localParamsList.map(
+ (el: any, index: number) =>
+ this.localButton(
+ index,
+ this.localParams[node_name].taskType,
+ el
+ )
+ )}
+ </div>
+ </div>
+ )
+ )}
+ </div>
+ )
+ }
+})
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables.module.scss
b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables.module.scss
new file mode 100644
index 0000000..3104a6c
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables.module.scss
@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+.variable {
+ padding: 10px;
+ padding-bottom: 5px;
+ .list {
+ position: relative;
+ min-height: 30px;
+ .var-cont {
+ padding-left: 19px;
+ > button {
+ margin-bottom: 6px;
+ margin-right: 6px;
+ }
+ }
+ .name {
+ padding-bottom: 10px;
+ // font-size: 16px;
+ > .fa {
+ font-size: 16px;
+ color: #0097e0;
+ margin-right: 4px;
+ vertical-align: middle;
+ font-weight: bold;
+ }
+ > b {
+ vertical-align: middle;
+ }
+ }
+ > span {
+ height: 28px;
+ line-height: 28px;
+ padding: 0 8px;
+ background: #2d8cf0;
+ display: inline-block;
+ margin-bottom: 8px;
+ color: #fff;
+ }
+ }
+ .list-t {
+ padding-left: 0px;
+ margin-bottom: 10px;
+ .task-name {
+ padding-left: 19px;
+ padding-bottom: 8px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #36ad6a;
+ }
+ }
+}
