This is an automated email from the ASF dual-hosted git repository.
zhongjiajie 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 1cac78876 [Feat][UI] Add the create in the data pipes. (#2360)
1cac78876 is described below
commit 1cac7887638355aa501625c81483b098a7650639
Author: songjianet <[email protected]>
AuthorDate: Wed Aug 3 18:53:46 2022 +0800
[Feat][UI] Add the create in the data pipes. (#2360)
---
seatunnel-ui/src/components/log/index.tsx | 8 +-
seatunnel-ui/src/locales/en_US/log.ts | 2 +-
seatunnel-ui/src/router/data-pipes.ts | 8 ++
seatunnel-ui/src/views/data-pipes/create/index.tsx | 91 +++++++++++++++++++++-
.../detail/components/detail-overview.tsx | 26 +------
seatunnel-ui/src/views/data-pipes/list/index.tsx | 14 +++-
6 files changed, 115 insertions(+), 34 deletions(-)
diff --git a/seatunnel-ui/src/components/log/index.tsx
b/seatunnel-ui/src/components/log/index.tsx
index 70b326968..db6ceb212 100644
--- a/seatunnel-ui/src/components/log/index.tsx
+++ b/seatunnel-ui/src/components/log/index.tsx
@@ -32,14 +32,10 @@ const Log = defineComponent({
<NInput placeholder={this.t('log.please_select_log')} />
<NButton ghost>{this.t('log.search')}</NButton>
</NInputGroup>
- <NLog
- rows={30}
- log={'test'}
- class={['py-5', 'px-3', 'bg-gray-50']}
- />
+ <NLog rows={30} log={'test'} class={['py-5', 'px-3', 'bg-gray-50']} />
</NSpace>
)
}
})
-export default Log
\ No newline at end of file
+export default Log
diff --git a/seatunnel-ui/src/locales/en_US/log.ts
b/seatunnel-ui/src/locales/en_US/log.ts
index a319a0686..8f1d47d7b 100644
--- a/seatunnel-ui/src/locales/en_US/log.ts
+++ b/seatunnel-ui/src/locales/en_US/log.ts
@@ -18,4 +18,4 @@
export default {
please_select_log: 'Please select log',
search: 'Search'
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/router/data-pipes.ts
b/seatunnel-ui/src/router/data-pipes.ts
index 684d0ea87..365d7bc0f 100644
--- a/seatunnel-ui/src/router/data-pipes.ts
+++ b/seatunnel-ui/src/router/data-pipes.ts
@@ -53,6 +53,14 @@ export default {
meta: {
title: 'data-pipes-edit'
}
+ },
+ {
+ path: '/data-pipes/create',
+ name: 'data-pipes-create',
+ component: components['data-pipes-create'],
+ meta: {
+ title: 'data-pipes-create'
+ }
}
]
}
diff --git a/seatunnel-ui/src/views/data-pipes/create/index.tsx
b/seatunnel-ui/src/views/data-pipes/create/index.tsx
index 2dc2a6912..f1d787f46 100644
--- a/seatunnel-ui/src/views/data-pipes/create/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/create/index.tsx
@@ -16,11 +16,98 @@
*/
import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import {
+ NBreadcrumb,
+ NBreadcrumbItem,
+ NButton,
+ NCard,
+ NIcon,
+ NInput,
+ NSpace,
+ NTooltip
+} from 'naive-ui'
+import { BulbOutlined } from '@vicons/antd'
+import MonacoEditor from '@/components/monaco-editor'
+import Log from '@/components/log'
+import type { Router } from 'vue-router'
const DataPipesCreate = defineComponent({
- setup() {},
+ setup() {
+ const { t } = useI18n()
+ const router: Router = useRouter()
+
+ const handleClickDataPipes = () => {
+ router.push({ path: '/data-pipes/list' })
+ }
+
+ return { t, handleClickDataPipes }
+ },
render() {
- return <div></div>
+ return (
+ <NSpace vertical>
+ <NCard>
+ {{
+ header: () => (
+ <NSpace align='center'>
+ <NBreadcrumb>
+ <NBreadcrumbItem onClick={this.handleClickDataPipes}>
+ {this.t('data_pipes.data_pipes')}
+ </NBreadcrumbItem>
+ <NBreadcrumbItem>
+ {this.t('data_pipes.create')}
+ </NBreadcrumbItem>
+ </NBreadcrumb>
+ </NSpace>
+ ),
+ 'header-extra': () => (
+ <NSpace>
+ <NButton secondary>{this.t('data_pipes.cancel')}</NButton>
+ <NButton secondary>{this.t('data_pipes.save')}</NButton>
+ </NSpace>
+ )
+ }}
+ </NCard>
+ <NCard>
+ <NSpace align='center'>
+ <span>{this.t('data_pipes.name')}</span>
+ <NSpace align='center'>
+ <NInput
+ clearable
+ maxlength='100'
+ showCount
+ style={{ width: '600px' }}
+ />
+ <NTooltip placement='right' trigger='hover'>
+ {{
+ default: () => <span>{this.t('data_pipes.name_tips')}</span>,
+ trigger: () => (
+ <NIcon size='20' style={{ cursor: 'pointer' }}>
+ <BulbOutlined />
+ </NIcon>
+ )
+ }}
+ </NTooltip>
+ </NSpace>
+ </NSpace>
+ </NCard>
+ <NCard>
+ <NSpace vertical>
+ <NSpace justify='end'>
+ <NButton secondary>{this.t('data_pipes.execute')}</NButton>
+ <NButton secondary>{this.t('data_pipes.kill')}</NButton>
+ <NButton secondary>{this.t('data_pipes.stop')}</NButton>
+ <NButton secondary>{this.t('data_pipes.configuration')}</NButton>
+ </NSpace>
+ <MonacoEditor />
+ </NSpace>
+ </NCard>
+ <NCard>
+ <Log />
+ </NCard>
+ </NSpace>
+ )
}
})
diff --git
a/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
b/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
index ab276c4ee..485bf8c1a 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
@@ -16,20 +16,10 @@
*/
import { defineComponent, onMounted, toRefs } from 'vue'
-import {
- NGi,
- NGrid,
- NSpace,
- NTabs,
- NTabPane,
- NDataTable,
- NLog,
- NInput,
- NButton,
- NInputGroup
-} from 'naive-ui'
+import { NGi, NGrid, NSpace, NTabs, NTabPane, NDataTable } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useDetailOverview } from './use-detail-overview'
+import Log from '@/components/log'
const DetailOverview = defineComponent({
setup() {
@@ -119,17 +109,7 @@ const DetailOverview = defineComponent({
</NGrid>
<NTabs type='line' justify-content='space-evenly' class='mt-7'>
<NTabPane name='run-log' tab={this.t('data_pipes.run_log')}>
- <NSpace vertical>
- <NInputGroup>
- <NInput placeholder={this.t('data_pipes.please_select_log')} />
- <NButton ghost>{this.t('data_pipes.search')}</NButton>
- </NInputGroup>
- <NLog
- rows={30}
- log={'test'}
- class={['py-5', 'px-3', 'bg-gray-50']}
- />
- </NSpace>
+ <Log />
</NTabPane>
<NTabPane
name='historical-run-logs'
diff --git a/seatunnel-ui/src/views/data-pipes/list/index.tsx
b/seatunnel-ui/src/views/data-pipes/list/index.tsx
index cca70930c..a8cafb811 100644
--- a/seatunnel-ui/src/views/data-pipes/list/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/index.tsx
@@ -19,12 +19,15 @@ import { defineComponent, onMounted, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import { NButton, NCard, NDataTable, NPagination, NSpace } from 'naive-ui'
+import { useRouter } from 'vue-router'
import DeleteModal from './components/delete-modal'
import PublishModal from './components/publish-modal'
+import type { Router } from 'vue-router'
const DataPipesList = defineComponent({
setup() {
const { t } = useI18n()
+ const router: Router = useRouter()
const { state, createColumns } = useTable()
const handleCancelDeleteModal = () => {
@@ -43,6 +46,10 @@ const DataPipesList = defineComponent({
state.showPublishModal = false
}
+ const handleCreate = () => {
+ router.push({ path: '/data-pipes/create' })
+ }
+
onMounted(() => {
createColumns(state)
})
@@ -53,7 +60,8 @@ const DataPipesList = defineComponent({
handleCancelDeleteModal,
handleConfirmDeleteModal,
handleCancelPublishModal,
- handleConfirmPublishModal
+ handleConfirmPublishModal,
+ handleCreate
}
},
render() {
@@ -62,7 +70,9 @@ const DataPipesList = defineComponent({
<NCard title={this.t('data_pipes.data_pipes')}>
{{
'header-extra': () => (
- <NButton>{this.t('data_pipes.create')}</NButton>
+ <NButton onClick={this.handleCreate}>
+ {this.t('data_pipes.create')}
+ </NButton>
)
}}
</NCard>
