feat: Implement server-side pagination and filtering (#568)

* Implement server-side pagination and filtering * Fix blackout searching
alerta · Dec 21, 2023 · d9b1155 · d9b1155
1 parent 8a24d75
commit d9b1155
Show file tree

Hide file tree

Showing 10 changed files with 312 additions and 91 deletions.
diff --git a/src/components/ApiKeyList.vue b/src/components/ApiKeyList.vue
@@ -196,10 +196,10 @@
       <v-data-table
         :headers="computedHeaders"
         :items="keys"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -368,14 +368,6 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'lastUsedTime',
-      rowsPerPage: 20
-    },
-    status: ['active', 'expired'],
     search: '',
     dialog: false,
     headers: [
@@ -415,7 +407,8 @@ export default {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
     },
     keys() {
-      return this.$store.state.keys.keys.filter(k => !this.status || this.status.includes(this.statusFromExpireTime(k)))
+      return this.$store.state.keys.keys
+        .filter(keys => Object.keys(keys).some(k => keys[k] && keys[k].toString().toLowerCase().includes(this.search.toLowerCase())))
     },
     users() {
       return this.$store.state.users.users.map(u => u.login)
@@ -440,6 +433,22 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.keys.pagination
+      },
+      set(value) {
+        this.$store.dispatch('keys/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.keys.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('keys/setFilter', {status: value})
+      }
     }
   },
   watch: {

diff --git a/src/components/BlackoutList.vue b/src/components/BlackoutList.vue
@@ -279,10 +279,10 @@
       <v-data-table
         :headers="computedHeaders"
         :items="blackouts"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -481,16 +481,6 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'startTime',
-      rowsPerPage: 20
-    },
-    // totalItems: number,
-    status: ['active', 'pending', 'expired'],
-    search: '',
     dialog: false,
     headers: [
       { text: '', value: 'icons' },
@@ -555,7 +545,6 @@ export default {
   computed: {
     blackouts() {
       return this.$store.state.blackouts.blackouts
-        .filter(b => !this.status || this.status.includes(b.status))
         .map(b => {
           let s = moment(b.startTime)
           let e = moment(b.endTime)
@@ -613,6 +602,30 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.blackouts.pagination
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.blackouts.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setFilter', {status: value})
+      }
+    },
+    search: {
+      get() {
+        return this.$store.state.blackouts.query
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setQuery', value)
+      }
     }
   },
   watch: {

diff --git a/src/components/HeartbeatList.vue b/src/components/HeartbeatList.vue
@@ -55,10 +55,10 @@
     <v-data-table
       :headers="computedHeaders"
       :items="heartbeats"
-      :rows-per-page-items="rowsPerPageItems"
       :pagination.sync="pagination"
+      :rows-per-page-items="pagination.rowsPerPageItems"
+      :total-items="pagination.totalItems"
       class="px-2"
-      :search="search"
       :loading="isLoading"
       must-sort
       sort-icon="arrow_drop_down"
@@ -163,16 +163,6 @@ export default {
     DateTime
   },
   data: () => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'receiveTime',
-      descending: true,
-      rowsPerPage: 20
-    },
-    // totalItems: number,
-    status: ['ok', 'slow', 'expired'],
     search: '',
     headers: [
       { text: i18n.t('Origin'), value: 'origin' },
@@ -190,7 +180,8 @@ export default {
   }),
   computed: {
     heartbeats() {
-      return this.$store.state.heartbeats.heartbeats.filter(hb => !this.status || this.status.includes(hb.status))
+      return this.$store.state.heartbeats.heartbeats
+        .filter(h => Object.keys(h).some(k => h[k] && h[k].toString().toLowerCase().includes(this.search.toLowerCase())))
     },
     computedHeaders() {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
@@ -200,6 +191,22 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.heartbeats.pagination
+      },
+      set(value) {
+        this.$store.dispatch('heartbeats/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.heartbeats.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('heartbeats/setFilter', {status: value})
+      }
     }
   },
   watch: {

diff --git a/src/components/PermList.vue b/src/components/PermList.vue
@@ -131,11 +131,10 @@
       <v-data-table
         :headers="headers"
         :items="perms"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
-        :custom-filter="customFilter"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -238,14 +237,6 @@ export default {
     ListButtonAdd
   },
   data: () => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'match',
-      rowsPerPage: 20
-    },
-    // totalItems: number,
     search: '',
     systemRoles: ['admin', 'user', 'guest'],
     wantScopes: [],
@@ -271,6 +262,7 @@ export default {
   computed: {
     perms() {
       return this.$store.state.perms.permissions
+        .filter(this.customFilter)
     },
     scopes() {
       return this.$store.state.perms.scopes
@@ -289,6 +281,14 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.perms.pagination
+      },
+      set(value) {
+        this.$store.dispatch('perms/setPagination', value)
+      }
     }
   },
   watch: {

diff --git a/src/components/UserList.vue b/src/components/UserList.vue
@@ -262,7 +262,7 @@
           class="mr-3 pt-3"
         >
           <v-autocomplete
-            v-model="wantRoles"
+            v-model="roles"
             :items="allowedRoles"
             :label="$t('Roles')"
             chips
@@ -296,11 +296,10 @@
       <v-data-table
         :headers="headers"
         :items="users"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
-        :custom-filter="customFilter"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -440,17 +439,7 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'name',
-      rowsPerPage: 20
-    },
-    // totalItems: number,
-    status: ['active', 'inactive'],
     search: '',
-    wantRoles: [],
     dialog: false,
     headers: [
       { text: i18n.t('Name'), value: 'name' },
@@ -525,6 +514,30 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.users.pagination
+      },
+      set(value) {
+        this.$store.dispatch('users/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.users.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('users/setFilter', {status: value})
+      }
+    },
+    roles: {
+      get() {
+        return this.$store.state.users.filter.roles
+      },
+      set(value) {
+        this.$store.dispatch('users/setFilter', {roles: value})
+      }
     }
   },
   watch: {
@@ -558,10 +571,6 @@ export default {
       this.wantRoles = roles
     },
     customFilter(items, search, filter) {
-      items = items.filter(item =>
-        this.wantRoles.length > 0 ? item.roles.some(x => this.wantRoles.includes(x)) : item
-      )
-
       if (search.trim() === '') return items
 
       return items.filter(i => (