fix: pagination not working correctly (#460)

Fixes pagination not working correctly on some pages. Adds the logic for persisting the pagination offset in the URL so reloading reloads the page the user was on. Fixes #441. Signed-off-by: Philipp Rudloff <[email protected]>
kumahq · Nov 18, 2022 · 50cf90d · 50cf90d
1 parent e357675
commit 50cf90d
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 35 deletions.
diff --git a/src/api/mock-data/meshes/default/circuit-breakers.json b/src/api/mock-data/meshes/default/circuit-breakers.json
@@ -98,5 +98,5 @@
       }
     }
   ],
-  "next": null
+  "next": "http://localhost:5681/meshes/default/circuit-breakers?offset=1"
 }
diff --git a/src/app/data-planes/views/DataPlaneListView.vue b/src/app/data-planes/views/DataPlaneListView.vue
@@ -400,11 +400,12 @@ async function parseData(dataPlaneOverview: DataPlaneOverview) {
 }
 
 async function loadData(offset: number): Promise<void> {
-  isLoading.value = true
   pageOffset.value = offset
-
   // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
   patchQueryParam('offset', offset > 0 ? offset : null)
+
+  isLoading.value = true
+
   const mesh = route.params.mesh as string
   const size = PAGE_SIZE
 

diff --git a/src/app/policies/views/PolicyView.vue b/src/app/policies/views/PolicyView.vue
@@ -35,6 +35,7 @@
         :table-data="tableData"
         :table-data-is-empty="tableDataIsEmpty"
         :next="nextUrl"
+        :page-offset="pageOffset"
         @table-action="getEntity"
         @load-data="loadData"
       >
@@ -137,6 +138,7 @@ import PolicyConnections from '../components/PolicyConnections.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
 import YamlView from '@/app/common/YamlView.vue'
 import { PolicyEntity, TableHeader } from '@/types/index.d'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 const tabs = [
   {
@@ -157,6 +159,12 @@ const props = defineProps({
     type: String,
     required: true,
   },
+
+  offset: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
 })
 
 const isLoading = ref(true)
@@ -169,6 +177,7 @@ const tableDataIsEmpty = ref(false)
 const entity = ref<any>({})
 const rawEntity = ref<Omit<PolicyEntity, 'creationTime' | 'modificationTime'> | null>(null)
 const nextUrl = ref<string | null>(null)
+const pageOffset = ref(props.offset)
 
 const tableData = ref<{ headers: TableHeader[], data: any[] }>({
   headers: [
@@ -202,12 +211,16 @@ watch(() => route.params.mesh, function () {
   tableDataIsEmpty.value = false
   error.value = null
 
-  loadData()
+  loadData(0)
 })
 
-loadData()
+loadData(props.offset)
+
+async function loadData(offset: number): Promise<void> {
+  pageOffset.value = offset
+  // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+  patchQueryParam('offset', offset > 0 ? offset : null)
 
-async function loadData(offset: number = 0): Promise<void> {
   isLoading.value = true
   error.value = null
 

diff --git a/src/app/services/views/ServiceListView.vue b/src/app/services/views/ServiceListView.vue
@@ -10,6 +10,7 @@
         :table-data="tableData"
         :table-data-is-empty="tableData.data.length === 0"
         :next="nextUrl"
+        :page-offset="pageOffset"
         @table-action="setActiveServiceInsight"
         @load-data="loadData"
       />
@@ -36,6 +37,7 @@ import ServiceDetails from '../components/ServiceDetails.vue'
 import { kumaApi } from '@/api/kumaApi'
 import { STATUS } from '@/constants'
 import { ServiceInsight, TableHeader } from '@/types/index.d'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 const headers: TableHeader[] = [
   { label: 'Service', key: 'name' },
@@ -54,9 +56,18 @@ const EMPTY_STATE = {
 
 const route = useRoute()
 
+const props = defineProps({
+  offset: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+})
+
 const isLoading = ref(true)
 const error = ref<Error | null>(null)
 const nextUrl = ref<string | null>(null)
+const pageOffset = ref(props.offset)
 const serviceInsight = ref<{ name: string, mesh: string, serviceType?: 'internal' | 'external' | 'gateway_builtin' | 'gateway_delegated' } | null>(null)
 const tableData = ref<{ headers: TableHeader[], data: any[] }>({
   headers,
@@ -72,9 +83,13 @@ watch(() => route.params.mesh, function () {
   loadData(0)
 })
 
-loadData(0)
+loadData(props.offset)
 
 async function loadData(offset: number): Promise<void> {
+  pageOffset.value = offset
+  // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+  patchQueryParam('offset', offset > 0 ? offset : null)
+
   isLoading.value = true
   error.value = null
 

diff --git a/src/app/zones/views/ZoneEgresses.vue b/src/app/zones/views/ZoneEgresses.vue
@@ -10,6 +10,7 @@
         :table-data="tableData"
         :table-data-is-empty="isEmpty"
         :next="next"
+        :page-offset="pageOffset"
         @table-action="tableAction"
         @load-data="loadData($event)"
       >
@@ -129,6 +130,7 @@ import LabelList from '@/app/common/LabelList.vue'
 import SubscriptionDetails from '@/app/common/subscriptions/SubscriptionDetails.vue'
 import SubscriptionHeader from '@/app/common/subscriptions/SubscriptionHeader.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 export default {
   name: 'ZoneEgresses',
@@ -147,6 +149,14 @@ export default {
     KCard,
   },
 
+  props: {
+    offset: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+
   data() {
     return {
       isLoading: true,
@@ -192,33 +202,38 @@ export default {
       pageSize: PAGE_SIZE_DEFAULT,
       next: null,
       subscriptionsReversed: [],
+      pageOffset: this.offset,
     }
   },
+
   watch: {
     $route() {
       // Ensures basic state is reset when switching meshes using the mesh selector.
       this.isLoading = true
       this.isEmpty = false
       this.error = null
 
-      this.init()
+      this.loadData(0)
     },
   },
+
   beforeMount() {
-    this.init()
+    this.loadData(this.offset)
   },
+
   methods: {
-    init() {
-      this.loadData()
-    },
     tableAction(ev) {
       const data = ev
 
       // load the data into the tabs
       this.getEntity(data)
     },
 
-    async loadData(offset = '0') {
+    async loadData(offset) {
+      this.pageOffset = offset
+      // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+      patchQueryParam('offset', offset > 0 ? offset : null)
+
       this.isLoading = true
       this.isEmpty = false
 

diff --git a/src/app/zones/views/ZoneIngresses.vue b/src/app/zones/views/ZoneIngresses.vue
@@ -13,8 +13,9 @@
         :table-data="tableData"
         :table-data-is-empty="isEmpty"
         :next="next"
+        :page-offset="pageOffset"
         @table-action="tableAction"
-        @load-data="loadData($event)"
+        @load-data="loadData"
       >
         <template #additionalControls>
           <KButton
@@ -134,6 +135,7 @@ import MultizoneInfo from '../components/MultizoneInfo.vue'
 import SubscriptionDetails from '@/app/common/subscriptions/SubscriptionDetails.vue'
 import SubscriptionHeader from '@/app/common/subscriptions/SubscriptionHeader.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 export default {
   name: 'ZoneIngresses',
@@ -153,6 +155,14 @@ export default {
     KCard,
   },
 
+  props: {
+    offset: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+
   data() {
     return {
       isLoading: true,
@@ -198,30 +208,35 @@ export default {
       pageSize: PAGE_SIZE_DEFAULT,
       next: null,
       subscriptionsReversed: [],
+      pageOffset: this.offset,
     }
   },
+
   computed: {
     ...mapGetters({
       multicluster: 'config/getMulticlusterStatus',
     }),
   },
+
   watch: {
     $route() {
       // Ensures basic state is reset when switching meshes using the mesh selector.
       this.isLoading = true
       this.isEmpty = false
       this.error = null
 
-      this.init()
+      this.init(0)
     },
   },
+
   beforeMount() {
-    this.init()
+    this.init(this.offset)
   },
+
   methods: {
-    init() {
+    init(offset) {
       if (this.multicluster) {
-        this.loadData()
+        this.loadData(offset)
       }
     },
     tableAction(ev) {
@@ -231,7 +246,11 @@ export default {
       this.getEntity(data)
     },
 
-    async loadData(offset = '0') {
+    async loadData(offset) {
+      this.pageOffset = offset
+      // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+      patchQueryParam('offset', offset > 0 ? offset : null)
+
       this.isLoading = true
       this.isEmpty = false
 

diff --git a/src/app/zones/views/ZonesView.vue b/src/app/zones/views/ZonesView.vue
@@ -14,6 +14,7 @@
         :table-data-is-empty="tableDataIsEmpty"
         :show-warnings="tableData.data.some((item) => item.withWarnings)"
         :next="next"
+        :page-offset="pageOffset"
         @table-action="tableAction"
         @load-data="loadData($event)"
       >
@@ -138,6 +139,7 @@ import SubscriptionDetails from '@/app/common/subscriptions/SubscriptionDetails.
 import SubscriptionHeader from '@/app/common/subscriptions/SubscriptionHeader.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
 import WarningsWidget from '@/app/common/warnings/WarningsWidget.vue'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 export default {
   name: 'ZonesView',
@@ -159,6 +161,14 @@ export default {
     KCard,
   },
 
+  props: {
+    offset: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+
   data() {
     return {
       isLoading: true,
@@ -210,14 +220,17 @@ export default {
       subscriptionsReversed: [],
       codeOutput: null,
       zonesWithIngress: new Set(),
+      pageOffset: this.offset,
     }
   },
+
   computed: {
     ...mapGetters({
       multicluster: 'config/getMulticlusterStatus',
       globalCpVersion: 'config/getVersion',
     }),
   },
+
   watch: {
     $route() {
       // Ensures basic state is reset when switching meshes using the mesh selector.
@@ -229,18 +242,21 @@ export default {
       this.entityHasError = false
       this.tableDataIsEmpty = false
 
-      this.init()
+      this.init(0)
     },
   },
+
   beforeMount() {
-    this.init()
+    this.init(this.offset)
   },
+
   methods: {
-    init() {
+    init(offset) {
       if (this.multicluster) {
-        this.loadData()
+        this.loadData(offset)
       }
     },
+
     filterTabs() {
       if (!this.warnings.length) {
         return this.tabs.filter((tab) => tab.hash !== '#warnings')
@@ -303,7 +319,11 @@ export default {
 
       this.zonesWithEgress = zones
     },
-    async loadData(offset = '0') {
+    async loadData(offset) {
+      this.pageOffset = offset
+      // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+      patchQueryParam('offset', offset > 0 ? offset : null)
+
       this.isLoading = true
       this.isEmpty = false
 

diff --git a/src/router/getLastParameter.ts b/src/router/getLastParameter.ts
@@ -0,0 +1,11 @@
+import { LocationQueryValue } from 'vue-router'
+
+export function getLastNumberParameter(param: LocationQueryValue | LocationQueryValue[], defaultValue: number = 0): number {
+  const lastParam = getLastParameter(param)
+  return lastParam !== undefined ? parseInt(lastParam) : defaultValue
+}
+
+export function getLastParameter(param: LocationQueryValue | LocationQueryValue[]): string | undefined {
+  const paramList = Array.isArray(param) ? param : [param]
+  return paramList[paramList.length - 1] ?? undefined
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,5 +98,5 @@ @@
           }
         }
       ],
-      "next": null
+      "next": "http://localhost:5681/meshes/default/circuit-breakers?offset=1"
     }