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

* add variables view on workflow instance * change parameters header on toolbar
2022-02-23 16:22:22 +08:00 · 2022-02-23 16:22:22 +08:00 · 075c078e02
parent 22d63b80fa
commit 075c078e02
7 changed files with 283 additions and 25 deletions
--- 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',
--- 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: '任务名称',
--- 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'
--- 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,8 @@ export default defineComponent({
          )}
          {route.name === 'workflow-instance-detail' && (
            <>
-              <NButton
-                quaternary
-                circle
-                onClick={() => copy(props.definition?.processDefinition?.name)}
-                class={Styles['copy-btn']}
-              >
-                <NIcon>
-                  <FundViewOutlined />
-                </NIcon>
-              </NButton>
              <NPopover
-                show={startupPopover.value}
+                show={paramPopoverRef.value}
                placement='bottom'
                trigger='manual'
              >
@ -203,9 +191,38 @@ export default defineComponent({
                      quaternary
                      circle
                      onClick={() =>
-                        (startupPopover.value = !startupPopover.value)
+                        (paramPopoverRef.value = !paramPopoverRef.value)
                      }
-                      class={Styles['copy-btn']}
+                      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={startupPopoverRef.value}
+                placement='bottom'
+                trigger='manual'
+              >
+                {{
+                  trigger: () => (
+                    <NButton
+                      quaternary
+                      circle
+                      onClick={() =>
+                        (startupPopoverRef.value = !startupPopoverRef.value)
+                      }
+                      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>
--- 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;
 }

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