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/paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new 8a37af0 [Improvement] Support search CDC job of CDC page (#247)
8a37af0 is described below
commit 8a37af0c34685a98e85a416c32565113b5e7030a
Author: yangyang zhong <[email protected]>
AuthorDate: Sun May 26 11:33:21 2024 +0800
[Improvement] Support search CDC job of CDC page (#247)
---
paimon-web-ui/src/api/models/cdc/index.ts | 4 +-
.../src/views/cdc/components/list/index.tsx | 1 +
.../src/views/cdc/components/list/use-table.ts | 8 +--
paimon-web-ui/src/views/cdc/index.tsx | 77 +++++++++++++---------
4 files changed, 53 insertions(+), 37 deletions(-)
diff --git a/paimon-web-ui/src/api/models/cdc/index.ts
b/paimon-web-ui/src/api/models/cdc/index.ts
index 3b3a756..dc365b0 100644
--- a/paimon-web-ui/src/api/models/cdc/index.ts
+++ b/paimon-web-ui/src/api/models/cdc/index.ts
@@ -37,8 +37,8 @@ export function updateCdcJob(cdcJobDefinition:
CdcJobDefinition) {
/**
* # List all cdc job definitions
*/
-export function listAllCdcJob(withConfig: boolean, currentPage: number,
pageSize: number) {
- return httpRequest.get('/cdc-job-definition/list', { withConfig,
currentPage, pageSize })
+export function listAllCdcJob(withConfig: boolean,jobName: string |undefined|
null, currentPage: number, pageSize: number) {
+ return httpRequest.get('/cdc-job-definition/list', { withConfig,jobName,
currentPage, pageSize })
}
/**
diff --git a/paimon-web-ui/src/views/cdc/components/list/index.tsx
b/paimon-web-ui/src/views/cdc/components/list/index.tsx
index b6752a0..e3c7415 100644
--- a/paimon-web-ui/src/views/cdc/components/list/index.tsx
+++ b/paimon-web-ui/src/views/cdc/components/list/index.tsx
@@ -30,6 +30,7 @@ export default defineComponent({
return {
t,
...toRefs(tableVariables),
+ getTableData
}
},
render() {
diff --git a/paimon-web-ui/src/views/cdc/components/list/use-table.ts
b/paimon-web-ui/src/views/cdc/components/list/use-table.ts
index 3248b48..ad6e6ae 100644
--- a/paimon-web-ui/src/views/cdc/components/list/use-table.ts
+++ b/paimon-web-ui/src/views/cdc/components/list/use-table.ts
@@ -98,7 +98,7 @@ export function useTable(ctx: any) {
showSizePicker: true,
pageSize: 10,
page: 1,
- count: 100,
+ itemCount: 0,
onUpdatePage: (page: number) => {
tableVariables.pagination.page = page
getTableData()
@@ -110,11 +110,11 @@ export function useTable(ctx: any) {
},
},
})
- const getTableData = () => {
- listAllCdcJob(false, tableVariables.pagination.page,
tableVariables.pagination.pageSize).then(
+ const getTableData = (jobName?:string) => {
+ listAllCdcJob(false,jobName, tableVariables.pagination.page,
tableVariables.pagination.pageSize).then(
(res: any) => {
tableVariables.data = res.data
- tableVariables.pagination.count = res.total
+ tableVariables.pagination.itemCount = res.total
},
)
}
diff --git a/paimon-web-ui/src/views/cdc/index.tsx
b/paimon-web-ui/src/views/cdc/index.tsx
index d94cac0..601971e 100644
--- a/paimon-web-ui/src/views/cdc/index.tsx
+++ b/paimon-web-ui/src/views/cdc/index.tsx
@@ -15,13 +15,14 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import { Leaf } from '@vicons/ionicons5'
+import { Leaf, Search } from '@vicons/ionicons5'
import type { Router } from 'vue-router'
import List from './components/list'
import styles from './index.module.scss'
import Modal from '@/components/modal'
import { useCDCStore } from '@/store/cdc'
import { type CdcJobSubmit, submitCdcJob } from '@/api/models/cdc'
+import job from '../job'
export default defineComponent({
name: 'CDCPage',
@@ -48,12 +49,20 @@ export default defineComponent({
router.push({ path: '/cdc_ingestion/dag' })
}
+ const cdcJobTableRef = ref()
+
const handleCdcSubmitConfirm = (form: CdcJobSubmit) => {
const CDCStore = useCDCStore()
submitCdcJob(CDCStore.getModel.id, form)
showSubmitCdcJobModalRef.value = false
}
+ const handleSeachCdcJobTable = ()=>{
+ cdcJobTableRef.value.getTableData(filterValue.value)
+ }
+
+ const filterValue = ref()
+
return {
t,
showModalRef,
@@ -64,6 +73,9 @@ export default defineComponent({
submitCdcJobModalRef,
handleOpenSubmitCdcJobModal,
handleCdcSubmitConfirm,
+ cdcJobTableRef,
+ handleSeachCdcJobTable,
+ filterValue
}
},
render() {
@@ -79,42 +91,45 @@ export default defineComponent({
</n-space>
<div class={styles.operation}>
<n-space>
- <n-input placeholder={this.t('cdc.job_name')}></n-input>
- <n-button type="primary"
onClick={this.handleOpenModal}>{this.t('cdc.create_synchronization_job')}</n-button>
+ <n-input
+ placeholder={this.t('playground.search')}
+ v-model:value={this.filterValue}
+ v-slots={{
+ prefix: () => <n-icon component={Search} />
+ }}
+ onBlur={this.handleSeachCdcJobTable}
+ />
+ <n-button type="primary" onClick={this.handleOpenModal}>
+ {this.t('cdc.create_synchronization_job')}
+ </n-button>
</n-space>
</div>
</div>
</n-card>
- <List onCdcJobSubmit={() => this.showSubmitCdcJobModalRef =
true}></List>
- {
- this.showModalRef
- && (
- <Modal
- ref="CDCModalRef"
- showModal={this.showModalRef}
- title={this.t('cdc.create_synchronization_job')}
- formType="CDCLIST"
- onCancel={() => this.showModalRef = false}
- onConfirm={this.handleConfirm}
- />
- )
- }
- {
- this.showSubmitCdcJobModalRef
- && (
- <Modal
- ref="submitCdcJobModalRef"
- showModal={this.showSubmitCdcJobModalRef}
- title={this.t('cdc.submit_cdc_job')}
- formType="CDCSUBMIT"
- onCancel={() => this.showSubmitCdcJobModalRef = false}
- onConfirm={this.handleCdcSubmitConfirm}
- />
- )
- }
+ <List ref="cdcJobTableRef" onCdcJobSubmit={() =>
(this.showSubmitCdcJobModalRef = true)}></List>
+ {this.showModalRef && (
+ <Modal
+ ref="CDCModalRef"
+ showModal={this.showModalRef}
+ title={this.t('cdc.create_synchronization_job')}
+ formType="CDCLIST"
+ onCancel={() => (this.showModalRef = false)}
+ onConfirm={this.handleConfirm}
+ />
+ )}
+ {this.showSubmitCdcJobModalRef && (
+ <Modal
+ ref="submitCdcJobModalRef"
+ showModal={this.showSubmitCdcJobModalRef}
+ title={this.t('cdc.submit_cdc_job')}
+ formType="CDCSUBMIT"
+ onCancel={() => (this.showSubmitCdcJobModalRef = false)}
+ onConfirm={this.handleCdcSubmitConfirm}
+ />
+ )}
</n-space>
</n-card>
</div>
)
- },
+ }
})
