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 67cdafe [Feature] Introduce new dag page and route (#86)
67cdafe is described below
commit 67cdafe55814214fb28e5246764d8800f58a7693
Author: labbomb <[email protected]>
AuthorDate: Mon Oct 30 10:55:49 2023 +0800
[Feature] Introduce new dag page and route (#86)
---
paimon-web-ui-new/src/components/modal/index.tsx | 2 +-
.../src/router/modules/cdc_ingestion.ts | 16 ++++++++++++-
.../cdc/components/dag/index.tsx} | 23 ++++++++++++++-----
.../src/views/cdc/components/list/index.tsx | 16 +++++--------
paimon-web-ui-new/src/views/cdc/index.tsx | 26 ++++++++++++++++++++--
5 files changed, 63 insertions(+), 20 deletions(-)
diff --git a/paimon-web-ui-new/src/components/modal/index.tsx
b/paimon-web-ui-new/src/components/modal/index.tsx
index 6aaeec4..211c05f 100644
--- a/paimon-web-ui-new/src/components/modal/index.tsx
+++ b/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,
}}
diff --git a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
index d8d30c6..78135c4 100644
--- a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
+++ b/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')
+ },
+ ]
}
diff --git a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
b/paimon-web-ui-new/src/views/cdc/components/dag/index.tsx
similarity index 78%
copy from paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
copy to paimon-web-ui-new/src/views/cdc/components/dag/index.tsx
index d8d30c6..94eef79 100644
--- a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
+++ b/paimon-web-ui-new/src/views/cdc/components/dag/index.tsx
@@ -15,9 +15,20 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/cdc_ingestion',
- name: 'cdc_ingestion',
- meta: { title: 'CDC Ingestion' },
- component: () => import('@/views/cdc'),
-}
+export default defineComponent({
+ name: 'DagPage',
+ setup() {
+ const { t } = useLocaleHooks()
+
+ return {
+ t,
+ }
+ },
+ render() {
+ return (
+ <div>
+ DAG
+ </div>
+ )
+ }
+})
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
index 568cd4f..0d78f32 100644
--- a/paimon-web-ui-new/src/views/cdc/components/list/index.tsx
+++ b/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>
)
}
diff --git a/paimon-web-ui-new/src/views/cdc/index.tsx
b/paimon-web-ui-new/src/views/cdc/index.tsx
index e487fa7..548414e 100644
--- a/paimon-web-ui-new/src/views/cdc/index.tsx
+++ b/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>
