[Feature][UI Next] Add dag toolbar tooltip. (#8546)

* toolbar add tooltip

* fix toolbar workflow name dispaly bug

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -564,7 +564,10 @@ const project = {
     positive_integer: 'Please enter a positive integer greater than 0',
     prop_empty: 'prop is empty',
     prop_repeat: 'prop is repeat',
-    node_not_created: 'Failed to save node not created'
+    node_not_created: 'Failed to save node not created',
+    copy_name: 'Copy Name',
+    view_variables: 'View Variables',
+    startup_parameter: 'Startup Parameter'
   },
   node: {
     current_node_settings: 'Current node settings',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -562,7 +562,10 @@ const project = {
     positive_integer: '请输入大于 0 的正整数',
     prop_empty: '自定义参数prop不能为空',
     prop_repeat: 'prop中有重复',
-    node_not_created: '未创建节点保存失败'
+    node_not_created: '未创建节点保存失败',
+    copy_name: '复制名称',
+    view_variables: '查看变量',
+    startup_parameter: '启动参数'
   },
   node: {
     current_node_settings: '当前节点设置',

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx

@@ -162,84 +162,113 @@ export default defineComponent({
           Styles[themeStore.darkTheme ? 'toolbar-dark' : 'toolbar-light']
         ]}
       >
-        <div>
+        <span class={Styles['workflow-name']}>
-          <span class={Styles['workflow-name']}>
+          {route.name === 'workflow-instance-detail'
-            {props.definition?.processDefinition?.name ||
+            ? props.instance?.name
+            : props.definition?.processDefinition?.name ||
               t('project.dag.create')}
-          </span>
+        </span>
-          {props.definition?.processDefinition?.name && (
+        {props.definition?.processDefinition?.name && (
-            <NButton
+          <NTooltip
-              quaternary
+            v-slots={{
-              circle
+              trigger: () => (
-              onClick={() => copy(props.definition?.processDefinition?.name)}
+                <NButton
-              class={Styles['toolbar-btn']}
+                  quaternary
-            >
+                  circle
-              <NIcon>
+                  onClick={() => {
-                <CopyOutlined />
+                    const name =
-              </NIcon>
+                      route.name === 'workflow-instance-detail'
-            </NButton>
+                        ? props.instance?.name
-          )}
+                        : props.definition?.processDefinition?.name
+                    copy(name)
+                  }}
+                  class={Styles['toolbar-btn']}
+                >
+                  <NIcon>
+                    <CopyOutlined />
+                  </NIcon>
+                </NButton>
+              ),
+              default: () => t('project.dag.copy_name')
+            }}
+          ></NTooltip>
+        )}
+        <div class={Styles['toolbar-left-part']}>
           {route.name === 'workflow-instance-detail' && (
             <>
-              <NPopover
+              <NTooltip
-                show={paramPopoverRef.value}
+                v-slots={{
-                placement='bottom'
-                trigger='manual'
-              >
-                {{
                   trigger: () => (
-                    <NButton
+                    <NPopover
-                      quaternary
+                      show={paramPopoverRef.value}
-                      circle
+                      placement='bottom'
-                      onClick={() =>
+                      trigger='manual'
-                        (paramPopoverRef.value = !paramPopoverRef.value)
-                      }
-                      class={Styles['toolbar-btn']}
                     >
-                      <NIcon>
+                      {{
-                        <FundViewOutlined />
+                        trigger: () => (
-                      </NIcon>
+                          <NButton
-                    </NButton>
+                            quaternary
-                  ),
+                            circle
-                  header: () => (
+                            onClick={() =>
-                    <NText strong depth={1}>
+                              (paramPopoverRef.value = !paramPopoverRef.value)
-                      {t('project.workflow.parameters_variables')}
+                            }
-                    </NText>
+                            class={Styles['toolbar-btn']}
+                          >
+                            <NIcon>
+                              <FundViewOutlined />
+                            </NIcon>
+                          </NButton>
+                        ),
+                        header: () => (
+                          <NText strong depth={1}>
+                            {t('project.workflow.parameters_variables')}
+                          </NText>
+                        ),
+                        default: () => <VariablesView onCopy={copy} />
+                      }}
+                    </NPopover>
                   ),
-                  default: () => <VariablesView onCopy={copy} />
+                  default: () => t('project.dag.view_variables')
                 }}
-              </NPopover>
+              ></NTooltip>
-
+              <NTooltip
-              <NPopover
+                v-slots={{
-                show={startupPopoverRef.value}
-                placement='bottom'
-                trigger='manual'
-              >
-                {{
                   trigger: () => (
-                    <NButton
+                    <NPopover
-                      quaternary
+                      show={startupPopoverRef.value}
-                      circle
+                      placement='bottom'
-                      onClick={() =>
+                      trigger='manual'
-                        (startupPopoverRef.value = !startupPopoverRef.value)
-                      }
-                      class={Styles['toolbar-btn']}
                     >
-                      <NIcon>
+                      {{
-                        <RightCircleOutlined />
+                        trigger: () => (
-                      </NIcon>
+                          <NButton
-                    </NButton>
+                            quaternary
-                  ),
+                            circle
-                  header: () => (
+                            onClick={() =>
-                    <NText strong depth={1}>
+                              (startupPopoverRef.value =
-                      {t('project.workflow.startup_parameter')}
+                                !startupPopoverRef.value)
-                    </NText>
+                            }
+                            class={Styles['toolbar-btn']}
+                          >
+                            <NIcon>
+                              <RightCircleOutlined />
+                            </NIcon>
+                          </NButton>
+                        ),
+                        header: () => (
+                          <NText strong depth={1}>
+                            {t('project.workflow.startup_parameter')}
+                          </NText>
+                        ),
+                        default: () => (
+                          <StartupParam startupParam={props.instance} />
+                        )
+                      }}
+                    </NPopover>
                   ),
-                  default: () => (
+                  default: () => t('project.dag.startup_parameter')
-                    <StartupParam startupParam={props.instance.value} />
-                  )
                 }}
-              </NPopover>
+              ></NTooltip>
             </>
           )}
         </div>

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss

@@ -75,6 +75,7 @@ $bgLight: #ffffff;
 
 .workflow-name {
   font-size: 14px;
+  font-weight: 700;
 }
 
 .toolbar-btn {
@@ -228,6 +229,12 @@ $bgLight: #ffffff;
   z-index: 9;
 }
 
+.toolbar-left-part {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
 .toolbar-right-part {
   display: flex;
   align-items: center;

dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx

@@ -59,7 +59,7 @@ export default defineComponent({
         ]}
       >
         <Dag
-          instance={instance}
+          instance={instance.value}
           definition={definition.value}
           onRefresh={refresh}
           projectCode={projectCode}