Allow to follow app logs

webadmin/src/index.html

@@ -66,6 +66,9 @@
     <!-- https://github.com/sebastianha/angular-bootstrap-multiselect -->
     <script src="/3rdparty/js/angular-bootstrap-multiselect.js"></script>
 
+    <!-- colors -->
+    <script type="text/javascript" src="3rdparty/js/colors.js"></script>
+
     <!-- Main Application -->
     <script src="js/index.js"></script>
 
@@ -213,6 +216,7 @@
                                 <li ng-show="user.admin"><a href="#/certs"><i class="fa fa-certificate fa-fw"></i> Domain & Certs</a></li>
                                 <li ng-show="user.admin"><a href="#/email"><i class="fa fa-envelope fa-fw"></i> Email</a></li>
                                 <li ng-show="user.admin"><a href="#/graphs"><i class="fa fa-bar-chart fa-fw"></i> Graphs</a></li>
+                                <li ng-show="user.admin"><a href="#/logs"><i class="fa fa-file-text fa-fw"></i> Logs</a></li>
                                 <li ng-show="user.admin"><a href="#/settings"><i class="fa fa-wrench fa-fw"></i> Settings</a></li>
                                 <li ng-show="user.admin" class="divider"></li>
                                 <li ng-show="user.admin"><a href="#/support"><i class="fa fa-comment fa-fw"></i> Support</a></li>

webadmin/src/js/client.js

@@ -571,6 +571,18 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         }).error(defaultErrorHandler(callback));
     };
 
+    Client.prototype.getPlatformLogs = function (units, follow, callback) {
+        if (follow) {
+            var eventSource = new EventSource(client.apiOrigin + '/api/v1/cloudron/logstream?lines=100&access_token=' + token);
+            callback(null, eventSource);
+        } else {
+            get('/api/v1/apps/' + appId + '/logs').success(function (data, status) {
+                if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
+                callback(null, data);
+            }).error(defaultErrorHandler(callback));
+        }
+    };
+
     Client.prototype.getApps = function (callback) {
         get('/api/v1/apps').success(function (data, status) {
             if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
@@ -578,11 +590,16 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         }).error(defaultErrorHandler(callback));
     };
 
-    Client.prototype.getAppLogs = function (appId, callback) {
-        get('/api/v1/apps/' + appId + '/logs').success(function (data, status) {
-            if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
-            callback(null);
-        }).error(defaultErrorHandler(callback));
+    Client.prototype.getAppLogs = function (appId, follow, callback) {
+        if (follow) {
+            var eventSource = new EventSource(client.apiOrigin + '/api/v1/apps/' + appId + '/logstream?lines=100&access_token=' + token);
+            callback(null, eventSource);
+        } else {
+            get('/api/v1/apps/' + appId + '/logs').success(function (data, status) {
+                if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
+                callback(null, data);
+            }).error(defaultErrorHandler(callback));
+        }
     };
 
     Client.prototype.getAppBackups = function (appId, callback) {

webadmin/src/theme.scss

@@ -1143,3 +1143,19 @@ $graphs-success-alt:    lighten(#27CE65, 20%);
         }
     }
 }
+
+
+// ----------------------------
+// Logs
+// ----------------------------
+
+.log-line-container {
+    width: 100%;
+    max-width: 100%;
+    height: 400px;
+    background-color: black;
+    color: white;
+    overflow: auto;
+    border: none;
+    padding: 5px;
+}

webadmin/src/views/logs.html

@@ -1,32 +1,29 @@
-<div class="content support">
-    <br/>
+<br/>
 
-    <div>
-        <div class="text-left">
-            <h1>Logs</h1>
-        </div>
-    </div>
+<div class="row">
+  <div class="col-md-10 col-md-offset-1">
+    <h1>Logs</h1>
+  </div>
+</div>
 
-    <div class="card card-large">
-        <div class="grid-item-top">
-            <div class="row animateMeOpacity">
-                <div class="col-lg-12">
-                    <h3>Logs</h3>
-                    Select the log to view
-                    <br/>
-                    <br/>
-                    <form name="logsForm">
-                        <div class="form-group">
-                            <select class="form-control" name="type" style="width: 50%;" ng-model="logs.selectedUrl" required>
-                                <option ng-repeat="log in logs.types" ng-value="log.url">{{ log.name }}</option>
-                            </select>
-                        </div>
-                        <a class="btn btn-primary" ng-disabled="!logs.selectedUrl" ng-href="{{logs.selectedUrl}}&format=short&lines=800" target="_self"> Download </a>
-                    </form>
-                </div>
-            </div>
-        </div>
+<div class="row">
+  <div class="col-md-10 col-md-offset-1">
+    <div class="filter">
+      <select class="form-control" name="type" ng-model="logs.units" required>
+          <option ng-repeat="log in logs.types" ng-value="log.units">{{ log.name }}</option>
+      </select>
     </div>
+    <div class="pagination pull-right">
+      <button class="btn btn-default btn-outline" ng-click=""><i class="fa fa-download"></i> Download </button>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-10 col-md-offset-1">
+    <div class="card card-block log-line-container">
+    </div>
+  </div>
 </div>
 
 <!-- Offset the footer -->

webadmin/src/views/logs.js

@@ -4,22 +4,56 @@ angular.module('Application').controller('LogsController', ['$scope', '$location
     $scope.config = Client.getConfig();
     $scope.user = Client.getUserInfo();
 
-    $scope.logs = {
-        types: null,
-        selectedUrl: '' // index into types
-    };
+    $scope.logs = [];
+    $scope.selected = null;
+
+    function ab2str(buf) {
+        return String.fromCharCode.apply(null, new Uint16Array(buf));
+    }
 
     $scope.populateLogTypes = function () {
-        $scope.logs.types = [
-            { name: 'System (All)', url: Client.makeURL('/api/v1/cloudron/logs?units=all') },
-            { name: 'Box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') },
-            { name: 'Mail', url: Client.makeURL('/api/v1/cloudron/logs?units=mail') }
-        ];
+        $scope.logs.push({ name: 'System (All)', type: 'platform', units: 'all' });
+        $scope.logs.push({ name: 'Box', type: 'platform', units: 'box' });
+        $scope.logs.push({ name: 'Mail', type: 'platform', units: 'mail' });
 
         Client.getInstalledApps().forEach(function (app) {
-            $scope.logs.types.push({ name: app.fqdn, url: Client.makeURL('/api/v1/apps/' + app.id + '/logs') });
+            $scope.logs.types.push({ name: app.fqdn, type: 'app', id: app.id });
         });
     };
 
+    $scope.$watch('selected', function (newVal) {
+        if (!newVal) return;
+
+        if (newVal.type === 'platform') {
+            Client.getPlatformLogs(newVal.units, true, function (error, result) {
+                if (error) return console.error(error);
+
+                var logViewer = $('.log-line-container');
+                logViewer.empty();
+            });
+        } else {
+            Client.getAppLogs(newVal.id, true, function (error, result) {
+                if (error) return console.error(error);
+
+                var logViewer = $('.log-line-container');
+                logViewer.empty();
+
+                result.onmessage = function (e) {
+                    var data;
+
+                    try {
+                        data = JSON.parse(e.data);
+                    } catch (e) {
+                        return console.error(e);
+                    }
+
+                    var logLine = $('<div>');
+                    logLine.html(window.ansiToHTML(ab2str(data.message)));
+                    logViewer.append(logLine);
+                };
+            });
+        }
+    });
+
     Client.onReady($scope.populateLogTypes);
 }]);