Add simple eventlog pagination in apps view

src/views/app.html

@@ -1017,16 +1017,20 @@
               <thead>
                 <tr>
                   <th class="col-md-2">{{ 'eventlog.time' | tr }}</th>
-                  <th class="col-md-7">{{ 'eventlog.details' | tr }}</th>
+                  <th class="col-md-8">{{ 'eventlog.details' | tr }}</th>
+                  <th class="col-md-2" style="text-align: right;">
+                    <button class="btn btn-xs btn-default btn-outline" ng-click="eventlog.showPrevPage()" ng-disabled="eventlog.busy || eventlog.currentPage <= 1"><i class="fa fa-angle-double-left"></i></button>
+                    <button class="btn btn-xs btn-default btn-outline" ng-click="eventlog.showNextPage()" ng-disabled="eventlog.busy || eventlog.perPage > eventlog.eventLogs.length"><i class="fa fa-angle-double-right"></i></button>
+                  </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 ng-bind-html="eventLog.details"></td>
+                  <td colspan="2" 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>
+                  <td colspan="3"><pre class="eventlog-details">{{ eventLog.raw.data | json }}</pre></td>
                 </tr>
               </tbody>
             </table>

src/views/app.js

@@ -848,15 +848,17 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         busy: false,
         eventlogs: [],
         activeEventLog: null,
+        currentPage: 1,
+        perPage: 5,
 
         show: function () {
+            $scope.eventlog.refresh();
+        },
+
+        refresh: function () {
             $scope.eventlog.busy = true;
 
-            // TODO if needed make those interactive
-            var page = 1;
-            var perPage = 20;
-
-            Client.getAppEventLog($scope.app.id, page, perPage, function (error, result) {
+            Client.getAppEventLog($scope.app.id, $scope.eventlog.currentPage, $scope.eventlog.perPage, function (error, result) {
                 if (error) return console.error('Failed to get events:', error);
 
                 $scope.eventlog.eventLogs = [];
@@ -871,6 +873,18 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         showDetails: function (eventLog) {
             if ($scope.eventlog.activeEventLog === eventLog) $scope.eventlog.activeEventLog = null;
             else $scope.eventlog.activeEventLog = eventLog;
+        },
+
+        showNextPage: function () {
+            $scope.eventlog.currentPage++;
+            $scope.eventlog.refresh();
+        },
+
+        showPrevPage: function () {
+            if ($scope.eventlog.currentPage > 1) $scope.eventlog.currentPage--;
+            else $scope.eventlog.currentPage = 1;
+
+            $scope.eventlog.refresh();
         }
     };