diff --git a/paimon-web-ui-new/src/locales/en/index.ts b/paimon-web-ui-new/src/locales/en/index.ts
index c4475e9d7..502978f9a 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/modules/cdc.ts b/paimon-web-ui-new/src/locales/en/modules/cdc.ts
new file mode 100644
index 000000000..a7eeed8c8
--- /dev/null
+++ b/paimon-web-ui-new/src/locales/en/modules/cdc.ts
@@ -0,0 +1,31 @@
+/* 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. */
+
+export default {
+ synchronous_job_definition: 'Synchronous Job Definition',
+ create_synchronous_job: 'Create Synchronous 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 c4475e9d7..8b37fa14a 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/zh/modules/cdc.ts b/paimon-web-ui-new/src/locales/zh/modules/cdc.ts
new file mode 100644
index 000000000..0a2c7c467
--- /dev/null
+++ b/paimon-web-ui-new/src/locales/zh/modules/cdc.ts
@@ -0,0 +1,31 @@
+/* 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. */
+
+export default {
+ synchronous_job_definition: '同步任务定义',
+ create_synchronous_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/components/list/index.module.scss b/paimon-web-ui-new/src/views/cdc/components/list/index.module.scss
new file mode 100644
index 000000000..463450605
--- /dev/null
+++ b/paimon-web-ui-new/src/views/cdc/components/list/index.module.scss
@@ -0,0 +1,20 @@
+/* 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. */
+
+.list-page {
+ width: 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 000000000..d0799ccee
--- /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 library synchronization", create_user: 'admin' },
+ ],
+ pagination: {
+ pageSize: 10
+ }
+ })
+ return {
+ t,
+ ...toRefs(tableVariables)
+ }
+ },
+ render() {
+ return (
+
+
+
+ )
+ }
+})
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 000000000..9090f1da3
--- /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,
+ 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 (
+
+
+ {{
+ default: () => this.t('cdc.edit'),
+ trigger: () => (
+
+ this.handleEdit(this.row)
+ }
+ circle
+ >
+
+
+ )
+ }}
+
+
+ {{
+ default: () => this.t('cdc.run'),
+ trigger: () => (
+
+ this.handleRun(this.row)
+ }
+ circle
+ >
+
+
+ )
+ }}
+
+
+ {{
+ default: () => this.t('cdc.delete'),
+ trigger: () => (
+
+ this.handleDelete(this.row)
+ }
+ circle
+ >
+
+
+ )
+ }}
+
+
+ )
+ }
+})
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 fe437d971..05ed4ff24 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 b70967b63..5832fe9d8 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 (
-