Merge branch 'develop' into feat1654-colorize-logs

app/docker/components/container-capabilities/containerCapabilities.html

@@ -3,17 +3,18 @@
     Container capabilities
   </div>
   <div class="form-group">
-    <div ng-repeat="cap in $ctrl.capabilities">
-      <div class="col-xs-8 col-sm-3 col-md-2">
-        <label for="capability" class="control-label text-left">
-          {{ cap.capability }}
-          <portainer-tooltip position="bottom" message="{{ cap.description }}"></portainer-tooltip>
-        </label>
+    <div ng-repeat="cap in $ctrl.capabilities" class="col-xs-12 col-sm-6 col-md-4">
+      <div class="row">
+        <div class="col-xs-8">
+          <label for="capability" class="control-label text-left" style="display: flex; padding: 0;">
+            {{ cap.capability }}
+            <portainer-tooltip position="bottom" message="{{ cap.description }}"></portainer-tooltip>
+          </label>
+        </div>
+        <div class="col-xs-4">
+          <label class="switch"> <input type="checkbox" name="capability" ng-model="cap.allowed" /><i></i> </label>
+        </div>
       </div>
-      <div class="col-xs-4 col-sm-2 col-md-1">
-        <label class="switch" style="margin-left: 20px;"> <input type="checkbox" name="capability" ng-model="cap.allowed" /><i></i> </label>
-      </div>
-      <div class="col-xs-0 col-sm-1 col-md-1"> </div>
     </div>
   </div>
 </form>

app/docker/components/datatables/containers-datatable/containersDatatable.html

@@ -4,100 +4,8 @@
       <div class="toolBar">
         <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
         <div class="settings">
-          <span
-            class="setting"
-            ng-class="{ 'setting-active': $ctrl.columnVisibility.state.open }"
-            uib-dropdown
-            dropdown-append-to-body
-            auto-close="disabled"
-            is-open="$ctrl.columnVisibility.state.open"
-          >
-            <span uib-dropdown-toggle><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
-            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader">
-                  Show / Hide Columns
-                </div>
-                <div class="menuContent">
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_state"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.state.display"
-                    />
-                    <label for="col_vis_state" ng-bind="$ctrl.columnVisibility.columns.state.label"></label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_actions"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.actions.display"
-                    />
-                    <label for="col_vis_actions" ng-bind="$ctrl.columnVisibility.columns.actions.label"></label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_stack"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.stack.display"
-                    />
-                    <label for="col_vis_stack" ng-bind="$ctrl.columnVisibility.columns.stack.label"></label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_image"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.image.display"
-                    />
-                    <label for="col_vis_image" ng-bind="$ctrl.columnVisibility.columns.image.label"></label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_created"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.created.display"
-                    />
-                    <label for="col_vis_created" ng-bind="$ctrl.columnVisibility.columns.created.label"></label>
-                  </div>
-                  <div class="md-checkbox" ng-if="$ctrl.showHostColumn">
-                    <input
-                      id="col_vis_host"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.host.display"
-                    />
-                    <label for="col_vis_host" ng-bind="$ctrl.columnVisibility.columns.host.label"></label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_ports"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.ports.display"
-                    />
-                    <label for="col_vis_ports" ng-bind="$ctrl.columnVisibility.columns.ports.label"></label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="col_vis_ownership"
-                      ng-change="$ctrl.onColumnVisibilityChange($ctrl.columnVisibility)"
-                      type="checkbox"
-                      ng-model="$ctrl.columnVisibility.columns.ownership.display"
-                    />
-                    <label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.label"></label>
-                  </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
-                </div>
-              </div>
-            </div>
-          </span>
+          <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
+
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
@@ -268,6 +176,13 @@
                   Created
                 </a>
               </th>
+              <th ng-show="$ctrl.columnVisibility.columns.ip.display">
+                <a ng-click="$ctrl.changeOrderBy('IP')">
+                  IP Address
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
               <th ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">
                 <a ng-click="$ctrl.changeOrderBy('NodeName')">
                   Host
@@ -342,6 +257,7 @@
               <td ng-show="$ctrl.columnVisibility.columns.created.display">
                 {{ item.Created | getisodatefromtimestamp }}
               </td>
+              <td ng-show="$ctrl.columnVisibility.columns.ip.display">{{ item.IP ? item.IP : '-' }}</td>
               <td ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">{{ item.NodeName ? item.NodeName : '-' }}</td>
               <td ng-show="$ctrl.columnVisibility.columns.ports.display">
                 <a

app/docker/components/datatables/containers-datatable/containersDatatableController.js

@@ -36,9 +36,6 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
     };
 
     this.columnVisibility = {
-      state: {
-        open: false,
-      },
       columns: {
         state: {
           label: 'State',
@@ -60,6 +57,10 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
           label: 'Created',
           display: true,
         },
+        ip: {
+          label: 'IP Address',
+          display: true,
+        },
         host: {
           label: 'Host',
           display: true,
@@ -75,9 +76,11 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
       },
     };
 
-    this.onColumnVisibilityChange = function (columnVisibility) {
-      DatatableService.setColumnVisibilitySettings(this.tableKey, columnVisibility);
-    };
+    this.onColumnVisibilityChange = onColumnVisibilityChange.bind(this);
+    function onColumnVisibilityChange(columns) {
+      this.columnVisibility.columns = columns;
+      DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
+    }
 
     this.onSelectionChanged = function () {
       this.updateSelectionState();
@@ -199,7 +202,6 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
       var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
       if (storedColumnVisibility !== null) {
         this.columnVisibility = storedColumnVisibility;
-        this.columnVisibility.state.open = false;
       }
     };
   },

app/docker/components/datatables/services-datatable/servicesDatatableController.js

@@ -66,6 +66,13 @@ angular.module('portainer.docker').controller('ServicesDatatableController', [
       }
     };
 
+    this.onDataRefresh = function () {
+      var storedExpandedItems = DatatableService.getDataTableExpandedItems(this.tableKey);
+      if (storedExpandedItems !== null) {
+        this.expandItems(storedExpandedItems);
+      }
+    };
+
     this.$onInit = function () {
       this.setDefaults();
       this.prepareTableFromDataset();

app/docker/components/dockerSidebarContent/dockerSidebarContent.html

@@ -37,7 +37,15 @@
 </li>
 <li class="sidebar-list" ng-if="$ctrl.swarmManagement">
   <a ui-sref="docker.swarm({endpointId: $ctrl.endpointId})" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group fa-fw"></span></a>
+
+  <div class="sidebar-sublist" ng-if="$ctrl.adminAccess && ['docker.featuresConfiguration', 'docker.swarm'].includes($ctrl.currentRouteName)">
+    <a ui-sref="docker.featuresConfiguration({endpointId: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
+  </div>
 </li>
 <li class="sidebar-list" ng-if="$ctrl.standaloneManagement">
   <a ui-sref="docker.host({endpointId: $ctrl.endpointId})" ui-sref-active="active">Host <span class="menu-icon fa fa-th fa-fw"></span></a>
+
+  <div class="sidebar-sublist" ng-if="$ctrl.adminAccess && ['docker.featuresConfiguration', 'docker.host'].includes($ctrl.currentRouteName)">
+    <a ui-sref="docker.featuresConfiguration({endpointId: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
+  </div>
 </li>

app/docker/components/imageRegistry/por-image-registry-rate-limits.controller.js

@@ -0,0 +1,31 @@
+export default class porImageRegistryContainerController {
+  /* @ngInject */
+  constructor(EndpointHelper, DockerHubService, Notifications) {
+    this.EndpointHelper = EndpointHelper;
+    this.DockerHubService = DockerHubService;
+    this.Notifications = Notifications;
+
+    this.pullRateLimits = null;
+  }
+
+  $onChanges({ isDockerHubRegistry }) {
+    if (isDockerHubRegistry && isDockerHubRegistry.currentValue) {
+      this.fetchRateLimits();
+    }
+  }
+
+  async fetchRateLimits() {
+    this.pullRateLimits = null;
+    if (this.EndpointHelper.isAgentEndpoint(this.endpoint) || this.EndpointHelper.isLocalEndpoint(this.endpoint)) {
+      try {
+        this.pullRateLimits = await this.DockerHubService.checkRateLimits(this.endpoint);
+        this.setValidity(this.pullRateLimits.remaining >= 0);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed loading DockerHub pull rate limits', e);
+      }
+    } else {
+      this.setValidity(true);
+    }
+  }
+}

app/docker/components/imageRegistry/por-image-registry-rate-limits.html

@@ -0,0 +1,34 @@
+<div class="form-group" ng-if="$ctrl.isDockerHubRegistry && $ctrl.pullRateLimits">
+  <div class="col-sm-12 small">
+    <div ng-if="$ctrl.pullRateLimits.remaining > 0" class="text-muted">
+      <i class="fa fa-exclamation-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+      <span ng-if="$ctrl.isAuthenticated">
+        You are currently using a free account to pull images from DockerHub and will be limited to 200 pulls every 6 hours. Remaining pulls:
+        <span style="font-weight: bold;">{{ $ctrl.pullRateLimits.remaining }}/{{ $ctrl.pullRateLimits.limit }}</span>
+      </span>
+      <span ng-if="!$ctrl.isAuthenticated">
+        <span ng-if="$ctrl.isAdmin">
+          You are currently using an anonymous account to pull images from DockerHub and will be limited to 100 pulls every 6 hours. You can configure DockerHub authentication in
+          the
+          <a ui-sref="portainer.registries">Registries View</a>. Remaining pulls:
+          <span style="font-weight: bold;">{{ $ctrl.pullRateLimits.remaining }}/{{ $ctrl.pullRateLimits.limit }}</span>
+        </span>
+        <span ng-if="!$ctrl.isAdmin">
+          You are currently using an anonymous account to pull images from DockerHub and will be limited to 100 pulls every 6 hours. Contact your administrator to configure
+          DockerHub authentication. Remaining pulls: <span style="font-weight: bold;">{{ $ctrl.pullRateLimits.remaining }}/{{ $ctrl.pullRateLimits.limit }}</span>
+        </span>
+      </span>
+    </div>
+    <div ng-if="$ctrl.pullRateLimits.remaining <= 0" class="text-warning">
+      <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+      <span ng-if="$ctrl.isAuthenticated">
+        Your authorized pull count quota as a free user is now exceeded.
+        <span ng-transclude="rateLimitExceeded">You will not be able to pull any image from the DockerHub registry.</span>
+      </span>
+      <span ng-if="!$ctrl.isAuthenticated">
+        Your authorized pull count quota as an anonymous user is now exceeded.
+        <span ng-transclude="rateLimitExceeded">You will not be able to pull any image from the DockerHub registry.</span>
+      </span>
+    </div>
+  </div>
+</div>

app/docker/components/imageRegistry/por-image-registry-rate-limits.js

@@ -0,0 +1,18 @@
+import angular from 'angular';
+
+import controller from './por-image-registry-rate-limits.controller';
+
+angular.module('portainer.docker').component('porImageRegistryRateLimits', {
+  bindings: {
+    endpoint: '<',
+    setValidity: '<',
+    isAdmin: '<',
+    isDockerHubRegistry: '<',
+    isAuthenticated: '<',
+  },
+  controller,
+  transclude: {
+    rateLimitExceeded: '?porImageRegistryRateLimitExceeded',
+  },
+  templateUrl: './por-image-registry-rate-limits.html',
+});

app/docker/components/imageRegistry/por-image-registry.controller.js

@@ -48,7 +48,11 @@ class porImageRegistryController {
     this.availableImages = images;
   }
 
-  onRegistryChange() {
+  isDockerHubRegistry() {
+    return this.model.UseRegistry && this.model.Registry.Name === 'DockerHub';
+  }
+
+  async onRegistryChange() {
     this.prepareAutocomplete();
     if (this.model.Registry.Type === RegistryTypes.GITLAB && this.model.Image) {
       this.model.Image = _.replace(this.model.Image, this.model.Registry.Gitlab.ProjectPath, '');

app/docker/components/imageRegistry/por-image-registry.html

@@ -0,0 +1,97 @@
+<!-- use registry -->
+<div ng-if="$ctrl.model.UseRegistry">
+  <div class="form-group">
+    <label for="image_registry" class="control-label text-left" ng-class="$ctrl.labelClass">
+      Registry
+    </label>
+    <div ng-class="$ctrl.inputClass">
+      <select
+        ng-options="registry as registry.Name for registry in $ctrl.availableRegistries track by registry.Name"
+        ng-model="$ctrl.model.Registry"
+        id="image_registry"
+        selected-item-id="ctrl.selectedItemId"
+        class="form-control"
+      ></select>
+    </div>
+    <label for="image_name" ng-class="$ctrl.labelClass" class="margin-sm-top control-label text-left">Image</label>
+    <div ng-class="$ctrl.inputClass" class="margin-sm-top">
+      <div class="input-group">
+        <span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
+        <input
+          type="text"
+          class="form-control"
+          aria-describedby="registry-name"
+          uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
+          ng-model="$ctrl.model.Image"
+          name="image_name"
+          placeholder="e.g. myImage:myTag"
+          ng-change="$ctrl.onImageChange()"
+          required
+        />
+        <span ng-if="$ctrl.isDockerHubRegistry()" class="input-group-btn">
+          <a
+            href="https://hub.docker.com/search?type=image&q={{ $ctrl.model.Image | trimshasum | trimversiontag }}"
+            class="btn btn-default"
+            title="Search image on Docker Hub"
+            target="_blank"
+          >
+            <i class="fab fa-docker"></i> Search
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+  <!-- ! use registry -->
+  <!-- don't use registry -->
+  <div ng-if="!$ctrl.model.UseRegistry">
+    <div class="form-group">
+      <span class="small">
+        <p class="text-muted" style="margin-left: 15px;">
+          <i class="fa fa-exclamation-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+          When using advanced mode, image and repository <b>must be</b> publicly available.
+        </p>
+      </span>
+      <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left">Image </label>
+      <div ng-class="$ctrl.inputClass">
+        <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/myImage:myTag" required />
+      </div>
+    </div>
+  </div>
+  <!-- ! don't use registry -->
+  <!-- info message -->
+  <div class="form-group" ng-show="$ctrl.form.image_name.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="$ctrl.form.image_name.$error">
+        <p ng-message="required">
+          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required.
+          <span ng-if="$ctrl.canPull">Tag must be specified otherwise Portainer will pull all tags associated to the image.</span>
+        </p>
+      </div>
+    </div>
+  </div>
+  <!-- ! info message -->
+  <div class="form-group">
+    <div class="col-sm-12">
+      <p>
+        <a class="small interactive" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
+          <i class="fa fa-database space-right" aria-hidden="true"></i> Simple mode
+        </a>
+        <a class="small interactive" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
+          <i class="fa fa-globe space-right" aria-hidden="true"></i> Advanced mode
+        </a>
+      </p>
+    </div>
+  </div>
+
+  <div ng-transclude></div>
+
+  <por-image-registry-rate-limits
+    ng-show="$ctrl.checkRateLimits"
+    is-docker-hub-registry="$ctrl.isDockerHubRegistry()"
+    endpoint="$ctrl.endpoint"
+    set-validity="$ctrl.setValidity"
+    is-authenticated="$ctrl.model.Registry.Authentication"
+    is-admin="$ctrl.isAdmin"
+  >
+  </por-image-registry-rate-limits>
+</div>

app/docker/components/imageRegistry/por-image-registry.js

@@ -1,5 +1,5 @@
 angular.module('portainer.docker').component('porImageRegistry', {
-  templateUrl: './porImageRegistry.html',
+  templateUrl: './por-image-registry.html',
   controller: 'porImageRegistryController',
   bindings: {
     model: '=', // must be of type PorImageRegistryModel
@@ -7,9 +7,14 @@ angular.module('portainer.docker').component('porImageRegistry', {
     autoComplete: '<',
     labelClass: '@',
     inputClass: '@',
+    endpoint: '<',
+    isAdmin: '<',
+    checkRateLimits: '<',
     onImageChange: '&',
+    setValidity: '<',
   },
   require: {
     form: '^form',
   },
+  transclude: true,
 });

app/docker/components/imageRegistry/porImageRegistry.html

@@ -1,72 +0,0 @@
-<!-- use registry -->
-<div ng-if="$ctrl.model.UseRegistry">
-  <div class="form-group">
-    <label for="image_registry" class="control-label text-left" ng-class="$ctrl.labelClass">
-      Registry
-    </label>
-    <div ng-class="$ctrl.inputClass">
-      <select
-        ng-options="registry as registry.Name for registry in $ctrl.availableRegistries track by registry.Name"
-        ng-model="$ctrl.model.Registry"
-        id="image_registry"
-        selected-item-id="ctrl.selectedItemId"
-        class="form-control"
-      ></select>
-    </div>
-    <label for="image_name" ng-class="$ctrl.labelClass" class="margin-sm-top control-label text-left">Image</label>
-    <div ng-class="$ctrl.inputClass" class="margin-sm-top">
-      <div class="input-group">
-        <span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
-        <input
-          type="text"
-          class="form-control"
-          aria-describedby="registry-name"
-          uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
-          ng-model="$ctrl.model.Image"
-          name="image_name"
-          placeholder="e.g. myImage:myTag"
-          ng-change="$ctrl.onImageChange()"
-          required
-        />
-      </div>
-    </div>
-  </div>
-</div>
-<!-- ! use registry -->
-<!-- don't use registry -->
-<div ng-if="!$ctrl.model.UseRegistry">
-  <div class="form-group">
-    <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left"
-      >Image
-      <portainer-tooltip position="bottom" message="Image and repository should be publicly available."></portainer-tooltip>
-    </label>
-    <div ng-class="$ctrl.inputClass">
-      <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/myImage:myTag" required />
-    </div>
-  </div>
-</div>
-<!-- ! don't use registry -->
-<!-- info message -->
-<div class="form-group" ng-show="$ctrl.form.image_name.$invalid">
-  <div class="col-sm-12 small text-warning">
-    <div ng-messages="$ctrl.form.image_name.$error">
-      <p ng-message="required"
-        ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required.
-        <span ng-if="$ctrl.canPull">Tag must be specified otherwise Portainer will pull all tags associated to the image.</span></p
-      >
-    </div>
-  </div>
-</div>
-<!-- ! info message -->
-<div class="form-group">
-  <div class="col-sm-12">
-    <p>
-      <a class="small interactive" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
-        <i class="fa fa-database space-right" aria-hidden="true"></i> Simple mode
-      </a>
-      <a class="small interactive" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
-        <i class="fa fa-globe space-right" aria-hidden="true"></i> Advanced mode
-      </a>
-    </p>
-  </div>
-</div>

app/docker/components/log-viewer/log-viewer.js

@@ -7,5 +7,6 @@ angular.module('portainer.docker').component('logViewer', {
     logCollectionChange: '<',
     sinceTimestamp: '=',
     lineCount: '=',
+    resourceName: '<',
   },
 });

app/docker/components/log-viewer/logViewer.html

@@ -67,6 +67,7 @@
               Actions
             </label>
             <div class="col-sm-11">
+              <button class="btn btn-primary btn-sm" type="button" ng-click="$ctrl.downloadLogs()" style="margin-left: 0;"><i class="fa fa-download"></i> Download logs</button>
               <button
                 class="btn btn-primary btn-sm"
                 ng-click="$ctrl.copy()"

app/docker/components/log-viewer/logViewerController.js

@@ -1,8 +1,11 @@
 import moment from 'moment';
+import _ from 'lodash-es';
 
 angular.module('portainer.docker').controller('LogViewerController', [
   'clipboard',
-  function (clipboard) {
+  'Blob',
+  'FileSaver',
+  function (clipboard, Blob, FileSaver) {
     this.state = {
       availableSinceDatetime: [
         { desc: 'Last day', value: moment().subtract(1, 'days').format() },
@@ -43,5 +46,10 @@ angular.module('portainer.docker').controller('LogViewerController', [
         this.state.selectedLines.splice(idx, 1);
       }
     };
+
+    this.downloadLogs = function () {
+      const data = new Blob([_.reduce(this.state.filteredLogs, (acc, log) => acc + '\n' + log, '')]);
+      FileSaver.saveAs(data, this.resourceName + '_logs.txt');
+    };
   },
 ]);