Load eventlog details per notification

src/js/client.js

@@ -732,6 +732,15 @@ angular.module('Application').service('Client', ['$http', '$interval', 'md5', 'N
         });
     };
 
+    Client.prototype.getEvent = function (eventId, callback) {
+        get('/api/v1/cloudron/eventlog/' + eventId, {}, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data.event);
+        });
+    };
+
     Client.prototype.getEventLogs = function (actions, search, page, perPage, callback) {
         var config = {
             params: {

src/views/notifications.html

@@ -23,11 +23,12 @@
         {{ notification.title }} <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
         <button class="btn btn-xs btn-success pull-right" ng-hide="notification.acknowledged" ng-click="notifications.ack(notification)" uib-tooltip="Clear"><i class="fa fa-check"></i></button>
 
-        <div uib-collapse="notification.isCollapsed">
+        <div uib-collapse="notification.isCollapsed" expanding="notificationExpanding(notification)">
           <br/>
           {{ notification.message }}<br/>
-          <!-- <br/> -->
-          <!-- <button class="btn btn-primary" ng-show="notification.action" ng-click="notifications.action(notification)"><i class="fa fa-arrow-right"></i> Goto View</button> -->
+          <br/>
+          <h2 ng-show="notification.busyLoadEvent" class="text-center"><i class="fa fa-circle-notch fa-spin"></i></h2>
+          <pre ng-hide="notification.busyLoadEvent" ng-click="$event.stopPropagation();" style="cursor: auto">{{ notification.event.data | json }}</pre>
         </div>
       </div>
     </div>

src/views/notifications.js

@@ -17,9 +17,8 @@ angular.module('Application').controller('NotificationsController', ['$scope', '
             Client.getNotifications($scope.notifications.all ? null : false, 1, 20, function (error, result) {
                 if (error) return console.error(error);
 
-                result.forEach(function (r) {
-                    r.isCollapsed = r.acknowledged;
-                });
+                // collapse by default
+                result.forEach(function (r) { r.isCollapsed = true; });
 
                 $scope.notifications.notifications = result;
 
@@ -69,6 +68,18 @@ angular.module('Application').controller('NotificationsController', ['$scope', '
         }
     };
 
+    $scope.notificationExpanding = function (notification) {
+        notification.busyLoadEvent = true;
+
+        Client.getEvent(notification.eventId, function (error, result) {
+            notification.busyLoadEvent = false;
+
+            if (error) return console.error(error);
+
+            notification.event = result;
+        });
+    };
+
     Client.onReady(function () {
         $scope.notifications.refresh();
     });