From 304f6a94dc1c291ffd26eafe01de85215edd7a7a Mon Sep 17 00:00:00 2001 From: Nick Satterly Date: Wed, 10 Apr 2024 16:21:19 +0200 Subject: [PATCH] Revert "feat: Implement server-side pagination and filtering (#568)" This reverts commit d9b1155484f776e51aa431dd600ca48bf0e07c3b. --- src/components/ApiKeyList.vue | 31 +++++--------- src/components/BlackoutList.vue | 39 ++++++------------ src/components/HeartbeatList.vue | 33 ++++++--------- src/components/PermList.vue | 22 +++++----- src/components/UserList.vue | 45 ++++++++------------ src/store/modules/blackouts.store.ts | 59 +++------------------------ src/store/modules/heartbeats.store.ts | 42 ++----------------- src/store/modules/keys.store.ts | 47 +++------------------ src/store/modules/perms.store.ts | 33 +++------------ src/store/modules/users.store.ts | 52 +++-------------------- 10 files changed, 91 insertions(+), 312 deletions(-) diff --git a/src/components/ApiKeyList.vue b/src/components/ApiKeyList.vue index 0d7ef67b..fd8ca966 100644 --- a/src/components/ApiKeyList.vue +++ b/src/components/ApiKeyList.vue @@ -196,10 +196,10 @@ ({ + 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: { diff --git a/src/components/BlackoutList.vue b/src/components/BlackoutList.vue index 4874ea3e..73656c8c 100644 --- a/src/components/BlackoutList.vue +++ b/src/components/BlackoutList.vue @@ -279,10 +279,10 @@ ({ + 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: { diff --git a/src/components/HeartbeatList.vue b/src/components/HeartbeatList.vue index 91e77236..09e45858 100644 --- a/src/components/HeartbeatList.vue +++ b/src/components/HeartbeatList.vue @@ -55,10 +55,10 @@ ({ + 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: { diff --git a/src/components/PermList.vue b/src/components/PermList.vue index dc10da47..731238be 100644 --- a/src/components/PermList.vue +++ b/src/components/PermList.vue @@ -131,10 +131,11 @@ ({ + 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: { diff --git a/src/components/UserList.vue b/src/components/UserList.vue index 7bd936c9..8104fe83 100644 --- a/src/components/UserList.vue +++ b/src/components/UserList.vue @@ -262,7 +262,7 @@ class="mr-3 pt-3" > ({ + 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 => ( diff --git a/src/store/modules/blackouts.store.ts b/src/store/modules/blackouts.store.ts index 0581e9d0..6496024c 100644 --- a/src/store/modules/blackouts.store.ts +++ b/src/store/modules/blackouts.store.ts @@ -5,41 +5,16 @@ const namespaced = true const state = { isLoading: false, - blackouts: [], - - query: '', - - filter: { - status: ['active', 'pending', 'expired'] - }, - - pagination: { - page: 1, - rowsPerPage: 20, - sortBy: 'startTime', - descending: true, - rowsPerPageItems: [5, 10, 20, 50, 100, 200] - } + blackouts: [] } const mutations = { SET_LOADING(state) { state.isLoading = true }, - SET_BLACKOUTS(state, [blackouts, total, pageSize]) { + SET_BLACKOUTS(state, blackouts) { state.isLoading = false state.blackouts = blackouts - state.pagination.totalItems = total - state.pagination.rowsPerPage = pageSize - }, - SET_PAGINATION(state, pagination) { - state.pagination = Object.assign({}, state.pagination, pagination) - }, - SET_QUERY(state, query) { - state.query = query - }, - SET_FILTER(state, filter) { - state.filter = Object.assign({}, state.filter, filter) }, RESET_LOADING(state) { state.isLoading = false @@ -47,22 +22,10 @@ const mutations = { } const actions = { - getBlackouts({commit, state}) { + getBlackouts({commit}) { commit('SET_LOADING') - - let params = new URLSearchParams() - - params.append('q', state.query) - - state.filter.status.map(st => params.append('status', st)) - - params.append('page', state.pagination.page) - params.append('page-size', state.pagination.rowsPerPage) - - params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy) - - return BlackoutsApi.getBlackouts(params) - .then(({blackouts, total, pageSize}) => commit('SET_BLACKOUTS', [blackouts, total, pageSize])) + return BlackoutsApi.getBlackouts({}) + .then(({blackouts}) => commit('SET_BLACKOUTS', blackouts)) .catch(() => commit('RESET_LOADING')) }, createBlackout({dispatch, commit}, blackout) { @@ -79,18 +42,6 @@ const actions = { return BlackoutsApi.deleteBlackout(blackoutId).then(response => { dispatch('getBlackouts') }) - }, - setPagination({dispatch, commit}, pagination) { - commit('SET_PAGINATION', pagination) - dispatch('getBlackouts') - }, - setQuery({dispatch, commit}, query) { - commit('SET_QUERY', query) - dispatch('getBlackouts') - }, - setFilterStatus({dispatch, commit}, filter) { - commit('SET_FILTER', filter) - dispatch('getBlackouts') } } diff --git a/src/store/modules/heartbeats.store.ts b/src/store/modules/heartbeats.store.ts index 84106272..e30c90cf 100644 --- a/src/store/modules/heartbeats.store.ts +++ b/src/store/modules/heartbeats.store.ts @@ -5,19 +5,7 @@ const namespaced = true const state = { isLoading: false, - heartbeats: [], - - filter: { - status: ['ok', 'slow', 'expired'] - }, - - pagination: { - page: 1, - rowsPerPage: 20, - sortBy: 'receiveTime', - descending: true, - rowsPerPageItems: [5, 10, 20, 50, 100, 200] - } + heartbeats: [] } const mutations = { @@ -28,31 +16,15 @@ const mutations = { state.isLoading = false state.heartbeats = heartbeats }, - SET_PAGINATION(state, pagination) { - state.pagination = Object.assign({}, state.pagination, pagination) - }, - SET_FILTER(state, filter) { - state.filter = Object.assign({}, state.filter, filter) - }, RESET_LOADING(state) { state.isLoading = false } } const actions = { - getHeartbeats({commit, state}) { + getHeartbeats({commit}) { commit('SET_LOADING') - - let params = new URLSearchParams() - - state.filter.status.map(st => params.append('status', st)) - - params.append('page', state.pagination.page) - params.append('page-size', state.pagination.rowsPerPage) - - params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy) - - return HeartbeatsApi.getHeartbeats(params) + return HeartbeatsApi.getHeartbeats({}) .then(({heartbeats}) => commit('SET_HEARTBEATS', heartbeats)) .catch(() => commit('RESET_LOADING')) }, @@ -60,14 +32,6 @@ const actions = { return HeartbeatsApi.deleteHeartbeat(heartbeatId).then(response => { dispatch('getHeartbeats') }) - }, - setPagination({dispatch, commit}, pagination) { - commit('SET_PAGINATION', pagination) - dispatch('getHeartbeats') - }, - setFilter({dispatch, commit}, filter) { - commit('SET_FILTER', filter) - dispatch('getHeartbeats') } } diff --git a/src/store/modules/keys.store.ts b/src/store/modules/keys.store.ts index af0e5204..058ea3ab 100644 --- a/src/store/modules/keys.store.ts +++ b/src/store/modules/keys.store.ts @@ -5,19 +5,7 @@ const namespaced = true const state = { isLoading: false, - keys: [], - - filter: { - status: ['active', 'expired'] - }, - - pagination: { - page: 1, - rowsPerPage: 20, - sortBy: 'lastUsedTime', - descending: true, - rowsPerPageItems: [5, 10, 20, 50, 100, 200] - } + keys: [] } const mutations = { @@ -28,17 +16,9 @@ const mutations = { state.isLoading = false state.users = users }, - SET_KEYS(state, [keys, total, pageSize]) { + SET_KEYS(state, keys) { state.isLoading = false state.keys = keys - state.pagination.totalItems = total - state.pagination.rowsPerPage = pageSize - }, - SET_PAGINATION(state, pagination) { - state.pagination = Object.assign({}, state.pagination, pagination) - }, - SET_FILTER(state, filter) { - state.filter = Object.assign({}, state.filter, filter) }, RESET_LOADING(state) { state.isLoading = false @@ -46,19 +26,10 @@ const mutations = { } const actions = { - getKeys({commit, state}) { + getKeys({commit, dispatch}) { commit('SET_LOADING') - let params = new URLSearchParams() - - state.filter.status.map(st => params.append('status', st)) - - params.append('page', state.pagination.page) - params.append('page-size', state.pagination.rowsPerPage) - - params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy) - - return KeysApi.getKeys(params) - .then(({keys, total, pageSize}) => commit('SET_KEYS', [keys, total, pageSize])) + return KeysApi.getKeys({}) + .then(({keys}) => commit('SET_KEYS', keys)) .catch(() => commit('RESET_LOADING')) }, createKey({dispatch, commit}, key) { @@ -75,14 +46,6 @@ const actions = { return KeysApi.deleteKey(key).then(response => { dispatch('getKeys') }) - }, - setPagination({dispatch, commit}, pagination) { - commit('SET_PAGINATION', pagination) - dispatch('getKeys') - }, - setFilter({dispatch, commit}, filter) { - commit('SET_FILTER', filter) - dispatch('getKeys') } } diff --git a/src/store/modules/perms.store.ts b/src/store/modules/perms.store.ts index 98e88697..f87735d0 100644 --- a/src/store/modules/perms.store.ts +++ b/src/store/modules/perms.store.ts @@ -6,26 +6,16 @@ const state = { isLoading: false, permissions: [], - scopes: [], - - pagination: { - page: 1, - rowsPerPage: 20, - sortBy: 'match', - descending: true, - rowsPerPageItems: [5, 10, 20, 50, 100, 200] - } + scopes: [] } const mutations = { SET_LOADING(state) { state.isLoading = true }, - SET_PERMS(state, [permissions, total, pageSize]) { + SET_PERMS(state, permissions) { state.isLoading = false state.permissions = permissions - state.pagination.totalItems = total - state.pagination.rowsPerPage = pageSize }, SET_SCOPES(state, scopes) { state.isLoading = false @@ -37,18 +27,10 @@ const mutations = { } const actions = { - getPerms({commit, state}) { + getPerms({commit}) { commit('SET_LOADING') - - let params = new URLSearchParams() - - params.append('page', state.pagination.page) - params.append('page-size', state.pagination.rowsPerPage) - - params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy) - - return PermsApi.getPerms(params) - .then(({permissions, total, pageSize}) => commit('SET_PERMS', [permissions, total, pageSize])) + return PermsApi.getPerms({}) + .then(({permissions}) => commit('SET_PERMS', permissions)) .catch(() => commit('RESET_LOADING')) }, createPerm({dispatch, commit}, perm) { @@ -66,13 +48,10 @@ const actions = { dispatch('getPerms') }) }, + getScopes({commit}) { commit('SET_LOADING') return PermsApi.getScopes().then(({scopes}) => commit('SET_SCOPES', scopes)) - }, - setPagination({dispatch, commit}, pagination) { - commit('SET_PAGINATION', pagination) - dispatch('getPerms') } } diff --git a/src/store/modules/users.store.ts b/src/store/modules/users.store.ts index d31a4708..be9e606a 100644 --- a/src/store/modules/users.store.ts +++ b/src/store/modules/users.store.ts @@ -8,41 +8,20 @@ const state = { domains: [], users: [], - groups: [], - - filter: { - status: ['active', 'inactive'], - roles: [] - }, - - pagination: { - page: 1, - rowsPerPage: 20, - sortBy: 'name', - descending: true, - rowsPerPageItems: [5, 10, 20, 50, 100, 200] - } + groups: [] } const mutations = { SET_LOADING(state) { state.isLoading = true }, - SET_USERS(state, [users, total, pageSize]) { + SET_USERS(state, users) { state.isLoading = false state.users = users - state.pagination.totalItems = total - state.pagination.rowsPerPage = pageSize }, SET_USER_GROUPS(state, groups) { state.groups = groups }, - SET_PAGINATION(state, pagination) { - state.pagination = Object.assign({}, state.pagination, pagination) - }, - SET_FILTER(state, filter) { - state.filter = Object.assign({}, state.filter, filter) - }, RESET_USER_GROUPS(state) { state.groups = [] }, @@ -52,21 +31,10 @@ const mutations = { } const actions = { - getUsers({commit, state}) { + getUsers({commit}) { commit('SET_LOADING') - - let params = new URLSearchParams() - - state.filter.status.map(st => params.append('status', st)) - state.filter.roles.map(st => params.append('role', st)) - - params.append('page', state.pagination.page) - params.append('page-size', state.pagination.rowsPerPage) - - params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy) - - return UsersApi.getUsers(params) - .then(({users, total, pageSize}) => commit('SET_USERS', [users, total, pageSize])) + return UsersApi.getUsers({}) + .then(({users}) => commit('SET_USERS', users)) .catch(() => commit('RESET_LOADING')) }, createUser({dispatch, commit}, user) { @@ -107,15 +75,7 @@ const actions = { }, resetUserGroups({commit}) { commit('RESET_USER_GROUPS') - }, - setPagination({dispatch, commit}, pagination) { - commit('SET_PAGINATION', pagination) - dispatch('getUsers') - }, - setFilter({dispatch, commit}, filter) { - commit('SET_FILTER', filter) - dispatch('getUsers') - }, + } } const getters = {