feat: use server-side filtering where possible

src/components/ApiKeyList.vue

@@ -368,7 +368,7 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    status: ['active', 'expired'],
+    // status: ['active', 'expired'],
     search: '',
     dialog: false,
     headers: [
@@ -409,9 +409,19 @@ export default {
     },
     keys() {
       return this.$store.state.keys.keys
-        .filter(a => !this.status || this.status.includes(this.statusFromExpireTime(a)))
+        .filter(a => this.status.length > 0)
         .filter(a => this.search ? (Object.keys(a).some(k => a[k] && a[k].toString().includes(this.search))) : true)
     },
+    status: {
+      get() {
+        return this.$store.getters['keys/filterStatus']
+      },
+      set(value) {
+        this.$store.dispatch('keys/setFilter', {
+          status: value
+        })
+      }
+    },
     pagination: {
       get() {
         return this.$store.getters['keys/pagination']
@@ -452,6 +462,9 @@ export default {
     refresh(val) {
       val || this.getApiKeys()
     },
+    status(val) {
+      this.getApiKeys()
+    },
     pagination: {
       handler () {
         this.getApiKeys()

src/components/BlackoutList.vue

@@ -447,7 +447,7 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    status: ['active', 'pending', 'expired'],
+    // status: ['active', 'pending', 'expired'],
     search: '',
     dialog: false,
     headers: [
@@ -509,7 +509,7 @@ export default {
   computed: {
     blackouts() {
       return this.$store.state.blackouts.blackouts
-        .filter(b => !this.status || this.status.includes(b.status))
+        .filter(b => this.status.length > 0)
         .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)
@@ -524,6 +524,16 @@ export default {
           })
         })
     },
+    status: {
+      get() {
+        return this.$store.getters['blackouts/filterStatus']
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setFilter', {
+          status: value
+        })
+      }
+    },
     pagination: {
       get() {
         return this.$store.getters['blackouts/pagination']
@@ -581,6 +591,9 @@ export default {
       this.getServices()
       this.getTags()
     },
+    status(val) {
+      this.getBlackouts()
+    },
     pagination: {
       handler () {
         this.getBlackouts()

src/components/HeartbeatList.vue

@@ -163,7 +163,7 @@ export default {
     DateTime
   },
   data: () => ({
-    status: ['ok', 'slow', 'expired'],
+    // status: ['ok', 'slow', 'expired'],
     search: '',
     headers: [
       { text: i18n.t('Origin'), value: 'origin' },
@@ -182,9 +182,19 @@ export default {
   computed: {
     heartbeats() {
       return this.$store.state.heartbeats.heartbeats
-        .filter(hb => !this.status || this.status.includes(hb.status))
+        // .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)
     },
+    status: {
+      get() {
+        return this.$store.getters['heartbeats/filterStatus']
+      },
+      set(value) {
+        this.$store.dispatch('heartbeats/setFilter', {
+          status: value
+        })
+      }
+    },
     pagination: {
       get() {
         return this.$store.getters['heartbeats/pagination']
@@ -207,6 +217,9 @@ export default {
     refresh(val) {
       val || this.getHeartbeats()
     },
+    status(val) {
+      this.getHeartbeats()
+    },
     pagination: {
       handler () {
         this.getHeartbeats()

src/components/PermList.vue

@@ -239,7 +239,7 @@ export default {
   data: () => ({
     systemRoles: ['admin', 'user', 'guest'],
     search: '',
-    wantScopes: [],
+    // wantScopes: [],
     dialog: false,
     headers: [
       { text: i18n.t('Role'), value: 'match' },
@@ -262,12 +262,21 @@ 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
     },
+    wantScopes: {
+      get() {
+        return this.$store.getters['perms/filterScopes']
+      },
+      set(value) {
+        this.$store.dispatch('perms/setFilter', {
+          scopes: value
+        })
+      }
+    },
     pagination: {
       get() {
         return this.$store.getters['perms/pagination']
@@ -299,6 +308,9 @@ export default {
     refresh(val) {
       val || this.getPerms()
     },
+    wantScopes(val) {
+      this.getPerms()
+    },
     pagination: {
       handler () {
         this.getPerms()

src/components/UserList.vue

@@ -439,9 +439,9 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    status: ['active', 'inactive'],
+    // status: ['active', 'inactive'],
     search: '',
-    wantRoles: [],
+    // wantRoles: [],
     dialog: false,
     headers: [
       { text: i18n.t('Name'), value: 'name' },
@@ -493,10 +493,29 @@ export default {
     },
     users() {
       return this.$store.state.users.users
-        .filter(u => !this.status || this.status.includes(u.status))
-        .filter(u => this.wantRoles.length > 0 ? u.roles.some(x => this.wantRoles.includes(x)) : true)
+        .filter(u => this.status.length > 0)
         .filter(u => this.search ? (Object.keys(u).some(k => u[k] && u[k].toString().includes(this.search))) : true)
     },
+    status: {
+      get() {
+        return this.$store.getters['users/filterStatus']
+      },
+      set(value) {
+        this.$store.dispatch('users/setFilter', {
+          status: value
+        })
+      }
+    },
+    wantRoles: {
+      get() {
+        return this.$store.getters['users/filterRoles']
+      },
+      set(value) {
+        this.$store.dispatch('users/setFilter', {
+          roles: value
+        })
+      }
+    },
     pagination: {
       get() {
         return this.$store.getters['users/pagination']
@@ -536,6 +555,12 @@ export default {
     refresh(val) {
       val || this.getUsers()
     },
+    status(val) {
+      this.getUsers()
+    },
+    wantRoles(val) {
+      this.getUsers()
+    },
     pagination: {
       handler () {
         this.getUsers()

src/store/modules/blackouts.store.ts

@@ -7,6 +7,11 @@ const state = {
 
   blackouts: [],
 
+  // filter and pagination
+  filter: {
+    status: ['active', 'pending', 'expired'],
+  },
+
   pagination: {
     page: 1,
     rowsPerPage: 20,
@@ -29,6 +34,9 @@ const mutations = {
   RESET_LOADING(state) {
     state.isLoading = false
   },
+  SET_FILTER(state, filter): any {
+    state.filter = Object.assign({}, state.filter, filter)
+  },
   SET_PAGINATION(state, pagination) {
     state.pagination = Object.assign({}, state.pagination, pagination)
   }
@@ -40,6 +48,8 @@ const actions = {
 
     let params = new URLSearchParams(state.query)
 
+    state.filter.status && state.filter.status.map(st => params.append('status', st))
+
     // add server-side paging
     params.append('page', state.pagination.page)
     params.append('page-size', state.pagination.rowsPerPage)
@@ -69,12 +79,19 @@ const actions = {
         dispatch('getBlackouts')
       })
   },
+
+  setFilter({ commit }, filter) {
+    commit('SET_FILTER', filter)
+  },
   setPagination({ commit }, pagination) {
     commit('SET_PAGINATION', pagination)
   }
 }
 
 const getters = {
+  filterStatus: state => {
+    return state.filter.status
+  },
   pagination: state => {
     return state.pagination
   }

src/store/modules/heartbeats.store.ts

@@ -7,6 +7,11 @@ const state = {
 
   heartbeats: [],
 
+  // filter and pagination
+  filter: {
+    status: ['ok', 'slow', 'expired'],
+  },
+
   pagination: {
     page: 1,
     rowsPerPage: 20,
@@ -29,6 +34,9 @@ const mutations = {
   RESET_LOADING(state) {
     state.isLoading = false
   },
+  SET_FILTER(state, filter): any {
+    state.filter = Object.assign({}, state.filter, filter)
+  },
   SET_PAGINATION(state, pagination) {
     state.pagination = Object.assign({}, state.pagination, pagination)
   }
@@ -40,6 +48,8 @@ const actions = {
 
     let params = new URLSearchParams(state.query)
 
+    state.filter.status && state.filter.status.map(st => params.append('status', st))
+
     // add server-side paging
     params.append('page', state.pagination.page)
     params.append('page-size', state.pagination.rowsPerPage)
@@ -57,12 +67,19 @@ const actions = {
         dispatch('getHeartbeats')
       })
   },
+
+  setFilter({ commit }, filter) {
+    commit('SET_FILTER', filter)
+  },
   setPagination({ commit }, pagination) {
     commit('SET_PAGINATION', pagination)
   }
 }
 
 const getters = {
+  filterStatus: state => {
+    return state.filter.status
+  },
   pagination: state => {
     return state.pagination
   }

src/store/modules/keys.store.ts

@@ -7,6 +7,11 @@ const state = {
 
   keys: [],
 
+  // filter and pagination
+  filter: {
+    status: ['active', 'expired'],
+  },
+
   pagination: {
     page: 1,
     rowsPerPage: 20,
@@ -33,6 +38,9 @@ const mutations = {
   RESET_LOADING(state) {
     state.isLoading = false
   },
+  SET_FILTER(state, filter): any {
+    state.filter = Object.assign({}, state.filter, filter)
+  },
   SET_PAGINATION(state, pagination) {
     state.pagination = Object.assign({}, state.pagination, pagination)
   }
@@ -44,6 +52,8 @@ const actions = {
 
     let params = new URLSearchParams(state.query)
 
+    state.filter.status && state.filter.status.map(st => params.append('status', st))
+
     // add server-side paging
     params.append('page', state.pagination.page)
     params.append('page-size', state.pagination.rowsPerPage)
@@ -73,12 +83,19 @@ const actions = {
         dispatch('getKeys')
       })
   },
+
+  setFilter({ commit }, filter) {
+    commit('SET_FILTER', filter)
+  },
   setPagination({ commit }, pagination) {
     commit('SET_PAGINATION', pagination)
   }
 }
 
 const getters = {
+  filterStatus: state => {
+    return state.filter.status
+  },
   pagination: state => {
     return state.pagination
   }