[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,38 +38,61 @@ export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
 
-  const columns: TableColumns<any> = [
+  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
+        render: (row, index) => index + 1
       },
       {
         title: t('project.workflow.workflow_name'),
         key: 'name',
         width: 200,
-      render: (_row) => (
+        render: (row) =>
-        <NEllipsis
+          h(
-          style={{
+            NEllipsis,
-            maxWidth: '200px'
+            { style: 'max-width: 200px; color: #2080f0' },
-          }}
+            {
-        >
+              default: () =>
-          <RouterLink
+                h(
-            to={{
+                  'a',
-              path: `/projects/${_row.projectCode}/workflow/definitions/${_row.code}`
+                  {
-            }}
+                    href: 'javascript:',
-          >
+                    class: styles.links,
-            {_row.name}
+                    onClick: () =>
-          </RouterLink>
+                      router.push({
-        </NEllipsis>
+                        name: 'workflow-definition-detail',
+                        params: { code: row.code }
+                      })
+                  },
+                  row.name
+                ),
+              tooltip: () => row.name
+            }
           )
       },
       {
         title: t('project.workflow.status'),
         key: 'releaseState',
-      render: (_row) =>
+        render: (row) =>
-        _row.releaseState === 'ONLINE'
+          row.releaseState === 'ONLINE'
             ? t('project.workflow.up_line')
             : t('project.workflow.down_line')
       },
@@ -98,8 +121,8 @@ export function useTable() {
       {
         title: t('project.workflow.schedule_publish_status'),
         key: 'scheduleReleaseState',
-      render: (_row) => {
+        render: (row) => {
-        if (_row.scheduleReleaseState === 'ONLINE') {
+          if (row.scheduleReleaseState === 'ONLINE') {
             return h(
               NTag,
               { type: 'success', size: 'small' },
@@ -107,7 +130,7 @@ export function useTable() {
                 default: () => t('project.workflow.up_line')
               }
             )
-        } else if (_row.scheduleReleaseState === 'OFFLINE') {
+          } else if (row.scheduleReleaseState === 'OFFLINE') {
             return h(
               NTag,
               { type: 'warning', size: 'small' },
@@ -139,8 +162,8 @@ export function useTable() {
             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
   }
 }