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 455aab1c [Feat][UI] Complete the task list interface. (#27)
455aab1c is described below
commit 455aab1c2f2e29b0becee30d6f2318bee17ddefe
Author: tungl <1778651...@qq.com>
AuthorDate: Thu Feb 23 13:31:01 2023 +0800
[Feat][UI] Complete the task list interface. (#27)
* [Feat][UI] Complete the task list interface.
* [Feat][UI] Complete the task list interface.
---
seatunnel-ui/src/locales/en_US/tasks.ts | 7 +-
seatunnel-ui/src/views/tasks/list/index.tsx | 46 +++++++---
seatunnel-ui/src/views/tasks/list/use-table.ts | 101 ++++++++++-----------
.../src/views/user-manage/list/use-table.ts | 4 +-
4 files changed, 87 insertions(+), 71 deletions(-)
diff --git a/seatunnel-ui/src/locales/en_US/tasks.ts
b/seatunnel-ui/src/locales/en_US/tasks.ts
index 4031ae00..5114d2ab 100644
--- a/seatunnel-ui/src/locales/en_US/tasks.ts
+++ b/seatunnel-ui/src/locales/en_US/tasks.ts
@@ -18,17 +18,18 @@
export default {
tasks: 'Tasks',
search: 'Search',
- tasks_name: 'Tasks Name',
success: 'Success',
fail: 'Fail',
+ stop: 'Stop',
running: 'Running',
+ unknown: 'Unknown',
task_name: 'Task Name',
state: 'State',
run_frequency: 'Run Frequency',
once: 'Once',
crontab: 'Crontab',
- next_run: 'Next Run',
- last_run: 'Last Run',
+ start_time: 'Start Time',
+ end_time: 'End Time',
last_total_bytes: 'Last Total Bytes',
last_total_records: 'Last Total Records',
rerun: 'Rerun',
diff --git a/seatunnel-ui/src/views/tasks/list/index.tsx
b/seatunnel-ui/src/views/tasks/list/index.tsx
index b18977bc..efd67ad9 100644
--- a/seatunnel-ui/src/views/tasks/list/index.tsx
+++ b/seatunnel-ui/src/views/tasks/list/index.tsx
@@ -31,15 +31,38 @@ import { useTable } from './use-table'
const TasksList = defineComponent({
setup() {
const { t } = useI18n()
- const { state, createColumns } = useTable()
+ const { state, createColumns, getTableData } = useTable()
- const handleSearch = () => {}
+ const requestData = () => {
+ getTableData({
+ pageSize: state.pageSize,
+ pageNo: state.pageNo,
+ name: state.name
+ })
+ }
+
+ const handleSearch = () => {
+ state.pageNo = 1
+ requestData()
+ }
+
+ const handlePageSize = () => {
+ state.pageNo = 1
+ requestData()
+ }
onMounted(() => {
createColumns(state)
+ requestData()
})
- return { t, handleSearch, ...toRefs(state) }
+ return {
+ t,
+ handleSearch,
+ handlePageSize,
+ requestData,
+ ...toRefs(state)
+ }
},
render() {
return (
@@ -49,17 +72,10 @@ const TasksList = defineComponent({
'header-extra': () => (
<NSpace>
<NInput
- placeholder={this.t('tasks.tasks_name')}
- style={{ width: '200px' }}
- />
- <NSelect
- placeholder={this.t('tasks.state')}
+ clearable
+ v-model={[this.name, 'value']}
+ placeholder={this.t('tasks.task_name')}
style={{ width: '200px' }}
- options={[
- { label: this.t('tasks.success'), value: 'success' },
- { label: this.t('tasks.fail'), value: 'fail' },
- { label: this.t('tasks.running'), value: 'running' }
- ]}
/>
<NButton onClick={this.handleSearch}>
{this.t('tasks.search')}
@@ -77,12 +93,14 @@ const TasksList = 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/tasks/list/use-table.ts
b/seatunnel-ui/src/views/tasks/list/use-table.ts
index 0ea56834..43aa8e8c 100644
--- a/seatunnel-ui/src/views/tasks/list/use-table.ts
+++ b/seatunnel-ui/src/views/tasks/list/use-table.ts
@@ -17,85 +17,58 @@
import { useI18n } from 'vue-i18n'
import { h, reactive, ref } from 'vue'
-import { NButton, NSpace, NTag, NIcon } from 'naive-ui'
-import { UploadOutlined, DownloadOutlined } from '@vicons/antd'
+import { NButton, NSpace, NTag } from 'naive-ui'
+import { taskInstanceList } from '@/service/task'
+import type { ResponseTable } from '@/service/types'
+import type { JobDetail } from '@/service/task/types'
export function useTable() {
const { t } = useI18n()
const state = reactive({
columns: [],
- tableData: [{ state: 'success' }, { state: 'fail' }, { state: 'running' }],
- page: ref(1),
+ tableData: [],
+ pageNo: ref(1),
pageSize: ref(10),
totalPage: ref(1),
- loading: ref(false)
+ loading: ref(false),
+ name: ref('')
})
const createColumns = (state: any) => {
state.columns = [
{
title: t('tasks.task_name'),
- key: 'task_name'
+ key: 'instanceName'
},
{
title: t('tasks.state'),
- key: 'state',
+ key: 'status',
render: (row: any) => {
- if (row.state === 'success') {
+ if (row.status === 'SUCCESS') {
return h(NTag, { type: 'success' }, t('tasks.success'))
- } else if (row.state === 'fail') {
+ } else if (row.status === 'FAILED') {
return h(NTag, { type: 'error' }, t('tasks.fail'))
- } else if (row.state === 'running') {
+ } else if (row.status === 'STOPPED') {
+ return h(NTag, { type: 'warning' }, t('tasks.stop'))
+ } else if (row.status === 'RUNNING') {
return h(NTag, { type: 'info' }, t('tasks.running'))
+ } else {
+ return h(NTag, { type: 'default' }, t('tasks.unknown'))
}
}
},
{
title: t('tasks.run_frequency'),
- key: 'run_frequency'
+ key: 'runFrequency'
},
{
- title: t('tasks.next_run'),
- key: 'next_run'
+ title: t('tasks.start_time'),
+ key: 'startTime'
},
{
- title: t('tasks.last_run'),
- key: 'last_run'
- },
- {
- title: t('tasks.last_total_bytes'),
- key: 'last_total_bytes',
- render: (row: any) =>
- h(NSpace, {}, [
- h(
- NTag,
- { type: 'success' },
- { icon: h(NIcon, {}, h(UploadOutlined)), default: 12 + ' (KB)' }
- ),
- h(
- NTag,
- { type: 'error' },
- { icon: h(NIcon, {}, h(DownloadOutlined)), default: 16 + ' (KB)'
}
- )
- ])
- },
- {
- title: t('tasks.last_total_records'),
- key: 'last_total_records',
- render: (row: any) =>
- h(NSpace, {}, [
- h(
- NTag,
- { type: 'success' },
- { icon: h(NIcon, {}, h(UploadOutlined)), default: 66 }
- ),
- h(
- NTag,
- { type: 'error' },
- { icon: h(NIcon, {}, h(DownloadOutlined)), default: 77 }
- )
- ])
+ title: t('tasks.end_time'),
+ key: 'endTime'
},
{
title: t('tasks.operation'),
@@ -103,8 +76,14 @@ export function useTable() {
render: (row: any) =>
h(NSpace, null, {
default: () => [
- h(NButton, { text: true }, t('tasks.rerun')),
- h(NButton, { text: true }, t('tasks.kill')),
+ h(NButton, {
+ text: true,
+ disabled: row.status === 'RUNNING'
+ }, t('tasks.rerun')),
+ h(NButton, {
+ text: true,
+ disabled: row.status !== 'RUNNING'
+ }, t('tasks.kill')),
h(NButton, { text: true }, t('tasks.view_log'))
]
})
@@ -112,5 +91,23 @@ export function useTable() {
]
}
- return { state, createColumns }
+ const getTableData = (params: any) => {
+ if (state.loading) return
+ state.loading = true
+ taskInstanceList({
+ pageNo: params.pageNo,
+ pageSize: params.pageSize,
+ name: params.name
+ }).then((res: ResponseTable<Array<JobDetail> | []>) => {
+ state.tableData = res.data.data as any
+ state.totalPage = res.data.totalPage
+ state.loading = false
+ })
+ }
+
+ return {
+ state,
+ createColumns,
+ getTableData
+ }
}
diff --git a/seatunnel-ui/src/views/user-manage/list/use-table.ts
b/seatunnel-ui/src/views/user-manage/list/use-table.ts
index aee18660..64fb41fe 100644
--- a/seatunnel-ui/src/views/user-manage/list/use-table.ts
+++ b/seatunnel-ui/src/views/user-manage/list/use-table.ts
@@ -26,7 +26,7 @@ export function useTable() {
const { t } = useI18n()
const state = reactive({
columns: [],
- tableData: [{ username: '' }],
+ tableData: [],
pageNo: ref(1),
pageSize: ref(10),
totalPage: ref(1),
@@ -120,7 +120,7 @@ export function useTable() {
state.loading = true
userList({ ...params }).then(
(res: ResponseTable<Array<UserDetail> | []>) => {
- state.tableData = res.data.data
+ state.tableData = res.data.data as any
state.totalPage = res.data.totalPage
state.loading = false
}
