feat(log-viewer): introduce the log viewer component (#1666)

app/docker/views/containers/edit/container.html

@@ -85,7 +85,7 @@
                 <td colspan="2">
                   <div class="btn-group" role="group" aria-label="...">
                     <a class="btn" type="button" ui-sref="docker.containers.container.stats({id: container.Id})"><i class="fa fa-area-chart space-right" aria-hidden="true"></i>Stats</a>
-                    <a class="btn" type="button" ui-sref="docker.containers.container.logs({id: container.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
+                    <a class="btn" type="button" ui-sref="docker.containers.container.logs({id: container.Id})"><i class="fa fa-file-text-o space-right" aria-hidden="true"></i>Logs</a>
                     <a class="btn" type="button" ui-sref="docker.containers.container.console({id: container.Id})"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a>
                     <a class="btn" type="button" ui-sref="docker.containers.container.inspect({id: container.Id})"><i class="fa fa-info-circle space-right" aria-hidden="true"></i>Inspect</a>
                   </div>

app/docker/views/containers/logs/containerLogsController.js

@@ -1,70 +1,71 @@
 angular.module('portainer.docker')
-.controller('ContainerLogsController', ['$scope', '$transition$', '$anchorScroll', 'ContainerLogs', 'Container', 'Notifications',
-function ($scope, $transition$, $anchorScroll, ContainerLogs, Container, Notifications) {
-  $scope.state = {};
-  $scope.state.displayTimestampsOut = false;
-  $scope.state.displayTimestampsErr = false;
-  $scope.stdout = '';
-  $scope.stderr = '';
-  $scope.tailLines = 2000;
+.controller('ContainerLogsController', ['$scope', '$transition$', '$interval', 'ContainerService', 'Notifications',
+function ($scope, $transition$, $interval, ContainerService, Notifications) {
+  $scope.state = {
+    refreshRate: 3,
+    lineCount: 2000
+  };
 
-  Container.get({id: $transition$.params().id}, function (d) {
-    $scope.container = d;
-  }, function (e) {
-    Notifications.error('Failure', e, 'Unable to retrieve container info');
+  $scope.changeLogCollection = function(logCollectionStatus) {
+    if (!logCollectionStatus) {
+      stopRepeater();
+    } else {
+      setUpdateRepeater();
+    }
+  };
+
+  $scope.$on('$destroy', function() {
+    stopRepeater();
   });
 
-  function getLogs() {
-    getLogsStdout();
-    getLogsStderr();
+  function stopRepeater() {
+    var repeater = $scope.repeater;
+    if (angular.isDefined(repeater)) {
+      $interval.cancel(repeater);
+      repeater = null;
+    }
   }
 
-  function getLogsStderr() {
-    ContainerLogs.get($transition$.params().id, {
-      stdout: 0,
-      stderr: 1,
-      timestamps: $scope.state.displayTimestampsErr,
-      tail: $scope.tailLines
-    }, function (data, status, headers, config) {
-      // Replace carriage returns with newlines to clean up output
-      data = data.replace(/[\r]/g, '\n');
-      // Strip 8 byte header from each line of output
-      data = data.substring(8);
-      data = data.replace(/\n(.{8})/g, '\n');
-      $scope.stderr = data;
+  function update(logs) {
+    $scope.logs = logs;
+  }
+
+  function setUpdateRepeater() {
+    var refreshRate = $scope.state.refreshRate;
+    $scope.repeater = $interval(function() {
+      ContainerService.logs($transition$.params().id, 1, 1, 0, $scope.state.lineCount)
+      .then(function success(data) {
+        $scope.logs = data;
+      })
+      .catch(function error(err) {
+        stopRepeater();
+        Notifications.error('Failure', err, 'Unable to retrieve container logs');
+      });
+    }, refreshRate * 1000);
+  }
+
+  function startLogPolling() {
+    ContainerService.logs($transition$.params().id, 1, 1, 0, $scope.state.lineCount)
+    .then(function success(data) {
+      $scope.logs = data;
+      setUpdateRepeater();
+    })
+    .catch(function error(err) {
+      stopRepeater();
+      Notifications.error('Failure', err, 'Unable to retrieve container logs');
     });
   }
 
-  function getLogsStdout() {
-    ContainerLogs.get($transition$.params().id, {
-      stdout: 1,
-      stderr: 0,
-      timestamps: $scope.state.displayTimestampsOut,
-      tail: $scope.tailLines
-    }, function (data, status, headers, config) {
-      // Replace carriage returns with newlines to clean up output
-      data = data.replace(/[\r]/g, '\n');
-      // Strip 8 byte header from each line of output
-      data = data.substring(8);
-      data = data.replace(/\n(.{8})/g, '\n');
-      $scope.stdout = data;
+  function initView() {
+    ContainerService.container($transition$.params().id)
+    .then(function success(data) {
+      $scope.container = data;
+      startLogPolling();
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve container information');
     });
   }
 
-  // initial call
-  getLogs();
-  var logIntervalId = window.setInterval(getLogs, 5000);
-
-  $scope.$on('$destroy', function () {
-    // clearing interval when view changes
-    clearInterval(logIntervalId);
-  });
-
-  $scope.toggleTimestampsOut = function () {
-    getLogsStdout();
-  };
-
-  $scope.toggleTimestampsErr = function () {
-    getLogsStderr();
-  };
+  initView();
 }]);

app/docker/views/containers/logs/containerlogs.html

@@ -5,50 +5,6 @@
   </rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-server"></i>
-        </div>
-        <div class="title">{{ container.Name|trimcontainername }}</div>
-        <div class="comment">Name</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-info-circle" title="Stdout logs"></rd-widget-header>
-      <rd-widget-taskbar>
-        <input type="checkbox" ng-model="state.displayTimestampsOut" id="displayAllTsOut" ng-change="toggleTimestampsOut()"/>
-        <label for="displayAllTsOut">Display timestamps</label>
-      </rd-widget-taskbar>
-      <rd-widget-body classes="no-padding">
-        <div class="panel-body">
-          <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-exclamation-triangle" title="Stderr logs"></rd-widget-header>
-      <rd-widget-taskbar>
-        <input type="checkbox" ng-model="state.displayTimestampsErr" id="displayAllTsErr" ng-change="toggleTimestampsErr()"/>
-        <label for="displayAllTsErr">Display timestamps</label>
-      </rd-widget-taskbar>
-      <rd-widget-body classes="no-padding">
-        <div class="panel-body">
-          <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
+<log-viewer
+  data="logs" ng-if="logs" log-collection-change="changeLogCollection"
+></log-viewer>

app/docker/views/services/edit/includes/tasks.html

@@ -6,5 +6,6 @@
     nodes="nodes"
     show-text-filter="true"
     show-slot-column="service.Mode !== 'global'"
+    show-logs-button="applicationState.endpoint.apiVersion >= 1.30"
   ></tasks-datatable>
 </div>

app/docker/views/services/edit/service.html

@@ -73,7 +73,7 @@
             </tr>
             <tr>
               <td colspan="2">
-                <a ng-if="applicationState.endpoint.apiVersion >= 1.30" class="btn btn-primary btn-sm" type="button" ui-sref="docker.services.service.logs({id: service.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Service logs</a>
+                <a ng-if="applicationState.endpoint.apiVersion >= 1.30" class="btn btn-primary btn-sm" type="button" ui-sref="docker.services.service.logs({id: service.Id})"><i class="fa fa-file-text-o space-right" aria-hidden="true"></i>Service logs</a>
                 <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.updateInProgress || isUpdating" ng-click="forceUpdateService(service)" button-spinner="state.updateInProgress" ng-if="applicationState.endpoint.apiVersion >= 1.25">
                   <span ng-hide="state.updateInProgress"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Update the service</span>
                   <span ng-show="state.updateInProgress">Update in progress...</span>

app/docker/views/services/logs/serviceLogsController.js

@@ -1,78 +1,69 @@
 angular.module('portainer.docker')
-.controller('ServiceLogsController', ['$scope', '$transition$', '$anchorScroll', 'ServiceLogs', 'Service',
-function ($scope, $transition$, $anchorScroll, ServiceLogs, Service) {
-  $scope.state = {};
-  $scope.state.displayTimestampsOut = false;
-  $scope.state.displayTimestampsErr = false;
-  $scope.stdout = '';
-  $scope.stderr = '';
-  $scope.tailLines = 2000;
+.controller('ServiceLogsController', ['$scope', '$transition$', '$interval', 'ServiceService', 'Notifications',
+function ($scope, $transition$, $interval, ServiceService, Notifications) {
+  $scope.state = {
+    refreshRate: 3,
+    lineCount: 2000
+  };
 
-  function getLogs() {
-    getLogsStdout();
-    getLogsStderr();
+  $scope.changeLogCollection = function(logCollectionStatus) {
+    if (!logCollectionStatus) {
+      stopRepeater();
+    } else {
+      setUpdateRepeater();
+    }
+  };
+
+  $scope.$on('$destroy', function() {
+    stopRepeater();
+  });
+
+  function stopRepeater() {
+    var repeater = $scope.repeater;
+    if (angular.isDefined(repeater)) {
+      $interval.cancel(repeater);
+      repeater = null;
+    }
   }
 
-  function getLogsStderr() {
-    ServiceLogs.get($transition$.params().id, {
-      stdout: 0,
-      stderr: 1,
-      timestamps: $scope.state.displayTimestampsErr,
-      tail: $scope.tailLines
-    }, function (data, status, headers, config) {
-      // Replace carriage returns with newlines to clean up output
-      data = data.replace(/[\r]/g, '\n');
-      // Strip 8 byte header from each line of output
-      data = data.substring(8);
-      data = data.replace(/\n(.{8})/g, '\n');
-      $scope.stderr = data;
-    });
+  function setUpdateRepeater() {
+    var refreshRate = $scope.state.refreshRate;
+    $scope.repeater = $interval(function() {
+      ServiceService.logs($transition$.params().id, 1, 1, 0, $scope.state.lineCount)
+      .then(function success(data) {
+        $scope.logs = data;
+      })
+      .catch(function error(err) {
+        stopRepeater();
+        Notifications.error('Failure', err, 'Unable to retrieve service logs');
+      });
+    }, refreshRate * 1000);
   }
 
-  function getLogsStdout() {
-    ServiceLogs.get($transition$.params().id, {
-      stdout: 1,
-      stderr: 0,
-      timestamps: $scope.state.displayTimestampsOut,
-      tail: $scope.tailLines
-    }, function (data, status, headers, config) {
-      // Replace carriage returns with newlines to clean up output
-      data = data.replace(/[\r]/g, '\n');
-      // Strip 8 byte header from each line of output
-      data = data.substring(8);
-      data = data.replace(/\n(.{8})/g, '\n');
-      $scope.stdout = data;
-    });
-  }
-
-  function getService() {
-    Service.get({id: $transition$.params().id}, function (d) {
-      $scope.service = d;
-    }, function (e) {
-      Notifications.error('Failure', e, 'Unable to retrieve service info');
+  function startLogPolling() {
+    ServiceService.logs($transition$.params().id, 1, 1, 0, $scope.state.lineCount)
+    .then(function success(data) {
+      $scope.logs = data;
+      console.log(JSON.stringify(data, null, 4));
+      setUpdateRepeater();
+    })
+    .catch(function error(err) {
+      stopRepeater();
+      Notifications.error('Failure', err, 'Unable to retrieve service logs');
     });
   }
 
   function initView() {
-    getService();
-    getLogs();
-
-    var logIntervalId = window.setInterval(getLogs, 5000);
-
-    $scope.$on('$destroy', function () {
-      // clearing interval when view changes
-      clearInterval(logIntervalId);
+    ServiceService.service($transition$.params().id)
+    .then(function success(data) {
+      $scope.service = data;
+      startLogPolling();
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve service information');
     });
 
-    $scope.toggleTimestampsOut = function () {
-      getLogsStdout();
-    };
-
-    $scope.toggleTimestampsErr = function () {
-      getLogsStderr();
-    };
   }
 
   initView();
-
 }]);

app/docker/views/services/logs/servicelogs.html

@@ -1,54 +1,10 @@
 <rd-header>
   <rd-header-title title="Service logs"></rd-header-title>
   <rd-header-content>
-    <a ui-sref="docker.services">Services</a> > <a ui-sref="docker.services.service({id: service.ID})">{{ service.Spec.Name }}</a> > Logs
+    <a ui-sref="docker.services">Services</a> > <a ui-sref="docker.services.service({id: service.ID})">{{ service.Name }}</a> &gt; Logs
   </rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon grey pull-left">
-          <i class="fa fa-list-alt"></i>
-        </div>
-        <div class="title">{{ service.Spec.Name }}</div>
-        <div class="comment">Name</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-info-circle" title="Stdout logs"></rd-widget-header>
-      <rd-widget-taskbar>
-        <input type="checkbox" ng-model="state.displayTimestampsOut" id="displayAllTsOut" ng-change="toggleTimestampsOut()"/>
-        <label for="displayAllTsOut">Display timestamps</label>
-      </rd-widget-taskbar>
-      <rd-widget-body classes="no-padding">
-        <div class="panel-body">
-          <pre id="stdoutLog" class="pre-scrollable pre-x-scrollable">{{stdout}}</pre>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-exclamation-triangle" title="Stderr logs"></rd-widget-header>
-      <rd-widget-taskbar>
-        <input type="checkbox" ng-model="state.displayTimestampsErr" id="displayAllTsErr" ng-change="toggleTimestampsErr()"/>
-        <label for="displayAllTsErr">Display timestamps</label>
-      </rd-widget-taskbar>
-      <rd-widget-body classes="no-padding">
-        <div class="panel-body">
-          <pre id="stderrLog" class="pre-scrollable pre-x-scrollable">{{stderr}}</pre>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
+<log-viewer
+  data="logs" ng-if="logs" log-collection-change="changeLogCollection"
+></log-viewer>

app/docker/views/stacks/edit/stack.html

@@ -40,6 +40,7 @@
       nodes="nodes"
       show-text-filter="true"
       show-slot-column="true"
+      show-logs-button="applicationState.endpoint.apiVersion >= 1.30"
     ></tasks-datatable>
   </div>
 </div>

app/docker/views/tasks/edit/task.html

@@ -44,6 +44,9 @@
               <td>Container ID</td>
               <td>{{ task.Status.ContainerStatus.ContainerID }}</td>
             </tr>
+            <tr ng-if="applicationState.endpoint.apiVersion >= 1.30" >
+              <td colspan="2"><a class="btn btn-primary btn-sm" type="button" ui-sref="docker.tasks.task.logs({id: task.Id})"><i class="fa fa-file-text-o space-right" aria-hidden="true"></i>Task logs</a></td>
+            </tr>
           </tbody>
         </table>
       </rd-widget-body>

app/docker/views/tasks/edit/taskController.js

@@ -1,16 +1,16 @@
 angular.module('portainer.docker')
-.controller('TaskController', ['$scope', '$transition$', 'TaskService', 'Service', 'Notifications',
-function ($scope, $transition$, TaskService, Service, Notifications) {
+.controller('TaskController', ['$scope', '$transition$', 'TaskService', 'ServiceService', 'Notifications',
+function ($scope, $transition$, TaskService, ServiceService, Notifications) {
 
   function initView() {
     TaskService.task($transition$.params().id)
     .then(function success(data) {
       var task = data;
       $scope.task = task;
-      return Service.get({ id: task.ServiceId }).$promise;
+      return ServiceService.service(task.ServiceId);
     })
     .then(function success(data) {
-      var service = new ServiceViewModel(data);
+      var service = data;
       $scope.service = service;
     })
     .catch(function error(err) {

app/docker/views/tasks/logs/taskLogsController.js

@@ -0,0 +1,73 @@
+angular.module('portainer.docker')
+.controller('TaskLogsController', ['$scope', '$transition$', '$interval', 'TaskService', 'ServiceService', 'Notifications',
+function ($scope, $transition$, $interval, TaskService, ServiceService, Notifications) {
+  $scope.state = {
+    refreshRate: 3,
+    lineCount: 2000
+  };
+
+  $scope.changeLogCollection = function(logCollectionStatus) {
+    if (!logCollectionStatus) {
+      stopRepeater();
+    } else {
+      setUpdateRepeater();
+    }
+  };
+
+  $scope.$on('$destroy', function() {
+    stopRepeater();
+  });
+
+  function stopRepeater() {
+    var repeater = $scope.repeater;
+    if (angular.isDefined(repeater)) {
+      $interval.cancel(repeater);
+      repeater = null;
+    }
+  }
+
+  function setUpdateRepeater() {
+    var refreshRate = $scope.state.refreshRate;
+    $scope.repeater = $interval(function() {
+      TaskService.logs($transition$.params().id, 1, 1, 0, $scope.state.lineCount)
+      .then(function success(data) {
+        $scope.logs = data;
+      })
+      .catch(function error(err) {
+        stopRepeater();
+        Notifications.error('Failure', err, 'Unable to retrieve task logs');
+      });
+    }, refreshRate * 1000);
+  }
+
+  function startLogPolling() {
+    TaskService.logs($transition$.params().id, 1, 1, 0, $scope.state.lineCount)
+    .then(function success(data) {
+      $scope.logs = data;
+      setUpdateRepeater();
+    })
+    .catch(function error(err) {
+      stopRepeater();
+      Notifications.error('Failure', err, 'Unable to retrieve task logs');
+    });
+  }
+
+  function initView() {
+    TaskService.task($transition$.params().id)
+    .then(function success(data) {
+      var task = data;
+      $scope.task = task;
+      return ServiceService.service(task.ServiceId);
+    })
+    .then(function success(data) {
+      var service = data;
+      $scope.service = service;
+      startLogPolling();
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve task details');
+    });
+  }
+
+  initView();
+}]);

app/docker/views/tasks/logs/tasklogs.html

@@ -0,0 +1,10 @@
+<rd-header>
+  <rd-header-title title="Task details"></rd-header-title>
+  <rd-header-content ng-if="task && service">
+    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id })">{{ service.Name }}</a> &gt; <a ui-sref="docker.tasks.task({id: task.Id })">{{ task.Id }}</a> &gt; Logs
+  </rd-header-content>
+</rd-header>
+
+<log-viewer
+  data="logs" ng-if="logs" log-collection-change="changeLogCollection"
+></log-viewer>