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

This reverts commit d9b1155.

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,6 +368,14 @@ 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: [
@@ -407,8 +415,7 @@ export default {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
     },
     keys() {
-      return this.$store.state.keys.keys
-        .filter(keys => Object.keys(keys).some(k => keys[k] && keys[k].toString().toLowerCase().includes(this.search.toLowerCase())))
+      return this.$store.state.keys.keys.filter(k => !this.status || this.status.includes(this.statusFromExpireTime(k)))
     },
     users() {
       return this.$store.state.users.users.map(u => u.login)
@@ -433,22 +440,6 @@ 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: {

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,6 +481,16 @@ 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' },
@@ -545,6 +555,7 @@ 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)
@@ -602,30 +613,6 @@ 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: {

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,6 +163,16 @@ 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' },
@@ -180,8 +190,7 @@ export default {
   }),
   computed: {
     heartbeats() {
-      return this.$store.state.heartbeats.heartbeats
-        .filter(h => Object.keys(h).some(k => h[k] && h[k].toString().toLowerCase().includes(this.search.toLowerCase())))
+      return this.$store.state.heartbeats.heartbeats.filter(hb => !this.status || this.status.includes(hb.status))
     },
     computedHeaders() {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
@@ -191,22 +200,6 @@ 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: {

src/components/PermList.vue

@@ -131,10 +131,11 @@
       <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"
@@ -237,6 +238,14 @@ 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: [],
@@ -262,7 +271,6 @@ export default {
   computed: {
     perms() {
       return this.$store.state.perms.permissions
-        .filter(this.customFilter)
     },
     scopes() {
       return this.$store.state.perms.scopes
@@ -281,14 +289,6 @@ 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: {

src/components/UserList.vue

@@ -262,7 +262,7 @@
           class="mr-3 pt-3"
         >
           <v-autocomplete
-            v-model="roles"
+            v-model="wantRoles"
             :items="allowedRoles"
             :label="$t('Roles')"
             chips
@@ -296,10 +296,11 @@
       <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"
@@ -439,7 +440,17 @@ 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' },
@@ -514,30 +525,6 @@ 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: {
@@ -571,6 +558,10 @@ 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 => (