From 43b49ef4c957e06e2e304167bef127b7c72502f7 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Wed, 12 Feb 2020 23:17:24 -0800
Subject: [PATCH] cleanup mail eventlog ui

---
 src/js/index.js       |  2 +-
 src/views/emails.html | 25 +++++++++++--------------
 src/views/emails.js   |  3 +--
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/js/index.js b/src/js/index.js
index be2119881..9fed217b4 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -462,7 +462,7 @@ app.filter('prettyShortDate', function () {
 
 app.filter('prettyEmailAddresses', function () {
     return function prettyEmailAddresses(addresses) {
-        if (!addresses) return '';
+        if (!addresses || addresses === '<>') return '<>';
         if (Array.isArray(addresses)) return addresses.map(function (a) { return a.slice(1, -1); }).join(', ');
         return addresses.slice(1, -1);
     };
diff --git a/src/views/emails.html b/src/views/emails.html
index a4b22cf76..603311e63 100644
--- a/src/views/emails.html
+++ b/src/views/emails.html
@@ -97,10 +97,11 @@
           <thead>
             <tr>
               <th style="width:  5%"><!-- Direction --></th>
-              <th style="width: 15%">Time</th>
-              <th style="width: 30%">From</th>
-              <th style="width: 30%">To</th>
-              <th style="width:  5%"><!-- Type --></th>
+              <th style="width: 10%">Time</th>
+              <th style="width: 15%">Txn ID</th>
+              <th style="width: 25%">From</th>
+              <th style="width: 25%">To</th>
+              <th style="width:  5%">Event</th>
             </tr>
           </thead>
           <tbody ng-show="activity.busy">
@@ -113,22 +114,18 @@
           <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-upload" ng-show="eventlog.direction === 'outbound'" uib-tooltip="Outgoing"></i>
-                <i class="fas fa-download" ng-show="eventlog.direction === 'inbound'" uib-tooltip="Incoming"></i>
+                <i class="fas fa-arrow-circle-left" ng-show="eventlog.direction === 'outbound'" uib-tooltip="Outgoing"></i>
+                <i class="fas fa-arrow-circle-right" ng-show="eventlog.direction === 'inbound'" uib-tooltip="Incoming"></i>
+                <i class="fas fa-ban" ng-show="eventlog.details.spamStatus.indexOf('Yes,') === 0" uib-tooltip="Spam"></i>
               </td>
               <td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
+              <td class="no-wrap"><span uib-tooltip="{{ eventlog.uuid }}">{{ eventlog.uuid.slice(0, 8) }}</span></td>
               <td class="elide-table-cell">{{ eventlog.mailFrom | prettyEmailAddresses }}</td>
               <td class="elide-table-cell">{{ eventlog.rcptTo | prettyEmailAddresses }}</td>
-              <td class="no-wrap">
-                <i class="fas fa-check" ng-show="eventlog.type === 'received'" uib-tooltip="Received"></i>
-                <i class="fas fa-check" ng-show="eventlog.type === 'delivered'" uib-tooltip="Delivered"></i>
-                <i class="fas fa-tasks" ng-show="eventlog.type === 'queued'" uib-tooltip="Queued"></i>
-                <i class="fas fa-ban" ng-show="eventlog.type === 'denied'" uib-tooltip="Denied"></i>
-                <!-- {{ eventlog.type }} -->
-              </td>
+              <td class="elide-table-cell" style="text-transform: capitalize">{{ eventlog.type }}</td>
             </tr>
             <tr ng-show="activity.activeEventLog === eventlog">
-              <td colspan="5">
+              <td colspan="6">
                 <pre class="eventlog-details">{{ eventlog.details | json }}</pre>
               </td>
             </tr>
diff --git a/src/views/emails.js b/src/views/emails.js
index 40c8530a4..dea00e66b 100644
--- a/src/views/emails.js
+++ b/src/views/emails.js
@@ -26,8 +26,7 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
 
                 $scope.activity.busy = false;
 
-                // FIXME reverse should come from the server
-                $scope.activity.eventLogs = result.reverse();
+                $scope.activity.eventLogs = result;
             });
         },