From 6a9cf5338e5131396c72e0c9dfc41ebf94de95d3 Mon Sep 17 00:00:00 2001 From: Udo Walter Date: Wed, 27 Mar 2019 15:20:29 +0000 Subject: [log] add filter functionality --- webapp/src/components/GroupModuleClientView.vue | 2 +- webapp/src/components/GroupModuleGroupView.vue | 2 +- webapp/src/components/LogModule.vue | 62 +++++++++++++++++++------ webapp/src/components/LogModuleEntry.vue | 51 ++++++++++++++++++-- 4 files changed, 97 insertions(+), 20 deletions(-) (limited to 'webapp') diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue index 191c626..e0c2f8d 100644 --- a/webapp/src/components/GroupModuleClientView.vue +++ b/webapp/src/components/GroupModuleClientView.vue @@ -187,7 +187,7 @@ export default { ] }, firstGroups () { - return this.client.groups.slice(0, 5) + return this.client.groups ? this.client.groups.slice(0, 5) : [] } }, watch: { diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue index 33145a3..df2dec6 100644 --- a/webapp/src/components/GroupModuleGroupView.vue +++ b/webapp/src/components/GroupModuleGroupView.vue @@ -218,7 +218,7 @@ export default { ] }, firstParents () { - return this.group.parents.slice(0, 5) + return this.group.parents ? this.group.parents.slice(0, 5) : [] } }, watch: { diff --git a/webapp/src/components/LogModule.vue b/webapp/src/components/LogModule.vue index 173b70e..6208934 100644 --- a/webapp/src/components/LogModule.vue +++ b/webapp/src/components/LogModule.vue @@ -52,18 +52,18 @@ - + - +
{{ $t('from') }} @@ -139,7 +139,18 @@
- + + + + - + - + filter_list{{ $t('filter') }}
@@ -218,7 +229,9 @@ export default { categoryFilter: [], groupFilter: [], groupRecursive: false, - clientFilter: [] + clientFilter: [], + userFilter: [], + userList: [] } }, computed: { @@ -229,6 +242,11 @@ export default { if (this.$vuetify.breakpoint.mdOnly || this.$vuetify.breakpoint.xsOnly) return 1 return 2 }, + categorySelectColumnCount () { + if (this.$vuetify.breakpoint.xsOnly) return 1 + else if (this.$vuetify.breakpoint.lgAndUp) return 3 + return 2 + }, pickerWidth () { return this.$vuetify.breakpoint.xsOnly ? 250 : undefined }, @@ -240,10 +258,10 @@ export default { }, watch: { toDate (value) { - if (value) this.toTime = this.formatDate(new Date(), { date: false, seconds: false }) + if (!this.toTime && value) this.toTime = this.formatDate(new Date(), { date: false, seconds: false }) }, toTime (value) { - if (value) this.toDate = this.formatDate(new Date(), { time: false }) + if (!this.toDate && value) this.toDate = this.formatDate(new Date(), { time: false }) } }, methods: { @@ -268,9 +286,17 @@ export default { }, loadLog () { this.loading = true - this.$http.get('/api/log').then(response => { + const queries = [] + if (this.fromDate && this.fromTime) queries.push('from=' + new Date(this.fromDate + ' ' + this.fromTime).getTime() / 1000) + if (this.toDate && this.toTime) queries.push('to=' + new Date(this.toDate + ' ' + this.toTime).getTime() / 1000) + if (this.categoryFilter.length) queries.push('categories=' + this.categoryFilter.map(x => x.name).join(',')) + if (this.clientFilter.length) queries.push('clients=' + this.clientFilter.map(x => x.id).join(',')) + if (this.groupFilter.length) queries.push('groups=' + this.groupFilter.map(x => x.id).join(',')) + if (this.userFilter.length) queries.push('users=' + this.userFilter.map(x => x.id).join(',')) + const url = '/api/log' + (queries.length ? '?' + queries.join('&') : '') + this.$http.get(url).then(response => { response.data.forEach(item => { - item.timestamp = new Date(item.timestamp * 1000).toISOString().split('.')[0].replace('T', ' ') + item.timestamp = this.formatDate(new Date(item.timestamp * 1000)) item.searchString = '' // Only show first line of the description if (item.description) { @@ -304,6 +330,12 @@ export default { this.fromTime = this.formatDate(this.defaultStartDate, { date: false, seconds: false }) this.loadLog() this.$store.dispatch('groups/loadLists') + this.$http.get('/api/users').then(response => { + this.userList = Object.freeze(response.data.map(x => ({ + id: x.id, + name: x.username + (x.name ? ' (' + x.name + ')' : '') + }))) + }) } } diff --git a/webapp/src/components/LogModuleEntry.vue b/webapp/src/components/LogModuleEntry.vue index a8de4a8..2e9ce67 100644 --- a/webapp/src/components/LogModuleEntry.vue +++ b/webapp/src/components/LogModuleEntry.vue @@ -1,8 +1,24 @@ { "en": { + "id": "ID", + "name": "Name", + "description": "Description", + "ip": "IP", + "mac": "MAC", + "uuid": "UUID", + "username": "Username", + "deleted": "Deleted" }, "de": { + "id": "ID", + "name": "Name", + "description": "Beschreibung", + "ip": "IP", + "mac": "MAC", + "uuid": "UUID", + "username": "Benutzername", + "deleted": "Gelöscht" } } @@ -17,7 +33,17 @@ @@ -30,7 +56,13 @@ @@ -43,7 +75,13 @@ @@ -119,6 +157,13 @@ export default { text-overflow: ellipsis; text-transform: none; } + +.snapshot-key { + vertical-align: top; + font-weight: bold; + text-align: right; + padding-right: 16px; +}