seg_yinzy
/
DolphinScheduler
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

slim
Amy0104 2022-03-10 18:48:40 +08:00 committed by GitHub
parent 6dd89246e2
commit f5711e4fcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 209 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dolphinscheduler-ui-next/src/views/resource/file/table/index.module.scss → dolphinscheduler-ui-next/src/components/button-link/index.module.scss
View File

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

51
dolphinscheduler-ui-next/src/components/button-link/index.tsx Normal file
View File

@ -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

9
dolphinscheduler-ui-next/src/components/modal/index.tsx
View File

@ -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>

2
dolphinscheduler-ui-next/src/service/service.ts
View File

@ -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')

27
dolphinscheduler-ui-next/src/utils/log.ts
View File

@ -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

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

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

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

@ -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
}

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

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

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

@ -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 }
)
},
{

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

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

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

@ -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) => {

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

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

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

@ -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 {

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

@ -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' },

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

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

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

@ -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 {

81
dolphinscheduler-ui/src/sass/common/_table.scss
View File

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