[Feature][UI Next] Fix a few bug with workflow manage (#8360)

* fix workflow define international bug

* fix workflow name link font color

* fix operation tooltip display bug

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

@@ -384,7 +384,8 @@ const project = {
     start: 'Start',
     timing: 'Timing',
     timezone: 'Timezone',
-    upline: 'Online',
+    up_line: 'Online',
+    down_line: 'Offline',
     copy_workflow: 'Copy Workflow',
     cron_manage: 'Cron manage',
     delete: 'Delete',

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx

@@ -131,6 +131,7 @@ export default defineComponent({
               <NButton
                 size='tiny'
                 type='primary'
+                tag='div'
                 circle
                 onClick={this.handleStartWorkflow}
                 disabled={releaseState === 'OFFLINE'}
@@ -168,6 +169,7 @@ export default defineComponent({
               <NButton
                 size='tiny'
                 type={releaseState === 'ONLINE' ? 'warning' : 'error'}
+                tag='div'
                 circle
                 onClick={this.handleReleaseWorkflow}
               >
@@ -227,6 +229,7 @@ export default defineComponent({
               <NButton
                 size='tiny'
                 type='error'
+                tag='div'
                 circle
                 disabled={releaseState === 'ONLINE'}
               >

dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss

@@ -86,3 +86,11 @@
     width: 86%;
   }
 }
+
+.links {
+  color: #2080f0;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}

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

@@ -25,7 +25,7 @@ import {
   NPagination,
   NSpace
 } from 'naive-ui'
-import { defineComponent, onMounted, toRefs } from 'vue'
+import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import ImportModal from './components/import-modal'
@@ -43,7 +43,7 @@ export default defineComponent({
     const route = useRoute()
     const projectCode = Number(route.params.projectCode)
 
-    const { variables, getTableData } = useTable()
+    const { variables, createColumns, getTableData } = useTable()
 
     const requestData = () => {
       getTableData({
@@ -73,7 +73,12 @@ export default defineComponent({
       })
     }
 
+    watch(useI18n().locale, () => {
+      createColumns(variables)
+    })
+
     onMounted(() => {
+      createColumns(variables)
       requestData()
     })
 

dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts

@@ -17,7 +17,7 @@
 
 import { h, ref, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter, RouterLink } from 'vue-router'
+import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { useAsyncState } from '@vueuse/core'
@@ -38,109 +38,132 @@ export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
 
-  const columns: TableColumns<any> = [
-    {
-      title: t('project.workflow.id'),
-      key: 'id',
-      width: 50,
-      render: (_row, index) => index + 1
-    },
-    {
-      title: t('project.workflow.workflow_name'),
-      key: 'name',
-      width: 200,
-      render: (_row) => (
-        <NEllipsis
-          style={{
-            maxWidth: '200px'
-          }}
-        >
-          <RouterLink
-            to={{
-              path: `/projects/${_row.projectCode}/workflow/definitions/${_row.code}`
-            }}
-          >
-            {_row.name}
-          </RouterLink>
-        </NEllipsis>
-      )
-    },
-    {
-      title: t('project.workflow.status'),
-      key: 'releaseState',
-      render: (_row) =>
-        _row.releaseState === 'ONLINE'
-          ? t('project.workflow.up_line')
-          : t('project.workflow.down_line')
-    },
-    {
-      title: t('project.workflow.create_time'),
-      key: 'createTime',
-      width: 150
-    },
-    {
-      title: t('project.workflow.update_time'),
-      key: 'updateTime',
-      width: 150
-    },
-    {
-      title: t('project.workflow.description'),
-      key: 'description'
-    },
-    {
-      title: t('project.workflow.create_user'),
-      key: 'userName'
-    },
-    {
-      title: t('project.workflow.modify_user'),
-      key: 'modifyBy'
-    },
-    {
-      title: t('project.workflow.schedule_publish_status'),
-      key: 'scheduleReleaseState',
-      render: (_row) => {
-        if (_row.scheduleReleaseState === 'ONLINE') {
-          return h(
-            NTag,
-            { type: 'success', size: 'small' },
-            {
-              default: () => t('project.workflow.up_line')
-            }
-          )
-        } else if (_row.scheduleReleaseState === 'OFFLINE') {
-          return h(
-            NTag,
-            { type: 'warning', size: 'small' },
+  const variables = reactive({
+    columns: [],
+    row: {},
+    tableData: [],
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    page: ref(1),
+    pageSize: ref(10),
+    searchVal: ref(),
+    totalPage: ref(1),
+    showRef: ref(false),
+    startShowRef: ref(false),
+    timingShowRef: ref(false),
+    versionShowRef: ref(false)
+  })
+
+  const createColumns = (variables: any) => {
+    variables.columns = [
+      {
+        title: t('project.workflow.id'),
+        key: 'id',
+        width: 50,
+        render: (row, index) => index + 1
+      },
+      {
+        title: t('project.workflow.workflow_name'),
+        key: 'name',
+        width: 200,
+        render: (row) =>
+          h(
+            NEllipsis,
+            { style: 'max-width: 200px; color: #2080f0' },
             {
-              default: () => t('project.workflow.down_line')
+              default: () =>
+                h(
+                  'a',
+                  {
+                    href: 'javascript:',
+                    class: styles.links,
+                    onClick: () =>
+                      router.push({
+                        name: 'workflow-definition-detail',
+                        params: { code: row.code }
+                      })
+                  },
+                  row.name
+                ),
+              tooltip: () => row.name
             }
           )
-        } else {
-          return '-'
+      },
+      {
+        title: t('project.workflow.status'),
+        key: 'releaseState',
+        render: (row) =>
+          row.releaseState === 'ONLINE'
+            ? t('project.workflow.up_line')
+            : t('project.workflow.down_line')
+      },
+      {
+        title: t('project.workflow.create_time'),
+        key: 'createTime',
+        width: 150
+      },
+      {
+        title: t('project.workflow.update_time'),
+        key: 'updateTime',
+        width: 150
+      },
+      {
+        title: t('project.workflow.description'),
+        key: 'description'
+      },
+      {
+        title: t('project.workflow.create_user'),
+        key: 'userName'
+      },
+      {
+        title: t('project.workflow.modify_user'),
+        key: 'modifyBy'
+      },
+      {
+        title: t('project.workflow.schedule_publish_status'),
+        key: 'scheduleReleaseState',
+        render: (row) => {
+          if (row.scheduleReleaseState === 'ONLINE') {
+            return h(
+              NTag,
+              { type: 'success', size: 'small' },
+              {
+                default: () => t('project.workflow.up_line')
+              }
+            )
+          } else if (row.scheduleReleaseState === 'OFFLINE') {
+            return h(
+              NTag,
+              { type: 'warning', size: 'small' },
+              {
+                default: () => t('project.workflow.down_line')
+              }
+            )
+          } else {
+            return '-'
+          }
         }
+      },
+      {
+        title: t('project.workflow.operation'),
+        key: 'operation',
+        width: 300,
+        fixed: 'right',
+        className: styles.operation,
+        render: (row) =>
+          h(TableAction, {
+            row,
+            onStartWorkflow: () => startWorkflow(row),
+            onTimingWorkflow: () => timingWorkflow(row),
+            onVersionWorkflow: () => versionWorkflow(row),
+            onDeleteWorkflow: () => deleteWorkflow(row),
+            onReleaseWorkflow: () => releaseWorkflow(row),
+            onCopyWorkflow: () => copyWorkflow(row),
+            onExportWorkflow: () => exportWorkflow(row),
+            onGotoTimingManage: () => gotoTimingManage(row)
+          })
       }
-    },
-    {
-      title: t('project.workflow.operation'),
-      key: 'operation',
-      width: 300,
-      fixed: 'right',
-      className: styles.operation,
-      render: (row) =>
-        h(TableAction, {
-          row,
-          onStartWorkflow: () => startWorkflow(row),
-          onTimingWorkflow: () => timingWorkflow(row),
-          onVersionWorkflow: () => versionWorkflow(row),
-          onDeleteWorkflow: () => deleteWorkflow(row),
-          onReleaseWorkflow: () => releaseWorkflow(row),
-          onCopyWorkflow: () => copyWorkflow(row),
-          onExportWorkflow: () => exportWorkflow(row),
-          onGotoTimingManage: () => gotoTimingManage(row)
-        })
-    }
-  ]
-
+    ] as TableColumns<any>
+  }
   const startWorkflow = (row: any) => {
     variables.startShowRef = true
     variables.row = row
@@ -258,21 +281,6 @@ export function useTable() {
     })
   }
 
-  const variables = reactive({
-    columns,
-    row: {},
-    tableData: [],
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
-    page: ref(1),
-    pageSize: ref(10),
-    searchVal: ref(),
-    totalPage: ref(1),
-    showRef: ref(false),
-    startShowRef: ref(false),
-    timingShowRef: ref(false),
-    versionShowRef: ref(false)
-  })
-
   const getTableData = (params: IDefinitionParam) => {
     const { state } = useAsyncState(
       queryListPaging({ ...params }, variables.projectCode).then((res: any) => {
@@ -288,6 +296,7 @@ export function useTable() {
 
   return {
     variables,
+    createColumns,
     getTableData
   }
 }