[Feature][UI Next][V1.0.0-Alpha] Unify clickable text in tables. (#8813)

dolphinscheduler-ui-next/src/components/button-link/index.module.scss

@@ -14,10 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.button-link {
+  cursor: pointer;
+  color: var(--n-color-target);
 
-.links {
-  color: #2080f0;
-  text-decoration: none;
   &:hover {
     text-decoration: underline;
   }

dolphinscheduler-ui-next/src/components/button-link/index.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { defineComponent, PropType, renderSlot } from 'vue'
+import { NButton } from 'naive-ui'
+import styles from './index.module.scss'
+
+const props = {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  iconPlacement: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'left'
+  }
+}
+
+const ButtonLink = defineComponent({
+  name: 'button-link',
+  props,
+  emits: ['click'],
+  setup(props, { slots, emit }) {
+    const onClick = (ev: MouseEvent) => {
+      emit('click', ev)
+    }
+    return () => (
+      <NButton {...props} onClick={onClick} text class={styles['button-link']}>
+        {{
+          default: renderSlot(slots, 'default'),
+          icon: renderSlot(slots, 'icon')
+        }}
+      </NButton>
+    )
+  }
+})
+
+export default ButtonLink

dolphinscheduler-ui-next/src/components/modal/index.tsx

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { defineComponent, h, PropType, renderSlot, Ref } from 'vue'
-import { NModal, NCard, NButton, NSpace, NIcon } from 'naive-ui'
+import { defineComponent, PropType, renderSlot, Ref } from 'vue'
+import { NModal, NCard, NButton, NSpace } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 import { useI18n } from 'vue-i18n'
 import styles from './index.module.scss'
 import { LinkOption } from '@/components/modal/types'
@@ -108,12 +109,12 @@ const Modal = defineComponent({
                     .filter((item: any) => item.show)
                     .map((item: any) => {
                       return (
-                        <NButton text onClick={item.action}>
+                        <ButtonLink onClick={item.action}>
                           {{
                             default: () => item.text,
                             icon: () => item.icon()
                           }}
-                        </NButton>
+                        </ButtonLink>
                       )
                     })}
               </NSpace>

dolphinscheduler-ui-next/src/service/service.ts

@@ -29,7 +29,7 @@ const userStore = useUserStore()
  * @description Log and display errors
  * @param {Error} error Error object
  */
- const handleError =  (res: AxiosResponse<any, any>) => {
+const handleError = (res: AxiosResponse<any, any>) => {
   // Print to console
   if (import.meta.env.MODE === 'development') {
     utils.log.capsule('DolphinScheduler', 'UI-NEXT')

dolphinscheduler-ui-next/src/utils/log.ts

@@ -27,11 +27,20 @@ const log = {
 const typeColor = (type = 'primary') => {
   let color = ''
   switch (type) {
-    case 'primary': color = '#1890ff'; break
-    case 'success': color = '#52c41a'; break
-    case 'warning': color = '#faad14'; break
-    case 'error': color = '#ff4d4f'; break
-    default:; break
+    case 'primary':
+      color = '#1890ff'
+      break
+    case 'success':
+      color = '#52c41a'
+      break
+    case 'warning':
+      color = '#faad14'
+      break
+    case 'error':
+      color = '#ff4d4f'
+      break
+    default:
+      break
   }
   return color
 }
@@ -42,11 +51,13 @@ const typeColor = (type = 'primary') => {
  * @param {String} text info text
  * @param {String} type style
  */
- log.capsule = (title: string, text: string, type: string = 'primary') => {
+log.capsule = (title: string, text: string, type: string = 'primary') => {
   console.log(
     `%c ${title} %c ${text} %c`,
     'background:#35495E; padding: 2px ; border-radius: 3px 0 0 3px; color: #fff;',
-    `background:${typeColor(type)}; padding: 2px; border-radius: 0 3px 3px 0;  color: #fff;`,
+    `background:${typeColor(
+      type
+    )}; padding: 2px; border-radius: 0 3px 3px 0;  color: #fff;`,
     'background:transparent'
   )
 }
@@ -61,4 +72,4 @@ log.error = function (info) {
   console.groupEnd()
 }
 
-export default log
+export default log

dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts

@@ -20,6 +20,7 @@ import { useI18n } from 'vue-i18n'
 import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
 import { EditOutlined, DeleteOutlined } from '@vicons/antd'
 import JsonHighlight from './json-highlight'
+import ButtonLink from '@/components/button-link'
 import { TableColumns } from './types'
 
 export function useColumns(onCallback: Function) {
@@ -52,16 +53,9 @@ export function useColumns(onCallback: Function) {
           { trigger: 'click' },
           {
             trigger: () =>
-              h(
-                NButton,
-                {
-                  quaternary: true,
-                  type: 'primary'
-                },
-                {
-                  default: () => t('datasource.click_to_view')
-                }
-              ),
+              h(ButtonLink, null, {
+                default: () => t('datasource.click_to_view')
+              }),
             default: () => h(JsonHighlight, { rowData })
           }
         )

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

@@ -18,6 +18,7 @@
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAsyncState } from '@vueuse/core'
+import ButtonLink from '@/components/button-link'
 import { queryProjectListPaging } from '@/service/modules/projects'
 import { parseTime } from '@/utils/common'
 import { deleteProject } from '@/service/modules/projects'
@@ -77,18 +78,14 @@ export function useTable() {
             {
               default: () =>
                 h(
-                  'a',
+                  ButtonLink,
                   {
                     onClick: () => {
                       menuStore.setProjectCode(row.code)
                       router.push({ path: `/projects/${row.code}` })
                     }
                   },
-                  {
-                    default: () => {
-                      return row.name
-                    }
-                  }
+                  { default: () => row.name }
                 ),
               tooltip: () => row.name
             }

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

@@ -42,13 +42,3 @@
     justify-content: center;
   }
 }
-
-.links {
-  color: dodgerblue;
-  text-decoration: none;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}

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

@@ -18,6 +18,7 @@
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
 import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 import { useI18n } from 'vue-i18n'
 import {
   DeleteOutlined,
@@ -30,7 +31,6 @@ import {
   deleteTaskDefinition
 } from '@/service/modules/task-definition'
 import { useRoute } from 'vue-router'
-import styles from './index.module.scss'
 import type {
   TaskDefinitionItem,
   TaskDefinitionRes
@@ -55,18 +55,11 @@ export function useTable(onEdit: Function) {
         width: 400,
         render: (row: IRecord) =>
           h(
-            'a',
+            ButtonLink,
             {
-              class: styles.links,
-              onClick: () => {
-                onEdit(row, true)
-              }
+              onClick: () => void onEdit(row, true)
             },
-            {
-              default: () => {
-                return row.taskName
-              }
-            }
+            { default: () => row.taskName }
           )
       },
       {

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

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

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

@@ -29,10 +29,10 @@ import {
   release
 } from '@/service/modules/process-definition'
 import TableAction from './components/table-action'
-
 import { IDefinitionParam } from './types'
 import styles from './index.module.scss'
 import { NEllipsis, NTag } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 
 export function useTable() {
   const { t } = useI18n()
@@ -72,17 +72,15 @@ export function useTable() {
             {
               default: () =>
                 h(
-                  'a',
+                  ButtonLink,
                   {
-                    href: 'javascript:',
-                    class: styles.links,
                     onClick: () =>
-                      router.push({
+                      void router.push({
                         name: 'workflow-definition-detail',
                         params: { code: row.code }
                       })
                   },
-                  row.name
+                  { default: () => row.name }
                 ),
               tooltip: () => row.name
             }
@@ -191,15 +189,14 @@ export function useTable() {
   }
 
   const deleteWorkflow = (row: any) => {
-    deleteByCode(variables.projectCode, row.code)
-      .then(() => {
-        window.$message.success(t('project.workflow.success'))
-        getTableData({
-          pageSize: variables.pageSize,
-          pageNo: variables.page,
-          searchVal: variables.searchVal
-        })
+    deleteByCode(variables.projectCode, row.code).then(() => {
+      window.$message.success(t('project.workflow.success'))
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        searchVal: variables.searchVal
       })
+    })
   }
 
   const releaseWorkflow = (row: any) => {
@@ -209,15 +206,14 @@ export function useTable() {
         | 'OFFLINE'
         | 'ONLINE'
     }
-    release(data, variables.projectCode, row.code)
-      .then(() => {
-        window.$message.success(t('project.workflow.success'))
-        getTableData({
-          pageSize: variables.pageSize,
-          pageNo: variables.page,
-          searchVal: variables.searchVal
-        })
+    release(data, variables.projectCode, row.code).then(() => {
+      window.$message.success(t('project.workflow.success'))
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        searchVal: variables.searchVal
       })
+    })
   }
 
   const copyWorkflow = (row: any) => {
@@ -225,15 +221,14 @@ export function useTable() {
       codes: String(row.code),
       targetProjectCode: variables.projectCode
     }
-    batchCopyByCodes(data, variables.projectCode)
-      .then(() => {
-        window.$message.success(t('project.workflow.success'))
-        getTableData({
-          pageSize: variables.pageSize,
-          pageNo: variables.page,
-          searchVal: variables.searchVal
-        })
+    batchCopyByCodes(data, variables.projectCode).then(() => {
+      window.$message.success(t('project.workflow.success'))
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        searchVal: variables.searchVal
       })
+    })
   }
 
   const downloadBlob = (data: any, fileNameS = 'json') => {
@@ -267,10 +262,9 @@ export function useTable() {
     const data = {
       codes: String(row.code)
     }
-    batchExportByCodes(data, variables.projectCode)
-      .then((res: any) => {
-        downloadBlob(res, fileName)
-      })
+    batchExportByCodes(data, variables.projectCode).then((res: any) => {
+      downloadBlob(res, fileName)
+    })
   }
 
   const gotoTimingManage = (row: any) => {

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

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

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

@@ -22,6 +22,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import { NTooltip, NIcon, NSpin } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 import { RowKey } from 'naive-ui/lib/data-table/src/interface'
 import {
   queryProcessInstanceListPaging,
@@ -74,24 +75,18 @@ export function useTable() {
         title: t('project.workflow.workflow_name'),
         key: 'name',
         width: 200,
-        render: (_row: IWorkflowInstance) =>
+        render: (row: IWorkflowInstance) =>
           h(
-            'a',
+            ButtonLink,
             {
-              href: 'javascript:',
-              class: styles.links,
               onClick: () =>
-                router.push({
+                void router.push({
                   name: 'workflow-instance-detail',
-                  params: { id: _row.id },
-                  query: { code: _row.processDefinitionCode }
+                  params: { id: row.id },
+                  query: { code: row.processDefinitionCode }
                 })
             },
-            {
-              default: () => {
-                return _row.name
-              }
-            }
+            { default: () => row.name }
           )
       },
       {
@@ -276,15 +271,14 @@ export function useTable() {
   }
 
   const deleteInstance = (id: number) => {
-    deleteProcessInstanceById(id, variables.projectCode)
-      .then(() => {
-        window.$message.success(t('project.workflow.success'))
-        if (variables.tableData.length === 1 && variables.page > 1) {
-          variables.page -= 1
-        }
+    deleteProcessInstanceById(id, variables.projectCode).then(() => {
+      window.$message.success(t('project.workflow.success'))
+      if (variables.tableData.length === 1 && variables.page > 1) {
+        variables.page -= 1
+      }
 
-        getTableData()
-      })
+      getTableData()
+    })
   }
 
   const batchDeleteInstance = () => {
@@ -292,32 +286,30 @@ export function useTable() {
       processInstanceIds: _.join(variables.checkedRowKeys, ',')
     }
 
-    batchDeleteProcessInstanceByIds(data, variables.projectCode)
-      .then(() => {
-        window.$message.success(t('project.workflow.success'))
+    batchDeleteProcessInstanceByIds(data, variables.projectCode).then(() => {
+      window.$message.success(t('project.workflow.success'))
 
-        if (
-          variables.tableData.length === variables.checkedRowKeys.length &&
-          variables.page > 1
-        ) {
-          variables.page -= 1
-        }
+      if (
+        variables.tableData.length === variables.checkedRowKeys.length &&
+        variables.page > 1
+      ) {
+        variables.page -= 1
+      }
 
-        variables.checkedRowKeys = []
-        getTableData()
-      })
+      variables.checkedRowKeys = []
+      getTableData()
+    })
   }
 
   /**
    * operating
    */
   const _upExecutorsState = (param: ExecuteReq) => {
-    execute(param, variables.projectCode)
-      .then(() => {
-        window.$message.success(t('project.workflow.success'))
+    execute(param, variables.projectCode).then(() => {
+      window.$message.success(t('project.workflow.success'))
 
-        getTableData()
-      })
+      getTableData()
+    })
   }
 
   /**
@@ -348,14 +340,13 @@ export function useTable() {
   const _countDownFn = (param: ICountDownParam) => {
     const { index } = param
     variables.tableData[index].buttonType = param.buttonType
-    execute(param, variables.projectCode)
-      .then(() => {
-        variables.tableData[index].disabled = true
-        window.$message.success(t('project.workflow.success'))
-        _countDown(() => {
-          getTableData()
-        }, index)
-      })
+    execute(param, variables.projectCode).then(() => {
+      variables.tableData[index].disabled = true
+      window.$message.success(t('project.workflow.success'))
+      _countDown(() => {
+        getTableData()
+      }, index)
+    })
   }
 
   return {

dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts

@@ -22,9 +22,9 @@ import { bytesToSize } from '@/utils/common'
 import { useFileStore } from '@/store/file/file'
 import TableAction from './table-action'
 import { IRenameFile } from '../types'
+import ButtonLink from '@/components/button-link'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
-import styles from './index.module.scss'
 
 const goSubFolder = (router: Router, item: any) => {
   const fileStore = useFileStore()
@@ -55,17 +55,11 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
       width: 120,
       render: (row) =>
         h(
-          'a',
+          ButtonLink,
           {
-            href: 'javascript:',
-            class: styles.links,
-            onClick: () => goSubFolder(router, row)
+            onClick: () => void goSubFolder(router, row)
           },
-          {
-            default: () => {
-              return row.name
-            }
-          }
+          { default: () => row.name }
         )
     },
     { title: t('resource.file.user_name'), width: 100, key: 'user_name' },

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss

@@ -70,12 +70,4 @@
     align-items: center;
     margin-top: 20px;
   }
-
-  .links {
-    color: #2080f0;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }

dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts

@@ -31,8 +31,8 @@ import {
   deleteResource,
   queryResourceById
 } from '@/service/modules/resources'
+import ButtonLink from '@/components/button-link'
 import { IUdfResourceParam } from './types'
-import styles from './index.module.scss'
 
 const goSubFolder = (router: Router, item: any) => {
   const fileStore = useFileStore()
@@ -75,23 +75,15 @@ export function useTable() {
         title: t('resource.udf.udf_source_name'),
         key: 'alias',
         render: (row) => {
-          if (!row.directory) {
-            return row.alias
-          } else {
-            return h(
-              'a',
-              {
-                href: 'javascript:',
-                class: styles.links,
-                onClick: () => goSubFolder(router, row)
-              },
-              {
-                default: () => {
-                  return row.alias
-                }
-              }
-            )
-          }
+          return !row.directory
+            ? row.alias
+            : h(
+                ButtonLink,
+                {
+                  onClick: () => void goSubFolder(router, row)
+                },
+                { default: () => row.alias }
+              )
         }
       },
       {
@@ -265,11 +257,10 @@ export function useTable() {
         fullName
       },
       id
-    )
-      .then((res: any) => {
-        fileStore.setCurrentDir(res.fullName)
-        router.push({ name: 'resource-sub-manage', params: { id: res.id } })
-      })
+    ).then((res: any) => {
+      fileStore.setCurrentDir(res.fullName)
+      router.push({ name: 'resource-sub-manage', params: { id: res.id } })
+    })
   }
 
   return {

dolphinscheduler-ui/src/sass/common/_table.scss

@@ -14,43 +14,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- .ansfont {
+.ansfont {
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
- .as {
+.as {
   display: inline-block;
   font-size: 14px;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
- .as-spin {
-    -webkit-animation: as-spin 2s infinite linear;
-    animation: as-spin 2s infinite linear;
+.as-spin {
+  -webkit-animation: as-spin 2s infinite linear;
+  animation: as-spin 2s infinite linear;
+}
+@-webkit-keyframes as-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
-  @-webkit-keyframes as-spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(359deg);
-      transform: rotate(359deg);
-    }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
   }
-  @keyframes as-spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(359deg);
-      transform: rotate(359deg);
-    }
+}
+@keyframes as-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
 .table-box {
   border-top: 1px solid #ecf3ff;
   .ans-checkbox-wrapper-disabled {
@@ -71,7 +71,7 @@
   .ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space:  nowrap;
+    white-space: nowrap;
     display: block;
   }
   button {
@@ -97,7 +97,8 @@
       &:hover {
         background: #ddecff;
       }
-      th,td{
+      th,
+      td {
         &:nth-child(1) {
           width: 50px;
           text-align: center;
@@ -108,13 +109,13 @@
           width: 60px;
           text-align: center;
         }
-        >span {
+        > span {
           font-size: 12px;
           color: #555;
         }
       }
       td {
-        >span {
+        > span {
           font-size: 12px;
           color: #666;
         }
@@ -126,21 +127,16 @@
       }
     }
   }
-  .links {
-    color: #2d8cf0;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 
 .table-small-model {
   padding: 0 10px;
   table {
     width: 100%;
-    tr{
+    tr {
       background: #fff;
-      th,td {
+      th,
+      td {
         padding-left: 8px;
       }
       th {
@@ -149,19 +145,16 @@
         font-size: 12px;
         font-weight: bold;
         color: #333;
-        border-bottom: 2px solid #ECEDEC;
+        border-bottom: 2px solid #ecedec;
       }
       td {
         height: 32px;
         line-height: 32px;
-        border-bottom: 1px solid #ECEDEC;
+        border-bottom: 1px solid #ecedec;
         span {
           font-size: 12px;
           color: #333;
         }
-        .links {
-          color:#2d8cf0;
-        }
       }
       &:hover {
         td {
@@ -171,10 +164,10 @@
     }
   }
 }
-.el-table--enable-row-hover .el-table__body tr:hover>td {
+.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #ddecff;
 }
-.el-table th>.cell {
+.el-table th > .cell {
   color: #555;
   padding-left: 0;
   padding-right: 0;
@@ -182,7 +175,7 @@
 .el-table td div {
   color: #666;
 }
-.el-table td>.cell {
+.el-table td > .cell {
   padding-left: 0;
   padding-right: 0;
-}
+}