summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-30 21:31:06 +0100
committerUdo Walter2019-03-30 21:31:06 +0100
commitc312745354245c5f5c25cb90b5a7a6208953a1f5 (patch)
treecb5cd678fef5a3347a13adf4bddf3e8c39e0fb1e /webapp
parent[webapp/groups] parents of groups and clients are now clickable (diff)
downloadbas-c312745354245c5f5c25cb90b5a7a6208953a1f5.tar.gz
bas-c312745354245c5f5c25cb90b5a7a6208953a1f5.tar.xz
bas-c312745354245c5f5c25cb90b5a7a6208953a1f5.zip
[webapp] fix bug in groups; remember filters in systemlog
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModule.vue22
-rw-r--r--webapp/src/components/LogModule.vue145
-rw-r--r--webapp/src/config/store.js4
-rw-r--r--webapp/src/store/log.js18
4 files changed, 105 insertions, 84 deletions
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index f351a6b..ccd98cf 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -68,14 +68,10 @@ export default {
},
watch: {
activeTab (index) {
- const item = this.tabChain[index]
- if (item === undefined) return
- if (item.tabType !== this.$route.name.replace('GroupModule.', '') || String(item.id) !== this.$route.params.id) {
- this.$router.push({
- name: 'GroupModule.' + item.tabType,
- params: { id: item.id !== undefined ? item.id : 'create', noReload: true }
- })
- }
+ this.updateUrl()
+ },
+ tabChain (value) {
+ this.updateUrl()
}
},
methods: {
@@ -90,6 +86,16 @@ export default {
const action = type === 'group' ? 'loadGroup' : type === 'client' ? 'loadClient' : null
if (action) this.$store.dispatch('groups/' + action, { id, tabIndex: id === 0 ? 0 : 1, switchTab: true })
}
+ },
+ updateUrl () {
+ const item = this.tabChain[this.activeTab]
+ if (item === undefined) return
+ if (item.tabType !== this.$route.name.replace('GroupModule.', '') || String(item.id) !== this.$route.params.id) {
+ this.$router.push({
+ name: 'GroupModule.' + item.tabType,
+ params: { id: item.id !== undefined ? item.id : 'create', noReload: true }
+ })
+ }
}
},
created () {
diff --git a/webapp/src/components/LogModule.vue b/webapp/src/components/LogModule.vue
index dde9975..e30d28e 100644
--- a/webapp/src/components/LogModule.vue
+++ b/webapp/src/components/LogModule.vue
@@ -49,13 +49,14 @@
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
<v-tab-item>
<v-subheader>{{ $t('filter') }}</v-subheader>
- <v-card>
+ <v-card class="non-selectable">
<v-card-text>
<v-layout wrap>
<v-flex xs12 md6 order-xs2 order-md1>
<select-box
class="select-box"
- v-model="categoryFilter"
+ :value="filter.categoryFilter"
+ @input="setFilter('categoryFilter', $event)"
:items="CATEGORIES"
:max-columns="categorySelectColumnCount"
prepend-icon="all_inbox"
@@ -69,10 +70,11 @@
<v-menu left offset-y :close-on-content-click="false" style="display: inline-block">
<template #activator="{ on }">
- <v-btn v-on="on" small class="date-picker-button"><v-icon small class="mr-1">today</v-icon>{{ fromDate }}</v-btn>
+ <v-btn v-on="on" small class="date-picker-button"><v-icon small class="mr-1">today</v-icon>{{ filter.fromDate }}</v-btn>
</template>
<v-date-picker
- v-model="fromDate"
+ :value="filter.fromDate"
+ @input="setFilter('fromDate', $event)"
color="primary"
:locale="locale"
:width="pickerWidth"
@@ -81,10 +83,11 @@
<v-menu left offset-y :close-on-content-click="false" style="display: inline-block">
<template #activator="{ on }">
- <v-btn v-on="on" small class="time-picker-button"><v-icon small class="mr-1">schedule</v-icon>{{ fromTime }}</v-btn>
+ <v-btn v-on="on" small class="time-picker-button"><v-icon small class="mr-1">schedule</v-icon>{{ filter.fromTime }}</v-btn>
</template>
<v-time-picker
- v-model="fromTime"
+ :value="filter.fromTime"
+ @input="setFilter('fromTime', $event)"
color="primary"
:locale="locale"
format="24hr"
@@ -100,14 +103,15 @@
<template #activator="{ on }">
<v-btn v-on="on" small class="date-picker-button">
<v-icon small class="mr-1">today</v-icon>
- {{ toDate ? toDate : $t('today') }}
+ {{ filter.toDate ? filter.toDate : $t('today') }}
</v-btn>
</template>
<template #default>
<div style="position: relative">
<v-btn @click="toNow" dark color="primary" small style="position: absolute; z-index: 1; top: 0; right: 0; min-width: fit-content">{{ $t('now') }}</v-btn>
<v-date-picker
- v-model="toDate"
+ :value="filter.toDate"
+ @input="setFilter('toDate', $event)"
color="primary"
:locale="locale"
:width="pickerWidth"
@@ -119,14 +123,15 @@
<template #activator="{ on }">
<v-btn v-on="on" small class="time-picker-button">
<v-icon small class="mr-1">schedule</v-icon>
- {{ toTime ? toTime : $t('now') }}
+ {{ filter.toTime ? filter.toTime : $t('now') }}
</v-btn>
</template>
<template #default>
<div style="position: relative">
<v-btn @click="toNow" dark color="primary" small style="position: absolute; z-index: 1; top: 0; left: 0; min-width: fit-content">{{ $t('now') }}</v-btn>
<v-time-picker
- v-model="toTime"
+ :value="filter.toTime"
+ @input="setFilter('toTime', $event)"
color="primary"
:locale="locale"
format="24hr"
@@ -142,7 +147,8 @@
<v-flex xs12 md3 order-xs3>
<select-box
class="select-box"
- v-model="clientFilter"
+ :value="filter.clientFilter"
+ @input="setFilter('clientFilter', $event)"
:items="clientList"
:max-columns="selectBoxColumnCount"
prepend-icon="computer"
@@ -153,7 +159,8 @@
<v-flex xs12 md3 order-xs4>
<select-box
class="select-box"
- v-model="groupFilter"
+ :value="filter.groupFilter"
+ @input="setFilter('groupFilter', $event)"
:items="groupList"
:max-columns="selectBoxColumnCount"
prepend-icon="category"
@@ -164,7 +171,8 @@
<v-flex xs12 md3 order-xs4>
<select-box
class="select-box"
- v-model="userFilter"
+ :value="filter.userFilter"
+ @input="setFilter('userFilter', $event)"
:items="userList"
:max-columns="selectBoxColumnCount"
prepend-icon="person"
@@ -180,7 +188,7 @@
</v-card>
<v-subheader>{{ $t('log') }}</v-subheader>
<v-card>
- <data-table :headers="headers" :items="log" min-width="900px" no-select no-sort :row-count="-1">
+ <data-table :loading="loading" :headers="headers" :items="log" min-width="900px" no-select no-sort :row-count="-1">
<template #description="{ item }">
<log-module-entry :item="item"></log-module-entry>
</template>
@@ -220,21 +228,14 @@ export default {
{ key: 'description', searchKey: 'searchString', text: this.$t('description') }
],
loading: false,
- fromDate: null,
- fromTime: null,
- toDate: null,
- toTime: null,
toDateMenu: false,
toTimeMenu: false,
- categoryFilter: [],
- groupFilter: [],
groupRecursive: false,
- clientFilter: [],
- userFilter: [],
userList: []
}
},
computed: {
+ ...mapState('log', ['filter']),
...mapState('groups', ['groupList', 'clientList']),
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
locale () { return this.$store.state.settings.locale },
@@ -249,22 +250,14 @@ export default {
},
pickerWidth () {
return this.$vuetify.breakpoint.xsOnly ? 250 : undefined
- },
- defaultStartDate () {
- const date = new Date()
- date.setDate(date.getDate() - 7)
- return date
- }
- },
- watch: {
- toDate (value) {
- if (!this.toTime && value) this.toTime = this.formatDate(new Date(), { date: false, seconds: false })
- },
- toTime (value) {
- if (!this.toDate && value) this.toDate = this.formatDate(new Date(), { time: false })
}
},
methods: {
+ setFilter (filter, value) {
+ if (filter === 'toDate' && !this.filter.toTime) this.$store.commit('log/setFilter', { filter: 'toTime', value: this.formatDate(new Date(), { date: false, seconds: false }) })
+ if (filter === 'toTime' && !this.filter.toDate) this.$store.commit('log/setFilter', { filter: 'toDate', value: this.formatDate(new Date(), { time: false }) })
+ this.$store.commit('log/setFilter', { filter, value })
+ },
formatDate (date, options = {}) {
var result = ''
const pad = x => x < 10 ? '0' + x : x
@@ -279,55 +272,57 @@ export default {
return result
},
toNow () {
- this.toDate = null
- this.toTime = null
+ this.$store.commit('log/setFilter', { filter: 'toDate', value: null })
+ this.$store.commit('log/setFilter', { filter: 'toTime', value: null })
this.toDateMenu = false
this.toTimeMenu = false
},
- loadLog () {
+ async loadLog () {
this.loading = true
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(','))
+ if (this.filter.fromDate && this.filter.fromTime) queries.push('from=' + new Date(this.filter.fromDate + ' ' + this.filter.fromTime).getTime() / 1000)
+ if (this.filter.toDate && this.filter.toTime) queries.push('to=' + new Date(this.filter.toDate + ' ' + this.filter.toTime).getTime() / 1000)
+ if (this.filter.categoryFilter.length) queries.push('categories=' + this.filter.categoryFilter.map(x => x.name).join(','))
+ if (this.filter.clientFilter.length) queries.push('clients=' + this.filter.clientFilter.map(x => x.id).join(','))
+ if (this.filter.groupFilter.length) queries.push('groups=' + this.filter.groupFilter.map(x => x.id).join(','))
+ if (this.filter.userFilter.length) queries.push('users=' + this.filter.userFilter.map(x => x.id).join(','))
const url = '/api/systemlog' + (queries.length ? '?' + queries.join('&') : '')
- this.$http.get(url).then(response => {
- response.data.forEach(item => {
- item.timestamp = this.formatDate(new Date(item.timestamp * 1000))
- item.searchString = ''
- // Only show first line of the description
- if (item.description) {
- item.searchString += item.description + '\n'
- const desc = item.description.split('\n')
- if (desc.length > 1) item.multilineDescription = item.description
- item.description = desc[0]
- }
- // Add client/group/user info to the search string
- if (item.client) for (let key in item.client) item.searchString += item.client[key] + '\n'
- if (item.group) for (let key in item.group) item.searchString += item.group[key] + '\n'
- if (item.user) for (let key in item.user) item.searchString += item.user[key] + '\n'
- // Add snapshot info to the search string
- if (item.clientSnapshot) for (let key in item.clientSnapshot) item.searchString += item.clientSnapshot[key] + '\n'
- if (item.groupSnapshot) for (let key in item.groupSnapshot) item.searchString += item.groupSnapshot[key] + '\n'
- if (item.userSnapshot) for (let key in item.userSnapshot) item.searchString += item.userSnapshot[key] + '\n'
- // Add client/group/user object for deleted clients/groups/users
- if (item.clientSnapshot && !item.client) item.client = { name: item.clientSnapshot.id, deleted: true }
- if (item.groupSnapshot && !item.group) item.group = { name: item.groupSnapshot.id, deleted: true }
- if (item.userSnapshot && !item.user) item.user = { name: item.userSnapshot.id, deleted: true }
- })
- this.log = response.data
- this.loading = false
- })
+ const response = await this.$http.get(url)
+ for (let i in response.data) {
+ const item = response.data[i]
+ item.timestamp = this.formatDate(new Date(item.timestamp * 1000))
+ item.searchString = ''
+ // Only show first line of the description
+ if (item.description) {
+ item.searchString += item.description + '\n'
+ const desc = item.description.split('\n')
+ if (desc.length > 1) item.multilineDescription = item.description
+ item.description = desc[0]
+ }
+ // Add client/group/user info to the search string
+ if (item.client) for (let key in item.client) item.searchString += item.client[key] + '\n'
+ if (item.group) for (let key in item.group) item.searchString += item.group[key] + '\n'
+ if (item.user) for (let key in item.user) item.searchString += item.user[key] + '\n'
+ // Add snapshot info to the search string
+ if (item.clientSnapshot) for (let key in item.clientSnapshot) item.searchString += item.clientSnapshot[key] + '\n'
+ if (item.groupSnapshot) for (let key in item.groupSnapshot) item.searchString += item.groupSnapshot[key] + '\n'
+ if (item.userSnapshot) for (let key in item.userSnapshot) item.searchString += item.userSnapshot[key] + '\n'
+ // Add client/group/user object for deleted clients/groups/users
+ if (item.clientSnapshot && !item.client) item.client = { name: item.clientSnapshot.id, deleted: true }
+ if (item.groupSnapshot && !item.group) item.group = { name: item.groupSnapshot.id, deleted: true }
+ if (item.userSnapshot && !item.user) item.user = { name: item.userSnapshot.id, deleted: true }
+ }
+ this.log = response.data
+ this.loading = false
}
},
created () {
- const date = new Date()
- date.setDate(date.getDate() - 7)
- this.fromDate = this.formatDate(this.defaultStartDate, { time: false })
- this.fromTime = this.formatDate(this.defaultStartDate, { date: false, seconds: false })
+ if (!this.filter.fromDate || !this.filter.fromTime) {
+ const date = new Date()
+ date.setDate(date.getDate() - 7)
+ this.setFilter('fromDate', this.formatDate(date, { time: false }))
+ this.setFilter('fromTime', this.formatDate(date, { date: false, seconds: false }))
+ }
this.loadLog()
this.$store.dispatch('groups/loadLists')
this.$http.get('/api/users').then(response => {
diff --git a/webapp/src/config/store.js b/webapp/src/config/store.js
index f8bb4f0..3f49600 100644
--- a/webapp/src/config/store.js
+++ b/webapp/src/config/store.js
@@ -6,6 +6,7 @@ import backends from '@/store/backends'
import permissions from '@/store/permissions'
import users from '@/store/users'
import events from '@/store/events'
+import log from '@/store/log'
export default {
notifications,
@@ -15,5 +16,6 @@ export default {
backends,
permissions,
users,
- events
+ events,
+ log
}
diff --git a/webapp/src/store/log.js b/webapp/src/store/log.js
new file mode 100644
index 0000000..bfff8ae
--- /dev/null
+++ b/webapp/src/store/log.js
@@ -0,0 +1,18 @@
+export default {
+ namespaced: true,
+ state: {
+ filter: {
+ fromDate: null,
+ fromTime: null,
+ toDate: null,
+ toTime: null,
+ categoryFilter: [],
+ clientFilter: [],
+ groupFilter: [],
+ userFilter: []
+ }
+ },
+ mutations: {
+ setFilter (state, { filter, value }) { state.filter[filter] = value }
+ }
+}