This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel.git
The following commit(s) were added to refs/heads/dev by this push:
new bd759eec3 [Feat][UI] Add tasks manage in the project. (#2591)
bd759eec3 is described below
commit bd759eec39ff6c1ce2f539cc6123bbda0ff8a256
Author: songjianet <[email protected]>
AuthorDate: Thu Sep 1 17:32:09 2022 +0800
[Feat][UI] Add tasks manage in the project. (#2591)
---
.../src/layouts/dashboard/header/menu/use-menu.ts | 4 +
seatunnel-ui/src/layouts/dashboard/index.tsx | 2 +-
seatunnel-ui/src/locales/en_US/index.ts | 4 +-
seatunnel-ui/src/locales/en_US/jobs.ts | 3 +-
seatunnel-ui/src/locales/en_US/menu.ts | 3 +-
.../src/locales/en_US/{jobs.ts => tasks.ts} | 26 +++--
seatunnel-ui/src/router/routes.ts | 3 +-
seatunnel-ui/src/router/{routes.ts => tasks.ts} | 37 ++++---
seatunnel-ui/src/views/jobs/list/index.tsx | 2 +-
seatunnel-ui/src/views/jobs/list/use-table.ts | 4 +-
.../src/views/{jobs => tasks}/list/index.tsx | 28 +++--
seatunnel-ui/src/views/tasks/list/use-table.ts | 116 +++++++++++++++++++++
12 files changed, 186 insertions(+), 46 deletions(-)
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
b/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
index 54f6c9c0f..f3dae99da 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
+++ b/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
@@ -30,6 +30,10 @@ export function useMenu() {
{
label: () => h(NEllipsis, null, { default: () => t('menu.jobs') }),
key: 'jobs'
+ },
+ {
+ label: () => h(NEllipsis, null, { default: () => t('menu.tasks') }),
+ key: 'tasks'
}
]
diff --git a/seatunnel-ui/src/layouts/dashboard/index.tsx
b/seatunnel-ui/src/layouts/dashboard/index.tsx
index 6f0c4960c..77d93afb8 100644
--- a/seatunnel-ui/src/layouts/dashboard/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/index.tsx
@@ -28,7 +28,7 @@ const Dashboard = defineComponent({
<Header />
</NLayoutHeader>
<NLayoutContent>
- <router-view class='px-32 py-12'/>
+ <router-view class='px-32 py-12' />
</NLayoutContent>
</NLayout>
)
diff --git a/seatunnel-ui/src/locales/en_US/index.ts
b/seatunnel-ui/src/locales/en_US/index.ts
index 67b034a87..4c71c7837 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/locales/en_US/index.ts
@@ -22,6 +22,7 @@ import user_manage from '@/locales/en_US/user-manage'
import data_pipes from '@/locales/en_US/data-pipes'
import log from '@/locales/en_US/log'
import jobs from '@/locales/en_US/jobs'
+import tasks from '@/locales/en_US/tasks'
export default {
login,
@@ -30,5 +31,6 @@ export default {
user_manage,
data_pipes,
log,
- jobs
+ jobs,
+ tasks
}
diff --git a/seatunnel-ui/src/locales/en_US/jobs.ts
b/seatunnel-ui/src/locales/en_US/jobs.ts
index 50a89622e..07cae2a73 100644
--- a/seatunnel-ui/src/locales/en_US/jobs.ts
+++ b/seatunnel-ui/src/locales/en_US/jobs.ts
@@ -18,8 +18,7 @@
export default {
jobs: 'Jobs',
search: 'Search',
- search_data_pipes_name: 'Search Data Pipes Name',
- data_pipes_name: 'Data Pipes Name',
+ data_pipe_name: 'Data Pipe Name',
plan: 'Plan',
create_date: 'Create Date',
publish: 'Publish',
diff --git a/seatunnel-ui/src/locales/en_US/menu.ts
b/seatunnel-ui/src/locales/en_US/menu.ts
index b52d9b696..722579a4d 100644
--- a/seatunnel-ui/src/locales/en_US/menu.ts
+++ b/seatunnel-ui/src/locales/en_US/menu.ts
@@ -21,5 +21,6 @@ export default {
manage: 'Manage',
user_manage: 'User Manage',
help: 'Help',
- logout: 'Logout'
+ logout: 'Logout',
+ tasks: 'Tasks'
}
diff --git a/seatunnel-ui/src/locales/en_US/jobs.ts
b/seatunnel-ui/src/locales/en_US/tasks.ts
similarity index 67%
copy from seatunnel-ui/src/locales/en_US/jobs.ts
copy to seatunnel-ui/src/locales/en_US/tasks.ts
index 50a89622e..4031ae001 100644
--- a/seatunnel-ui/src/locales/en_US/jobs.ts
+++ b/seatunnel-ui/src/locales/en_US/tasks.ts
@@ -16,14 +16,22 @@
*/
export default {
- jobs: 'Jobs',
+ tasks: 'Tasks',
search: 'Search',
- search_data_pipes_name: 'Search Data Pipes Name',
- data_pipes_name: 'Data Pipes Name',
- plan: 'Plan',
- create_date: 'Create Date',
- publish: 'Publish',
- operation: 'Operation',
- executed_immediately: 'Executed Immediately',
- stop_plan: 'Stop Plan'
+ tasks_name: 'Tasks Name',
+ success: 'Success',
+ fail: 'Fail',
+ running: 'Running',
+ task_name: 'Task Name',
+ state: 'State',
+ run_frequency: 'Run Frequency',
+ once: 'Once',
+ crontab: 'Crontab',
+ next_run: 'Next Run',
+ last_run: 'Last Run',
+ last_total_bytes: 'Last Total Bytes',
+ last_total_records: 'Last Total Records',
+ rerun: 'Rerun',
+ kill: 'Kill',
+ view_log: 'View Log'
}
diff --git a/seatunnel-ui/src/router/routes.ts
b/seatunnel-ui/src/router/routes.ts
index a6dc561c2..1784f7c93 100644
--- a/seatunnel-ui/src/router/routes.ts
+++ b/seatunnel-ui/src/router/routes.ts
@@ -18,6 +18,7 @@
import utils from '@/utils'
import dataPipes from '@/router/data-pipes'
import jobs from '@/router/jobs'
+import tasks from '@/router/tasks'
import userManage from '@/router/user-manage'
import type { RouteRecordRaw } from 'vue-router'
import type { Component } from 'vue'
@@ -25,7 +26,7 @@ import type { Component } from 'vue'
const modules = import.meta.glob('/src/views/**/**.tsx')
const components: { [key: string]: Component } = utils.mapping(modules)
-const basePage: RouteRecordRaw[] = [dataPipes, jobs, userManage]
+const basePage: RouteRecordRaw[] = [dataPipes, jobs, tasks, userManage]
const loginPage: RouteRecordRaw[] = [
{
diff --git a/seatunnel-ui/src/router/routes.ts
b/seatunnel-ui/src/router/tasks.ts
similarity index 67%
copy from seatunnel-ui/src/router/routes.ts
copy to seatunnel-ui/src/router/tasks.ts
index a6dc561c2..8e1dd713f 100644
--- a/seatunnel-ui/src/router/routes.ts
+++ b/seatunnel-ui/src/router/tasks.ts
@@ -16,28 +16,27 @@
*/
import utils from '@/utils'
-import dataPipes from '@/router/data-pipes'
-import jobs from '@/router/jobs'
-import userManage from '@/router/user-manage'
-import type { RouteRecordRaw } from 'vue-router'
import type { Component } from 'vue'
const modules = import.meta.glob('/src/views/**/**.tsx')
const components: { [key: string]: Component } = utils.mapping(modules)
-const basePage: RouteRecordRaw[] = [dataPipes, jobs, userManage]
-
-const loginPage: RouteRecordRaw[] = [
- {
- path: '/login',
- name: 'login',
- component: components['login'],
- meta: {
- auth: []
+export default {
+ path: '/tasks',
+ name: 'tasks',
+ meta: {
+ title: 'tasks'
+ },
+ redirect: { name: 'tasks-list' },
+ component: () => import('@/layouts/dashboard'),
+ children: [
+ {
+ path: '/tasks/list',
+ name: 'tasks-list',
+ component: components['tasks-list'],
+ meta: {
+ title: 'tasks-list'
+ }
}
- }
-]
-
-const routes: RouteRecordRaw[] = [...basePage, ...loginPage]
-
-export default routes
+ ]
+}
diff --git a/seatunnel-ui/src/views/jobs/list/index.tsx
b/seatunnel-ui/src/views/jobs/list/index.tsx
index 354d4e06f..88a09e7bd 100644
--- a/seatunnel-ui/src/views/jobs/list/index.tsx
+++ b/seatunnel-ui/src/views/jobs/list/index.tsx
@@ -48,7 +48,7 @@ const JobsList = defineComponent({
'header-extra': () => (
<NSpace>
<NInput
- placeholder={this.t('jobs.search_data_pipes_name')}
+ placeholder={this.t('jobs.data_pipe_name')}
style={{ width: '200px' }}
/>
<NButton onClick={this.handleSearch}>
diff --git a/seatunnel-ui/src/views/jobs/list/use-table.ts
b/seatunnel-ui/src/views/jobs/list/use-table.ts
index d844299b9..ff6e7817d 100644
--- a/seatunnel-ui/src/views/jobs/list/use-table.ts
+++ b/seatunnel-ui/src/views/jobs/list/use-table.ts
@@ -34,8 +34,8 @@ export function useTable() {
const createColumns = (state: any) => {
state.columns = [
{
- title: t('jobs.data_pipes_name'),
- key: 'data_pipes_name'
+ title: t('jobs.data_pipe_name'),
+ key: 'data_pipe_name'
},
{
title: t('jobs.plan'),
diff --git a/seatunnel-ui/src/views/jobs/list/index.tsx
b/seatunnel-ui/src/views/tasks/list/index.tsx
similarity index 77%
copy from seatunnel-ui/src/views/jobs/list/index.tsx
copy to seatunnel-ui/src/views/tasks/list/index.tsx
index 354d4e06f..b18977bc2 100644
--- a/seatunnel-ui/src/views/jobs/list/index.tsx
+++ b/seatunnel-ui/src/views/tasks/list/index.tsx
@@ -17,17 +17,18 @@
import { defineComponent, onMounted, toRefs } from 'vue'
import {
- NSpace,
- NCard,
NButton,
- NInput,
+ NCard,
NDataTable,
- NPagination
+ NInput,
+ NPagination,
+ NSpace,
+ NSelect
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
-const JobsList = defineComponent({
+const TasksList = defineComponent({
setup() {
const { t } = useI18n()
const { state, createColumns } = useTable()
@@ -43,16 +44,25 @@ const JobsList = defineComponent({
render() {
return (
<NSpace vertical>
- <NCard title={this.t('jobs.jobs')}>
+ <NCard title={this.t('tasks.tasks')}>
{{
'header-extra': () => (
<NSpace>
<NInput
- placeholder={this.t('jobs.search_data_pipes_name')}
+ placeholder={this.t('tasks.tasks_name')}
+ style={{ width: '200px' }}
+ />
+ <NSelect
+ placeholder={this.t('tasks.state')}
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('jobs.search')}
+ {this.t('tasks.search')}
</NButton>
</NSpace>
)
@@ -82,4 +92,4 @@ const JobsList = defineComponent({
}
})
-export default JobsList
+export default TasksList
diff --git a/seatunnel-ui/src/views/tasks/list/use-table.ts
b/seatunnel-ui/src/views/tasks/list/use-table.ts
new file mode 100644
index 000000000..0ea56834d
--- /dev/null
+++ b/seatunnel-ui/src/views/tasks/list/use-table.ts
@@ -0,0 +1,116 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+import { h, reactive, ref } from 'vue'
+import { NButton, NSpace, NTag, NIcon } from 'naive-ui'
+import { UploadOutlined, DownloadOutlined } from '@vicons/antd'
+
+export function useTable() {
+ const { t } = useI18n()
+
+ const state = reactive({
+ columns: [],
+ tableData: [{ state: 'success' }, { state: 'fail' }, { state: 'running' }],
+ page: ref(1),
+ pageSize: ref(10),
+ totalPage: ref(1),
+ loading: ref(false)
+ })
+
+ const createColumns = (state: any) => {
+ state.columns = [
+ {
+ title: t('tasks.task_name'),
+ key: 'task_name'
+ },
+ {
+ title: t('tasks.state'),
+ key: 'state',
+ render: (row: any) => {
+ if (row.state === 'success') {
+ return h(NTag, { type: 'success' }, t('tasks.success'))
+ } else if (row.state === 'fail') {
+ return h(NTag, { type: 'error' }, t('tasks.fail'))
+ } else if (row.state === 'running') {
+ return h(NTag, { type: 'info' }, t('tasks.running'))
+ }
+ }
+ },
+ {
+ title: t('tasks.run_frequency'),
+ key: 'run_frequency'
+ },
+ {
+ title: t('tasks.next_run'),
+ key: 'next_run'
+ },
+ {
+ 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.operation'),
+ key: 'operation',
+ 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 }, t('tasks.view_log'))
+ ]
+ })
+ }
+ ]
+ }
+
+ return { state, createColumns }
+}
