[Feature] Introduce new dag page and route

paimon-web-ui-new/src/components/modal/index.tsx

@@ -96,7 +96,7 @@ export default defineComponent({
               <Form
                 ref={this.formRef}
                 meta={{
-                  ...this.model,
+                  model: this.model,
                   rules: this.rulesRef,
                   elements: this.elementsRef,
                 }}

paimon-web-ui-new/src/router/modules/cdc_ingestion.ts

@@ -19,5 +19,19 @@ export default {
   path: '/cdc_ingestion',
   name: 'cdc_ingestion',
   meta: { title: 'CDC Ingestion' },
-  component: () => import('@/views/cdc'),
+  redirect: { name: 'cdc-list' },
+  children: [
+    {
+      path: '/cdc_ingestion/list',
+      name: 'cdc-list',
+      meta: { title: 'CDCList' },
+      component: () => import('@/views/cdc')
+    },
+    {
+      path: '/cdc_ingestion/dag',
+      name: 'cdc-dag',
+      meta: { title: 'CDCDag' },
+      component: () => import('@/views/cdc/components/dag')
+    },
+  ]
 }

paimon-web-ui-new/src/views/cdc/components/dag/index.tsx

@@ -0,0 +1,34 @@
+/* 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 defineComponent({
+  name: 'DagPage',
+  setup() {
+    const { t } = useLocaleHooks()
+
+    return {
+      t,
+    }
+  },
+  render() {
+    return (
+      <div>
+        DAG
+      </div>
+    )
+  }
+})

paimon-web-ui-new/src/views/cdc/components/list/index.tsx

@@ -16,13 +16,15 @@ specific language governing permissions and limitations
 under the License. */
 
 import styles from './index.module.scss';
-import TableAction from '../../../../components/table-action';
-import Modal from '@/components/modal';
+import TableAction from '@/components/table-action';
+import type { Router } from 'vue-router';
 
 export default defineComponent({
   name: 'ListPage',
   setup() {
     const { t } = useLocaleHooks()
+    const router: Router = useRouter()
+
     const tableVariables = reactive({
       columns: [
         {
@@ -62,8 +64,8 @@ export default defineComponent({
             h(TableAction, {
               row,
               onHandleEdit: (row) => {
-                tableVariables.showModal = true
                 tableVariables.row = row
+                router.push({ path: '/cdc_ingestion/dag' })
               },
             })
         }
@@ -75,9 +77,9 @@ export default defineComponent({
       pagination: {
         pageSize: 10
       },
-      showModal: false,
       row: {}
     })
+
     return {
       t,
       ...toRefs(tableVariables)
@@ -92,12 +94,6 @@ export default defineComponent({
           pagination={this.pagination}
           bordered={false}
         />
-        <Modal
-          showModal={this.showModal}
-          title={this.t('cdc.edit_synchronization_job')}
-          formType="CDCLIST"
-          onCancel={() => this.showModal = false}
-        />
       </div>
     )
   }

paimon-web-ui-new/src/views/cdc/index.tsx

@@ -15,6 +15,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
+import Modal from '@/components/modal';
 import List from './components/list';
 import styles from './index.module.scss';
 import { Leaf } from '@vicons/ionicons5';
@@ -23,8 +24,22 @@ export default defineComponent({
   name: 'CDCPage',
   setup() {
     const { t } = useLocaleHooks()
+
+    const showModalRef = ref(false)
+
+    const handleOpenModal = () => {
+      showModalRef.value = true
+    }
+
+    const handleConfirm = () => {
+      showModalRef.value = false
+    }
+
     return {
-      t
+      t,
+      showModalRef,
+      handleOpenModal,
+      handleConfirm
     }
   },
   render() {
@@ -41,12 +56,19 @@ export default defineComponent({
                 <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-button type="primary" onClick={this.handleOpenModal}>{this.t('cdc.create_synchronization_job')}</n-button>
                   </n-space>
                 </div>
               </div>
             </n-card>
             <List></List>
+            <Modal
+              showModal={this.showModalRef}
+              title={this.t('cdc.create_synchronization_job')}
+              formType="CDCLIST"
+              onCancel={() => this.showModalRef = false}
+              onConfirm={this.handleConfirm}
+            />
           </n-space>
         </n-card>
       </div>