external/mailinabox
1
0
Fork 0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2026-03-05 15:57:23 +01:00
Code Issues Releases Wiki Activity

Split the User Activity/IMAP connections tab into two tables to better deal with the quantity of data

Browse Source
This commit is contained in:
downtownallday
2021-04-12 15:07:56 -04:00
parent 212b0b74cb
commit 36d9cbb4e8
11 changed files with 248 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
management/reporting/ui/chart-table.js
View File

@@ -2,7 +2,8 @@ export default Vue.component('chart-table', {
props: {
items: Array,
fields: Array,
caption: String
caption: String,
small: { type:Boolean, default:true }
},
/* <b-table-lite striped small :fields="fields_x" :items="items" caption-top><template #table-caption><span class="text-nowrap">{{caption}}</span></template></b-table>*/
@@ -19,7 +20,7 @@ export default Vue.component('chart-table', {
var table = ce('b-table-lite', {
props: {
'striped': true,
'small': true,
'small': this.small,
'fields': this.fields_x,
'items': this.items,
'caption-top': true

2
management/reporting/ui/charting.js
View File

@@ -493,6 +493,8 @@ export class BvTableField {
}
else if (ft.type == 'number') {
if (ft.subtype == 'plain' ||
ft.subtype === null ||
ft.subtype === undefined ||
ft.subtype == 'decimal' && isNaN(ft.places)
)
{

36
management/reporting/ui/panel-user-activity.html
View File

@@ -84,26 +84,30 @@
<b-tab>
<template #title>
IMAP Connections<sup v-if="imap_details.items.length >= get_row_limit()">*</sup> ({{imap_details.items.length}})
IMAP Connections
</template>
<b-table
class="sticky-table-header-0 bg-light"
small
tbody-tr-class="cursor-pointer"
selectable
select-mode="single"
:filter="show_only_flagged_filter"
:filter-function="table_filter_cb"
tbody-tr-class="cursor-pointer"
details-td-class="cursor-default"
@row-clicked="row_clicked"
:items="imap_details.items"
:fields="imap_details.fields">
<template #row-details="row">
<b-card>
<div><strong>Connection disposition</strong>: {{ disposition_formatter(row.item.disposition) }}</div>
<div><strong>Connection security</strong> {{ row.item.connection_security }}</div>
<div><strong>Disconnect reason</strong> {{ row.item.disconnect_reason }}</div>
</b-card>
</template>
</b-table>
:items="imap_conn_summary.items"
:fields="imap_conn_summary.fields"
@row-clicked="load_imap_details">
</b-table>
<div v-if="imap_details" class="bg-white">
<div class="mt-3 text-center bg-info p-1">{{imap_details._desc}} ({{imap_details.items.length}} rows<sup v-if="imap_details.items.length >= get_row_limit()">*</sup>)</div>
<b-table
class="sticky-table-header-0"
small
:items="imap_details.items"
:fields="imap_details.fields">
</b-table>
</div>
</b-tab>
</b-tabs>

72
management/reporting/ui/panel-user-activity.js
View File

@@ -3,9 +3,10 @@
*/
import wbr_text from "./wbr-text.js";
import chart_table from "./chart-table.js";
import message_headers_view from "./message_headers_view.js";
import UserSettings from "./settings.js";
import { MailBvTable, ConnectionDisposition } from "./charting.js";
import { BvTable, MailBvTable, ConnectionDisposition } from "./charting.js";
export default Vue.component('panel-user-activity', function(resolve, reject) {
@@ -19,7 +20,8 @@ export default Vue.component('panel-user-activity', function(resolve, reject) {
components: {
'wbr-text': wbr_text,
'message-headers-view': message_headers_view
'message-headers-view': message_headers_view,
'chart-table': chart_table,
},
data: function() {
@@ -36,6 +38,7 @@ export default Vue.component('panel-user-activity', function(resolve, reject) {
data_date_range: null, /* date range for active table data */
sent_mail: null,
received_mail: null,
imap_conn_summary: null,
imap_details: null,
lmtp_id: null, /* for message headers modal */
all_users: [],
@@ -169,11 +172,19 @@ export default Vue.component('panel-user-activity', function(resolve, reject) {
f.label = 'Envelope From (user)';
},
combine_imap_conn_summary_fields: function() {
// remove 'first_conn_time'
this.imap_conn_summary.combine_fields('first_connection_time');
// clear the label for the 'total' column (pct)
const f_total = this.imap_conn_summary.get_field('total');
f_total.label = '';
},
combine_imap_details_fields: function() {
// remove these fields
this.imap_details.combine_fields([
'disconnect_reason',
'connection_security',
'remote_host',
'disposition',
]);
},
@@ -272,16 +283,21 @@ export default Vue.component('panel-user-activity', function(resolve, reject) {
.get_field('connect_time')
.add_tdClass('text-nowrap');
/* setup imap_details */
this.imap_details = new MailBvTable(
response.data.imap_details, {
_showDetails: true
/* setup imap_conn_summary */
this.imap_conn_summary = new MailBvTable(
response.data.imap_conn_summary
);
this.combine_imap_conn_summary_fields();
this.imap_conn_summary.flag_fields();
['last_connection_time','count']
.forEach(name => {
const f = this.imap_conn_summary.get_field(name);
f.add_cls('text-nowrap', 'tdClass');
});
this.combine_imap_details_fields();
this.imap_details
.flag_fields()
.get_field('connect_time')
.add_tdClass('text-nowrap');
/* clear imap_details */
this.imap_details = null;
}).catch(error => {
this.$root.handleError(error);
@@ -304,6 +320,36 @@ export default Vue.component('panel-user-activity', function(resolve, reject) {
// show the modal dialog
this.$refs.message_headers_modal.show();
},
load_imap_details: function(item, index, event) {
this.$emit('loading', 1);
this.imap_details = null;
const promise = axios.post('reports/uidata/imap-details', {
row_limit: this.get_row_limit(),
user_id: this.user_id.trim(),
start_date: this.date_range[0],
end_date: this.date_range[1],
disposition: item.disposition,
remote_host: item.remote_host
}).then(response => {
this.imap_details = new MailBvTable(
response.data.imap_details
);
this.combine_imap_details_fields();
this.imap_details.get_field('connect_time')
.add_tdClass('text-nowrap');
this.imap_details.get_field('disconnect_time')
.add_tdClass('text-nowrap');
this.imap_details._desc =
`${item.remote_host}/${item.disposition}`;
}).catch(error => {
this.$root.handleError(error);
}).finally( () => {
this.$emit('loading', -1);
});
}
}