This is an automated email from the ASF dual-hosted git repository.
nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new fad4f3f [Feature] Introduce CDC Ingestion list page (#78)
fad4f3f is described below
commit fad4f3f27465cf8e4cfbb062a896c464825de1a8
Author: labbomb <[email protected]>
AuthorDate: Wed Oct 25 19:34:06 2023 +0800
[Feature] Introduce CDC Ingestion list page (#78)
---
paimon-web-ui-new/src/locales/en/index.ts | 4 +-
.../src/locales/en/{index.ts => modules/cdc.ts} | 21 ++--
paimon-web-ui-new/src/locales/zh/index.ts | 4 +-
.../src/locales/{en/index.ts => zh/modules/cdc.ts} | 21 ++--
.../cdc/{ => components/list}/index.module.scss | 10 +-
.../src/views/cdc/components/list/index.tsx | 91 +++++++++++++++++
.../views/cdc/components/table-action/index.tsx | 110 +++++++++++++++++++++
paimon-web-ui-new/src/views/cdc/index.module.scss | 12 ++-
paimon-web-ui-new/src/views/cdc/index.tsx | 29 +++++-
9 files changed, 267 insertions(+), 35 deletions(-)
diff --git a/paimon-web-ui-new/src/locales/en/index.ts
b/paimon-web-ui-new/src/locales/en/index.ts
index c4475e9..502978f 100644
--- a/paimon-web-ui-new/src/locales/en/index.ts
+++ b/paimon-web-ui-new/src/locales/en/index.ts
@@ -19,10 +19,12 @@ import layout from './modules/layout'
import login from './modules/login'
import playground from './modules/playground'
import metadata from './modules/metadata'
+import cdc from './modules/cdc'
export default {
login,
layout,
playground,
- metadata
+ metadata,
+ cdc,
}
diff --git a/paimon-web-ui-new/src/locales/en/index.ts
b/paimon-web-ui-new/src/locales/en/modules/cdc.ts
similarity index 65%
copy from paimon-web-ui-new/src/locales/en/index.ts
copy to paimon-web-ui-new/src/locales/en/modules/cdc.ts
index c4475e9..a5487e9 100644
--- a/paimon-web-ui-new/src/locales/en/index.ts
+++ b/paimon-web-ui-new/src/locales/en/modules/cdc.ts
@@ -15,14 +15,17 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import layout from './modules/layout'
-import login from './modules/login'
-import playground from './modules/playground'
-import metadata from './modules/metadata'
-
export default {
- login,
- layout,
- playground,
- metadata
+ synchronization_job_definition: 'Synchronization Job Definition',
+ create_synchronization_job: 'Create Synchronization Job',
+ job_name: 'Job Name',
+ synchronization_type: 'Synchronization type',
+ job_description: 'Job Description',
+ create_user: 'Create User',
+ create_time: 'Create Time',
+ update_time: 'Update Time',
+ operation: 'Operation',
+ edit: 'Edit',
+ run: 'Run',
+ delete: 'Delete',
}
diff --git a/paimon-web-ui-new/src/locales/zh/index.ts
b/paimon-web-ui-new/src/locales/zh/index.ts
index c4475e9..8b37fa1 100644
--- a/paimon-web-ui-new/src/locales/zh/index.ts
+++ b/paimon-web-ui-new/src/locales/zh/index.ts
@@ -19,10 +19,12 @@ import layout from './modules/layout'
import login from './modules/login'
import playground from './modules/playground'
import metadata from './modules/metadata'
+import cdc from './modules/cdc'
export default {
login,
layout,
playground,
- metadata
+ metadata,
+ cdc
}
diff --git a/paimon-web-ui-new/src/locales/en/index.ts
b/paimon-web-ui-new/src/locales/zh/modules/cdc.ts
similarity index 67%
copy from paimon-web-ui-new/src/locales/en/index.ts
copy to paimon-web-ui-new/src/locales/zh/modules/cdc.ts
index c4475e9..6cb6a0a 100644
--- a/paimon-web-ui-new/src/locales/en/index.ts
+++ b/paimon-web-ui-new/src/locales/zh/modules/cdc.ts
@@ -15,14 +15,17 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import layout from './modules/layout'
-import login from './modules/login'
-import playground from './modules/playground'
-import metadata from './modules/metadata'
-
export default {
- login,
- layout,
- playground,
- metadata
+ synchronization_job_definition: '同步任务定义',
+ create_synchronization_job: '创建同步作业',
+ job_name: '作业名称',
+ synchronization_type: '同步类型',
+ job_description: '作业描述',
+ create_user: '创建用户',
+ create_time: '创建时间',
+ update_time: '更新时间',
+ operation: '操作',
+ edit: '编辑',
+ run: '运行',
+ delete: '删除',
}
diff --git a/paimon-web-ui-new/src/views/cdc/index.module.scss
b/paimon-web-ui-new/src/views/cdc/components/list/index.module.scss
similarity index 85%
copy from paimon-web-ui-new/src/views/cdc/index.module.scss
copy to paimon-web-ui-new/src/views/cdc/components/list/index.module.scss
index fe437d9..4634506 100644
--- a/paimon-web-ui-new/src/views/cdc/index.module.scss
+++ b/paimon-web-ui-new/src/views/cdc/components/list/index.module.scss
@@ -15,14 +15,6 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- display: flex;
+.list-page {
width: 100%;
- height: 100%;
-
- .content {
- display: flex;
- width: calc(100% - 60px);
- height: 100%;
- }
}
diff --git a/paimon-web-ui-new/src/views/cdc/components/list/index.tsx
b/paimon-web-ui-new/src/views/cdc/components/list/index.tsx
new file mode 100644
index 0000000..0031ac4
--- /dev/null
+++ b/paimon-web-ui-new/src/views/cdc/components/list/index.tsx
@@ -0,0 +1,91 @@
+/* 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 styles from './index.module.scss';
+import TableAction from '../table-action';
+
+export default defineComponent({
+ name: 'ListPage',
+ setup() {
+ const { t } = useLocaleHooks()
+ const tableVariables = reactive({
+ columns: [
+ {
+ title: computed(() => t('cdc.job_name')),
+ key: 'name',
+ resizable: true
+ },
+ {
+ title: computed(() => t('cdc.synchronization_type')),
+ key: 'type',
+ resizable: true
+ },
+ {
+ title: computed(() => t('cdc.job_description')),
+ key: 'description',
+ resizable: true
+ },
+ {
+ title: computed(() => t('cdc.create_user')),
+ key: 'create_user',
+ resizable: true
+ },
+ {
+ title: computed(() => t('cdc.create_time')),
+ key: 'create_time',
+ resizable: true
+ },
+ {
+ title: computed(() => t('cdc.update_time')),
+ key: 'update_time',
+ resizable: true
+ },
+ {
+ title: computed(() => t('cdc.operation')),
+ key: 'actions',
+ render: (row: any) =>
+ h(TableAction, {
+ row,
+ })
+ }
+ ],
+ data: [
+ { name: 1, type: 'Single table synchronization', create_user: 'admin'
},
+ { name: 2, type: "Whole database synchronization", create_user:
'admin' },
+ ],
+ pagination: {
+ pageSize: 10
+ }
+ })
+ return {
+ t,
+ ...toRefs(tableVariables)
+ }
+ },
+ render() {
+ return (
+ <div class={styles['list-page']}>
+ <n-data-table
+ columns={this.columns}
+ data={this.data}
+ pagination={this.pagination}
+ bordered="false"
+ />
+ </div>
+ )
+ }
+})
diff --git a/paimon-web-ui-new/src/views/cdc/components/table-action/index.tsx
b/paimon-web-ui-new/src/views/cdc/components/table-action/index.tsx
new file mode 100644
index 0000000..9090f1d
--- /dev/null
+++ b/paimon-web-ui-new/src/views/cdc/components/table-action/index.tsx
@@ -0,0 +1,110 @@
+/* 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 { CreateOutline, PlayOutline, TrashOutline } from "@vicons/ionicons5"
+
+const props = {
+ row: {
+ type: Object as PropType<any>,
+ default: {}
+ }
+}
+
+export default defineComponent({
+ name: 'TableAction',
+ props,
+ emits: ['handleEdit', 'handleRun', 'handleDelete'],
+ setup(props, { emit }) {
+ const { t } = useLocaleHooks()
+
+ const handleEdit = (row: any) => {
+ emit('handleEdit', row)
+ }
+
+ const handleRun = (row: any) => {
+ emit('handleRun', row)
+ }
+
+ const handleDelete = (row: any) => {
+ emit('handleDelete', row)
+ }
+
+ return {
+ t,
+ handleEdit,
+ handleRun,
+ handleDelete
+ }
+ },
+ render() {
+ return (
+ <n-space>
+ <n-tooltip trigger={'hover'}>
+ {{
+ default: () => this.t('cdc.edit'),
+ trigger: () => (
+ <n-button
+ size='small'
+ type='primary'
+ onClick={() =>
+ this.handleEdit(this.row)
+ }
+ circle
+ >
+ <n-icon component={CreateOutline} />
+ </n-button>
+ )
+ }}
+ </n-tooltip>
+ <n-tooltip trigger={'hover'}>
+ {{
+ default: () => this.t('cdc.run'),
+ trigger: () => (
+ <n-button
+ size='small'
+ type='primary'
+ onClick={() =>
+ this.handleRun(this.row)
+ }
+ circle
+ >
+ <n-icon component={PlayOutline} />
+ </n-button>
+ )
+ }}
+ </n-tooltip>
+ <n-tooltip trigger={'hover'}>
+ {{
+ default: () => this.t('cdc.delete'),
+ trigger: () => (
+ <n-button
+ size='small'
+ type='error'
+ onClick={() =>
+ this.handleDelete(this.row)
+ }
+ circle
+ >
+ <n-icon component={TrashOutline} />
+ </n-button>
+ )
+ }}
+ </n-tooltip>
+ </n-space>
+ )
+ }
+})
diff --git a/paimon-web-ui-new/src/views/cdc/index.module.scss
b/paimon-web-ui-new/src/views/cdc/index.module.scss
index fe437d9..05ed4ff 100644
--- a/paimon-web-ui-new/src/views/cdc/index.module.scss
+++ b/paimon-web-ui-new/src/views/cdc/index.module.scss
@@ -15,14 +15,18 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
+.cdc-page {
display: flex;
width: 100%;
height: 100%;
- .content {
+ .title {
+ width: 100%;
display: flex;
- width: calc(100% - 60px);
- height: 100%;
+ justify-content: space-between;
+
+ .operation {
+ display: flex;
+ }
}
}
diff --git a/paimon-web-ui-new/src/views/cdc/index.tsx
b/paimon-web-ui-new/src/views/cdc/index.tsx
index b70967b..e487fa7 100644
--- a/paimon-web-ui-new/src/views/cdc/index.tsx
+++ b/paimon-web-ui-new/src/views/cdc/index.tsx
@@ -15,16 +15,41 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
+import List from './components/list';
import styles from './index.module.scss';
+import { Leaf } from '@vicons/ionicons5';
export default defineComponent({
name: 'CDCPage',
setup() {
- return {}
+ const { t } = useLocaleHooks()
+ return {
+ t
+ }
},
render() {
return (
- <div class={styles.container}>CDCPage</div>
+ <div class={styles['cdc-page']}>
+ <n-card>
+ <n-space vertical size={24}>
+ <n-card>
+ <div class={styles.title}>
+ <n-space align="center">
+ <n-icon component={Leaf} color="#2F7BEA" size="18" />
+ <span>{this.t('cdc.synchronization_job_definition')}</span>
+ </n-space>
+ <div class={styles.operation}>
+ <n-space>
+ <n-input placeholder={this.t('cdc.job_name')}></n-input>
+ <n-button
type="primary">{this.t('cdc.create_synchronization_job')}</n-button>
+ </n-space>
+ </div>
+ </div>
+ </n-card>
+ <List></List>
+ </n-space>
+ </n-card>
+ </div>
)
}
})
