[Feature][UI Next] Add workflow instance variables params (#8505)

* add variables view on workflow instance

* change parameters header on toolbar

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',

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: '任务名称',

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'

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
+              <NPopover
-                quaternary
+                show={paramPopoverRef.value}
-                circle
+                placement='bottom'
-                onClick={() => copy(props.definition?.processDefinition?.name)}
+                trigger='manual'
-                class={Styles['copy-btn']}
               >
-                <NIcon>
+                {{
-                  <FundViewOutlined />
+                  trigger: () => (
-                </NIcon>
+                    <NButton
-              </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>

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;
 }
 

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']}>&nbsp;</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>
+    )
+  }
+})

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;
+    }
+  }
+}