You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by ki...@apache.org on 2022/08/31 09:38:30 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add jobs manage in the project. (#2580)
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 f17a17a15 [Feat][UI] Add jobs manage in the project. (#2580)
f17a17a15 is described below
commit f17a17a15237dbad48492d6f787ef2ba69a6ee69
Author: songjianet <17...@qq.com>
AuthorDate: Wed Aug 31 17:38:23 2022 +0800
[Feat][UI] Add jobs manage in the project. (#2580)
---
.../src/layouts/dashboard/header/menu/use-menu.ts | 4 +
seatunnel-ui/src/locales/en_US/index.ts | 4 +-
.../src/locales/en_US/{menu.ts => jobs.ts} | 15 ++--
seatunnel-ui/src/locales/en_US/menu.ts | 1 +
seatunnel-ui/src/router/{routes.ts => jobs.ts} | 36 ++++-----
seatunnel-ui/src/router/routes.ts | 3 +-
seatunnel-ui/src/service/user/index.ts | 2 +-
seatunnel-ui/src/service/user/types.ts | 6 +-
seatunnel-ui/src/views/jobs/list/index.tsx | 85 ++++++++++++++++++++++
seatunnel-ui/src/views/jobs/list/use-table.ts | 68 +++++++++++++++++
10 files changed, 193 insertions(+), 31 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 ed895712e..54f6c9c0f 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
+++ b/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
@@ -26,6 +26,10 @@ export function useMenu() {
{
label: () => h(NEllipsis, null, { default: () => t('menu.data_pipes') }),
key: 'data-pipes'
+ },
+ {
+ label: () => h(NEllipsis, null, { default: () => t('menu.jobs') }),
+ key: 'jobs'
}
]
diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/locales/en_US/index.ts
index fe551eaef..67b034a87 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/locales/en_US/index.ts
@@ -21,6 +21,7 @@ import modal from '@/locales/en_US/modal'
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'
export default {
login,
@@ -28,5 +29,6 @@ export default {
modal,
user_manage,
data_pipes,
- log
+ log,
+ jobs
}
diff --git a/seatunnel-ui/src/locales/en_US/menu.ts b/seatunnel-ui/src/locales/en_US/jobs.ts
similarity index 73%
copy from seatunnel-ui/src/locales/en_US/menu.ts
copy to seatunnel-ui/src/locales/en_US/jobs.ts
index 880c5203f..50a89622e 100644
--- a/seatunnel-ui/src/locales/en_US/menu.ts
+++ b/seatunnel-ui/src/locales/en_US/jobs.ts
@@ -16,9 +16,14 @@
*/
export default {
- data_pipes: 'Data Pipes',
- manage: 'Manage',
- user_manage: 'User Manage',
- help: 'Help',
- logout: 'Logout'
+ jobs: 'Jobs',
+ 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'
}
diff --git a/seatunnel-ui/src/locales/en_US/menu.ts b/seatunnel-ui/src/locales/en_US/menu.ts
index 880c5203f..b52d9b696 100644
--- a/seatunnel-ui/src/locales/en_US/menu.ts
+++ b/seatunnel-ui/src/locales/en_US/menu.ts
@@ -17,6 +17,7 @@
export default {
data_pipes: 'Data Pipes',
+ jobs: 'Jobs',
manage: 'Manage',
user_manage: 'User Manage',
help: 'Help',
diff --git a/seatunnel-ui/src/router/routes.ts b/seatunnel-ui/src/router/jobs.ts
similarity index 69%
copy from seatunnel-ui/src/router/routes.ts
copy to seatunnel-ui/src/router/jobs.ts
index 253992f48..24c21cb33 100644
--- a/seatunnel-ui/src/router/routes.ts
+++ b/seatunnel-ui/src/router/jobs.ts
@@ -16,27 +16,27 @@
*/
import utils from '@/utils'
-import dataPipes from '@/router/data-pipes'
-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, userManage]
-
-const loginPage: RouteRecordRaw[] = [
- {
- path: '/login',
- name: 'login',
- component: components['login'],
- meta: {
- auth: []
+export default {
+ path: '/jobs',
+ name: 'jobs',
+ meta: {
+ title: 'jobs'
+ },
+ redirect: { name: 'jobs-list' },
+ component: () => import('@/layouts/dashboard'),
+ children: [
+ {
+ path: '/jobs/list',
+ name: 'jobs-list',
+ component: components['jobs-list'],
+ meta: {
+ title: 'jobs-list'
+ }
}
- }
-]
-
-const routes: RouteRecordRaw[] = [...basePage, ...loginPage]
-
-export default routes
+ ]
+}
diff --git a/seatunnel-ui/src/router/routes.ts b/seatunnel-ui/src/router/routes.ts
index 253992f48..a6dc561c2 100644
--- a/seatunnel-ui/src/router/routes.ts
+++ b/seatunnel-ui/src/router/routes.ts
@@ -17,6 +17,7 @@
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'
@@ -24,7 +25,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, userManage]
+const basePage: RouteRecordRaw[] = [dataPipes, jobs, userManage]
const loginPage: RouteRecordRaw[] = [
{
diff --git a/seatunnel-ui/src/service/user/index.ts b/seatunnel-ui/src/service/user/index.ts
index 809d12371..f28844408 100644
--- a/seatunnel-ui/src/service/user/index.ts
+++ b/seatunnel-ui/src/service/user/index.ts
@@ -64,4 +64,4 @@ export function userUpdate(updateReq: UserUpdate): any {
method: 'put',
data: { updateReq }
})
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/service/user/types.ts b/seatunnel-ui/src/service/user/types.ts
index cef3768b0..8d28ca554 100644
--- a/seatunnel-ui/src/service/user/types.ts
+++ b/seatunnel-ui/src/service/user/types.ts
@@ -32,8 +32,4 @@ interface UserUpdate extends UserAdd {
id: number
}
-export {
- UserList,
- UserAdd,
- UserUpdate
-}
\ No newline at end of file
+export { UserList, UserAdd, UserUpdate }
diff --git a/seatunnel-ui/src/views/jobs/list/index.tsx b/seatunnel-ui/src/views/jobs/list/index.tsx
new file mode 100644
index 000000000..354d4e06f
--- /dev/null
+++ b/seatunnel-ui/src/views/jobs/list/index.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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, onMounted, toRefs } from 'vue'
+import {
+ NSpace,
+ NCard,
+ NButton,
+ NInput,
+ NDataTable,
+ NPagination
+} from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useTable } from './use-table'
+
+const JobsList = defineComponent({
+ setup() {
+ const { t } = useI18n()
+ const { state, createColumns } = useTable()
+
+ const handleSearch = () => {}
+
+ onMounted(() => {
+ createColumns(state)
+ })
+
+ return { t, handleSearch, ...toRefs(state) }
+ },
+ render() {
+ return (
+ <NSpace vertical>
+ <NCard title={this.t('jobs.jobs')}>
+ {{
+ 'header-extra': () => (
+ <NSpace>
+ <NInput
+ placeholder={this.t('jobs.search_data_pipes_name')}
+ style={{ width: '200px' }}
+ />
+ <NButton onClick={this.handleSearch}>
+ {this.t('jobs.search')}
+ </NButton>
+ </NSpace>
+ )
+ }}
+ </NCard>
+ <NCard>
+ <NSpace vertical>
+ <NDataTable
+ loading={this.loading}
+ columns={this.columns}
+ data={this.tableData}
+ />
+ <NSpace justify='center'>
+ <NPagination
+ v-model:page={this.page}
+ v-model:page-size={this.pageSize}
+ page-count={this.totalPage}
+ show-size-picker
+ page-sizes={[10, 30, 50]}
+ show-quick-jumper
+ />
+ </NSpace>
+ </NSpace>
+ </NCard>
+ </NSpace>
+ )
+ }
+})
+
+export default JobsList
diff --git a/seatunnel-ui/src/views/jobs/list/use-table.ts b/seatunnel-ui/src/views/jobs/list/use-table.ts
new file mode 100644
index 000000000..d844299b9
--- /dev/null
+++ b/seatunnel-ui/src/views/jobs/list/use-table.ts
@@ -0,0 +1,68 @@
+/*
+ * 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, NSwitch } from 'naive-ui'
+
+export function useTable() {
+ const { t } = useI18n()
+
+ const state = reactive({
+ columns: [],
+ tableData: [{}],
+ page: ref(1),
+ pageSize: ref(10),
+ totalPage: ref(1),
+ loading: ref(false)
+ })
+
+ const createColumns = (state: any) => {
+ state.columns = [
+ {
+ title: t('jobs.data_pipes_name'),
+ key: 'data_pipes_name'
+ },
+ {
+ title: t('jobs.plan'),
+ key: 'plan'
+ },
+ {
+ title: t('jobs.create_date'),
+ key: 'create_date'
+ },
+ {
+ title: t('jobs.publish'),
+ key: 'publish',
+ render: (row: any) => h(NSwitch, { round: false })
+ },
+ {
+ title: t('jobs.operation'),
+ key: 'operation',
+ render: (row: any) =>
+ h(NSpace, null, {
+ default: () => [
+ h(NButton, { text: true }, t('jobs.executed_immediately')),
+ h(NButton, { text: true }, t('jobs.stop_plan'))
+ ]
+ })
+ }
+ ]
+ }
+
+ return { state, createColumns }
+}