Add basic eventlog for apps in app view

src/views/app.html

@@ -515,6 +515,7 @@
         <div ng-click="setView('graphs')" ng-class="{ 'active': view === 'graphs' }">{{ 'app.graphsTabTitle' | tr }}</div>
         <div ng-click="setView('security')" ng-class="{ 'active': view === 'security' }">{{ 'app.securityTabTitle' | tr }}</div>
         <div ng-click="setView('email')" ng-class="{ 'active': view === 'email' }" ng-show="app.manifest.addons.sendmail || app.manifest.addons.recvmail">{{ 'app.emailTabTitle' | tr }}</div>
+        <div ng-click="setView('eventlog')" ng-class="{ 'active': view === 'eventlog' }">{{ 'app.eventlogTabTitle' | tr }}</div>
         <div ng-click="setView('updates')" ng-class="{ 'active': view === 'updates' }">{{ 'app.updatesTabTitle' | tr }}</div>
         <div ng-click="setView('backups')" ng-class="{ 'active': view === 'backups' }">{{ 'app.backupsTabTitle' | tr }}</div>
         <div ng-click="setView('repair')" ng-class="{ 'active': view === 'repair' }">{{ 'app.repairTabTitle' | tr }}</div>
@@ -976,6 +977,33 @@
         </div>
       </div>
 
+      <div class="card" ng-show="view === 'eventlog'">
+        <div class="row">
+          <div class="col-md-12">
+            <center ng-show="eventlog.busy"><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center>
+            <table ng-hide="eventlog.busy" class="table table-condensed table-hover">
+              <thead>
+                <tr>
+                  <th class="col-md-2">{{ 'eventlog.time' | tr }}</th>
+                  <th class="col-md-3">{{ 'eventlog.source' | tr }}</th>
+                  <th class="col-md-7">{{ 'eventlog.details' | tr }}</th>
+                </tr>
+              </thead>
+              <tbody ng-repeat="eventLog in eventlog.eventLogs">
+                <tr ng-click="eventlog.showDetails(eventLog)" class="hand">
+                  <td><span uib-tooltip="{{ eventLog.raw.creationTime | prettyLongDate }}" class="arrow">{{ eventLog.raw.creationTime | prettyDate }}</span></td>
+                  <td>{{ eventLog.source }}</td>
+                  <td ng-bind-html="eventLog.details"></td>
+                </tr>
+                <tr ng-show="eventlog.activeEventLog === eventLog">
+                  <td colspan="4"><pre class="eventlog-details">{{ eventLog.raw.data | json }}</pre></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
       <div class="card" ng-show="view === 'security'">
         <div class="row">
           <div class="col-md-12">

src/views/app.js

@@ -811,6 +811,39 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         }
     };
 
+    $scope.eventlog = {
+        busy: false,
+        eventlogs: [],
+        activeEventLog: null,
+
+        show: function () {
+            $scope.eventlog.busy = true;
+
+            // TODO if needed make those interactive
+            var page = 1;
+            var perPage = 100;
+            var actions = null;
+
+            var search = $scope.app.id;
+
+            Client.getEventLogs(actions, search, page, perPage, function (error, result) {
+                if (error) return console.error('Failed to get events:', error);
+
+                $scope.eventlog.eventLogs = [];
+                result.forEach(function (e) {
+                    $scope.eventlog.eventLogs.push({ raw: e, details: Client.eventLogDetails(e), source: Client.eventLogSource(e) });
+                });
+
+                $scope.eventlog.busy = false;
+            });
+        },
+
+        showDetails: function (eventLog) {
+            if ($scope.eventlog.activeEventLog === eventLog) $scope.eventlog.activeEventLog = null;
+            else $scope.eventlog.activeEventLog = eventLog;
+        }
+    };
+
     $scope.security = {
         busy: false,
         error: {},