From 075c078e02bcc981243624768177d8349a8b8429 Mon Sep 17 00:00:00 2001 From: Devosend Date: Wed, 23 Feb 2022 16:22:22 +0800 Subject: [PATCH] [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 +- .../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(-) create mode 100644 dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables-view.tsx create mode 100644 dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/variables.module.scss 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; + } + } +}