Revert "feat: server-side pagination and sort for all lists (#443)" (#…

…456)

This reverts commit e2bc3aa.

src/components/ApiKeyList.vue

@@ -196,10 +196,10 @@
       <v-data-table
         :headers="computedHeaders"
         :items="keys"
+        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
-        :total-items="pagination.totalItems"
-        :rows-per-page-items="pagination.rowsPerPageItems"
         class="px-2"
+        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -368,6 +368,13 @@ 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,
@@ -408,17 +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(a => !this.status || this.status.includes(this.statusFromExpireTime(a)))
-        .filter(a => this.search ? (Object.keys(a).some(k => a[k] && a[k].toString().includes(this.search))) : true)
-    },
-    pagination: {
-      get() {
-        return this.$store.getters['keys/pagination']
-      },
-      set(value) {
-        this.$store.dispatch('keys/setPagination', value)
-      }
+      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)
@@ -451,12 +448,6 @@ export default {
     },
     refresh(val) {
       val || this.getApiKeys()
-    },
-    pagination: {
-      handler () {
-        this.getApiKeys()
-      },
-      deep: true
     }
   },
   created() {

src/components/BlackoutList.vue

@@ -270,10 +270,10 @@
       <v-data-table
         :headers="computedHeaders"
         :items="blackouts"
+        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
-        :total-items="pagination.totalItems"
-        :rows-per-page-items="pagination.rowsPerPageItems"
         class="px-2"
+        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -447,6 +447,14 @@ 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,
@@ -510,7 +518,6 @@ export default {
     blackouts() {
       return this.$store.state.blackouts.blackouts
         .filter(b => !this.status || this.status.includes(b.status))
-        .filter(b => this.search ? (Object.keys(b).some(k => b[k] && b[k].toString().includes(this.search))) : true)
         .map(b => {
           let s = moment(b.startTime)
           let e = moment(b.endTime)
@@ -524,14 +531,6 @@ export default {
           })
         })
     },
-    pagination: {
-      get() {
-        return this.$store.getters['blackouts/pagination']
-      },
-      set(value) {
-        this.$store.dispatch('blackouts/setPagination', value)
-      }
-    },
     computedHeaders() {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
     },
@@ -580,12 +579,6 @@ export default {
       this.getEnvironments()
       this.getServices()
       this.getTags()
-    },
-    pagination: {
-      handler () {
-        this.getBlackouts()
-      },
-      deep: true
     }
   },
   created() {

src/components/CustomerList.vue

@@ -86,10 +86,10 @@
       <v-data-table
         :headers="headers"
         :items="customers"
+        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
-        :total-items="pagination.totalItems"
-        :rows-per-page-items="pagination.rowsPerPageItems"
         class="px-2"
+        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -170,6 +170,14 @@ export default {
     ListButtonAdd
   },
   data: () => ({
+    descending: true,
+    page: 1,
+    rowsPerPageItems: [10, 20, 30, 40, 50],
+    pagination: {
+      sortBy: 'match',
+      rowsPerPage: 20
+    },
+    // totalItems: number,
     search: '',
     dialog: false,
     headers: [
@@ -193,15 +201,6 @@ export default {
   computed: {
     customers() {
       return this.$store.state.customers.customers
-        .filter(c => this.search ? (Object.keys(c).some(k => c[k] && c[k].toString().includes(this.search))) : true)
-    },
-    pagination: {
-      get() {
-        return this.$store.getters['customers/pagination']
-      },
-      set(value) {
-        this.$store.dispatch('customers/setPagination', value)
-      }
     },
     isLoading() {
       return this.$store.state.customers.isLoading
@@ -219,12 +218,6 @@ export default {
     },
     refresh(val) {
       val || this.getCustomers()
-    },
-    pagination: {
-      handler () {
-        this.getCustomers()
-      },
-      deep: true
     }
   },
   created() {

src/components/GroupList.vue

@@ -191,10 +191,10 @@
       <v-data-table
         :headers="headers"
         :items="groups"
+        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
-        :total-items="pagination.totalItems"
-        :rows-per-page-items="pagination.rowsPerPageItems"
         class="px-2"
+        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -289,6 +289,14 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
+    descending: true,
+    page: 1,
+    rowsPerPageItems: [10, 20, 30, 40, 50],
+    pagination: {
+      sortBy: 'name',
+      rowsPerPage: 20
+    },
+    // totalItems: number,
     search: '',
     dialog: false,
     headers: [
@@ -322,15 +330,6 @@ export default {
     },
     groups() {
       return this.$store.state.groups.groups
-        .filter(g => this.search ? (Object.keys(g).some(k => g[k] && g[k].toString().includes(this.search))) : true)
-    },
-    pagination: {
-      get() {
-        return this.$store.getters['groups/pagination']
-      },
-      set(value) {
-        this.$store.dispatch('groups/setPagination', value)
-      }
     },
     groupUsers() {
       return this.$store.state.groups.users
@@ -354,12 +353,6 @@ export default {
     },
     refresh(val) {
       val || this.getGroups()
-    },
-    pagination: {
-      handler () {
-        this.getGroups()
-      },
-      deep: true
     }
   },
   created() {

src/components/HeartbeatList.vue

@@ -55,10 +55,10 @@
     <v-data-table
       :headers="computedHeaders"
       :items="heartbeats"
+      :rows-per-page-items="rowsPerPageItems"
       :pagination.sync="pagination"
-      :total-items="pagination.totalItems"
-      :rows-per-page-items="pagination.rowsPerPageItems"
       class="px-2"
+      :search="search"
       :loading="isLoading"
       must-sort
       sort-icon="arrow_drop_down"
@@ -163,6 +163,15 @@ 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: [
@@ -181,17 +190,7 @@ export default {
   }),
   computed: {
     heartbeats() {
-      return this.$store.state.heartbeats.heartbeats
-        .filter(hb => !this.status || this.status.includes(hb.status))
-        .filter(hb => this.search ? (Object.keys(hb).some(k => hb[k] && hb[k].toString().includes(this.search))) : true)
-    },
-    pagination: {
-      get() {
-        return this.$store.getters['heartbeats/pagination']
-      },
-      set(value) {
-        this.$store.dispatch('heartbeats/setPagination', value)
-      }
+      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)
@@ -206,12 +205,6 @@ export default {
   watch: {
     refresh(val) {
       val || this.getHeartbeats()
-    },
-    pagination: {
-      handler () {
-        this.getHeartbeats()
-      },
-      deep: true
     }
   },
   created() {

src/components/PermList.vue

@@ -131,10 +131,11 @@
       <v-data-table
         :headers="headers"
         :items="perms"
+        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
-        :total-items="pagination.totalItems"
-        :rows-per-page-items="pagination.rowsPerPageItems"
         class="px-2"
+        :search="search"
+        :custom-filter="customFilter"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -237,8 +238,16 @@ export default {
     ListButtonAdd
   },
   data: () => ({
-    systemRoles: ['admin', 'user', 'guest'],
+    descending: true,
+    page: 1,
+    rowsPerPageItems: [10, 20, 30, 40, 50],
+    pagination: {
+      sortBy: 'match',
+      rowsPerPage: 20
+    },
+    // totalItems: number,
     search: '',
+    systemRoles: ['admin', 'user', 'guest'],
     wantScopes: [],
     dialog: false,
     headers: [
@@ -262,20 +271,10 @@ export default {
   computed: {
     perms() {
       return this.$store.state.perms.permissions
-        .filter(p => this.wantScopes.length > 0 ? p.scopes.some(x => this.wantScopes.includes(x)) : true)
-        .filter(p => this.search ? (Object.keys(p).some(k => p[k] && p[k].toString().includes(this.search))) : true)
     },
     scopes() {
       return this.$store.state.perms.scopes
     },
-    pagination: {
-      get() {
-        return this.$store.getters['perms/pagination']
-      },
-      set(value) {
-        this.$store.dispatch('perms/setPagination', value)
-      }
-    },
     allowedScopes() {
       return utils.getAllowedScopes(
         this.$store.getters['auth/scopes'],
@@ -298,12 +297,6 @@ export default {
     },
     refresh(val) {
       val || this.getPerms()
-    },
-    pagination: {
-      handler () {
-        this.getPerms()
-      },
-      deep: true
     }
   },
   created() {
@@ -317,6 +310,20 @@ export default {
     getScopes() {
       this.$store.dispatch('perms/getScopes')
     },
+    filterByScopes(scopes) {
+      this.wantScopes = scopes
+    },
+    customFilter(items, search, filter) {
+      items = items.filter(item =>
+        this.wantScopes.length > 0 ? item.scopes.some(x => this.wantScopes.includes(x)) : item
+      )
+
+      if (search.trim() === '') return items
+
+      return items.filter(i => (
+        Object.keys(i).some(j => filter(i[j], search))
+      ))
+    },
     editItem(item) {
       this.editedId = item.id
       this.editedItem = Object.assign({}, item)