Make eventlog entries expandable to show raw event data

webadmin/src/theme.scss

@@ -1079,6 +1079,11 @@ footer {
     }
 }
 
+.eventlog-details {
+    white-space: pre-wrap;
+    background-color: white;
+}
+
 // ----------------------------
 // Tag Input
 // ----------------------------

webadmin/src/views/activity.html

@@ -29,17 +29,22 @@
             <table ng-hide="busy" class="table table-striped table-condensed table-hover">
               <thead>
                 <tr>
-                  <th class="col-md-2">Time</th>
+                  <th class="col-md-1">Time</th>
                   <th class="col-md-3">Source</th>
-                  <th class="col-md-7">Action</th>
+                  <th class="col-md-2">Action</th>
+                  <th class="col-md-6">Details</th>
                 </tr>
               </thead>
-              <tbody>
-                <tr ng-repeat="eventLog in eventLogs">
+              <tbody ng-repeat="eventLog in eventLogs">
+                <tr ng-click="showEventLogDetails(eventLog)" class="hand">
                   <td><span uib-tooltip="{{eventLog.creationTime}}" class="arrow">{{ eventLog.creationTime | prettyDate }}</span></td>
                   <td>{{ eventLog.source.username || eventLog.source.userId || eventLog.source.authType }} <span ng-show="eventLog.source.ip || eventLog.source.appId"> ({{ eventLog.source.ip || eventLog.source.appId }}) </span> </td>
+                  <td>{{ eventLog | eventLogAction }}</td>
                   <td ng-bind-html="eventLog | eventLogDetails"></td>
                 </tr>
+                <tr ng-show="activeEventLog === eventLog">
+                  <td colspan="4"><pre class="eventlog-details">{{ eventLog.data | json }}</pre></td>
+                </tr>
               </tbody>
             </table>
         </div>

webadmin/src/views/activity.js

@@ -4,7 +4,8 @@ angular.module('Application').controller('ActivityController', ['$scope', '$loca
     $scope.config = Client.getConfig();
 
     $scope.busy = false;
-    $scope.eventLogs = [ ];
+    $scope.eventLogs = [];
+    $scope.activeEventLog = null;
 
     // TODO sync this with the eventlog filter
     $scope.actions = [
@@ -70,6 +71,11 @@ angular.module('Application').controller('ActivityController', ['$scope', '$loca
         fetchEventLogs();
     };
 
+    $scope.showEventLogDetails = function (eventLog) {
+        if ($scope.activeEventLog === eventLog) $scope.activeEventLog = null;
+        else $scope.activeEventLog = eventLog;
+    };
+
     Client.onReady(function () {
         fetchEventLogs();
     });