diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 00ba16e741..d19e8b69b2 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 f653803117..1edd12fde9 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 1910c8def1..92ec13e35c 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 8d0c5f42e6..cb60d4938c 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 () => (
copy(props.definition?.processDefinition?.name)}
- class={Styles['copy-btn']}
+ class={Styles['toolbar-btn']}
>
@@ -182,18 +180,37 @@ export default defineComponent({
)}
{route.name === 'workflow-instance-detail' && (
<>
- copy(props.definition?.processDefinition?.name)}
- class={Styles['copy-btn']}
+
-
-
-
-
+ {{
+ trigger: () => (
+
+ (paramPopoverRef.value = !paramPopoverRef.value)
+ }
+ class={Styles['toolbar-btn']}
+ >
+
+
+
+
+ ),
+ header: () => (
+
+ {t('project.workflow.parameters_variables')}
+
+ ),
+ default: () =>
+ }}
+
+
@@ -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']}
>
@@ -218,7 +235,7 @@ export default defineComponent({
),
default: () => (
-
+
)
}}
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 2720f1116e..b4b39516e3 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 0000000000..ae1adb4ff5
--- /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()
+ 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 = []
+ 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 (
+ handleCopy(rtClipboard(el, taskType))}
+ >
+ {Object.keys(el).map((key: string) => {
+ if (taskType === 'SQL' || taskType === 'PROCEDURE') {
+ return key !== 'direct' && key !== 'type' ? (
+
+ {key} = {el[key]}
+
+ ) : (
+ ''
+ )
+ } else {
+ return (
+
+ {key} = {el[key]}
+
+ )
+ }
+ })}
+
+ )
+ }
+
+ onMounted(() => {
+ getViewVariables()
+ })
+
+ return {
+ globalParams,
+ localParams,
+ localButton,
+ handleCopy
+ }
+ },
+ render() {
+ const { t } = useI18n()
+
+ return (
+
+
+
+
+
+ {t('project.workflow.global_parameters')}
+
+
+
+ {this.globalParams.map((item: any, index: number) => (
+ this.handleCopy(`${item.prop}=${item.value}`)}
+ >
+
+ {item.prop}
+ {' '}
+ = {item.value}
+
+ ))}
+
+
+
+
+
+
+ {t('project.workflow.local_parameters')}
+
+
+
+
+ {Object.keys(this.localParams).map(
+ (node_name: string, index: number) => (
+
+
+ Task({index}): {node_name}
+
+
+ {this.localParams[node_name].localParamsList.map(
+ (el: any, index: number) =>
+ this.localButton(
+ index,
+ this.localParams[node_name].taskType,
+ el
+ )
+ )}
+
+
+ )
+ )}
+
+ )
+ }
+})
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 0000000000..3104a6c518
--- /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;
+ }
+ }
+}