You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kylin.apache.org by xx...@apache.org on 2023/04/21 08:49:03 UTC
[kylin] 03/17: KYLIN-5502 filter snapshot values issue
This is an automated email from the ASF dual-hosted git repository.
xxyu pushed a commit to branch kylin5
in repository https://gitbox.apache.org/repos/asf/kylin.git
commit a8fec1286b2ebe410bf46dd451582ff403fa79cf
Author: Qian Xia <la...@gmail.com>
AuthorDate: Wed Apr 12 15:07:56 2023 +0800
KYLIN-5502 filter snapshot values issue
---
kystudio/src/components/admin/Diagnostic/index.vue | 2 +-
.../snapshot/SnapshotModel/SnapshotModel.vue | 44 +++++++++++++++++----
.../src/components/studio/snapshot/snapshot.vue | 46 +++++++++++++++++-----
3 files changed, 74 insertions(+), 18 deletions(-)
diff --git a/kystudio/src/components/admin/Diagnostic/index.vue b/kystudio/src/components/admin/Diagnostic/index.vue
index 8886c79ccf..7f3dbd3468 100644
--- a/kystudio/src/components/admin/Diagnostic/index.vue
+++ b/kystudio/src/components/admin/Diagnostic/index.vue
@@ -349,7 +349,7 @@ export default class Diagnostic extends Vue {
this.dateTime.prev = new Date(t)
this.dateTime.next = date
break
- case 'lastThirtyDay':
+ case 'lastThirtyDay':
t = dt - 30 * 24 * 60 * 60 * 1000
this.dateTime.prev = new Date(t)
this.dateTime.next = date
diff --git a/kystudio/src/components/studio/snapshot/SnapshotModel/SnapshotModel.vue b/kystudio/src/components/studio/snapshot/SnapshotModel/SnapshotModel.vue
index 4248ba97dd..6c0237370d 100644
--- a/kystudio/src/components/studio/snapshot/SnapshotModel/SnapshotModel.vue
+++ b/kystudio/src/components/studio/snapshot/SnapshotModel/SnapshotModel.vue
@@ -134,6 +134,9 @@
multiple
collapse-tags
filterable
+ remote
+ :remote-method="query => filterPartitionValues(item, query)"
+ @blur="filterPartitionValues(item, '')"
:loading="item.loadPatitionValues"
@change="changePartitionValues(item)"
:disabled="!item.partition_column"
@@ -141,26 +144,26 @@
<el-option-group
class="group-partitions"
:label="$t('readyPartitions')">
- <span class="partition-count">{{item.readyPartitions.length}}</span>
+ <span class="partition-count">{{item.readyPartitionsFilter.length}}</span>
<el-option
- v-for="item in item.readyPartitions.slice(0, item.pageSize * item.pageReadyPartitionsSize)"
+ v-for="item in item.readyPartitionsFilter.slice(0, item.pageSize * item.pageReadyPartitionsSize)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
- <p class="page-value-more" v-show="item.pageReadyPartitionsSize * item.pageSize < item.readyPartitions.length" @click.stop="item.pageReadyPartitionsSize += 1">{{$t('kylinLang.common.loadMore')}}</p>
+ <p class="page-value-more" v-show="item.pageReadyPartitionsSize * item.pageSize < item.readyPartitionsFilter.length" @click.stop="item.pageReadyPartitionsSize += 1">{{$t('kylinLang.common.loadMore')}}</p>
</el-option-group>
<el-option-group
class="group-partitions"
:label="$t('notReadyPartitions')">
- <span class="partition-count">{{item.notReadyPartitions.length}}</span>
+ <span class="partition-count">{{item.notReadyPartitionsFilter.length}}</span>
<el-option
- v-for="item in item.notReadyPartitions.slice(0, item.pageSize * item.pageNotReadyPartitions)"
+ v-for="item in item.notReadyPartitionsFilter.slice(0, item.pageSize * item.pageNotReadyPartitions)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
- <p class="page-value-more" v-show="item.pageNotReadyPartitions * item.pageSize < item.notReadyPartitions.length" @click.stop="item.pageNotReadyPartitions += 1">{{$t('kylinLang.common.loadMore')}}</p>
+ <p class="page-value-more" v-show="item.pageNotReadyPartitions * item.pageSize < item.notReadyPartitionsFilter.length" @click.stop="item.pageNotReadyPartitions += 1">{{$t('kylinLang.common.loadMore')}}</p>
</el-option-group>
</el-select>
<p class="error-tip" v-if="incrementalBuildErrorList.includes(`${item.database}.${item.table}`)">{{$t('noPartitionValuesError')}}</p>
@@ -214,6 +217,7 @@ import TreeList from '../../../common/TreeList'
import arealabel from '../../../common/area_label.vue'
import { getTableTree, getDatabaseTablesTree } from './handler'
import Scrollbar from 'smooth-scrollbar'
+import { objectClone } from '../../../../util'
vuex.registerModule(['modals', 'SnapshotModel'], store)
@Component({
@@ -610,8 +614,8 @@ export default class SnapshotModel extends Vue {
const values = partitionValues[`${item.database}.${item.table}`]
self.readyPartitions = values.ready_partitions.map(it => ({label: it, value: it}))
self.notReadyPartitions = values.not_ready_partitions.map(it => ({label: it, value: it}))
- // this.$set(item, 'readyPartitions', values.ready_partitions.map(it => ({label: it, value: it})))
- // this.$set(item, 'notReadyPartitions', values.not_ready_partitions.map(it => ({label: it, value: it})))
+ self.readyPartitionsFilter = objectClone(self.readyPartitions)
+ self.notReadyPartitionsFilter = objectClone(self.notReadyPartitions)
this.refreshSelectValue = false
this.$nextTick(() => {
this.refreshSelectValue = true
@@ -620,12 +624,16 @@ export default class SnapshotModel extends Vue {
item.partition_values = []
item.readyPartitions = []
item.notReadyPartitions = []
+ item.readyPartitionsFilter = []
+ item.notReadyPartitionsFilter = []
}
self.loadPatitionValues = false
} else {
item.partition_values = []
item.readyPartitions = []
item.notReadyPartitions = []
+ item.readyPartitionsFilter = []
+ item.notReadyPartitionsFilter = []
}
this.partitionOptions[`${item.database}.${item.table}`] = {
@@ -674,7 +682,9 @@ export default class SnapshotModel extends Vue {
fetchError: false,
undefinedPartitionColErrorTip: false,
notReadyPartitions: [],
+ notReadyPartitionsFilter: [],
readyPartitions: [],
+ readyPartitionsFilter: [],
loadPatitionValues: false,
pageReadyPartitionsSize: 1,
pageNotReadyPartitions: 1,
@@ -764,6 +774,24 @@ export default class SnapshotModel extends Vue {
this.searchDBOrTableName = ''
}
+ filterPartitionValues (item, query) {
+ if (query !== '') {
+ item.loadPatitionValues = true
+ this.$nextTick(() => {
+ item.readyPartitionsFilter = item.readyPartitions.filter(p => {
+ return p.value.indexOf(query) !== -1
+ })
+ item.notReadyPartitionsFilter = item.notReadyPartitions.filter(p => {
+ return p.value.indexOf(query) !== -1
+ })
+ item.loadPatitionValues = false
+ })
+ } else {
+ item.readyPartitionsFilter = objectClone(item.readyPartitions)
+ item.notReadyPartitionsFilter = objectClone(item.notReadyPartitions)
+ }
+ }
+
// 改变分区列的值
changePartitionValues (column) {
const index = this.incrementalBuildErrorList.findIndex(it => it === `${column.database}.${column.table}`)
diff --git a/kystudio/src/components/studio/snapshot/snapshot.vue b/kystudio/src/components/studio/snapshot/snapshot.vue
index d75e6c2adc..e28557b70b 100644
--- a/kystudio/src/components/studio/snapshot/snapshot.vue
+++ b/kystudio/src/components/studio/snapshot/snapshot.vue
@@ -285,32 +285,36 @@
:disabled="!scope.row.select_partition_col"
multiple
@change="changePartitionValues(scope)"
- :placeholder="scope.row.select_partition_col && (scope.row.readyPartitions.length > 0 || scope.row.notReadyPartitions.length > 0) ? $t('kylinLang.common.pleaseSelect') : ''"
+ :placeholder="scope.row.select_partition_col && (scope.row.readyPartitionsFilter.length > 0 || scope.row.notReadyPartitionsFilter.length > 0) ? $t('kylinLang.common.pleaseSelect') : ''"
collapse-tags
+ :loading="scope.row.loadPatitionValues"
+ remote
+ :remote-method="query => filterPartitionValues(scope.row, query)"
+ @blur="filterPartitionValues(scope.row, '')"
filterable>
<el-option-group
class="group-partitions"
:label="$t('readyPartitions')">
- <span class="partition-count">{{scope.row.readyPartitions.length}}</span>
+ <span class="partition-count">{{scope.row.readyPartitionsFilter.length}}</span>
<el-option
- v-for="item in scope.row.readyPartitions.slice(0, scope.row.pageReadyPartitionsSize * scope.row.pageSize)"
+ v-for="item in scope.row.readyPartitionsFilter.slice(0, scope.row.pageReadyPartitionsSize * scope.row.pageSize)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
- <p class="page-value-more" v-show="scope.row.pageReadyPartitionsSize * scope.row.pageSize < scope.row.readyPartitions.length" @click.stop="scope.row.pageReadyPartitionsSize += 1">{{$t('kylinLang.common.loadMore')}}</p>
+ <p class="page-value-more" v-show="scope.row.pageReadyPartitionsSize * scope.row.pageSize < scope.row.readyPartitionsFilter.length" @click.stop="scope.row.pageReadyPartitionsSize += 1">{{$t('kylinLang.common.loadMore')}}</p>
</el-option-group>
<el-option-group
class="group-partitions"
:label="$t('notReadyPartitions')">
- <span class="partition-count">{{scope.row.notReadyPartitions.length}}</span>
+ <span class="partition-count">{{scope.row.notReadyPartitionsFilter.length}}</span>
<el-option
- v-for="item in scope.row.notReadyPartitions.slice(0, scope.row.pageNotReadyPartitions * scope.row.pageSize)"
+ v-for="item in scope.row.notReadyPartitionsFilter.slice(0, scope.row.pageNotReadyPartitions * scope.row.pageSize)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
- <p class="page-value-more" v-show="scope.row.pageNotReadyPartitions * scope.row.pageSize < scope.row.notReadyPartitions.length" @click.stop="scope.row.pageNotReadyPartitions += 1">{{$t('kylinLang.common.loadMore')}}</p>
+ <p class="page-value-more" v-show="scope.row.pageNotReadyPartitions * scope.row.pageSize < scope.row.notReadyPartitionsFilter.length" @click.stop="scope.row.pageNotReadyPartitions += 1">{{$t('kylinLang.common.loadMore')}}</p>
</el-option-group>
</el-select>
<p class="error-tip" v-if="incrementalBuildErrorList.includes(`${scope.row.database}.${scope.row.table}`)">{{$t('noPartitionValuesError')}}</p>
@@ -343,7 +347,7 @@ import { mapGetters, mapActions } from 'vuex'
import { Component } from 'vue-property-decorator'
import locales from './locales'
-import { handleSuccessAsync, handleError, kylinConfirm, sliceNumber } from '../../../util'
+import { handleSuccessAsync, handleError, kylinConfirm, sliceNumber, objectClone } from '../../../util'
import { pageRefTags, bigPageCount } from 'config'
import SnapshotModel from './SnapshotModel/SnapshotModel.vue'
@@ -452,6 +456,7 @@ export default class Snapshot extends Vue {
this.refreshNewPartition = true
this.incrementalBuildErrorList = []
this.loadSnapshotValues = false
+ this.refreshType = 'full'
}
// 刷新 snapshot
@@ -678,11 +683,14 @@ export default class Snapshot extends Vue {
...it,
partition_values: [],
readyPartitions: [],
+ readyPartitionsFilter: [],
notReadyPartitions: [],
+ notReadyPartitionsFilter: [],
pageReadyPartitionsSize: 1,
pageNotReadyPartitions: 1,
pageSize: 100,
- values: []
+ values: [],
+ loadPatitionValues: false
}))
}
async refreshSnapshot () {
@@ -707,6 +715,8 @@ export default class Snapshot extends Vue {
item.partition_values = []
item['readyPartitions'] = partitionValues[`${item.database}.${item.table}`].ready_partitions.map(it => ({label: it, value: it}))
item['notReadyPartitions'] = partitionValues[`${item.database}.${item.table}`].not_ready_partitions.map(it => ({label: it, value: it}))
+ item['readyPartitionsFilter'] = objectClone(item.readyPartitions)
+ item['notReadyPartitionsFilter'] = objectClone(item.notReadyPartitions)
}
})
}
@@ -794,6 +804,24 @@ export default class Snapshot extends Vue {
}
}
+ filterPartitionValues (item, query) {
+ if (query !== '') {
+ item.loadPatitionValues = true
+ this.$nextTick(() => {
+ item.readyPartitionsFilter = item.readyPartitions.filter(p => {
+ return p.value.indexOf(query) !== -1
+ })
+ item.notReadyPartitionsFilter = item.notReadyPartitions.filter(p => {
+ return p.value.indexOf(query) !== -1
+ })
+ item.loadPatitionValues = false
+ })
+ } else {
+ item.readyPartitionsFilter = objectClone(item.readyPartitions)
+ item.notReadyPartitionsFilter = objectClone(item.notReadyPartitions)
+ }
+ }
+
// 更改刷新的分区列
changePartitionValues (scope) {
const index = this.incrementalBuildErrorList.findIndex(it => it === `${scope.row.database}.${scope.row.table}`)