jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Move email eventlog to separate view

Browse Source
This commit is contained in:
Johannes Zellner
2021-09-30 14:35:06 +02:00
parent 6a3459e514
commit e0fcc8ae4b
6 changed files with 175 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/emails-eventlog.html
+87
View File
@@ -0,0 +1,87 @@
<div>
<a href="/#/email" class="back-to-view-link"><i class="fas fa-arrow-left"></i> {{ 'email.backAction' | tr }}</a>
<div class="col-md-8 col-md-offset-2">
<h1>
{{ 'emails.eventlog.title' | tr }}
<a class="btn btn-default btn-outline pull-right" href="/logs.html?id=mail" target="_blank">Raw Logs</a>
</h1>
</div>
</div>
<div>
<div class="col-md-8 col-md-offset-2">
<div class="maillog-filter">
<input class="form-control" style="width: 200px;" placeholder="{{ 'main.searchPlaceholder' | tr }}" type="text" ng-model="activity.search" ng-model-options="{ debounce: 1000 }" ng-change="activity.updateFilter()" />
<multiselect ng-model="activity.selectedTypes" ms-header="{{ 'emails.typeFilterHeader' | tr }}" options="a.name for a in activityTypes" data-multiple="true" ng-change="activity.updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<select class="form-control" ng-model="activity.pageItems" ng-options="a.name for a in pageItemCount" ng-change="activity.updateFilter(true)"></select>
</div>
<div class="pagination pull-right">
<button class="btn btn-default btn-outline" ng-click="activity.refresh()"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
<button class="btn btn-default btn-outline" ng-click="activity.showPrevPage()" ng-disabled="activity.busy || activity.currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
<button class="btn btn-default btn-outline" ng-click="activity.showNextPage()" ng-disabled="activity.busy || activity.perPage > activity.eventLogs.length">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
</div>
</div>
</div>
<div>
<div class="col-md-8 col-md-offset-2">
<div class="card card-block" style="max-width: 100%">
<div>
<center ng-show="activity.busy"><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center>
<table ng-hide="activity.busy" class="table table-hover" style="margin: 0;">
<thead>
<tr>
<th style="width: 5%"><!-- Icon --></th>
<th style="width: 20%">{{ 'emails.eventlog.time' | tr }}</th>
<th style="width: 75%">{{ 'emails.eventlog.details' | tr }}</th>
</tr>
</thead>
<tbody ng-hide="activity.eventLogs.length">
<tr>
<td colspan="4" class="text-center">
<br>
<br>
{{ 'emails.eventlog.empty' | tr }}
<br>
<br>
</td>
</tr>
</tbody>
<tbody ng-show="activity.eventLogs.length" ng-repeat="eventlog in activity.eventLogs">
<tr ng-click="activity.showEventLogDetails(eventlog)" class="hand">
<td class="no-wrap">
<i class="fas fa-arrow-circle-left" ng-show="eventlog.type === 'delivered'" uib-tooltip="{{ 'emails.eventlog.type.outgoing' | tr }}"></i>
<i class="fas fa-history" ng-show="eventlog.type === 'deferred'" uib-tooltip="{{ 'emails.eventlog.type.deferred' | tr }}"></i>
<i class="fas fa-arrow-circle-right" ng-show="eventlog.type === 'received'" uib-tooltip="{{ 'emails.eventlog.type.incoming' | tr }}"></i>
<i class="fas fa-align-justify" ng-show="eventlog.type === 'queued'" uib-tooltip="{{ 'emails.eventlog.type.queued' | tr }}"></i>
<i class="fas fa-minus-circle" ng-show="eventlog.type === 'denied'" uib-tooltip="{{ 'emails.eventlog.type.denied' | tr }}"></i>
<i class="fas fa-hand-paper" ng-show="eventlog.type === 'bounce'" uib-tooltip="{{ 'emails.eventlog.type.bounce' | tr }}"></i>
<i class="fas fa-filter" ng-show="eventlog.type === 'spam-learn'" uib-tooltip="{{ 'emails.eventlog.type.spamFilterTrained' | tr }}"></i>
</td>
<td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
<td>
<span ng-show="eventlog.type === 'bounce'">{{ 'emails.eventlog.type.bounceInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'deferred'">{{ 'emails.eventlog.type.deferredInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'queued'">
<span ng-show="eventlog.direction === 'inbound'">{{ 'emails.eventlog.type.inboundInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.direction === 'outbound'">{{ 'emails.eventlog.type.outboundInfo' | tr:eventlog }}</span>
</span>
<span ng-show="eventlog.type === 'received'">{{ 'emails.eventlog.type.receivedInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'delivered'">{{ 'emails.eventlog.type.deliveredInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'denied'">{{ 'emails.eventlog.type.deniedInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'spam-learn'">{{ 'emails.eventlog.type.spamFilterTrainedInfo' | tr:eventlog }}</span>
</td>
</tr>
<tr ng-show="activity.activeEventLog === eventlog">
<td colspan="6">
<pre class="eventlog-details">{{ eventlog | json }}</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
src/views/emails-eventlog.js
+81
View File
@@ -0,0 +1,81 @@
'use strict';
/* global $ */
/* global angular */
angular.module('Application').controller('EmailsEventlogController', ['$scope', '$location', '$translate', '$timeout', 'Client', function ($scope, $location, $translate, $timeout, Client) {
Client.onReady(function () { if (!Client.getUserInfo().isAtLeastOwner) $location.path('/'); });
$scope.ready = false;
$scope.config = Client.getConfig();
$scope.user = Client.getUserInfo();
$scope.pageItemCount = [
{ name: $translate.instant('main.pagination.perPageSelector', { n: 20 }), value: 20 },
{ name: $translate.instant('main.pagination.perPageSelector', { n: 50 }), value: 50 },
{ name: $translate.instant('main.pagination.perPageSelector', { n: 100 }), value: 100 }
];
$scope.activityTypes = [
{ name: 'Bounce', value: 'bounce' },
{ name: 'Deferred', value: 'deferred' },
{ name: 'Delivered', value: 'delivered' },
{ name: 'Denied', value: 'denied' },
{ name: 'Queued', value: 'queued' },
{ name: 'Received', value: 'received' },
];
$scope.activity = {
busy: true,
eventLogs: [],
activeEventLog: null,
currentPage: 1,
perPage: 20,
pageItems: $scope.pageItemCount[0],
selectedTypes: [],
search: '',
refresh: function () {
$scope.activity.busy = true;
var types = $scope.activity.selectedTypes.map(function (a) { return a.value; }).join(',');
Client.getMailEventLogs($scope.activity.search, types, $scope.activity.currentPage, $scope.activity.pageItems.value, function (error, result) {
if (error) return console.error('Failed to fetch mail eventlogs.', error);
$scope.activity.busy = false;
$scope.activity.eventLogs = result;
});
},
showNextPage: function () {
$scope.activity.currentPage++;
$scope.activity.refresh();
},
showPrevPage: function () {
if ($scope.activity.currentPage > 1) $scope.activity.currentPage--;
else $scope.activity.currentPage = 1;
$scope.activity.refresh();
},
showEventLogDetails: function (eventLog) {
if ($scope.activity.activeEventLog === eventLog) $scope.activity.activeEventLog = null;
else $scope.activity.activeEventLog = eventLog;
},
updateFilter: function (fresh) {
if (fresh) $scope.activity.currentPage = 1;
$scope.activity.refresh();
}
};
Client.onReady(function () {
$scope.ready = true;
$scope.activity.refresh();
});
$('.modal-backdrop').remove();
}]);
src/views/emails.html
+1 -92
View File
@@ -166,7 +166,7 @@
{{ 'emails.title' | tr }}
<div class="btn-group btn-group-sm pull-right" role="group">
<a class="btn btn-sm btn-default" href="/logs.html?id=mail" target="_blank" uib-tooltip="{{ 'app.logsActionTooltip' | tr }}" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-align-left"></i></a>
<a class="btn btn-sm btn-default" href="#/emails-eventlog" uib-tooltip="Email Eventlog" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-align-left"></i></a>
<a class="btn btn-sm btn-default" ng-disabled="user.role !== 'owner'" href="/filemanager.html?id=mail&type=mail" target="_blank" uib-tooltip="{{ 'app.filemanagerActionTooltip' | tr }}" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-folder"></i></a>
</div>
</h1>
@@ -275,95 +275,4 @@
</div>
</div>
<br/>
<div class="text-left" ng-show="user.role === 'owner'">
<h3>{{ 'emails.eventlog.title' | tr }}</h3>
</div>
<div class="row" ng-show="user.role === 'owner'">
<div class="col-md-12">
<div class="maillog-filter">
<input class="form-control" style="width: 200px;" placeholder="{{ 'main.searchPlaceholder' | tr }}" type="text" ng-model="activity.search" ng-model-options="{ debounce: 1000 }" ng-change="activity.updateFilter()" />
<multiselect ng-model="activity.selectedTypes" ms-header="{{ 'emails.typeFilterHeader' | tr }}" options="a.name for a in activityTypes" data-multiple="true" ng-change="activity.updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<select class="form-control" ng-model="activity.pageItems" ng-options="a.name for a in pageItemCount" ng-change="activity.updateFilter(true)"></select>
</div>
<div class="pull-right">
<button class="btn btn-default btn-outline" ng-click="activity.refresh()"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
<button class="btn btn-default btn-outline" ng-click="activity.showPrevPage()" ng-disabled="activity.busy || activity.currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
<button class="btn btn-default btn-outline" ng-click="activity.showNextPage()" ng-disabled="activity.busy || activity.perPage > activity.eventLogs.length">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
</div>
</div>
</div>
<div class="card card-large" style="margin-top: 10px; margin-bottom: 15px;" ng-show="user.role === 'owner'">
<div class="row ng-hide" ng-hide="ready">
<div class="col-lg-12 text-center">
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
</div>
</div>
<div class="row animateMeOpacity ng-hide" ng-show="ready">
<div class="col-xs-12">
<table class="table table-hover" style="margin: 0;">
<thead>
<tr>
<th style="width: 5%"><!-- Icon --></th>
<th style="width: 20%">{{ 'emails.eventlog.time' | tr }}</th>
<th style="width: 75%">{{ 'emails.eventlog.details' | tr }}</th>
</tr>
</thead>
<tbody ng-show="activity.busy">
<tr>
<td colspan="4" class="text-center">
<i class="fa fa-circle-notch fa-spin"></i>
</td>
</tr>
</tbody>
<tbody ng-hide="activity.eventLogs.length || activity.busy">
<tr>
<td colspan="4" class="text-center">
<br>
<br>
{{ 'emails.eventlog.empty' | tr }}
<br>
<br>
</td>
</tr>
</tbody>
<tbody ng-repeat="eventlog in activity.eventLogs" ng-hide="activity.busy">
<tr ng-click="activity.showEventLogDetails(eventlog)" class="hand">
<td class="no-wrap">
<i class="fas fa-arrow-circle-left" ng-show="eventlog.type === 'delivered'" uib-tooltip="{{ 'emails.eventlog.type.outgoing' | tr }}"></i>
<i class="fas fa-history" ng-show="eventlog.type === 'deferred'" uib-tooltip="{{ 'emails.eventlog.type.deferred' | tr }}"></i>
<i class="fas fa-arrow-circle-right" ng-show="eventlog.type === 'received'" uib-tooltip="{{ 'emails.eventlog.type.incoming' | tr }}"></i>
<i class="fas fa-align-justify" ng-show="eventlog.type === 'queued'" uib-tooltip="{{ 'emails.eventlog.type.queued' | tr }}"></i>
<i class="fas fa-minus-circle" ng-show="eventlog.type === 'denied'" uib-tooltip="{{ 'emails.eventlog.type.denied' | tr }}"></i>
<i class="fas fa-hand-paper" ng-show="eventlog.type === 'bounce'" uib-tooltip="{{ 'emails.eventlog.type.bounce' | tr }}"></i>
<i class="fas fa-filter" ng-show="eventlog.type === 'spam-learn'" uib-tooltip="{{ 'emails.eventlog.type.spamFilterTrained' | tr }}"></i>
</td>
<td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
<td>
<span ng-show="eventlog.type === 'bounce'">{{ 'emails.eventlog.type.bounceInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'deferred'">{{ 'emails.eventlog.type.deferredInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'queued'">
<span ng-show="eventlog.direction === 'inbound'">{{ 'emails.eventlog.type.inboundInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.direction === 'outbound'">{{ 'emails.eventlog.type.outboundInfo' | tr:eventlog }}</span>
</span>
<span ng-show="eventlog.type === 'received'">{{ 'emails.eventlog.type.receivedInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'delivered'">{{ 'emails.eventlog.type.deliveredInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'denied'">{{ 'emails.eventlog.type.deniedInfo' | tr:eventlog }}</span>
<span ng-show="eventlog.type === 'spam-learn'">{{ 'emails.eventlog.type.spamFilterTrainedInfo' | tr:eventlog }}</span>
</td>
</tr>
<tr ng-show="activity.activeEventLog === eventlog">
<td colspan="6">
<pre class="eventlog-details">{{ eventlog | json }}</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
src/views/emails.js
-63
View File
@@ -10,67 +10,6 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
$scope.user = Client.getUserInfo();
$scope.domains = [];
$scope.pageItemCount = [
{ name: $translate.instant('main.pagination.perPageSelector', { n: 20 }), value: 20 },
{ name: $translate.instant('main.pagination.perPageSelector', { n: 50 }), value: 50 },
{ name: $translate.instant('main.pagination.perPageSelector', { n: 100 }), value: 100 }
];
$scope.activityTypes = [
{ name: 'Bounce', value: 'bounce' },
{ name: 'Deferred', value: 'deferred' },
{ name: 'Delivered', value: 'delivered' },
{ name: 'Denied', value: 'denied' },
{ name: 'Queued', value: 'queued' },
{ name: 'Received', value: 'received' },
];
$scope.activity = {
busy: true,
eventLogs: [],
activeEventLog: null,
currentPage: 1,
perPage: 20,
pageItems: $scope.pageItemCount[0],
selectedTypes: [],
search: '',
refresh: function () {
$scope.activity.busy = true;
var types = $scope.activity.selectedTypes.map(function (a) { return a.value; }).join(',');
Client.getMailEventLogs($scope.activity.search, types, $scope.activity.currentPage, $scope.activity.pageItems.value, function (error, result) {
if (error) return console.error('Failed to fetch mail eventlogs.', error);
$scope.activity.busy = false;
$scope.activity.eventLogs = result;
});
},
showNextPage: function () {
$scope.activity.currentPage++;
$scope.activity.refresh();
},
showPrevPage: function () {
if ($scope.activity.currentPage > 1) $scope.activity.currentPage--;
else $scope.activity.currentPage = 1;
$scope.activity.refresh();
},
showEventLogDetails: function (eventLog) {
if ($scope.activity.activeEventLog === eventLog) $scope.activity.activeEventLog = null;
else $scope.activity.activeEventLog = eventLog;
},
updateFilter: function (fresh) {
if (fresh) $scope.activity.currentPage = 1;
$scope.activity.refresh();
}
};
// this is required because we need to rewrite the MAIL_SERVER_NAME env var
$scope.reconfigureEmailApps = function () {
var installedApps = Client.getInstalledApps();
@@ -421,8 +360,6 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
$scope.domains = domains;
$scope.ready = true;
if ($scope.user.role === 'owner') $scope.activity.refresh();
$scope.mailLocation.refresh();
$scope.maxEmailSize.refresh();
$scope.spamConfig.refresh();