This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel-web.git
The following commit(s) were added to refs/heads/main by this push:
new 832d0889 [Feat][UI] Complete the data pipe list and data pipe delete
interface.
832d0889 is described below
commit 832d0889699fc1b7c5bc3fb7f5bdbe2d9b62eb16
Author: tungl <[email protected]>
AuthorDate: Fri Feb 24 10:01:57 2023 +0800
[Feat][UI] Complete the data pipe list and data pipe delete interface.
* [Feat][UI] Complete the data pipe list and data pipe delete interface.
* [Feat][UI] Complete the data pipe list and data pipe delete interface.
---
seatunnel-ui/src/locales/en_US/data-pipes.ts | 4 +-
seatunnel-ui/src/locales/en_US/tasks.ts | 2 +
seatunnel-ui/src/service/script/types.ts | 17 ++++-
seatunnel-ui/src/service/task/types.ts | 1 +
.../data-pipes/list/components/delete-modal.tsx | 4 +-
seatunnel-ui/src/views/data-pipes/list/index.tsx | 30 ++++++--
.../src/views/data-pipes/list/use-table.ts | 88 ++++++++++++++++------
seatunnel-ui/src/views/jobs/list/use-table.ts | 4 +-
seatunnel-ui/src/views/tasks/list/use-table.ts | 4 +-
9 files changed, 117 insertions(+), 37 deletions(-)
diff --git a/seatunnel-ui/src/locales/en_US/data-pipes.ts
b/seatunnel-ui/src/locales/en_US/data-pipes.ts
index 3bf63392..9e35075a 100644
--- a/seatunnel-ui/src/locales/en_US/data-pipes.ts
+++ b/seatunnel-ui/src/locales/en_US/data-pipes.ts
@@ -20,8 +20,8 @@ export default {
create: 'Create',
name: 'Name',
state: 'State',
- executed_time: 'Executed Time',
- modification_time: 'Modification Time',
+ create_time: 'Create Time',
+ update_time: 'Update Time',
operation: 'Operation',
succeed: 'Succeed',
running: 'Running',
diff --git a/seatunnel-ui/src/locales/en_US/tasks.ts
b/seatunnel-ui/src/locales/en_US/tasks.ts
index 5114d2ab..8dccb408 100644
--- a/seatunnel-ui/src/locales/en_US/tasks.ts
+++ b/seatunnel-ui/src/locales/en_US/tasks.ts
@@ -23,6 +23,8 @@ export default {
stop: 'Stop',
running: 'Running',
unknown: 'Unknown',
+ unpublished: 'Unpublished',
+ published: 'Published',
task_name: 'Task Name',
state: 'State',
run_frequency: 'Run Frequency',
diff --git a/seatunnel-ui/src/service/script/types.ts
b/seatunnel-ui/src/service/script/types.ts
index 0b50f206..7fb80bd7 100644
--- a/seatunnel-ui/src/service/script/types.ts
+++ b/seatunnel-ui/src/service/script/types.ts
@@ -27,4 +27,19 @@ interface ScriptAdd {
type: string
}
-export { ScriptList, ScriptAdd }
+interface ScriptDetail {
+ id: number
+ name: string
+ status: string
+ type: number
+ creatorId: number
+ menderId: number
+ createTime: string
+ updateTime: string
+}
+
+export {
+ ScriptList,
+ ScriptAdd,
+ ScriptDetail
+}
diff --git a/seatunnel-ui/src/service/task/types.ts
b/seatunnel-ui/src/service/task/types.ts
index 4761d81a..29c4104b 100644
--- a/seatunnel-ui/src/service/task/types.ts
+++ b/seatunnel-ui/src/service/task/types.ts
@@ -46,6 +46,7 @@ interface JobDetail {
menderName: string
publish: boolean
updateTime: string
+ status?: string
}
export { TaskList, TaskJobList, TaskRecycle, TaskExecute, JobDetail }
diff --git a/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
b/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
index f2355ace..4fb4b862 100644
--- a/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
@@ -41,7 +41,9 @@ const DeleteModal = defineComponent({
ctx.emit('cancelModal', props.showModal)
}
- const handleConfirm = () => {}
+ const handleConfirm = () => {
+ ctx.emit('confirmModal')
+ }
return { t, handleCancel, handleConfirm }
},
diff --git a/seatunnel-ui/src/views/data-pipes/list/index.tsx
b/seatunnel-ui/src/views/data-pipes/list/index.tsx
index a8cafb81..9b80bc6d 100644
--- a/seatunnel-ui/src/views/data-pipes/list/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/index.tsx
@@ -28,13 +28,21 @@ const DataPipesList = defineComponent({
setup() {
const { t } = useI18n()
const router: Router = useRouter()
- const { state, createColumns } = useTable()
+ const {
+ state,
+ createColumns,
+ getTableData,
+ handleConfirmDeleteModal
+ } = useTable()
- const handleCancelDeleteModal = () => {
- state.showDeleteModal = false
+ const requestData = () => {
+ getTableData({
+ pageSize: state.pageSize,
+ pageNo: state.pageNo
+ })
}
- const handleConfirmDeleteModal = () => {
+ const handleCancelDeleteModal = () => {
state.showDeleteModal = false
}
@@ -50,8 +58,14 @@ const DataPipesList = defineComponent({
router.push({ path: '/data-pipes/create' })
}
+ const handlePageSize = () => {
+ state.pageNo = 1
+ requestData()
+ }
+
onMounted(() => {
createColumns(state)
+ requestData()
})
return {
@@ -61,7 +75,9 @@ const DataPipesList = defineComponent({
handleConfirmDeleteModal,
handleCancelPublishModal,
handleConfirmPublishModal,
- handleCreate
+ handleCreate,
+ requestData,
+ handlePageSize
}
},
render() {
@@ -85,12 +101,14 @@ const DataPipesList = defineComponent({
/>
<NSpace justify='center'>
<NPagination
- v-model:page={this.page}
+ v-model:page={this.pageNo}
v-model:page-size={this.pageSize}
page-count={this.totalPage}
show-size-picker
page-sizes={[10, 30, 50]}
show-quick-jumper
+ onUpdatePage={this.requestData}
+ onUpdatePageSize={this.handlePageSize}
/>
</NSpace>
</NSpace>
diff --git a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
index cfffaf51..24afb864 100644
--- a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
+++ b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
@@ -17,15 +17,17 @@
import { reactive, ref, h } from 'vue'
import { useI18n } from 'vue-i18n'
-import { NSpace, NButton, NIcon, NDropdown } from 'naive-ui'
-import { EllipsisOutlined } from '@vicons/antd'
+import { NSpace, NButton, NTag } from 'naive-ui'
+import { scriptList, scriptDelete } from '@/service/script'
+import type { ResponseTable } from '@/service/types'
+import type { ScriptDetail } from '@/service/script/types'
export function useTable() {
const { t } = useI18n()
const state = reactive({
columns: [],
- tableData: [{ username: '' }],
- page: ref(1),
+ tableData: [],
+ pageNo: ref(1),
pageSize: ref(10),
totalPage: ref(1),
row: {},
@@ -42,43 +44,54 @@ export function useTable() {
},
{
title: t('data_pipes.state'),
- key: 'state'
+ key: 'status',
+ render: (row: ScriptDetail) => {
+ if (row.status === 'published') {
+ return h(NTag, { type: 'info' }, t('tasks.published'))
+ } else {
+ return h(NTag, { type: 'default' }, t('tasks.unpublished'))
+ }
+ }
},
{
- title: t('data_pipes.executed_time'),
- key: 'executedTime'
+ title: t('data_pipes.create_time'),
+ key: 'createTime'
},
{
- title: t('data_pipes.modification_time'),
- key: 'modificationTime'
+ title: t('data_pipes.update_time'),
+ key: 'updateTime'
},
{
title: t('data_pipes.operation'),
key: 'operation',
- render: (row: any) =>
+ render: (row: ScriptDetail) =>
h(NSpace, null, {
default: () => [
- h(NButton, { text: true }, t('data_pipes.execute')),
- h(NButton, { text: true }, t('data_pipes.edit')),
+ h(NButton, {
+ text: true,
+ disabled: row.status !== 'published'
+ }, t('data_pipes.execute')),
+ h(NButton, {
+ text: true,
+ disabled: row.status === 'published'
+ }, t('data_pipes.edit')),
h(
NButton,
- { text: true, onClick: () => handlePublish(row) },
+ {
+ text: true,
+ disabled: row.status === 'published',
+ onClick: () => handlePublish(row)
+ },
t('data_pipes.publish')
),
h(
NButton,
{
text: true,
- trigger: 'click'
+ disabled: row.status === 'published',
+ onClick: () => handleDelete(row)
},
- h(
- NDropdown,
- {
- options: [{ key: 'delete', label: t('data_pipes.delete')
}],
- onClick: () => handleDelete(row)
- },
- h(NIcon, {}, h(EllipsisOutlined))
- )
+ t('data_pipes.delete')
)
]
})
@@ -91,10 +104,39 @@ export function useTable() {
state.row = row
}
+ const handleConfirmDeleteModal = () => {
+ if (state.tableData.length === 1 && state.pageNo > 1) {
+ --state.pageNo
+ }
+
+ scriptDelete((state.row as ScriptDetail).id as number).then(() => {
+ state.showDeleteModal = false
+ getTableData({
+ pageSize: state.pageSize,
+ pageNo: state.pageNo
+ })
+ })
+ }
+
const handlePublish = (row: any) => {
state.showPublishModal = true
state.row = row
}
- return { state, createColumns }
+ const getTableData = (params: any) => {
+ if (state.loading) return
+ state.loading = true
+ scriptList(params).then((res: ResponseTable<Array<ScriptDetail> | []>) => {
+ state.tableData = res.data.data as any
+ state.totalPage = res.data.totalPage
+ state.loading = false
+ })
+ }
+
+ return {
+ state,
+ createColumns,
+ handleConfirmDeleteModal,
+ getTableData
+ }
}
diff --git a/seatunnel-ui/src/views/jobs/list/use-table.ts
b/seatunnel-ui/src/views/jobs/list/use-table.ts
index 4c32014e..ee7b9ecb 100644
--- a/seatunnel-ui/src/views/jobs/list/use-table.ts
+++ b/seatunnel-ui/src/views/jobs/list/use-table.ts
@@ -27,7 +27,7 @@ export function useTable() {
const state = reactive({
columns: [],
- tableData: [{}],
+ tableData: [],
name: ref(null),
pageNo: ref(1),
pageSize: ref(10),
@@ -94,7 +94,7 @@ export function useTable() {
state.loading = true
taskJobList({ ...params }).then(
(res: ResponseTable<Array<JobDetail> | []>) => {
- state.tableData = res.data.data
+ state.tableData = res.data.data as any
state.totalPage = res.data.totalPage
state.loading = false
}
diff --git a/seatunnel-ui/src/views/tasks/list/use-table.ts
b/seatunnel-ui/src/views/tasks/list/use-table.ts
index 43aa8e8c..7b9f5a56 100644
--- a/seatunnel-ui/src/views/tasks/list/use-table.ts
+++ b/seatunnel-ui/src/views/tasks/list/use-table.ts
@@ -44,7 +44,7 @@ export function useTable() {
{
title: t('tasks.state'),
key: 'status',
- render: (row: any) => {
+ render: (row: JobDetail) => {
if (row.status === 'SUCCESS') {
return h(NTag, { type: 'success' }, t('tasks.success'))
} else if (row.status === 'FAILED') {
@@ -73,7 +73,7 @@ export function useTable() {
{
title: t('tasks.operation'),
key: 'operation',
- render: (row: any) =>
+ render: (row: JobDetail) =>
h(NSpace, null, {
default: () => [
h(NButton, {
