feat: add cdc list page

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,
 }

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',
+}

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
 }

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: '删除',
+}

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%;
+}

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 (
+      <div class={styles['list-page']}>
+        <n-data-table
+          columns={this.columns}
+          data={this.data}
+          pagination={this.pagination}
+          bordered="false"
+        />
+      </div>
+    )
+  }
+})

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>
+    )
+  }
+})

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;
+    }
   }
 }

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.synchronous_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_synchronous_job')}</n-button>
+                  </n-space>
+                </div>
+              </div>
+            </n-card>
+            <List></List>
+          </n-space>
+        </n-card>
+      </div>
     )
   }
 })