summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-27 16:20:29 +0100
committerUdo Walter2019-03-27 16:20:29 +0100
commit6a9cf5338e5131396c72e0c9dfc41ebf94de95d3 (patch)
tree6b2e2e3d063093dd1a31bc0f7494819e0957b1ff /webapp
parent[webapp] small style fixes in groups module and selectbox (diff)
downloadbas-6a9cf5338e5131396c72e0c9dfc41ebf94de95d3.tar.gz
bas-6a9cf5338e5131396c72e0c9dfc41ebf94de95d3.tar.xz
bas-6a9cf5338e5131396c72e0c9dfc41ebf94de95d3.zip
[log] add filter functionality
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue2
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue2
-rw-r--r--webapp/src/components/LogModule.vue62
-rw-r--r--webapp/src/components/LogModuleEntry.vue51
4 files changed, 97 insertions, 20 deletions
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 @@
<v-card>
<v-card-text>
<v-layout wrap>
- <v-flex xs12 md5 order-xs2 order-md1>
+ <v-flex xs12 md6 order-xs2 order-md1>
<select-box
class="select-box"
v-model="categoryFilter"
:items="CATEGORIES"
- :max-columns="selectBoxColumnCount"
+ :max-columns="categorySelectColumnCount"
prepend-icon="all_inbox"
:label="$t('categories')"
hide-details
></select-box>
</v-flex>
- <v-flex xs12 md7 order-xs1 order-md2 class="text-md-right">
+ <v-flex xs12 md6 order-xs1 order-md2 class="text-md-right">
<div style="display: inline-block; white-space: nowrap">
<span class="text-xs-right picker-label">{{ $t('from') }}</span>
@@ -139,7 +139,18 @@
</div>
</v-flex>
- <v-flex xs12 md5 order-xs3>
+ <v-flex xs12 md3 order-xs3>
+ <select-box
+ class="select-box"
+ v-model="clientFilter"
+ :items="clientList"
+ :max-columns="selectBoxColumnCount"
+ prepend-icon="computer"
+ :label="$t('clients')"
+ hide-details
+ ></select-box>
+ </v-flex>
+ <v-flex xs12 md3 order-xs4>
<select-box
class="select-box"
v-model="groupFilter"
@@ -150,18 +161,18 @@
hide-details
></select-box>
</v-flex>
- <v-flex xs12 md5 order-xs4>
+ <v-flex xs12 md3 order-xs4>
<select-box
class="select-box"
- v-model="clientFilter"
- :items="clientList"
+ v-model="userFilter"
+ :items="userList"
:max-columns="selectBoxColumnCount"
- prepend-icon="computer"
- :label="$t('clients')"
+ prepend-icon="person"
+ :label="$t('users')"
hide-details
></select-box>
</v-flex>
- <v-flex xs12 md2 order-xs5 style="display: flex; align-items: flex-end; justify-content: flex-end">
+ <v-flex xs12 md3 order-xs5 style="display: flex; align-items: flex-end; justify-content: flex-end">
<v-btn color="primary" :loading="loading" @click="loadLog"><v-icon left>filter_list</v-icon>{{ $t('filter') }}</v-btn>
</v-flex>
</v-layout>
@@ -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 + ')' : '')
+ })))
+ })
}
}
</script>
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 @@
<i18n>
{
"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"
}
}
</i18n>
@@ -17,7 +33,17 @@
</v-btn>
</template>
<template #default>
- <v-card style="user-select: text;"><v-card-text>{{ item.clientSnapshot }}</v-card-text></v-card>
+ <v-card style="user-select: text;"><v-card-text>
+ <div v-if="item.client.deleted" class="error--text" style="text-align: center; font-weight: bold;">{{ $t('deleted') }}</div>
+ <table>
+ <tr><td class="snapshot-key">{{ $t('id') }}</td><td>{{ item.clientSnapshot.id }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('name') }}</td><td>{{ item.clientSnapshot.name }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('description') }}</td><td style="white-space: pre;">{{ item.clientSnapshot.description }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('ip') }}</td><td>{{ item.clientSnapshot.ip }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('mac') }}</td><td>{{ item.clientSnapshot.mac }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('uuid') }}</td><td>{{ item.clientSnapshot.uuid }}</td></tr>
+ </table>
+ </v-card-text></v-card>
</template>
</v-menu>
</template>
@@ -30,7 +56,13 @@
</v-btn>
</template>
<template #default>
- <v-card style="user-select: text;"><v-card-text>{{ item.groupSnapshot }}</v-card-text></v-card>
+ <v-card style="user-select: text;"><v-card-text>
+ <table>
+ <tr><td class="snapshot-key">{{ $t('id') }}</td><td>{{ item.groupSnapshot.id }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('name') }}</td><td>{{ item.groupSnapshot.name }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('description') }}</td><td style="white-space: pre;">{{ item.groupSnapshot.description }}</td></tr>
+ </table>
+ </v-card-text></v-card>
</template>
</v-menu>
</template>
@@ -43,7 +75,13 @@
</v-btn>
</template>
<template #default>
- <v-card style="user-select: text;"><v-card-text>{{ item.userSnapshot }}</v-card-text></v-card>
+ <v-card style="user-select: text;"><v-card-text>
+ <table>
+ <tr><td class="snapshot-key">{{ $t('id') }}</td><td>{{ item.userSnapshot.id }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('username') }}</td><td>{{ item.userSnapshot.username }}</td></tr>
+ <tr><td class="snapshot-key">{{ $t('name') }}</td><td>{{ item.userSnapshot.name }}</td></tr>
+ </table>
+ </v-card-text></v-card>
</template>
</v-menu>
</template>
@@ -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;
+}
</style>
<style>