From cf4fe94397beed4891e355bbd2cdfb660a0152fa Mon Sep 17 00:00:00 2001 From: Chris Bartholomew Date: Tue, 12 Apr 2022 10:54:09 -0400 Subject: [PATCH] Add pagination and sorting to topic overview (#47) --- dashboard/src/components/topics/Topics.vue | 258 ++++++++++++++---- .../src/components/ui/filters/Filters.vue | 6 +- dashboard/src/store/modules/pulsar.js | 4 +- docker-compose.yml | 18 +- 4 files changed, 219 insertions(+), 67 deletions(-) diff --git a/dashboard/src/components/topics/Topics.vue b/dashboard/src/components/topics/Topics.vue index bc7938b..a457dfc 100644 --- a/dashboard/src/components/topics/Topics.vue +++ b/dashboard/src/components/topics/Topics.vue @@ -96,64 +96,116 @@
-
-
-
- - - - +
+
+
+
+ + +
+
+ +
+
+ +
+ + + + +
+
+
+ + +
+
+ + +
+
-
-
- - - - - Clear all filters - -
+ + +
+
+
+ + Clear all filters + + + + + +
+
-
- + + + + + + +
+
@@ -355,11 +407,18 @@ export default { numPartitions: 2, required: true, clearable: false, + clearable: false, typesList: [ 'persistent', 'non-persistent', 'partitioned' - ] + ], + sortProperties: ["name", "storageSize","producers", "consumers", "subscriptions","inRate", "outRate"], + sortDirList: ["Up", "Down"], + pageSize: 10, + pageSizeMenu: [10, 20, 50, 100], + currentPage: 1, + totalRow: 0 } }, mixins: [mixins], @@ -380,16 +439,83 @@ export default { }) return nsList }, + topicsList () { + + let returnedTopicsList = [] + + let unsortedList = [] + // Copy list from vuex object + Object.assign(unsortedList, this.topicsConfig.list); + + const sortedTopicList = unsortedList.sort((a,b) => { + let modifier = 1 + if(this.topicSortDir === 'Down') modifier = -1 + let c = '' + let d = '' + if (this.topicSort === "storageSize") { + c = this.topicStats.data[a]?.stats[this.topicSort] + d = this.topicStats.data[b]?.stats[this.topicSort] + } else if (this.topicSort === "name"){ + c = this.topicStats.data[a]?.info.url + d = this.topicStats.data[b]?.info.url + } else { + c = this.topicStats.data[a]?.info[this.topicSort] + d = this.topicStats.data[b]?.info[this.topicSort] + + } + + // Treat nulls as empty string + if (c===null || c === undefined) c='' + if (d===null || d === undefined) d='' + if(c < d) return -1 * modifier + if(c > d) return 1 * modifier + return 0 + }) + + sortedTopicList.forEach(topicId => { + if (this.showTopic(topicId)) { + returnedTopicsList.push(topicId) + } + }); + + this.totalRow = returnedTopicsList.length + + return returnedTopicsList.filter((row, index) => { + let start = (this.currentPage-1)*this.pageSize; + let end = this.currentPage*this.pageSize; + if(index >= start && index < end) return true; + }) + }, topicFilter: { set (topic) { + this.currentPage = 1 this.$store.commit('setFilterObject', { key: 'topicTopic', value: topic }) }, get () { return this.filterObject.topicTopic } }, + topicSort: { + set (key) { + this.currentPage = 1 + this.$store.commit('setFilterObject', { key: 'topicSortKey', value: key }) + }, + get () { + return this.filterObject.topicSortKey + } + }, + topicSortDir: { + set (dir) { + this.currentPage = 1 + this.$store.commit('setFilterObject', { key: 'topicSortDir', value: dir }) + }, + get () { + return this.filterObject.topicSortDir + } + }, namespaceFilter: { set (ns) { + this.currentPage = 1 this.$store.commit('setFilterObject', { key: 'topicNamespace', value: ns }) }, get () { @@ -398,6 +524,7 @@ export default { }, typeFilter: { set (type) { + this.currentPage = 1 // console.log('Setting filter type to ' + type) this.$store.commit('setFilterObject', { key: 'topicType', value: type }) }, @@ -417,6 +544,29 @@ export default { }, methods: { + sort (s) { + //if s == current sort, reverse + if(s === this.topicSort) { + this.topicSortDir = this.topicSortDir==='asc'?'desc':'asc'; + } + this.topicSort = s; + }, + addSortClass (field) { + let classArray = [ 'sortable'] + if (this.topicSort === field) { + classArray.push('sortField') + if (this.topicSortDir === 'desc') { + classArray.push('headerSortDown') + } else { + classArray.push('headerSortUp') + } + } + return classArray + }, + pageChange(pInfo) { + this.currentPage = pInfo.pageNumber + this.pageSize = pInfo.pageSize + }, clearAll () { this.namespaceFilter = '' this.topicFilter = '' diff --git a/dashboard/src/components/ui/filters/Filters.vue b/dashboard/src/components/ui/filters/Filters.vue index 67af70d..beab2bb 100644 --- a/dashboard/src/components/ui/filters/Filters.vue +++ b/dashboard/src/components/ui/filters/Filters.vue @@ -18,10 +18,10 @@