chore(project): add prettier for code format (#3645)

* chore(project): install prettier and lint-staged

* chore(project): apply prettier to html too

* chore(project): git ignore eslintcache

* chore(project): add a comment about format script

* chore(prettier): update printWidth

* chore(prettier): remove useTabs option

* chore(prettier): add HTML validation

* refactor(prettier): fix closing tags

* feat(prettier): define angular parser for html templates

* style(prettier): run prettier on codebase

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

.gitignore

@@ -5,3 +5,4 @@ portainer-checksum.txt
 api/cmd/portainer/portainer*
 .tmp
 .vscode
+.eslintcache

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 180,
+  "singleQuote": true,
+  "htmlWhitespaceSensitivity": "strict",
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

app/__module.js

@@ -32,12 +32,12 @@ angular.module('portainer', [
   'portainer.extensions',
   'portainer.integrations',
   'rzModule',
-  'moment-picker'
+  'moment-picker',
 ]);
 
 if (require) {
   var req = require.context('./', true, /^(.*\.(js$))[^.]*$/im);
-  req.keys().forEach(function(key) {
+  req.keys().forEach(function (key) {
     req(key);
   });
 }

app/agent/components/file-uploader/file-uploader-controller.js

@@ -4,7 +4,7 @@ angular.module('portainer.agent').controller('FileUploaderController', [
     var ctrl = this;
 
     ctrl.state = {
-      uploadInProgress: false
+      uploadInProgress: false,
     };
 
     ctrl.onFileSelected = onFileSelected;
@@ -19,5 +19,5 @@ angular.module('portainer.agent').controller('FileUploaderController', [
         ctrl.state.uploadInProgress = false;
       });
     }
-  }
+  },
 ]);

app/agent/components/file-uploader/file-uploader.html

@@ -1,6 +1,3 @@
-<button 
+<button ngf-select="$ctrl.onFileSelected($file)" class="btn ng-scope" button-spinner="$ctrl.state.uploadInProgress">
-  ngf-select="$ctrl.onFileSelected($file)"
+  <i style="margin: 0;" class="fa fa-upload" ng-if="!$ctrl.state.uploadInProgress"></i>
-  class="btn ng-scope"
-  button-spinner="$ctrl.state.uploadInProgress">
-  <i style="margin:0" class="fa fa-upload" ng-if="!$ctrl.state.uploadInProgress"></i>
 </button>

app/agent/components/file-uploader/file-uploader.js

@@ -2,6 +2,6 @@ angular.module('portainer.agent').component('fileUploader', {
   templateUrl: './file-uploader.html',
   controller: 'FileUploaderController',
   bindings: {
-    uploadFile: '<onFileSelected'
+    uploadFile: '<onFileSelected',
-  }
+  },
 });

app/agent/components/files-datatable/files-datatable.html

@@ -1,14 +1,20 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{$ctrl.titleIcon}}" title-text="{{ $ctrl.titleText }}">
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" title-text="{{ $ctrl.titleText }}">
-       <file-uploader authorization="DockerAgentBrowsePut" ng-if="$ctrl.isUploadAllowed" on-file-selected="$ctrl.onFileSelectedForUpload">
+      <file-uploader authorization="DockerAgentBrowsePut" ng-if="$ctrl.isUploadAllowed" on-file-selected="($ctrl.onFileSelectedForUpload)"> </file-uploader>
-       </file-uploader>
     </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-model-options="{ debounce: 300 }"
+        <input
-          ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-model-options="{ debounce: 300 }"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+        />
       </div>
       <div class="table-responsive">
         <table class="table">
@@ -43,36 +49,33 @@
           <tbody>
             <tr ng-if="!$ctrl.isRoot">
               <td colspan="4">
-                <a ng-click="$ctrl.goToParent()"><i class="fa fa-level-up-alt space-right"></i>Go
+                <a ng-click="$ctrl.goToParent()"><i class="fa fa-level-up-alt space-right"></i>Go to parent</a>
-                  to parent</a>
               </td>
             </tr>
             <tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
               <td>
                 <span ng-if="item.edit">
-                  <input class="input-sm" type="text" ng-model="item.newName"
+                  <input
-                    on-enter-key="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"
+                    class="input-sm"
-                    auto-focus />
+                    type="text"
+                    ng-model="item.newName"
+                    on-enter-key="$ctrl.rename({ name: item.Name, newName: item.newName }); item.edit = false"
+                    auto-focus
+                  />
                   <a class="interactive" ng-click="item.edit = false;"><i class="fa fa-times"></i></a>
-                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><i
+                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><i class="fa fa-check-square"></i></a>
-                      class="fa fa-check-square"></i></a>
                 </span>
                 <span ng-if="!item.edit && item.Dir">
-                  <a ng-click="$ctrl.browse({name: item.Name})"><i class="fa fa-folder space-right"
+                  <a ng-click="$ctrl.browse({name: item.Name})"><i class="fa fa-folder space-right" aria-hidden="true"></i>{{ item.Name }}</a>
-                      aria-hidden="true"></i>{{ item.Name }}</a>
-                </span>
-                <span ng-if="!item.edit && !item.Dir">
-                  <i class="fa fa-file space-right" aria-hidden="true"></i>{{
-                  item.Name }}
                 </span>
+                <span ng-if="!item.edit && !item.Dir"> <i class="fa fa-file space-right" aria-hidden="true"></i>{{ item.Name }} </span>
               </td>
               <td>{{ item.Size | humansize }}</td>
               <td>
                 {{ item.ModTime | getisodatefromtimestamp }}
               </td>
               <td>
-                <btn authorization="DockerAgentBrowseGet" class="btn btn-xs btn-primary space-right" ng-click="$ctrl.download({ name: item.Name })"
+                <btn authorization="DockerAgentBrowseGet" class="btn btn-xs btn-primary space-right" ng-click="$ctrl.download({ name: item.Name })" ng-if="!item.Dir">
-                  ng-if="!item.Dir">
                   <i class="fa fa-download" aria-hidden="true"></i> Download
                 </btn>
                 <btn authorization="DockerAgentBrowseRename" class="btn btn-xs btn-primary space-right" ng-click="item.newName = item.Name; item.edit = true">

app/agent/components/files-datatable/files-datatable.js

@@ -17,6 +17,6 @@ angular.module('portainer.agent').component('filesDatatable', {
     delete: '&',
 
     isUploadAllowed: '<',
-    onFileSelectedForUpload: '<'
+    onFileSelectedForUpload: '<',
-  }
+  },
 });

app/agent/components/host-browser/host-browser-controller.js

@@ -1,12 +1,15 @@
 import _ from 'lodash-es';
 
 angular.module('portainer.agent').controller('HostBrowserController', [
-  'HostBrowserService', 'Notifications', 'FileSaver', 'ModalService',
+  'HostBrowserService',
+  'Notifications',
+  'FileSaver',
+  'ModalService',
   function HostBrowserController(HostBrowserService, Notifications, FileSaver, ModalService) {
     var ctrl = this;
     var ROOT_PATH = '/host';
     ctrl.state = {
-      path: ROOT_PATH
+      path: ROOT_PATH,
     };
 
     ctrl.goToParent = goToParent;
@@ -21,7 +24,7 @@ angular.module('portainer.agent').controller('HostBrowserController', [
 
     function getRelativePath(path) {
       path = path || ctrl.state.path;
-      var rootPathRegex = new RegExp('^' + ROOT_PATH + '\/?');
+      var rootPathRegex = new RegExp('^' + ROOT_PATH + '/?');
       var relativePath = path.replace(rootPathRegex, '/');
       return relativePath;
     }
@@ -71,7 +74,7 @@ angular.module('portainer.agent').controller('HostBrowserController', [
       HostBrowserService.get(filePath)
         .then(function onFileReceived(data) {
           var downloadData = new Blob([data.file], {
-            type: 'text/plain;charset=utf-8'
+            type: 'text/plain;charset=utf-8',
           });
           FileSaver.saveAs(downloadData, file);
         })
@@ -83,15 +86,12 @@ angular.module('portainer.agent').controller('HostBrowserController', [
     function confirmDeleteFile(name) {
       var filePath = buildPath(ctrl.state.path, name);
 
-      ModalService.confirmDeletion(
+      ModalService.confirmDeletion('Are you sure that you want to delete ' + getRelativePath(filePath) + ' ?', function onConfirm(confirmed) {
-        'Are you sure that you want to delete ' + getRelativePath(filePath) + ' ?',
-        function onConfirm(confirmed) {
         if (!confirmed) {
           return;
         }
         return deleteFile(filePath);
-        }
+      });
-      );
     }
 
     function deleteFile(path) {
@@ -145,5 +145,5 @@ angular.module('portainer.agent').controller('HostBrowserController', [
     function refreshList() {
       getFilesForPath(ctrl.state.path);
     }
-  }
+  },
 ]);

app/agent/components/host-browser/host-browser.html

@@ -1,6 +1,8 @@
 <files-datatable
-  title-text="Host browser - {{$ctrl.getRelativePath()}}" title-icon="fa-file"
+  title-text="Host browser - {{ $ctrl.getRelativePath() }}"
-  dataset="$ctrl.files" table-key="host_browser"
+  title-icon="fa-file"
+  dataset="$ctrl.files"
+  table-key="host_browser"
   order-by="Dir"
   is-root="$ctrl.isRoot()"
   go-to-parent="$ctrl.goToParent()"
@@ -8,9 +10,7 @@
   rename="$ctrl.renameFile(name, newName)"
   download="$ctrl.downloadFile(name)"
   delete="$ctrl.deleteFile(name)"
-
   is-upload-allowed="true"
-  on-file-selected-for-upload="$ctrl.onFileSelectedForUpload"
+  on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)"
 >
-
 </files-datatable>

app/agent/components/host-browser/host-browser.js

@@ -1,5 +1,5 @@
 angular.module('portainer.agent').component('hostBrowser', {
   controller: 'HostBrowserController',
   templateUrl: './host-browser.html',
-  bindings: {}
+  bindings: {},
 });

app/agent/components/node-selector/node-selector.js

@@ -2,6 +2,6 @@ angular.module('portainer.agent').component('nodeSelector', {
   templateUrl: './nodeSelector.html',
   controller: 'NodeSelectorController',
   bindings: {
-    model: '='
+    model: '=',
-  }
+  },
 });

app/agent/components/node-selector/nodeSelector.html

@@ -1,8 +1,6 @@
 <div class="form-group">
   <label for="target_node" class="col-sm-1 control-label text-left">Node</label>
   <div class="col-sm-11">
-    <select class="form-control"
+    <select class="form-control" ng-model="$ctrl.model" ng-options="agent.NodeName as agent.NodeName for agent in $ctrl.agents"></select>
-      ng-model="$ctrl.model" ng-options="agent.NodeName as agent.NodeName for agent in $ctrl.agents"
-      ></select>
   </div>
 </div>

app/agent/components/node-selector/nodeSelectorController.js

@@ -1,8 +1,10 @@
-angular.module('portainer.agent')
+angular.module('portainer.agent').controller('NodeSelectorController', [
-.controller('NodeSelectorController', ['AgentService', 'Notifications', function (AgentService, Notifications) {
+  'AgentService',
+  'Notifications',
+  function (AgentService, Notifications) {
     var ctrl = this;
 
-  this.$onInit = function() {
+    this.$onInit = function () {
       AgentService.agents()
         .then(function success(data) {
           ctrl.agents = data;
@@ -14,5 +16,5 @@ angular.module('portainer.agent')
           Notifications.error('Failure', err, 'Unable to load agents');
         });
     };
-
+  },
-}]);
+]);

app/agent/components/volume-browser/volume-browser.js

@@ -4,6 +4,6 @@ angular.module('portainer.agent').component('volumeBrowser', {
   bindings: {
     volumeId: '<',
     nodeName: '<',
-    isUploadEnabled: '<'
+    isUploadEnabled: '<',
-  }
+  },
 });

app/agent/components/volume-browser/volumeBrowser.html

@@ -1,6 +1,8 @@
 <files-datatable
-  title-text="Volume browser" title-icon="fa-file"
+  title-text="Volume browser"
-  dataset="$ctrl.files" table-key="volume_browser"
+  title-icon="fa-file"
+  dataset="$ctrl.files"
+  table-key="volume_browser"
   order-by="Dir"
   is-root="$ctrl.state.path === '/'"
   go-to-parent="$ctrl.up()"
@@ -8,7 +10,6 @@
   rename="$ctrl.rename(name, newName)"
   download="$ctrl.download(name)"
   delete="$ctrl.delete(name)"
-
   is-upload-allowed="$ctrl.isUploadEnabled"
-  on-file-selected-for-upload="$ctrl.onFileSelectedForUpload"
+  on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)"
 ></files-datatable>

app/agent/components/volume-browser/volumeBrowserController.js

@@ -1,15 +1,20 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.agent')
+angular.module('portainer.agent').controller('VolumeBrowserController', [
-.controller('VolumeBrowserController', ['HttpRequestHelper', 'VolumeBrowserService', 'FileSaver', 'Blob', 'ModalService', 'Notifications',
+  'HttpRequestHelper',
-function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService, Notifications) {
+  'VolumeBrowserService',
+  'FileSaver',
+  'Blob',
+  'ModalService',
+  'Notifications',
+  function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService, Notifications) {
     var ctrl = this;
 
     this.state = {
-    path: '/'
+      path: '/',
     };
 
-  this.rename = function(file, newName) {
+    this.rename = function (file, newName) {
       var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
       var newFilePath = this.state.path === '/' ? newName : this.state.path + '/' + newName;
 
@@ -26,19 +31,18 @@ function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService
         });
     };
 
-  this.delete = function(file) {
+    this.delete = function (file) {
       var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
 
-    ModalService.confirmDeletion(
+      ModalService.confirmDeletion('Are you sure that you want to delete ' + filePath + ' ?', function onConfirm(confirmed) {
-      'Are you sure that you want to delete ' + filePath + ' ?',
+        if (!confirmed) {
-      function onConfirm(confirmed) {
+          return;
-        if(!confirmed) { return; }
-        deleteFile(filePath);
         }
-    );
+        deleteFile(filePath);
+      });
     };
 
-  this.download = function(file) {
+    this.download = function (file) {
       var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
       VolumeBrowserService.get(this.volumeId, filePath)
         .then(function success(data) {
@@ -50,12 +54,12 @@ function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService
         });
     };
 
-  this.up = function() {
+    this.up = function () {
       var parentFolder = parentPath(this.state.path);
       browse(parentFolder);
     };
 
-  this.browse = function(folder) {
+    this.browse = function (folder) {
       var path = buildPath(this.state.path, folder);
       browse(path);
     };
@@ -74,7 +78,6 @@ function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService
         });
     }
 
-
     function browse(path) {
       VolumeBrowserService.ls(ctrl.volumeId, path)
         .then(function success(data) {
@@ -112,8 +115,7 @@ function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService
       return parent + '/' + file;
     }
 
-
+    this.$onInit = function () {
-  this.$onInit = function() {
       HttpRequestHelper.setPortainerAgentTargetHeader(this.nodeName);
       VolumeBrowserService.ls(this.volumeId, this.state.path)
         .then(function success(data) {
@@ -131,7 +133,5 @@ function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService
     function refreshList() {
       browse(ctrl.state.path);
     }
-
+  },
-  
+]);
-
-}]);

app/agent/rest/agent.js

@@ -1,12 +1,19 @@
-angular.module('portainer.agent')
+angular.module('portainer.agent').factory('Agent', [
-.factory('Agent', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', 'StateManager',
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  'StateManager',
   function AgentFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, StateManager) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/v:version/agents', {
+    return $resource(
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/v:version/agents',
+      {
         endpointId: EndpointProvider.endpointID,
-    version: StateManager.getAgentApiVersion
+        version: StateManager.getAgentApiVersion,
       },
       {
-    query: { method: 'GET', isArray: true }
+        query: { method: 'GET', isArray: true },
-  });
+      }
-}]);
+    );
+  },
+]);

app/agent/rest/browse.js

@@ -1,27 +1,39 @@
 import { browseGetResponse } from './response/browse';
 
-angular.module('portainer.agent')
+angular.module('portainer.agent').factory('Browse', [
-.factory('Browse', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', 'StateManager',
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  'StateManager',
   function BrowseFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, StateManager) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/v:version/browse/:action', {
+    return $resource(
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/v:version/browse/:action',
+      {
         endpointId: EndpointProvider.endpointID,
-    version: StateManager.getAgentApiVersion
+        version: StateManager.getAgentApiVersion,
       },
       {
         ls: {
-      method: 'GET', isArray: true, params: { action: 'ls' }
+          method: 'GET',
+          isArray: true,
+          params: { action: 'ls' },
         },
         get: {
-      method: 'GET', params: { action: 'get' },
+          method: 'GET',
+          params: { action: 'get' },
           transformResponse: browseGetResponse,
-      responseType: 'arraybuffer'
+          responseType: 'arraybuffer',
         },
         delete: {
-      method: 'DELETE', params: { action: 'delete' }
+          method: 'DELETE',
+          params: { action: 'delete' },
         },
         rename: {
-      method: 'PUT', params: { action: 'rename' }
+          method: 'PUT',
+          params: { action: 'rename' },
+        },
       }
-  });
+    );
-}]);
+  },
+]);

app/agent/rest/host.js

@@ -1,16 +1,19 @@
 angular.module('portainer.agent').factory('Host', [
-  '$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', 'StateManager',
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  'StateManager',
   function AgentFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, StateManager) {
     'use strict';
     return $resource(
       API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/v:version/host/:action',
       {
         endpointId: EndpointProvider.endpointID,
-        version: StateManager.getAgentApiVersion
+        version: StateManager.getAgentApiVersion,
       },
       {
-        info: { method: 'GET', params: { action: 'info' } }
+        info: { method: 'GET', params: { action: 'info' } },
       }
     );
-  }
+  },
 ]);

app/agent/rest/ping.js

@@ -1,11 +1,14 @@
 angular.module('portainer.agent').factory('AgentPing', [
-  '$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', '$q',
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  '$q',
   function AgentPingFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, $q) {
     'use strict';
     return $resource(
       API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/ping',
       {
-        endpointId: EndpointProvider.endpointID
+        endpointId: EndpointProvider.endpointID,
       },
       {
         ping: {
@@ -13,8 +16,7 @@ angular.module('portainer.agent').factory('AgentPing', [
           interceptor: {
             response: function versionInterceptor(response) {
               var instance = response.resource;
-              var version =
+              var version = response.headers('Portainer-Agent-Api-Version') || 1;
-                response.headers('Portainer-Agent-Api-Version') || 1;
               instance.version = Number(version);
               return instance;
             },
@@ -24,10 +26,10 @@ angular.module('portainer.agent').factory('AgentPing', [
                 return { version: 1 };
               }
               return $q.reject(error);
-            }
+            },
-          }
+          },
-        }
+        },
       }
     );
-  }
+  },
 ]);

app/agent/rest/v1/agent.js

@@ -1,10 +1,17 @@
-angular.module('portainer.agent')
+angular.module('portainer.agent').factory('AgentVersion1', [
-.factory('AgentVersion1', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', function AgentFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function AgentFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/agents', {
+    return $resource(
-    endpointId: EndpointProvider.endpointID
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/agents',
+      {
+        endpointId: EndpointProvider.endpointID,
       },
       {
-    query: { method: 'GET', isArray: true }
+        query: { method: 'GET', isArray: true },
-  });
+      }
-}]);
+    );
+  },
+]);

app/agent/rest/v1/browse.js

@@ -1,25 +1,37 @@
 import { browseGetResponse } from '../response/browse';
 
-angular.module('portainer.agent')
+angular.module('portainer.agent').factory('BrowseVersion1', [
-.factory('BrowseVersion1', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', function BrowseFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function BrowseFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/browse/:volumeID/:action', {
+    return $resource(
-    endpointId: EndpointProvider.endpointID
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/browse/:volumeID/:action',
+      {
+        endpointId: EndpointProvider.endpointID,
       },
       {
         ls: {
-      method: 'GET', isArray: true, params: { action: 'ls' }
+          method: 'GET',
+          isArray: true,
+          params: { action: 'ls' },
         },
         get: {
-      method: 'GET', params: { action: 'get' },
+          method: 'GET',
+          params: { action: 'get' },
           transformResponse: browseGetResponse,
-      responseType: 'arraybuffer'
+          responseType: 'arraybuffer',
         },
         delete: {
-      method: 'DELETE', params: { action: 'delete' }
+          method: 'DELETE',
+          params: { action: 'delete' },
         },
         rename: {
-      method: 'PUT', params: { action: 'rename' }
+          method: 'PUT',
+          params: { action: 'rename' },
+        },
       }
-  });
+    );
-}]);
+  },
+]);

app/agent/services/agentService.js

@@ -1,7 +1,12 @@
 import { AgentViewModel } from '../models/agent';
 
 angular.module('portainer.agent').factory('AgentService', [
-  '$q', 'Agent', 'AgentVersion1', 'HttpRequestHelper', 'Host', 'StateManager',
+  '$q',
+  'Agent',
+  'AgentVersion1',
+  'HttpRequestHelper',
+  'Host',
+  'StateManager',
   function AgentServiceFactory($q, Agent, AgentVersion1, HttpRequestHelper, Host, StateManager) {
     'use strict';
     var service = {};
@@ -25,9 +30,10 @@ angular.module('portainer.agent').factory('AgentService', [
       var agentVersion = getAgentApiVersion();
       var service = agentVersion > 1 ? Agent : AgentVersion1;
 
-      service.query({ version: agentVersion })
+      service
+        .query({ version: agentVersion })
         .$promise.then(function success(data) {
-          var agents = data.map(function(item) {
+          var agents = data.map(function (item) {
             return new AgentViewModel(item);
           });
           deferred.resolve(agents);
@@ -40,5 +46,5 @@ angular.module('portainer.agent').factory('AgentService', [
     }
 
     return service;
-  }
+  },
 ]);

app/agent/services/hostBrowserService.js

@@ -1,5 +1,10 @@
 angular.module('portainer.agent').factory('HostBrowserService', [
-  'Browse', 'Upload', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', '$q', 'StateManager',
+  'Browse',
+  'Upload',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  '$q',
+  'StateManager',
   function HostBrowserServiceFactory(Browse, Upload, API_ENDPOINT_ENDPOINTS, EndpointProvider, $q, StateManager) {
     var service = {};
 
@@ -24,7 +29,7 @@ angular.module('portainer.agent').factory('HostBrowserService', [
     function rename(path, newPath) {
       var payload = {
         CurrentFilePath: path,
-        NewFilePath: newPath
+        NewFilePath: newPath,
       };
       return Browse.rename({}, payload).$promise;
     }
@@ -32,21 +37,15 @@ angular.module('portainer.agent').factory('HostBrowserService', [
     function upload(path, file, onProgress) {
       var deferred = $q.defer();
       var agentVersion = StateManager.getAgentApiVersion();
-      var url =
+      var url = API_ENDPOINT_ENDPOINTS + '/' + EndpointProvider.endpointID() + '/docker' + (agentVersion > 1 ? '/v' + agentVersion : '') + '/browse/put';
-        API_ENDPOINT_ENDPOINTS +
-        '/' +
-        EndpointProvider.endpointID() +
-        '/docker' +
-        (agentVersion > 1 ? '/v' + agentVersion : '') +
-        '/browse/put';
 
       Upload.upload({
         url: url,
-        data: { file: file, Path: path }
+        data: { file: file, Path: path },
       }).then(deferred.resolve, deferred.reject, onProgress);
       return deferred.promise;
     }
 
     return service;
-  }
+  },
 ]);

app/agent/services/pingService.js

@@ -10,5 +10,5 @@ angular.module('portainer.agent').service('AgentPingService', [
     }
 
     return service;
-  }
+  },
 ]);

app/agent/services/volumeBrowserService.js

@@ -1,5 +1,11 @@
 angular.module('portainer.agent').factory('VolumeBrowserService', [
-  'StateManager', 'Browse', 'BrowseVersion1', '$q', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', 'Upload',
+  'StateManager',
+  'Browse',
+  'BrowseVersion1',
+  '$q',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  'Upload',
   function VolumeBrowserServiceFactory(StateManager, Browse, BrowseVersion1, $q, API_ENDPOINT_ENDPOINTS, EndpointProvider, Upload) {
     'use strict';
     var service = {};
@@ -14,22 +20,22 @@ angular.module('portainer.agent').factory('VolumeBrowserService', [
       return agentVersion > 1 ? Browse : BrowseVersion1;
     }
 
-    service.ls = function(volumeId, path) {
+    service.ls = function (volumeId, path) {
       return getBrowseService().ls({ volumeID: volumeId, path: path, version: getAgentApiVersion() }).$promise;
     };
 
-    service.get = function(volumeId, path) {
+    service.get = function (volumeId, path) {
       return getBrowseService().get({ volumeID: volumeId, path: path, version: getAgentApiVersion() }).$promise;
     };
 
-    service.delete = function(volumeId, path) {
+    service.delete = function (volumeId, path) {
       return getBrowseService().delete({ volumeID: volumeId, path: path, version: getAgentApiVersion() }).$promise;
     };
 
-    service.rename = function(volumeId, path, newPath) {
+    service.rename = function (volumeId, path, newPath) {
       var payload = {
         CurrentFilePath: path,
-        NewFilePath: newPath
+        NewFilePath: newPath,
       };
       return getBrowseService().rename({ volumeID: volumeId, version: getAgentApiVersion() }, payload).$promise;
     };
@@ -37,26 +43,19 @@ angular.module('portainer.agent').factory('VolumeBrowserService', [
     service.upload = function upload(path, file, volumeId, onProgress) {
       var deferred = $q.defer();
       var agentVersion = StateManager.getAgentApiVersion();
-      if (agentVersion <2) {
+      if (agentVersion < 2) {
         deferred.reject('upload is not supported on this agent version');
         return;
       }
-      var url =
+      var url = API_ENDPOINT_ENDPOINTS + '/' + EndpointProvider.endpointID() + '/docker' + '/v' + agentVersion + '/browse/put?volumeID=' + volumeId;
-        API_ENDPOINT_ENDPOINTS +
-        '/' +
-        EndpointProvider.endpointID() +
-        '/docker' +
-        '/v' + agentVersion +
-        '/browse/put?volumeID=' +
-        volumeId;
 
       Upload.upload({
         url: url,
-        data: { file: file, Path: path }
+        data: { file: file, Path: path },
       }).then(deferred.resolve, deferred.reject, onProgress);
       return deferred.promise;
     };
 
     return service;
-  }
+  },
 ]);

app/app.js

@@ -1,9 +1,17 @@
 import $ from 'jquery';
-import '@babel/polyfill'
+import '@babel/polyfill';
 
-angular.module('portainer')
+angular.module('portainer').run([
-.run(['$rootScope', '$state', '$interval', 'LocalStorage', 'EndpointProvider', 'SystemService', 'cfpLoadingBar', '$transitions', 'HttpRequestHelper',
+  '$rootScope',
-function ($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemService, cfpLoadingBar, $transitions, HttpRequestHelper) {
+  '$state',
+  '$interval',
+  'LocalStorage',
+  'EndpointProvider',
+  'SystemService',
+  'cfpLoadingBar',
+  '$transitions',
+  'HttpRequestHelper',
+  function ($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemService, cfpLoadingBar, $transitions, HttpRequestHelper) {
     'use strict';
 
     EndpointProvider.initialize();
@@ -19,18 +27,18 @@ function ($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemS
       }
     };
 
-  $transitions.onBefore({}, function() {
+    $transitions.onBefore({}, function () {
       HttpRequestHelper.resetAgentHeaders();
     });
 
-  $state.defaultErrorHandler(function() {
+    $state.defaultErrorHandler(function () {
       // Do not log transitionTo errors
     });
 
     // Keep-alive Edge endpoints by sending a ping request every minute
-  $interval(function() {
+    $interval(function () {
       ping(EndpointProvider, SystemService);
-  }, 60 * 1000)
+    }, 60 * 1000);
 
     $(document).ajaxSend(function (event, jqXhr, jqOpts) {
       const type = jqOpts.type === 'POST' || jqOpts.type === 'PUT' || jqOpts.type === 'PATCH';
@@ -40,7 +48,8 @@ function ($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemS
       }
       jqXhr.setRequestHeader('Authorization', 'Bearer ' + LocalStorage.getJWT());
     });
-}]);
+  },
+]);
 
 function ping(EndpointProvider, SystemService) {
   let endpoint = EndpointProvider.currentEndpoint();

app/azure/_module.js

@@ -1,12 +1,13 @@
-angular.module('portainer.azure', ['portainer.app'])
+angular.module('portainer.azure', ['portainer.app']).config([
-.config(['$stateRegistryProvider', function ($stateRegistryProvider) {
+  '$stateRegistryProvider',
+  function ($stateRegistryProvider) {
     'use strict';
 
     var azure = {
       name: 'azure',
       url: '/azure',
       parent: 'root',
-    abstract: true
+      abstract: true,
     };
 
     var containerInstances = {
@@ -15,9 +16,9 @@ angular.module('portainer.azure', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containerinstances/containerinstances.html',
-        controller: 'AzureContainerInstancesController'
+          controller: 'AzureContainerInstancesController',
-      }
+        },
-    }
+      },
     };
 
     var containerInstanceCreation = {
@@ -26,9 +27,9 @@ angular.module('portainer.azure', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containerinstances/create/createcontainerinstance.html',
-        controller: 'AzureCreateContainerInstanceController'
+          controller: 'AzureCreateContainerInstanceController',
-      }
+        },
-    }
+      },
     };
 
     var dashboard = {
@@ -37,13 +38,14 @@ angular.module('portainer.azure', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/dashboard/dashboard.html',
-        controller: 'AzureDashboardController'
+          controller: 'AzureDashboardController',
-      }
+        },
-    }
+      },
     };
 
     $stateRegistryProvider.register(azure);
     $stateRegistryProvider.register(containerInstances);
     $stateRegistryProvider.register(containerInstanceCreation);
     $stateRegistryProvider.register(dashboard);
-}]);
+  },
+]);

app/azure/components/azure-endpoint-config/azure-endpoint-config.js

@@ -2,7 +2,7 @@ angular.module('portainer.azure').component('azureEndpointConfig', {
   bindings: {
     applicationId: '=',
     tenantId: '=',
-    authenticationKey: '='
+    authenticationKey: '=',
   },
-  templateUrl: './azureEndpointConfig.html'
+  templateUrl: './azureEndpointConfig.html',
 });

app/azure/components/azure-endpoint-config/azureEndpointConfig.html

@@ -6,7 +6,7 @@
   <div class="form-group">
     <label for="azure_credential_appid" class="col-sm-3 col-lg-2 control-label text-left">Application ID</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" name="azure_credential_appid" ng-model="$ctrl.applicationId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required>
+      <input type="text" class="form-control" name="azure_credential_appid" ng-model="$ctrl.applicationId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required />
     </div>
   </div>
   <!-- !applicationId-input -->
@@ -14,7 +14,7 @@
   <div class="form-group">
     <label for="azure_credential_tenantid" class="col-sm-3 col-lg-2 control-label text-left">Tenant ID</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" name="azure_credential_tenantid" ng-model="$ctrl.tenantId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required>
+      <input type="text" class="form-control" name="azure_credential_tenantid" ng-model="$ctrl.tenantId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required />
     </div>
   </div>
   <!-- !tenantId-input -->
@@ -22,7 +22,14 @@
   <div class="form-group">
     <label for="azure_credential_authkey" class="col-sm-3 col-lg-2 control-label text-left">Authentication key</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" name="azure_credential_authkey" ng-model="$ctrl.authenticationKey" placeholder="cOrXoK/1D35w8YQ8nH1/8ZGwzz45JIYD5jxHKXEQknk=" required>
+      <input
+        type="text"
+        class="form-control"
+        name="azure_credential_authkey"
+        ng-model="$ctrl.authenticationKey"
+        placeholder="cOrXoK/1D35w8YQ8nH1/8ZGwzz45JIYD5jxHKXEQknk="
+        required
+      />
     </div>
   </div>
   <!-- !authenticationkey-input -->

app/azure/components/azure-sidebar-content/azure-sidebar-content.js

@@ -1,3 +1,3 @@
 angular.module('portainer.azure').component('azureSidebarContent', {
-  templateUrl: './azureSidebarContent.html'
+  templateUrl: './azureSidebarContent.html',
 });

app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html

@@ -2,13 +2,10 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
       </div>
       <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-danger"
+        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
         <button type="button" class="btn btn-sm btn-primary" ui-sref="azure.containerinstances.new">
@@ -17,7 +14,15 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
@@ -47,20 +52,23 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="azure.containerinstances.container({ id: item.Id })">{{ item.Name | truncate:50 }}</a>
+                <a ui-sref="azure.containerinstances.container({ id: item.Id })">{{ item.Name | truncate: 50 }}</a>
               </td>
               <td>{{ item.Location }}</td>
               <td>
                 <a ng-if="item.Ports.length > 0" ng-repeat="p in item.Ports" class="image-tag" ng-href="http://{{ item.IPAddress }}:{{ p.port }}" target="_blank">
                   <i class="fa fa-external-link-alt" aria-hidden="true"></i> :{{ p.port }}
                 </a>
-                <span ng-if="item.Ports.length == 0" >-</span>
+                <span ng-if="item.Ports.length == 0">-</span>
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">
@@ -73,9 +81,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.js

@@ -8,6 +8,6 @@ angular.module('portainer.azure').component('containergroupsDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    removeAction: '<'
+    removeAction: '<',
-  }
+  },
 });

app/azure/models/container_group.js

@@ -8,8 +8,8 @@ export function ContainerGroupDefaultModel() {
     {
       container: 80,
       host: 80,
-      protocol: 'TCP'
+      protocol: 'TCP',
-    }
+    },
   ];
   this.CPU = 1;
   this.Memory = 1;
@@ -32,12 +32,12 @@ export function CreateContainerGroupRequest(model) {
     var binding = model.Ports[i];
 
     containerPorts.push({
-      port: binding.container
+      port: binding.container,
     });
 
     addressPorts.push({
       port: binding.host,
-      protocol: binding.protocol
+      protocol: binding.protocol,
     });
   }
 
@@ -52,15 +52,15 @@ export function CreateContainerGroupRequest(model) {
           resources: {
             requests: {
               cpu: model.CPU,
-              memoryInGB: model.Memory
+              memoryInGB: model.Memory,
-            }
+            },
-          }
+          },
-        }
+        },
-      }
+      },
     ],
     ipAddress: {
-      type: model.AllocatePublicIP ? 'Public': 'Private',
+      type: model.AllocatePublicIP ? 'Public' : 'Private',
-      ports: addressPorts
+      ports: addressPorts,
-    }
+    },
   };
 }

app/azure/models/provider.js

@@ -4,6 +4,6 @@ export function ContainerInstanceProviderViewModel(data) {
   this.Id = data.id;
   this.Namespace = data.namespace;
 
-  var containerGroupType = _.find(data.resourceTypes, { 'resourceType': 'containerGroups' });
+  var containerGroupType = _.find(data.resourceTypes, { resourceType: 'containerGroups' });
   this.Locations = containerGroupType.locations;
 }

app/azure/rest/azure.js

@@ -1,17 +1,20 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('Azure', [
-.factory('Azure', ['$http', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
+  '$http',
-function AzureFactory($http, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function AzureFactory($http, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
 
     var service = {};
 
-  service.delete = function(id, apiVersion) {
+    service.delete = function (id, apiVersion) {
       var url = API_ENDPOINT_ENDPOINTS + '/' + EndpointProvider.endpointID() + '/azure' + id + '?api-version=' + apiVersion;
       return $http({
         method: 'DELETE',
-      url: url
+        url: url,
       });
     };
 
     return service;
-}]);
+  },
+]);

app/azure/rest/container_group.js

@@ -1,26 +1,29 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('ContainerGroup', [
-.factory('ContainerGroup', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
+  '$resource',
-function ContainerGroupFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function ContainerGroupFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
 
     var resource = {};
 
     var base = $resource(
-    API_ENDPOINT_ENDPOINTS +'/:endpointId/azure/subscriptions/:subscriptionId/providers/Microsoft.ContainerInstance/containerGroups',
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/azure/subscriptions/:subscriptionId/providers/Microsoft.ContainerInstance/containerGroups',
       {
-      'endpointId': EndpointProvider.endpointID,
+        endpointId: EndpointProvider.endpointID,
-      'api-version': '2018-04-01'
+        'api-version': '2018-04-01',
       },
       {
-      query: { method: 'GET', params: { subscriptionId: '@subscriptionId' } }
+        query: { method: 'GET', params: { subscriptionId: '@subscriptionId' } },
       }
     );
 
     var withResourceGroup = $resource(
-    API_ENDPOINT_ENDPOINTS +'/:endpointId/azure/subscriptions/:subscriptionId/resourceGroups/:resourceGroupName/providers/Microsoft.ContainerInstance/containerGroups/:containerGroupName',
+      API_ENDPOINT_ENDPOINTS +
+        '/:endpointId/azure/subscriptions/:subscriptionId/resourceGroups/:resourceGroupName/providers/Microsoft.ContainerInstance/containerGroups/:containerGroupName',
       {
-      'endpointId': EndpointProvider.endpointID,
+        endpointId: EndpointProvider.endpointID,
-      'api-version': '2018-04-01'
+        'api-version': '2018-04-01',
       },
       {
         create: {
@@ -28,9 +31,9 @@ function ContainerGroupFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvid
           params: {
             subscriptionId: '@subscriptionId',
             resourceGroupName: '@resourceGroupName',
-          containerGroupName: '@containerGroupName'
+            containerGroupName: '@containerGroupName',
-        }
+          },
-      }
+        },
       }
     );
 
@@ -38,4 +41,5 @@ function ContainerGroupFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvid
     resource.create = withResourceGroup.create;
 
     return resource;
-}]);
+  },
+]);

app/azure/rest/location.js

@@ -1,12 +1,18 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('Location', [
-.factory('Location', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
+  '$resource',
-function LocationFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function LocationFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS +'/:endpointId/azure/subscriptions/:subscriptionId/locations', {
+    return $resource(
-    'endpointId': EndpointProvider.endpointID,
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/azure/subscriptions/:subscriptionId/locations',
-    'api-version': '2016-06-01'
+      {
+        endpointId: EndpointProvider.endpointID,
+        'api-version': '2016-06-01',
       },
       {
-    query: { method: 'GET', params: { subscriptionId: '@subscriptionId' } }
+        query: { method: 'GET', params: { subscriptionId: '@subscriptionId' } },
-  });
+      }
-}]);
+    );
+  },
+]);

app/azure/rest/provider.js

@@ -1,12 +1,18 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('Provider', [
-.factory('Provider', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
+  '$resource',
-function ProviderFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function ProviderFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS +'/:endpointId/azure/subscriptions/:subscriptionId/providers/:providerNamespace', {
+    return $resource(
-    'endpointId': EndpointProvider.endpointID,
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/azure/subscriptions/:subscriptionId/providers/:providerNamespace',
-    'api-version': '2018-02-01'
+      {
+        endpointId: EndpointProvider.endpointID,
+        'api-version': '2018-02-01',
       },
       {
-    get: { method: 'GET', params: { subscriptionId: '@subscriptionId', providerNamespace: '@providerNamespace' } }
+        get: { method: 'GET', params: { subscriptionId: '@subscriptionId', providerNamespace: '@providerNamespace' } },
-  });
+      }
-}]);
+    );
+  },
+]);

app/azure/rest/resource_group.js

@@ -1,12 +1,18 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('ResourceGroup', [
-.factory('ResourceGroup', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
+  '$resource',
-function ResourceGroupFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function ResourceGroupFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS +'/:endpointId/azure/subscriptions/:subscriptionId/resourcegroups', {
+    return $resource(
-    'endpointId': EndpointProvider.endpointID,
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/azure/subscriptions/:subscriptionId/resourcegroups',
-    'api-version': '2018-02-01'
+      {
+        endpointId: EndpointProvider.endpointID,
+        'api-version': '2018-02-01',
       },
       {
-    query: { method: 'GET', params: { subscriptionId: '@subscriptionId' } }
+        query: { method: 'GET', params: { subscriptionId: '@subscriptionId' } },
-  });
+      }
-}]);
+    );
+  },
+]);

app/azure/rest/subscription.js

@@ -1,12 +1,18 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('Subscription', [
-.factory('Subscription', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider',
+  '$resource',
-function SubscriptionFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function SubscriptionFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
     'use strict';
-  return $resource(API_ENDPOINT_ENDPOINTS + '/:endpointId/azure/subscriptions', {
+    return $resource(
-    'endpointId': EndpointProvider.endpointID,
+      API_ENDPOINT_ENDPOINTS + '/:endpointId/azure/subscriptions',
-    'api-version': '2016-06-01'
+      {
+        endpointId: EndpointProvider.endpointID,
+        'api-version': '2016-06-01',
       },
       {
-    query: { method: 'GET' }
+        query: { method: 'GET' },
-  });
+      }
-}]);
+    );
+  },
+]);

app/azure/services/azureService.js

@@ -1,36 +1,41 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('AzureService', [
-.factory('AzureService', ['$q', 'Azure', 'SubscriptionService', 'ResourceGroupService', 'ContainerGroupService', 'ProviderService',
+  '$q',
-function AzureServiceFactory($q, Azure, SubscriptionService, ResourceGroupService, ContainerGroupService, ProviderService) {
+  'Azure',
+  'SubscriptionService',
+  'ResourceGroupService',
+  'ContainerGroupService',
+  'ProviderService',
+  function AzureServiceFactory($q, Azure, SubscriptionService, ResourceGroupService, ContainerGroupService, ProviderService) {
     'use strict';
     var service = {};
 
-  service.deleteContainerGroup = function(id) {
+    service.deleteContainerGroup = function (id) {
       return Azure.delete(id, '2018-04-01');
     };
 
-  service.createContainerGroup = function(model, subscriptionId, resourceGroupName) {
+    service.createContainerGroup = function (model, subscriptionId, resourceGroupName) {
       return ContainerGroupService.create(model, subscriptionId, resourceGroupName);
     };
 
-  service.subscriptions = function() {
+    service.subscriptions = function () {
       return SubscriptionService.subscriptions();
     };
 
-  service.containerInstanceProvider = function(subscriptions) {
+    service.containerInstanceProvider = function (subscriptions) {
       return retrieveResourcesForEachSubscription(subscriptions, ProviderService.containerInstanceProvider);
     };
 
-  service.resourceGroups = function(subscriptions) {
+    service.resourceGroups = function (subscriptions) {
       return retrieveResourcesForEachSubscription(subscriptions, ResourceGroupService.resourceGroups);
     };
 
-  service.containerGroups = function(subscriptions) {
+    service.containerGroups = function (subscriptions) {
       return retrieveResourcesForEachSubscription(subscriptions, ContainerGroupService.containerGroups);
     };
 
-  service.aggregate = function(resourcesBySubcription) {
+    service.aggregate = function (resourcesBySubcription) {
       var aggregatedResources = [];
-    Object.keys(resourcesBySubcription).forEach(function(key) {
+      Object.keys(resourcesBySubcription).forEach(function (key) {
         aggregatedResources = aggregatedResources.concat(resourcesBySubcription[key]);
       });
       return aggregatedResources;
@@ -63,4 +68,5 @@ function AzureServiceFactory($q, Azure, SubscriptionService, ResourceGroupServic
     }
 
     return service;
-}]);
+  },
+]);

app/azure/services/containerGroupService.js

@@ -1,15 +1,17 @@
 import { ContainerGroupViewModel, CreateContainerGroupRequest } from '../models/container_group';
 
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('ContainerGroupService', [
-.factory('ContainerGroupService', ['$q', 'ContainerGroup', function ContainerGroupServiceFactory($q, ContainerGroup) {
+  '$q',
+  'ContainerGroup',
+  function ContainerGroupServiceFactory($q, ContainerGroup) {
     'use strict';
     var service = {};
 
-  service.containerGroups = function(subscriptionId) {
+    service.containerGroups = function (subscriptionId) {
       var deferred = $q.defer();
 
-    ContainerGroup.query({ subscriptionId: subscriptionId }).$promise
+      ContainerGroup.query({ subscriptionId: subscriptionId })
-    .then(function success(data) {
+        .$promise.then(function success(data) {
           var containerGroups = data.value.map(function (item) {
             return new ContainerGroupViewModel(item);
           });
@@ -22,14 +24,18 @@ angular.module('portainer.azure')
       return deferred.promise;
     };
 
-  service.create = function(model, subscriptionId, resourceGroupName) {
+    service.create = function (model, subscriptionId, resourceGroupName) {
       var payload = new CreateContainerGroupRequest(model);
-    return ContainerGroup.create({
+      return ContainerGroup.create(
+        {
           subscriptionId: subscriptionId,
           resourceGroupName: resourceGroupName,
-      containerGroupName: model.Name
+          containerGroupName: model.Name,
-    }, payload).$promise;
+        },
+        payload
+      ).$promise;
     };
 
     return service;
-}]);
+  },
+]);

app/azure/services/locationService.js

@@ -1,15 +1,17 @@
 import { LocationViewModel } from '../models/location';
 
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('LocationService', [
-.factory('LocationService', ['$q', 'Location', function LocationServiceFactory($q, Location) {
+  '$q',
+  'Location',
+  function LocationServiceFactory($q, Location) {
     'use strict';
     var service = {};
 
-  service.locations = function(subscriptionId) {
+    service.locations = function (subscriptionId) {
       var deferred = $q.defer();
 
-    Location.query({ subscriptionId: subscriptionId }).$promise
+      Location.query({ subscriptionId: subscriptionId })
-    .then(function success(data) {
+        .$promise.then(function success(data) {
           var locations = data.value.map(function (item) {
             return new LocationViewModel(item);
           });
@@ -23,4 +25,5 @@ angular.module('portainer.azure')
     };
 
     return service;
-}]);
+  },
+]);

app/azure/services/providerService.js

@@ -1,15 +1,17 @@
 import { ContainerInstanceProviderViewModel } from '../models/provider';
 
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('ProviderService', [
-.factory('ProviderService', ['$q', 'Provider', function ProviderServiceFactory($q, Provider) {
+  '$q',
+  'Provider',
+  function ProviderServiceFactory($q, Provider) {
     'use strict';
     var service = {};
 
-  service.containerInstanceProvider = function(subscriptionId) {
+    service.containerInstanceProvider = function (subscriptionId) {
       var deferred = $q.defer();
 
-    Provider.get({ subscriptionId: subscriptionId, providerNamespace: 'Microsoft.ContainerInstance' }).$promise
+      Provider.get({ subscriptionId: subscriptionId, providerNamespace: 'Microsoft.ContainerInstance' })
-    .then(function success(data) {
+        .$promise.then(function success(data) {
           var provider = new ContainerInstanceProviderViewModel(data);
           deferred.resolve(provider);
         })
@@ -21,4 +23,5 @@ angular.module('portainer.azure')
     };
 
     return service;
-}]);
+  },
+]);

app/azure/services/resourceGroupService.js

@@ -1,15 +1,17 @@
 import { ResourceGroupViewModel } from '../models/resource_group';
 
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('ResourceGroupService', [
-.factory('ResourceGroupService', ['$q', 'ResourceGroup', function ResourceGroupServiceFactory($q, ResourceGroup) {
+  '$q',
+  'ResourceGroup',
+  function ResourceGroupServiceFactory($q, ResourceGroup) {
     'use strict';
     var service = {};
 
-  service.resourceGroups = function(subscriptionId) {
+    service.resourceGroups = function (subscriptionId) {
       var deferred = $q.defer();
 
-    ResourceGroup.query({ subscriptionId: subscriptionId }).$promise
+      ResourceGroup.query({ subscriptionId: subscriptionId })
-    .then(function success(data) {
+        .$promise.then(function success(data) {
           var resourceGroups = data.value.map(function (item) {
             return new ResourceGroupViewModel(item, subscriptionId);
           });
@@ -23,4 +25,5 @@ angular.module('portainer.azure')
     };
 
     return service;
-}]);
+  },
+]);

app/azure/services/subscriptionService.js

@@ -1,15 +1,17 @@
 import { SubscriptionViewModel } from '../models/subscription';
 
-angular.module('portainer.azure')
+angular.module('portainer.azure').factory('SubscriptionService', [
-.factory('SubscriptionService', ['$q', 'Subscription', function SubscriptionServiceFactory($q, Subscription) {
+  '$q',
+  'Subscription',
+  function SubscriptionServiceFactory($q, Subscription) {
     'use strict';
     var service = {};
 
-  service.subscriptions = function() {
+    service.subscriptions = function () {
       var deferred = $q.defer();
 
-    Subscription.query({}).$promise
+      Subscription.query({})
-    .then(function success(data) {
+        .$promise.then(function success(data) {
           var subscriptions = data.value.map(function (item) {
             return new SubscriptionViewModel(item);
           });
@@ -23,4 +25,5 @@ angular.module('portainer.azure')
     };
 
     return service;
-}]);
+  },
+]);

app/azure/views/containerinstances/containerInstancesController.js

@@ -1,7 +1,9 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').controller('AzureContainerInstancesController', [
-.controller('AzureContainerInstancesController', ['$scope', '$state', 'AzureService', 'Notifications',
+  '$scope',
-function ($scope, $state, AzureService, Notifications) {
+  '$state',
-
+  'AzureService',
+  'Notifications',
+  function ($scope, $state, AzureService, Notifications) {
     function initView() {
       AzureService.subscriptions()
         .then(function success(data) {
@@ -38,4 +40,5 @@ function ($scope, $state, AzureService, Notifications) {
     };
 
     initView();
-}]);
+  },
+]);

app/azure/views/containerinstances/containerinstances.html

@@ -10,8 +10,10 @@
 <div class="row">
   <div class="col-sm-12">
     <containergroups-datatable
-    title-text="Containers" title-icon="fa-server"
+      title-text="Containers"
-    dataset="containerGroups" table-key="containergroups"
+      title-icon="fa-server"
+      dataset="containerGroups"
+      table-key="containergroups"
       order-by="Name"
       remove-action="deleteAction"
     ></containergroups-datatable>

app/azure/views/containerinstances/create/createContainerInstanceController.js

@@ -1,32 +1,35 @@
 import { ContainerGroupDefaultModel } from '../../../models/container_group';
 
-angular.module('portainer.azure')
+angular.module('portainer.azure').controller('AzureCreateContainerInstanceController', [
-.controller('AzureCreateContainerInstanceController', ['$q', '$scope', '$state', 'AzureService', 'Notifications',
+  '$q',
-function ($q, $scope, $state, AzureService, Notifications) {
+  '$scope',
-
+  '$state',
+  'AzureService',
+  'Notifications',
+  function ($q, $scope, $state, AzureService, Notifications) {
     var allResourceGroups = [];
     var allProviders = [];
 
     $scope.state = {
       actionInProgress: false,
       selectedSubscription: null,
-    selectedResourceGroup: null
+      selectedResourceGroup: null,
     };
 
-  $scope.changeSubscription = function() {
+    $scope.changeSubscription = function () {
       var selectedSubscription = $scope.state.selectedSubscription;
       updateResourceGroupsAndLocations(selectedSubscription, allResourceGroups, allProviders);
     };
 
-  $scope.addPortBinding = function() {
+    $scope.addPortBinding = function () {
       $scope.model.Ports.push({ host: '', container: '', protocol: 'TCP' });
     };
 
-  $scope.removePortBinding = function(index) {
+    $scope.removePortBinding = function (index) {
       $scope.model.Ports.splice(index, 1);
     };
 
-  $scope.create = function() {
+    $scope.create = function () {
       var model = $scope.model;
       var subscriptionId = $scope.state.selectedSubscription.Id;
       var resourceGroupName = $scope.state.selectedResourceGroup.Name;
@@ -65,7 +68,7 @@ function ($q, $scope, $state, AzureService, Notifications) {
 
           return $q.all({
             resourceGroups: AzureService.resourceGroups(subscriptions),
-        containerInstancesProviders: AzureService.containerInstanceProvider(subscriptions)
+            containerInstancesProviders: AzureService.containerInstanceProvider(subscriptions),
           });
         })
         .then(function success(data) {
@@ -86,4 +89,5 @@ function ($q, $scope, $state, AzureService, Notifications) {
     }
 
     initView();
-}]);
+  },
+]);

app/azure/views/containerinstances/create/createcontainerinstance.html

@@ -1,8 +1,6 @@
 <rd-header>
   <rd-header-title title-text="Create container instance"></rd-header-title>
-  <rd-header-content>
+  <rd-header-content> <a ui-sref="azure.containerinstances">Container instances</a> &gt; Add container </rd-header-content>
-    <a ui-sref="azure.containerinstances">Container instances</a> &gt; Add container
-  </rd-header-content>
 </rd-header>
 
 <div class="row">
@@ -17,7 +15,13 @@
           <div class="form-group">
             <label for="azure_subscription" class="col-sm-1 control-label text-left">Subscription</label>
             <div class="col-sm-11">
-              <select class="form-control" name="azure_subscription" ng-model="state.selectedSubscription" ng-options="subscription.Name for subscription in subscriptions" ng-change="changeSubscription()"></select>
+              <select
+                class="form-control"
+                name="azure_subscription"
+                ng-model="state.selectedSubscription"
+                ng-options="subscription.Name for subscription in subscriptions"
+                ng-change="changeSubscription()"
+              ></select>
             </div>
           </div>
           <!-- !subscription-input -->
@@ -25,7 +29,12 @@
           <div class="form-group">
             <label for="azure_resourcegroup" class="col-sm-1 control-label text-left">Resource group</label>
             <div class="col-sm-11">
-              <select class="form-control" name="azure_resourcegroup" ng-model="state.selectedResourceGroup" ng-options="resourceGroup.Name for resourceGroup in resourceGroups"></select>
+              <select
+                class="form-control"
+                name="azure_resourcegroup"
+                ng-model="state.selectedResourceGroup"
+                ng-options="resourceGroup.Name for resourceGroup in resourceGroups"
+              ></select>
             </div>
           </div>
           <!-- !resourcegroup-input -->
@@ -44,7 +53,7 @@
           <div class="form-group">
             <label for="container_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="model.Name" name="container_name" placeholder="e.g. myContainer">
+              <input type="text" class="form-control" ng-model="model.Name" name="container_name" placeholder="e.g. myContainer" />
             </div>
           </div>
           <!-- !name-input -->
@@ -52,7 +61,7 @@
           <div class="form-group">
             <label for="image_name" class="col-sm-1 control-label text-left">Image</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="model.Image" name="image_name" placeholder="e.g. nginx:alpine">
+              <input type="text" class="form-control" ng-model="model.Image" name="image_name" placeholder="e.g. nginx:alpine" />
             </div>
           </div>
           <!-- !image-input -->
@@ -81,7 +90,7 @@
                 <!-- host-port -->
                 <div class="input-group col-sm-4 input-group-sm">
                   <span class="input-group-addon">host</span>
-                  <input type="text" class="form-control" ng-model="binding.host" placeholder="e.g. 80">
+                  <input type="text" class="form-control" ng-model="binding.host" placeholder="e.g. 80" />
                 </div>
                 <!-- !host-port -->
                 <span style="margin: 0 10px 0 10px;">
@@ -90,7 +99,7 @@
                 <!-- container-port -->
                 <div class="input-group col-sm-4 input-group-sm">
                   <span class="input-group-addon">container</span>
-                  <input type="text" class="form-control" ng-model="binding.container" placeholder="e.g. 80">
+                  <input type="text" class="form-control" ng-model="binding.container" placeholder="e.g. 80" />
                 </div>
                 <!-- !container-port -->
                 <!-- protocol-actions -->
@@ -115,9 +124,7 @@
               <label for="public_ip" class="control-label text-left">
                 Allocate public IP address
               </label>
-              <label class="switch" style="margin-left: 20px;">
+              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" name="public_ip" ng-model="model.AllocatePublicIP" /><i></i> </label>
-                <input type="checkbox" name="public_ip" ng-model="model.AllocatePublicIP"><i></i>
-              </label>
             </div>
           </div>
           <!-- public-ip -->
@@ -128,7 +135,7 @@
           <div class="form-group">
             <label for="container_cpu" class="col-sm-1 control-label text-left">CPU</label>
             <div class="col-sm-11">
-              <input type="number" class="form-control" ng-model="model.CPU" name="container_cpu" placeholder="1">
+              <input type="number" class="form-control" ng-model="model.CPU" name="container_cpu" placeholder="1" />
             </div>
           </div>
           <!-- !cpu-input -->
@@ -136,7 +143,7 @@
           <div class="form-group">
             <label for="container_memory" class="col-sm-1 control-label text-left">Memory</label>
             <div class="col-sm-11">
-              <input type="number" class="form-control" ng-model="model.Memory" name="container_memory" placeholder="1">
+              <input type="number" class="form-control" ng-model="model.Memory" name="container_memory" placeholder="1" />
             </div>
           </div>
           <!-- !memory-input -->

app/azure/views/dashboard/dashboardController.js

@@ -1,7 +1,8 @@
-angular.module('portainer.azure')
+angular.module('portainer.azure').controller('AzureDashboardController', [
-.controller('AzureDashboardController', ['$scope', 'AzureService', 'Notifications',
+  '$scope',
-function ($scope, AzureService, Notifications) {
+  'AzureService',
-
+  'Notifications',
+  function ($scope, AzureService, Notifications) {
     function initView() {
       AzureService.subscriptions()
         .then(function success(data) {
@@ -18,4 +19,5 @@ function ($scope, AzureService, Notifications) {
     }
 
     initView();
-}]);
+  },
+]);

app/config.js

@@ -2,8 +2,15 @@ import toastr from 'toastr';
 import { Terminal } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit';
 
-angular.module('portainer')
+angular.module('portainer').config([
-  .config(['$urlRouterProvider', '$httpProvider', 'localStorageServiceProvider', 'jwtOptionsProvider', 'AnalyticsProvider', '$uibTooltipProvider', '$compileProvider', 'cfpLoadingBarProvider',
+  '$urlRouterProvider',
+  '$httpProvider',
+  'localStorageServiceProvider',
+  'jwtOptionsProvider',
+  'AnalyticsProvider',
+  '$uibTooltipProvider',
+  '$compileProvider',
+  'cfpLoadingBarProvider',
   function ($urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, AnalyticsProvider, $uibTooltipProvider, $compileProvider, cfpLoadingBarProvider) {
     'use strict';
 
@@ -12,13 +19,15 @@ angular.module('portainer')
       $compileProvider.debugInfoEnabled(false);
     }
 
-    localStorageServiceProvider
+    localStorageServiceProvider.setPrefix('portainer');
-    .setPrefix('portainer');
 
     jwtOptionsProvider.config({
-      tokenGetter: ['LocalStorage', function(LocalStorage) {
+      tokenGetter: [
+        'LocalStorage',
+        function (LocalStorage) {
           return LocalStorage.getJWT();
-      }]
+        },
+      ],
     });
     $httpProvider.interceptors.push('jwtInterceptor');
     $httpProvider.interceptors.push('EndpointStatusInterceptor');
@@ -26,9 +35,11 @@ angular.module('portainer')
     $httpProvider.defaults.headers.put['Content-Type'] = 'application/json';
     $httpProvider.defaults.headers.patch['Content-Type'] = 'application/json';
 
-    $httpProvider.interceptors.push(['HttpRequestHelper', function(HttpRequestHelper) {
+    $httpProvider.interceptors.push([
+      'HttpRequestHelper',
+      function (HttpRequestHelper) {
         return {
-        request: function(config) {
+          request: function (config) {
             if (config.url.indexOf('/docker/') > -1) {
               config.headers['X-PortainerAgent-Target'] = HttpRequestHelper.portainerAgentTargetHeader();
               if (HttpRequestHelper.portainerAgentManagerOperation()) {
@@ -36,9 +47,10 @@ angular.module('portainer')
               }
             }
             return config;
-        }
+          },
         };
-    }]);
+      },
+    ]);
 
     AnalyticsProvider.setAccount({ tracker: __CONFIG_GA_ID, set: { anonymizeIp: true } });
     AnalyticsProvider.startOffline(true);
@@ -48,10 +60,10 @@ angular.module('portainer')
     Terminal.applyAddon(fit);
 
     $uibTooltipProvider.setTriggers({
-      'mouseenter': 'mouseleave',
+      mouseenter: 'mouseleave',
-      'click': 'click',
+      click: 'click',
-      'focus': 'blur',
+      focus: 'blur',
-      'outsideClick': 'outsideClick'
+      outsideClick: 'outsideClick',
     });
 
     cfpLoadingBarProvider.includeSpinner = false;
@@ -59,4 +71,5 @@ angular.module('portainer')
     cfpLoadingBarProvider.latencyThreshold = 600;
 
     $urlRouterProvider.otherwise('/auth');
-  }]);
+  },
+]);

app/constants.js

@@ -1,25 +1,26 @@
-angular.module('portainer')
+angular
-.constant('API_ENDPOINT_AUTH', 'api/auth')
+  .module('portainer')
-.constant('API_ENDPOINT_DOCKERHUB', 'api/dockerhub')
+  .constant('API_ENDPOINT_AUTH', 'api/auth')
-.constant('API_ENDPOINT_ENDPOINTS', 'api/endpoints')
+  .constant('API_ENDPOINT_DOCKERHUB', 'api/dockerhub')
-.constant('API_ENDPOINT_ENDPOINT_GROUPS', 'api/endpoint_groups')
+  .constant('API_ENDPOINT_ENDPOINTS', 'api/endpoints')
-.constant('API_ENDPOINT_MOTD', 'api/motd')
+  .constant('API_ENDPOINT_ENDPOINT_GROUPS', 'api/endpoint_groups')
-.constant('API_ENDPOINT_EXTENSIONS', 'api/extensions')
+  .constant('API_ENDPOINT_MOTD', 'api/motd')
-.constant('API_ENDPOINT_REGISTRIES', 'api/registries')
+  .constant('API_ENDPOINT_EXTENSIONS', 'api/extensions')
-.constant('API_ENDPOINT_RESOURCE_CONTROLS', 'api/resource_controls')
+  .constant('API_ENDPOINT_REGISTRIES', 'api/registries')
-.constant('API_ENDPOINT_SCHEDULES', 'api/schedules')
+  .constant('API_ENDPOINT_RESOURCE_CONTROLS', 'api/resource_controls')
-.constant('API_ENDPOINT_SETTINGS', 'api/settings')
+  .constant('API_ENDPOINT_SCHEDULES', 'api/schedules')
-.constant('API_ENDPOINT_STACKS', 'api/stacks')
+  .constant('API_ENDPOINT_SETTINGS', 'api/settings')
-.constant('API_ENDPOINT_STATUS', 'api/status')
+  .constant('API_ENDPOINT_STACKS', 'api/stacks')
-.constant('API_ENDPOINT_SUPPORT', 'api/support')
+  .constant('API_ENDPOINT_STATUS', 'api/status')
-.constant('API_ENDPOINT_USERS', 'api/users')
+  .constant('API_ENDPOINT_SUPPORT', 'api/support')
-.constant('API_ENDPOINT_TAGS', 'api/tags')
+  .constant('API_ENDPOINT_USERS', 'api/users')
-.constant('API_ENDPOINT_TEAMS', 'api/teams')
+  .constant('API_ENDPOINT_TAGS', 'api/tags')
-.constant('API_ENDPOINT_TEAM_MEMBERSHIPS', 'api/team_memberships')
+  .constant('API_ENDPOINT_TEAMS', 'api/teams')
-.constant('API_ENDPOINT_TEMPLATES', 'api/templates')
+  .constant('API_ENDPOINT_TEAM_MEMBERSHIPS', 'api/team_memberships')
-.constant('API_ENDPOINT_WEBHOOKS', 'api/webhooks')
+  .constant('API_ENDPOINT_TEMPLATES', 'api/templates')
-.constant('DEFAULT_TEMPLATES_URL', 'https://raw.githubusercontent.com/portainer/templates/master/templates.json')
+  .constant('API_ENDPOINT_WEBHOOKS', 'api/webhooks')
-.constant('PAGINATION_MAX_ITEMS', 10)
+  .constant('DEFAULT_TEMPLATES_URL', 'https://raw.githubusercontent.com/portainer/templates/master/templates.json')
-.constant('APPLICATION_CACHE_VALIDITY', 3600)
+  .constant('PAGINATION_MAX_ITEMS', 10)
-.constant('CONSOLE_COMMANDS_LABEL_PREFIX', 'io.portainer.commands.')
+  .constant('APPLICATION_CACHE_VALIDITY', 3600)
-.constant('PREDEFINED_NETWORKS', ['host', 'bridge', 'none']);
+  .constant('CONSOLE_COMMANDS_LABEL_PREFIX', 'io.portainer.commands.')
+  .constant('PREDEFINED_NETWORKS', ['host', 'bridge', 'none']);

app/docker/__module.js

@@ -1,5 +1,6 @@
-angular.module('portainer.docker', ['portainer.app'])
+angular.module('portainer.docker', ['portainer.app']).config([
-.config(['$stateRegistryProvider', function ($stateRegistryProvider) {
+  '$stateRegistryProvider',
+  function ($stateRegistryProvider) {
     'use strict';
 
     var docker = {
@@ -7,15 +8,17 @@ angular.module('portainer.docker', ['portainer.app'])
       parent: 'root',
       abstract: true,
       resolve: {
-      endpointID: ['EndpointProvider', '$state',
+        endpointID: [
+          'EndpointProvider',
+          '$state',
           function (EndpointProvider, $state) {
             var id = EndpointProvider.endpointID();
             if (!id) {
               return $state.go('portainer.home');
             }
-        }
+          },
-      ]
+        ],
-    }
+      },
     };
 
     var configs = {
@@ -25,9 +28,9 @@ angular.module('portainer.docker', ['portainer.app'])
         'content@': {
           templateUrl: './views/configs/configs.html',
           controller: 'ConfigsController',
-        controllerAs: 'ctrl'
+          controllerAs: 'ctrl',
-      }
+        },
-    }
+      },
     };
 
     var config = {
@@ -36,9 +39,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/configs/edit/config.html',
-        controller: 'ConfigController'
+          controller: 'ConfigController',
-      }
+        },
-    }
+      },
     };
 
     var configCreation = {
@@ -48,9 +51,9 @@ angular.module('portainer.docker', ['portainer.app'])
         'content@': {
           templateUrl: './views/configs/create/createconfig.html',
           controller: 'CreateConfigController',
-        controllerAs: 'ctrl'
+          controllerAs: 'ctrl',
-      }
+        },
-    }
+      },
     };
 
     var containers = {
@@ -59,9 +62,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/containers.html',
-        controller: 'ContainersController'
+          controller: 'ContainersController',
-      }
+        },
-    }
+      },
     };
 
     var container = {
@@ -70,9 +73,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/edit/container.html',
-        controller: 'ContainerController'
+          controller: 'ContainerController',
-      }
+        },
-    }
+      },
     };
 
     var containerAttachConsole = {
@@ -81,9 +84,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/console/attach.html',
-        controller: 'ContainerConsoleController'
+          controller: 'ContainerConsoleController',
-      }
+        },
-    }
+      },
     };
 
     var containerExecConsole = {
@@ -92,9 +95,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/console/exec.html',
-        controller: 'ContainerConsoleController'
+          controller: 'ContainerConsoleController',
-      }
+        },
-    }
+      },
     };
 
     var containerCreation = {
@@ -103,9 +106,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/create/createcontainer.html',
-        controller: 'CreateContainerController'
+          controller: 'CreateContainerController',
-      }
+        },
-    }
+      },
     };
 
     var containerInspect = {
@@ -114,9 +117,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/inspect/containerinspect.html',
-        controller: 'ContainerInspectController'
+          controller: 'ContainerInspectController',
-      }
+        },
-    }
+      },
     };
 
     var containerLogs = {
@@ -125,9 +128,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/logs/containerlogs.html',
-        controller: 'ContainerLogsController'
+          controller: 'ContainerLogsController',
-      }
+        },
-    }
+      },
     };
 
     var containerStats = {
@@ -136,9 +139,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/containers/stats/containerstats.html',
-        controller: 'ContainerStatsController'
+          controller: 'ContainerStatsController',
-      }
+        },
-    }
+      },
     };
 
     var dashboard = {
@@ -147,9 +150,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/dashboard/dashboard.html',
-        controller: 'DashboardController'
+          controller: 'DashboardController',
-      }
+        },
-    }
+      },
     };
 
     var host = {
@@ -157,9 +160,9 @@ angular.module('portainer.docker', ['portainer.app'])
       url: '/host',
       views: {
         'content@': {
-        component: 'hostView'
+          component: 'hostView',
-      }
+        },
-    }
+      },
     };
 
     var hostBrowser = {
@@ -167,9 +170,9 @@ angular.module('portainer.docker', ['portainer.app'])
       url: '/browser',
       views: {
         'content@': {
-        component: 'hostBrowserView'
+          component: 'hostBrowserView',
-      }
+        },
-    }
+      },
     };
 
     var hostJob = {
@@ -177,9 +180,9 @@ angular.module('portainer.docker', ['portainer.app'])
       url: '/job',
       views: {
         'content@': {
-        component: 'hostJobView'
+          component: 'hostJobView',
-      }
+        },
-    }
+      },
     };
 
     var events = {
@@ -188,9 +191,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/events/events.html',
-        controller: 'EventsController'
+          controller: 'EventsController',
-      }
+        },
-    }
+      },
     };
 
     var images = {
@@ -199,9 +202,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/images/images.html',
-        controller: 'ImagesController'
+          controller: 'ImagesController',
-      }
+        },
-    }
+      },
     };
 
     var image = {
@@ -210,9 +213,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/images/edit/image.html',
-        controller: 'ImageController'
+          controller: 'ImageController',
-      }
+        },
-    }
+      },
     };
 
     var imageBuild = {
@@ -221,9 +224,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/images/build/buildimage.html',
-        controller: 'BuildImageController'
+          controller: 'BuildImageController',
-      }
+        },
-    }
+      },
     };
 
     var imageImport = {
@@ -232,9 +235,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/images/import/importimage.html',
-        controller: 'ImportImageController'
+          controller: 'ImportImageController',
-      }
+        },
-    }
+      },
     };
 
     var networks = {
@@ -243,9 +246,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/networks/networks.html',
-        controller: 'NetworksController'
+          controller: 'NetworksController',
-      }
+        },
-    }
+      },
     };
 
     var network = {
@@ -254,9 +257,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/networks/edit/network.html',
-        controller: 'NetworkController'
+          controller: 'NetworkController',
-      }
+        },
-    }
+      },
     };
 
     var networkCreation = {
@@ -265,15 +268,15 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/networks/create/createnetwork.html',
-        controller: 'CreateNetworkController'
+          controller: 'CreateNetworkController',
-      }
+        },
-    }
+      },
     };
 
     var nodes = {
       name: 'docker.nodes',
       url: '/nodes',
-    abstract: true
+      abstract: true,
     };
 
     var node = {
@@ -281,9 +284,9 @@ angular.module('portainer.docker', ['portainer.app'])
       url: '/:id',
       views: {
         'content@': {
-        component: 'nodeDetailsView'
+          component: 'nodeDetailsView',
-      }
+        },
-    }
+      },
     };
 
     var nodeBrowser = {
@@ -291,9 +294,9 @@ angular.module('portainer.docker', ['portainer.app'])
       url: '/browse',
       views: {
         'content@': {
-        component: 'nodeBrowserView'
+          component: 'nodeBrowserView',
-      }
+        },
-    }
+      },
     };
 
     var nodeJob = {
@@ -301,9 +304,9 @@ angular.module('portainer.docker', ['portainer.app'])
       url: '/job',
       views: {
         'content@': {
-        component: 'nodeJobView'
+          component: 'nodeJobView',
-      }
+        },
-    }
+      },
     };
 
     var secrets = {
@@ -312,9 +315,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/secrets/secrets.html',
-        controller: 'SecretsController'
+          controller: 'SecretsController',
-      }
+        },
-    }
+      },
     };
 
     var secret = {
@@ -323,9 +326,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/secrets/edit/secret.html',
-        controller: 'SecretController'
+          controller: 'SecretController',
-      }
+        },
-    }
+      },
     };
 
     var secretCreation = {
@@ -334,9 +337,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/secrets/create/createsecret.html',
-        controller: 'CreateSecretController'
+          controller: 'CreateSecretController',
-      }
+        },
-    }
+      },
     };
 
     var services = {
@@ -345,9 +348,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/services/services.html',
-        controller: 'ServicesController'
+          controller: 'ServicesController',
-      }
+        },
-    }
+      },
     };
 
     var service = {
@@ -356,9 +359,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/services/edit/service.html',
-        controller: 'ServiceController'
+          controller: 'ServiceController',
-      }
+        },
-    }
+      },
     };
 
     var serviceCreation = {
@@ -367,9 +370,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/services/create/createservice.html',
-        controller: 'CreateServiceController'
+          controller: 'CreateServiceController',
-      }
+        },
-    }
+      },
     };
 
     var serviceLogs = {
@@ -378,9 +381,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/services/logs/servicelogs.html',
-        controller: 'ServiceLogsController'
+          controller: 'ServiceLogsController',
-      }
+        },
-    }
+      },
     };
 
     var swarm = {
@@ -389,9 +392,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/swarm/swarm.html',
-        controller: 'SwarmController'
+          controller: 'SwarmController',
-      }
+        },
-    }
+      },
     };
 
     var swarmVisualizer = {
@@ -400,15 +403,15 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/swarm/visualizer/swarmvisualizer.html',
-        controller: 'SwarmVisualizerController'
+          controller: 'SwarmVisualizerController',
-      }
+        },
-    }
+      },
     };
 
     var tasks = {
       name: 'docker.tasks',
       url: '/tasks',
-    abstract: true
+      abstract: true,
     };
 
     var task = {
@@ -417,9 +420,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/tasks/edit/task.html',
-        controller: 'TaskController'
+          controller: 'TaskController',
-      }
+        },
-    }
+      },
     };
 
     var taskLogs = {
@@ -428,9 +431,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/tasks/logs/tasklogs.html',
-        controller: 'TaskLogsController'
+          controller: 'TaskLogsController',
-      }
+        },
-    }
+      },
     };
 
     var volumes = {
@@ -439,9 +442,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/volumes/volumes.html',
-        controller: 'VolumesController'
+          controller: 'VolumesController',
-      }
+        },
-    }
+      },
     };
 
     var volume = {
@@ -450,9 +453,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/volumes/edit/volume.html',
-        controller: 'VolumeController'
+          controller: 'VolumeController',
-      }
+        },
-    }
+      },
     };
 
     var volumeBrowse = {
@@ -461,9 +464,9 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/volumes/browse/browsevolume.html',
-        controller: 'BrowseVolumeController'
+          controller: 'BrowseVolumeController',
-      }
+        },
-    }
+      },
     };
 
     var volumeCreation = {
@@ -472,13 +475,11 @@ angular.module('portainer.docker', ['portainer.app'])
       views: {
         'content@': {
           templateUrl: './views/volumes/create/createvolume.html',
-        controller: 'CreateVolumeController'
+          controller: 'CreateVolumeController',
-      }
+        },
-    }
+      },
     };
 
-
-
     $stateRegistryProvider.register(configs);
     $stateRegistryProvider.register(config);
     $stateRegistryProvider.register(configCreation);
@@ -523,4 +524,5 @@ angular.module('portainer.docker', ['portainer.app'])
     $stateRegistryProvider.register(volume);
     $stateRegistryProvider.register(volumeBrowse);
     $stateRegistryProvider.register(volumeCreation);
-}]);
+  },
+]);

app/docker/components/container-capabilities/container-capabilities.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker').component('containerCapabilities', {
   templateUrl: './containerCapabilities.html',
   bindings: {
-    capabilities: '='
+    capabilities: '=',
-  }
+  },
 });

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

@@ -11,12 +11,9 @@
         </label>
       </div>
       <div class="col-xs-4 col-sm-2 col-md-1">
-        <label class="switch" style="margin-left: 20px;">
+        <label class="switch" style="margin-left: 20px;"> <input type="checkbox" name="capability" ng-model="cap.allowed" /><i></i> </label>
-            <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 class="col-xs-0 col-sm-1 col-md-1"> </div>
     </div>
   </div>
 </form>

app/docker/components/container-quick-actions/containerQuickActions.html

@@ -1,10 +1,11 @@
-<div class="btn-group btn-group-xs" role="group" aria-label="..." style="display:inline-flex;">
+<div class="btn-group btn-group-xs" role="group" aria-label="..." style="display: inline-flex;">
   <a
     authorization="DockerContainerLogs"
     ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId === undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.containers.container.logs({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Logs">
+    title="Logs"
+  >
     <i class="fa fa-file-alt space-right" aria-hidden="true"></i>
   </a>
   <a
@@ -12,7 +13,8 @@
     ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId !== undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.tasks.task.logs({id: $ctrl.taskId})"
-    title="Logs">
+    title="Logs"
+  >
     <i class="fa fa-file-alt space-right" aria-hidden="true"></i>
   </a>
   <a
@@ -20,7 +22,8 @@
     ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId === undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.containers.container.inspect({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Inspect">
+    title="Inspect"
+  >
     <i class="fa fa-info-circle space-right" aria-hidden="true"></i>
   </a>
   <a
@@ -28,7 +31,8 @@
     ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId !== undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.tasks.task({id: $ctrl.taskId})"
-    title="Inspect">
+    title="Inspect"
+  >
     <i class="fa fa-info-circle space-right" aria-hidden="true"></i>
   </a>
   <a
@@ -36,7 +40,8 @@
     ng-if="$ctrl.state.showQuickActionStats && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.containers.container.stats({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Stats">
+    title="Stats"
+  >
     <i class="fa fa-chart-area space-right" aria-hidden="true"></i>
   </a>
   <a
@@ -44,7 +49,8 @@
     ng-if="$ctrl.state.showQuickActionExec && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.containers.container.exec({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Exec Console">
+    title="Exec Console"
+  >
     <i class="fa fa-terminal space-right" aria-hidden="true"></i>
   </a>
   <a
@@ -52,7 +58,8 @@
     ng-if="$ctrl.state.showQuickActionAttach && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
     style="margin: 0 2.5px;"
     ui-sref="docker.containers.container.attach({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Attach Console">
+    title="Attach Console"
+  >
     <i class="fa fa-plug space-right" aria-hidden="true"></i>
   </a>
 </div>

app/docker/components/container-quick-actions/containerQuickActions.js

@@ -5,6 +5,6 @@ angular.module('portainer.docker').component('containerQuickActions', {
     nodeName: '<',
     status: '<',
     state: '<',
-    taskId: '<'
+    taskId: '<',
-  }
+  },
 });

app/docker/components/container-restart-policy/container-restart-policy-controller.js

@@ -1,10 +1,9 @@
-angular
+angular.module('portainer.docker').controller('ContainerRestartPolicyController', [
-.module('portainer.docker')
+  function ContainerRestartPolicyController() {
-.controller('ContainerRestartPolicyController', [function ContainerRestartPolicyController() {
     var ctrl = this;
 
     this.state = {
-    editModel : {}
+      editModel: {},
     };
 
     ctrl.save = save;
@@ -16,11 +15,11 @@ angular
       ctrl.updateRestartPolicy(ctrl.state.editModel);
     }
 
-  this.$onInit = function() {
+    this.$onInit = function () {
       ctrl.state.editModel = {
         name: ctrl.name ? ctrl.name : 'no',
-      maximumRetryCount: ctrl.maximumRetryCount
+        maximumRetryCount: ctrl.maximumRetryCount,
       };
     };
-}
+  },
 ]);

app/docker/components/container-restart-policy/container-restart-policy.js

@@ -1,10 +1,9 @@
-angular.module('portainer.docker')
+angular.module('portainer.docker').component('containerRestartPolicy', {
-.component('containerRestartPolicy', {
   templateUrl: './container-restart-policy.html',
   controller: 'ContainerRestartPolicyController',
   bindings: {
-    'name': '<',
+    name: '<',
-    'maximumRetryCount': '<',
+    maximumRetryCount: '<',
-    'updateRestartPolicy': '&'
+    updateRestartPolicy: '&',
-  }
+  },
 });

app/docker/components/dashboard-cluster-agent-info/dashboard-cluster-agent-info.js

@@ -1,4 +1,4 @@
 angular.module('portainer.docker').component('dashboardClusterAgentInfo', {
   templateUrl: './dashboardClusterAgentInfo.html',
-  controller: 'DashboardClusterAgentInfoController'
+  controller: 'DashboardClusterAgentInfoController',
 });

app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfoController.js

@@ -1,9 +1,10 @@
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('DashboardClusterAgentInfoController', [
-.controller('DashboardClusterAgentInfoController', ['AgentService', 'Notifications',
+  'AgentService',
-function (AgentService, Notifications) {
+  'Notifications',
+  function (AgentService, Notifications) {
     var ctrl = this;
 
-  this.$onInit = function() {
+    this.$onInit = function () {
       AgentService.agents()
         .then(function success(data) {
           ctrl.agentCount = data.length;
@@ -12,5 +13,5 @@ function (AgentService, Notifications) {
           Notifications.error('Failure', err, 'Unable to retrieve agent information');
         });
     };
-
+  },
-}]);
+]);

app/docker/components/datatables/configs-datatable/configsDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <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.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>
@@ -16,7 +14,7 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -45,8 +43,13 @@
         </div>
       </div>
       <div class="actionBar" authorization="DockerConfigDelete, DockerConfigCreate">
-        <button type="button" class="btn btn-sm btn-danger" authorization="DockerConfigDelete"
+        <button
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+          type="button"
+          class="btn btn-sm btn-danger"
+          authorization="DockerConfigDelete"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+        >
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
         <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.configs.new" authorization="DockerConfigCreate">
@@ -55,7 +58,15 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -89,10 +100,13 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <span class="md-checkbox" authorization="DockerConfigDelete, DockerConfigCreate">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
                 <a ui-sref="docker.configs.config({id: item.Id})">{{ item.Name }}</a>
@@ -115,9 +129,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

app/docker/components/datatables/configs-datatable/configsDatatable.js

@@ -10,6 +10,6 @@ angular.module('portainer.docker').component('configsDatatable', {
     reverseOrder: '<',
     showOwnershipColumn: '<',
     removeAction: '<',
-    refreshCallback: '<'
+    refreshCallback: '<',
-  }
+  },
 });

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
       </div>
       <div class="actionBar">
         <form class="form-horizontal">
@@ -17,7 +15,13 @@
               </select>
             </div>
             <div class="col-sm-1">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="$ctrl.joinNetworkActionInProgress || !$ctrl.selectedNetwork" ng-click="$ctrl.joinNetworkAction($ctrl.container, $ctrl.selectedNetwork)" button-spinner="$ctrl.joinNetworkActionInProgress">
+              <button
+                type="button"
+                class="btn btn-primary btn-sm"
+                ng-disabled="$ctrl.joinNetworkActionInProgress || !$ctrl.selectedNetwork"
+                ng-click="$ctrl.joinNetworkAction($ctrl.container, $ctrl.selectedNetwork)"
+                button-spinner="$ctrl.joinNetworkActionInProgress"
+              >
                 <span ng-hide="$ctrl.joinNetworkActionInProgress">Join network</span>
                 <span ng-show="$ctrl.joinNetworkActionInProgress">Joining network...</span>
               </button>
@@ -37,13 +41,21 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit" ng-class="{active: item.Checked}">
+            <tr dir-paginate="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit" ng-class="{ active: item.Checked }">
-              <td><a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a></td>
+              <td
+                ><a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a></td
+              >
               <td>{{ value.IPAddress || '-' }}</td>
               <td>{{ value.Gateway || '-' }}</td>
               <td>{{ value.MacAddress || '-' }}</td>
               <td authorization="DockerNetworkDisconnect">
-                <button type="button" class="btn btn-xs btn-danger" ng-disabled="$ctrl.leaveNetworkActionInProgress" button-spinner="$ctrl.leaveNetworkActionInProgress" ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)">
+                <button
+                  type="button"
+                  class="btn btn-xs btn-danger"
+                  ng-disabled="$ctrl.leaveNetworkActionInProgress"
+                  button-spinner="$ctrl.leaveNetworkActionInProgress"
+                  ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
+                >
                   <span ng-hide="$ctrl.leaveNetworkActionInProgress"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i> Leave network</span>
                   <span ng-show="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
                 </button>

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.js

@@ -12,6 +12,6 @@ angular.module('portainer.docker').component('containerNetworksDatatable', {
     joinNetworkActionInProgress: '<',
     leaveNetworkActionInProgress: '<',
     leaveNetworkAction: '<',
-    nodeName: '<'
+    nodeName: '<',
-  }
+  },
 });

app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html

@@ -2,13 +2,11 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.js

@@ -8,6 +8,6 @@ angular.module('portainer.docker').component('containerProcessesDatatable', {
     headerset: '<',
     tableKey: '@',
     orderBy: '@',
-    reverseOrder: '<'
+    reverseOrder: '<',
-  }
+  },
 });

app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.html

@@ -1,31 +1,69 @@
-<div class="actionBar" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
+<div
+  class="actionBar"
+  authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
+>
   <div class="btn-group" role="group" aria-label="...">
-    <button authorization="DockerContainerStart" type="button" class="btn btn-sm btn-success" ng-click="$ctrl.startAction($ctrl.selectedItems)"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected">
+      authorization="DockerContainerStart"
+      type="button"
+      class="btn btn-sm btn-success"
+      ng-click="$ctrl.startAction($ctrl.selectedItems)"
+      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected"
+    >
       <i class="fa fa-play space-right" aria-hidden="true"></i>Start
     </button>
-    <button authorization="DockerContainerStop" type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.stopAction($ctrl.selectedItems)"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected">
+      authorization="DockerContainerStop"
+      type="button"
+      class="btn btn-sm btn-danger"
+      ng-click="$ctrl.stopAction($ctrl.selectedItems)"
+      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
+    >
       <i class="fa fa-stop space-right" aria-hidden="true"></i>Stop
     </button>
-    <button authorization="DockerContainerKill" type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.killAction($ctrl.selectedItems)"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0">
+      authorization="DockerContainerKill"
+      type="button"
+      class="btn btn-sm btn-danger"
+      ng-click="$ctrl.killAction($ctrl.selectedItems)"
+      ng-disabled="$ctrl.selectedItemCount === 0"
+    >
       <i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill
     </button>
-    <button authorization="DockerContainerRestart" type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.restartAction($ctrl.selectedItems)"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0">
+      authorization="DockerContainerRestart"
+      type="button"
+      class="btn btn-sm btn-primary"
+      ng-click="$ctrl.restartAction($ctrl.selectedItems)"
+      ng-disabled="$ctrl.selectedItemCount === 0"
+    >
       <i class="fa fa-sync space-right" aria-hidden="true"></i>Restart
     </button>
-    <button authorization="DockerContainerPause" type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.pauseAction($ctrl.selectedItems)"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected">
+      authorization="DockerContainerPause"
+      type="button"
+      class="btn btn-sm btn-primary"
+      ng-click="$ctrl.pauseAction($ctrl.selectedItems)"
+      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
+    >
       <i class="fa fa-pause space-right" aria-hidden="true"></i>Pause
     </button>
-    <button authorization="DockerContainerUnpause" type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.resumeAction($ctrl.selectedItems)"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected">
+      authorization="DockerContainerUnpause"
+      type="button"
+      class="btn btn-sm btn-primary"
+      ng-click="$ctrl.resumeAction($ctrl.selectedItems)"
+      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected"
+    >
       <i class="fa fa-play space-right" aria-hidden="true"></i>Resume
     </button>
-    <button authorization="DockerContainerDelete" type="button" class="btn btn-sm btn-danger"
+    <button
-      ng-disabled="$ctrl.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.selectedItems)">
+      authorization="DockerContainerDelete"
+      type="button"
+      class="btn btn-sm btn-danger"
+      ng-disabled="$ctrl.selectedItemCount === 0"
+      ng-click="$ctrl.removeAction($ctrl.selectedItems)"
+    >
       <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
     </button>
   </div>

app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.js

@@ -7,6 +7,6 @@ angular.module('portainer.docker').component('containersDatatableActions', {
     noStoppedItemsSelected: '=',
     noRunningItemsSelected: '=',
     noPausedItemsSelected: '=',
-    showAddAction: '<'
+    showAddAction: '<',
-  }
+  },
 });

app/docker/components/datatables/containers-datatable/actions/containersDatatableActionsController.js

@@ -1,43 +1,47 @@
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('ContainersDatatableActionsController', [
-.controller('ContainersDatatableActionsController', ['$state', 'ContainerService', 'ModalService', 'Notifications', 'HttpRequestHelper',
+  '$state',
-function ($state, ContainerService, ModalService, Notifications, HttpRequestHelper) {
+  'ContainerService',
-  this.startAction = function(selectedItems) {
+  'ModalService',
+  'Notifications',
+  'HttpRequestHelper',
+  function ($state, ContainerService, ModalService, Notifications, HttpRequestHelper) {
+    this.startAction = function (selectedItems) {
       var successMessage = 'Container successfully started';
       var errorMessage = 'Unable to start container';
       executeActionOnContainerList(selectedItems, ContainerService.startContainer, successMessage, errorMessage);
     };
 
-  this.stopAction = function(selectedItems) {
+    this.stopAction = function (selectedItems) {
       var successMessage = 'Container successfully stopped';
       var errorMessage = 'Unable to stop container';
       executeActionOnContainerList(selectedItems, ContainerService.stopContainer, successMessage, errorMessage);
     };
 
-  this.restartAction = function(selectedItems) {
+    this.restartAction = function (selectedItems) {
       var successMessage = 'Container successfully restarted';
       var errorMessage = 'Unable to restart container';
       executeActionOnContainerList(selectedItems, ContainerService.restartContainer, successMessage, errorMessage);
     };
 
-  this.killAction = function(selectedItems) {
+    this.killAction = function (selectedItems) {
       var successMessage = 'Container successfully killed';
       var errorMessage = 'Unable to kill container';
       executeActionOnContainerList(selectedItems, ContainerService.killContainer, successMessage, errorMessage);
     };
 
-  this.pauseAction = function(selectedItems) {
+    this.pauseAction = function (selectedItems) {
       var successMessage = 'Container successfully paused';
       var errorMessage = 'Unable to pause container';
       executeActionOnContainerList(selectedItems, ContainerService.pauseContainer, successMessage, errorMessage);
     };
 
-  this.resumeAction = function(selectedItems) {
+    this.resumeAction = function (selectedItems) {
       var successMessage = 'Container successfully resumed';
       var errorMessage = 'Unable to resume container';
       executeActionOnContainerList(selectedItems, ContainerService.resumeContainer, successMessage, errorMessage);
     };
 
-  this.removeAction = function(selectedItems) {
+    this.removeAction = function (selectedItems) {
       var isOneContainerRunning = false;
       for (var i = 0; i < selectedItems.length; i++) {
         var container = selectedItems[i];
@@ -53,14 +57,15 @@ function ($state, ContainerService, ModalService, Notifications, HttpRequestHelp
       }
 
       ModalService.confirmContainerDeletion(title, function (result) {
-        if(!result) { return; }
+        if (!result) {
+          return;
+        }
         var cleanVolumes = false;
         if (result[0]) {
           cleanVolumes = true;
         }
         removeSelectedContainers(selectedItems, cleanVolumes);
-      }
+      });
-    );
     };
 
     function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
@@ -103,4 +108,5 @@ function ($state, ContainerService, ModalService, Notifications, HttpRequestHelp
           });
       });
     }
-}]);
+  },
+]);

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

@@ -2,52 +2,57 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <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
-              <span uib-dropdown-toggle ><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</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" >
+                  <div class="md-checkbox">
-                      <input id="col_vis_state" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.state.display"/>
+                    <input id="col_vis_state" ng-click="$ctrl.onColumnVisibilityChange()" 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-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.actions.display"/>
+                    <input id="col_vis_actions" ng-click="$ctrl.onColumnVisibilityChange()" 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-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.stack.display"/>
+                    <input id="col_vis_stack" ng-click="$ctrl.onColumnVisibilityChange()" 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-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.image.display"/>
+                    <input id="col_vis_image" ng-click="$ctrl.onColumnVisibilityChange()" 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-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.created.display"/>
+                    <input id="col_vis_created" ng-click="$ctrl.onColumnVisibilityChange()" 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">
-                      <input id="col_vis_ip" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ip.display"/>
+                    <input id="col_vis_ip" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ip.display" />
                     <label for="col_vis_ip" ng-bind="$ctrl.columnVisibility.columns.ip.label"></label>
                   </div>
                   <div class="md-checkbox" ng-if="$ctrl.showHostColumn">
-                      <input id="col_vis_host" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.host.display"/>
+                    <input id="col_vis_host" ng-click="$ctrl.onColumnVisibilityChange()" 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-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ports.display"/>
+                    <input id="col_vis_ports" ng-click="$ctrl.onColumnVisibilityChange()" 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-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ownership.display"/>
+                    <input id="col_vis_ownership" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ownership.display" />
                     <label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.label"></label>
                   </div>
                 </div>
@@ -66,12 +71,12 @@
                 </div>
                 <div class="menuContent">
                   <div class="md-checkbox">
-                    <input id="setting_container_trunc" type="checkbox" ng-model="$ctrl.settings.truncateContainerName" ng-change="$ctrl.onSettingsContainerNameTruncateChange()"/>
+                    <input id="setting_container_trunc" type="checkbox" ng-model="$ctrl.settings.truncateContainerName" ng-change="$ctrl.onSettingsContainerNameTruncateChange()" />
                     <label for="setting_container_trunc">Truncate container name</label>
                   </div>
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -97,23 +102,23 @@
                   </div>
                   <div class="menuContent">
                     <div class="md-checkbox" authorization="DockerContainerStats">
-                      <input id="setting_show_stats" type="checkbox" ng-model="$ctrl.settings.showQuickActionStats" ng-change="$ctrl.onSettingsQuickActionChange()"/>
+                      <input id="setting_show_stats" type="checkbox" ng-model="$ctrl.settings.showQuickActionStats" ng-change="$ctrl.onSettingsQuickActionChange()" />
                       <label for="setting_show_stats">Stats</label>
                     </div>
                     <div class="md-checkbox" authorization="DockerContainerLogs">
-                      <input id="setting_show_logs" type="checkbox" ng-model="$ctrl.settings.showQuickActionLogs" ng-change="$ctrl.onSettingsQuickActionChange()"/>
+                      <input id="setting_show_logs" type="checkbox" ng-model="$ctrl.settings.showQuickActionLogs" ng-change="$ctrl.onSettingsQuickActionChange()" />
                       <label for="setting_show_logs">Logs</label>
                     </div>
                     <div class="md-checkbox" authorization="DockerExecStart">
-                      <input id="setting_show_console" type="checkbox" ng-model="$ctrl.settings.showQuickActionExec" ng-change="$ctrl.onSettingsQuickActionChange()"/>
+                      <input id="setting_show_console" type="checkbox" ng-model="$ctrl.settings.showQuickActionExec" ng-change="$ctrl.onSettingsQuickActionChange()" />
                       <label for="setting_show_console">Console</label>
                     </div>
                     <div class="md-checkbox" authorization="DockerContainerInspect">
-                      <input id="setting_show_inspect" type="checkbox" ng-model="$ctrl.settings.showQuickActionInspect" ng-change="$ctrl.onSettingsQuickActionChange()"/>
+                      <input id="setting_show_inspect" type="checkbox" ng-model="$ctrl.settings.showQuickActionInspect" ng-change="$ctrl.onSettingsQuickActionChange()" />
                       <label for="setting_show_inspect">Inspect</label>
                     </div>
                     <div class="md-checkbox" authorization="DockerContainerAttach">
-                      <input id="setting_show_attach" type="checkbox" ng-model="$ctrl.settings.showQuickActionAttach" ng-change="$ctrl.onSettingsQuickActionChange()"/>
+                      <input id="setting_show_attach" type="checkbox" ng-model="$ctrl.settings.showQuickActionAttach" ng-change="$ctrl.onSettingsQuickActionChange()" />
                       <label for="setting_show_attach">Attach</label>
                     </div>
                   </div>
@@ -126,7 +131,8 @@
           </span>
         </div>
       </div>
-      <containers-datatable-actions ng-if="!$ctrl.offlineMode"
+      <containers-datatable-actions
+        ng-if="!$ctrl.offlineMode"
         selected-items="$ctrl.state.selectedItems"
         selected-item-count="$ctrl.state.selectedItemCount"
         no-stopped-items-selected="$ctrl.state.noStoppedItemsSelected"
@@ -136,14 +142,26 @@
       ></containers-datatable-actions>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
+                <span
+                  class="md-checkbox"
+                  ng-if="!$ctrl.offlineMode"
+                  authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
+                >
                   <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                   <label for="select_all"></label>
                 </span>
@@ -170,7 +188,7 @@
                     </div>
                     <div class="menuContent">
                       <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                        <input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()"/>
+                        <input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
                         <label for="filter_state_{{ $index }}">{{ filter.label }}</label>
                       </div>
                     </div>
@@ -180,7 +198,17 @@
                   </div>
                 </div>
               </th>
-              <th ng-if="$ctrl.settings.showQuickActionStats || $ctrl.settings.showQuickActionLogs || $ctrl.settings.showQuickActionExec || $ctrl.settings.showQuickActionAttach|| $ctrl.settings.showQuickActionInspect" ng-show="$ctrl.columnVisibility.columns.actions.display" authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach">
+              <th
+                ng-if="
+                  $ctrl.settings.showQuickActionStats ||
+                  $ctrl.settings.showQuickActionLogs ||
+                  $ctrl.settings.showQuickActionExec ||
+                  $ctrl.settings.showQuickActionAttach ||
+                  $ctrl.settings.showQuickActionInspect
+                "
+                ng-show="$ctrl.columnVisibility.columns.actions.display"
+                authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach"
+              >
                 Quick actions
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.stack.display">
@@ -235,39 +263,69 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
-                <span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
+                <span
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                  class="md-checkbox"
+                  ng-if="!$ctrl.offlineMode"
+                  authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
+                >
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ng-if="!$ctrl.offlineMode" ui-sref="docker.containers.container({ id: item.Id, nodeName: item.NodeName })" title="{{ item | containername }}">{{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }}</a>
+                <a ng-if="!$ctrl.offlineMode" ui-sref="docker.containers.container({ id: item.Id, nodeName: item.NodeName })" title="{{ item | containername }}">{{
+                  item | containername | truncate: $ctrl.settings.containerNameTruncateSize
+                }}</a>
                 <span ng-if="$ctrl.offlineMode">{{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }}</span>
               </td>
               <td ng-show="$ctrl.columnVisibility.columns.state.display">
-                <span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) !== -1" class="label label-{{ item.Status|containerstatusbadge }} interactive" uib-tooltip="This container has a health check">{{ item.Status }}</span>
+                <span
-                <span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status|containerstatusbadge }}">{{ item.Status }}</span>
+                  ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) !== -1"
+                  class="label label-{{ item.Status | containerstatusbadge }} interactive"
+                  uib-tooltip="This container has a health check"
+                  >{{ item.Status }}</span
+                >
+                <span ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status | containerstatusbadge }}">{{ item.Status }}</span>
               </td>
-              <td ng-if="!$ctrl.offlineMode && ($ctrl.settings.showQuickActionStats || $ctrl.settings.showQuickActionLogs || $ctrl.settings.showQuickActionExec || $ctrl.settings.showQuickActionAttach || $ctrl.settings.showQuickActionInspect)" ng-show="$ctrl.columnVisibility.columns.actions.display" authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs">
+              <td
+                ng-if="
+                  !$ctrl.offlineMode &&
+                  ($ctrl.settings.showQuickActionStats ||
+                    $ctrl.settings.showQuickActionLogs ||
+                    $ctrl.settings.showQuickActionExec ||
+                    $ctrl.settings.showQuickActionAttach ||
+                    $ctrl.settings.showQuickActionInspect)
+                "
+                ng-show="$ctrl.columnVisibility.columns.actions.display"
+                authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs"
+              >
                 <container-quick-actions container-id="item.Id" node-name="item.NodeName" status="item.Status" state="$ctrl.settings"></container-quick-actions>
               </td>
-              <td ng-if="$ctrl.offlineMode">
+              <td ng-if="$ctrl.offlineMode"> </td>
-              </td>
               <td ng-show="$ctrl.columnVisibility.columns.stack.display">{{ item.StackName ? item.StackName : '-' }}</td>
               <td ng-show="$ctrl.columnVisibility.columns.image.display">
                 <a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Image })">{{ item.Image | trimshasum }}</a>
                 <span ng-if="$ctrl.offlineMode">{{ item.Image | trimshasum }}</span>
               </td>
               <td ng-show="$ctrl.columnVisibility.columns.created.display">
-                  {{item.Created | getisodatefromtimestamp}}
+                {{ 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 ng-if="item.Ports.length > 0" ng-repeat="p in item.Ports" class="image-tag" ng-href="http://{{ $ctrl.state.publicURL || p.host }}:{{p.public}}" target="_blank">
+                <a
+                  ng-if="item.Ports.length > 0"
+                  ng-repeat="p in item.Ports"
+                  class="image-tag"
+                  ng-href="http://{{ $ctrl.state.publicURL || p.host }}:{{ p.public }}"
+                  target="_blank"
+                >
                   <i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ p.public }}:{{ p.private }}
                 </a>
-                <span ng-if="item.Ports.length == 0" >-</span>
+                <span ng-if="item.Ports.length == 0">-</span>
               </td>
               <td ng-if="$ctrl.showOwnershipColumn" ng-show="$ctrl.columnVisibility.columns.ownership.display">
                 <span>
@@ -286,9 +344,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

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

@@ -12,6 +12,6 @@ angular.module('portainer.docker').component('containersDatatable', {
     showHostColumn: '<',
     showAddAction: '<',
     offlineMode: '<',
-    refreshCallback: '<'
+    refreshCallback: '<',
-  }
+  },
 });

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

@@ -1,10 +1,12 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('ContainersDatatableController', [
-.controller('ContainersDatatableController', ['$scope', '$controller', 'DatatableService', 'EndpointProvider',
+  '$scope',
-function ($scope, $controller, DatatableService, EndpointProvider) {
+  '$controller',
-
+  'DatatableService',
-  angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+  'EndpointProvider',
+  function ($scope, $controller, DatatableService, EndpointProvider) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
     var ctrl = this;
 
@@ -12,7 +14,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       noStoppedItemsSelected: true,
       noRunningItemsSelected: true,
       noPausedItemsSelected: true,
-    publicURL: EndpointProvider.endpointPublicURL()
+      publicURL: EndpointProvider.endpointPublicURL(),
     });
 
     this.settings = Object.assign(this.settings, {
@@ -22,70 +24,70 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       showQuickActionLogs: true,
       showQuickActionExec: true,
       showQuickActionInspect: true,
-    showQuickActionAttach: false
+      showQuickActionAttach: false,
     });
 
     this.filters = {
       state: {
         open: false,
         enabled: false,
-      values: []
+        values: [],
-    }
+      },
     };
 
     this.columnVisibility = {
       state: {
-      open: false
+        open: false,
       },
       columns: {
         state: {
           label: 'State',
-        display: true
+          display: true,
         },
         actions: {
           label: 'Quick Actions',
-        display: true
+          display: true,
         },
         stack: {
           label: 'Stack',
-        display: true
+          display: true,
         },
         image: {
           label: 'Image',
-        display: true
+          display: true,
         },
         created: {
           label: 'Created',
-        display: true
+          display: true,
         },
         ip: {
           label: 'IP Address',
-        display: true
+          display: true,
         },
         host: {
           label: 'Host',
-        display: true
+          display: true,
         },
         ports: {
           label: 'Published Ports',
-        display: true
+          display: true,
         },
         ownership: {
           label: 'Ownership',
-        display: true
+          display: true,
-      }
+        },
-    }
+      },
     };
 
-  this.onColumnVisibilityChange = function()  {
+    this.onColumnVisibilityChange = function () {
       DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
     };
 
-  this.onSelectionChanged = function() {
+    this.onSelectionChanged = function () {
       this.updateSelectionState();
-  }
+    };
 
-  this.updateSelectionState = function() {
+    this.updateSelectionState = function () {
       this.state.noStoppedItemsSelected = true;
       this.state.noRunningItemsSelected = true;
       this.state.noPausedItemsSelected = true;
@@ -98,7 +100,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       }
     };
 
-  this.updateSelectionStateBasedOnItemStatus = function(item) {
+    this.updateSelectionStateBasedOnItemStatus = function (item) {
       if (item.Status === 'paused') {
         this.state.noPausedItemsSelected = false;
       } else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
@@ -108,7 +110,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       }
     };
 
-  this.applyFilters = function(value) {
+    this.applyFilters = function (value) {
       var container = value;
       var filters = ctrl.filters;
       for (var i = 0; i < filters.state.values.length; i++) {
@@ -120,7 +122,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       return false;
     };
 
-  this.onStateFilterChange = function() {
+    this.onStateFilterChange = function () {
       var filters = this.filters.state.values;
       var filtered = false;
       for (var i = 0; i < filters.length; i++) {
@@ -132,7 +134,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       this.filters.state.enabled = filtered;
     };
 
-  this.onSettingsContainerNameTruncateChange = function() {
+    this.onSettingsContainerNameTruncateChange = function () {
       if (this.settings.truncateContainerName) {
         this.settings.containerNameTruncateSize = 32;
       } else {
@@ -141,11 +143,11 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       DatatableService.setDataTableSettings(this.tableKey, this.settings);
     };
 
-  this.onSettingsQuickActionChange = function() {
+    this.onSettingsQuickActionChange = function () {
       DatatableService.setDataTableSettings(this.tableKey, this.settings);
     };
 
-  this.prepareTableFromDataset = function() {
+    this.prepareTableFromDataset = function () {
       var availableStateFilters = [];
       for (var i = 0; i < this.dataset.length; i++) {
         var item = this.dataset[i];
@@ -154,7 +156,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
     };
 
-  this.updateStoredFilters = function(storedFilters) {
+    this.updateStoredFilters = function (storedFilters) {
       var datasetFilters = this.filters.state.values;
 
       for (var i = 0; i < datasetFilters.length; i++) {
@@ -167,7 +169,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       }
     };
 
-  this.$onInit = function() {
+    this.$onInit = function () {
       this.setDefaults();
       this.prepareTableFromDataset();
 
@@ -204,4 +206,5 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
         this.columnVisibility.state.open = false;
       }
     };
-}]);
+  },
+]);

app/docker/components/datatables/events-datatable/eventsDatatable.html

@@ -2,13 +2,19 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -38,7 +44,10 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>{{ item.Time | getisodatefromtimestamp }}</td>
               <td>{{ item.Type }}</td>
               <td>{{ item.Details }}</td>

app/docker/components/datatables/events-datatable/eventsDatatable.js

@@ -7,6 +7,6 @@ angular.module('portainer.docker').component('eventsDatatable', {
     dataset: '<',
     tableKey: '@',
     orderBy: '@',
-    reverseOrder: '<'
+    reverseOrder: '<',
-  }
+  },
 });

app/docker/components/datatables/host-jobs-datatable/jobsDatatable.html

@@ -16,7 +16,15 @@
           </div>
           <div class="searchBar">
             <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-            <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+            <input
+              type="text"
+              class="searchInput"
+              ng-model="$ctrl.state.textFilter"
+              ng-change="$ctrl.onTextFilterChange()"
+              placeholder="Search..."
+              auto-focus
+              ng-model-options="{ debounce: 300 }"
+            />
           </div>
           <div class="table-responsive">
             <table class="table table-hover table-filters nowrap-cells">
@@ -36,10 +44,8 @@
                       <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
                     </a>
                     <div>
-                      <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled"> Filter
+                      <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled"> Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
-                        <i class="fa fa-filter" aria-hidden="true"></i></span>
+                      <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
-                      <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter
-                        <i class="fa fa-check" aria-hidden="true"></i></span>
                     </div>
                     <div class="dropdown-menu" uib-dropdown-menu>
                       <div class="tableMenu">
@@ -68,19 +74,25 @@
                 </tr>
               </thead>
               <tbody>
-                <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))">
+                <tr
+                  dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+                >
                   <td>
-                    <a ui-sref="docker.containers.container.logs({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Id }}">
+                    <a ui-sref="docker.containers.container.logs({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Id }}"> {{ item | containername }}</a>
-                      {{ item | containername }}</a>
                   </td>
                   <td>
-                    <span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) !== -1" class="label label-{{ item.Status|containerstatusbadge }} interactive"
+                    <span
-                      uib-tooltip="This container has a health check">{{ item.Status }}</span>
+                      ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) !== -1"
-                    <span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status|containerstatusbadge }}">
+                      class="label label-{{ item.Status | containerstatusbadge }} interactive"
-                      {{ item.Status }}</span>
+                      uib-tooltip="This container has a health check"
+                      >{{ item.Status }}</span
+                    >
+                    <span ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status | containerstatusbadge }}">
+                      {{ item.Status }}</span
+                    >
                   </td>
                   <td>
-                    {{item.Created | getisodatefromtimestamp}}
+                    {{ item.Created | getisodatefromtimestamp }}
                   </td>
                 </tr>
                 <tr ng-if="!$ctrl.dataset">

app/docker/components/datatables/host-jobs-datatable/jobsDatatable.js

@@ -7,6 +7,6 @@ angular.module('portainer.docker').component('jobsDatatable', {
     dataset: '<',
     tableKey: '@',
     orderBy: '@',
-    reverseOrder: '<'
+    reverseOrder: '<',
-  }
+  },
 });

app/docker/components/datatables/host-jobs-datatable/jobsDatatableController.js

@@ -1,10 +1,17 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('JobsDatatableController', [
-  .controller('JobsDatatableController', ['$scope', '$controller', '$q', '$state', 'PaginationService', 'DatatableService', 'ContainerService', 'ModalService', 'Notifications',
+  '$scope',
+  '$controller',
+  '$q',
+  '$state',
+  'PaginationService',
+  'DatatableService',
+  'ContainerService',
+  'ModalService',
+  'Notifications',
   function ($scope, $controller, $q, $state, PaginationService, DatatableService, ContainerService, ModalService, Notifications) {
-
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-      angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
 
     var ctrl = this;
 
@@ -12,8 +19,8 @@ angular.module('portainer.docker')
       state: {
         open: false,
         enabled: false,
-          values: []
+        values: [],
-        }
+      },
     };
 
     this.applyFilters = function (value) {
@@ -47,7 +54,7 @@ angular.module('portainer.docker')
         var item = this.dataset[i];
         availableStateFilters.push({
           label: item.Status,
-            display: true
+          display: true,
         });
       }
       this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
@@ -78,12 +85,12 @@ angular.module('portainer.docker')
           buttons: {
             confirm: {
               label: 'Purge',
-                className: 'btn-danger'
+              className: 'btn-danger',
-              }
+            },
           },
           callback: function onConfirm(confirmed) {
             deferred.resolve(confirmed);
-            }
+          },
         });
 
         return deferred.promise;
@@ -95,16 +102,18 @@ angular.module('portainer.docker')
         if (!confirmed) {
           return $q.when();
         }
-          ContainerService.prune({ label: ['io.portainer.job.endpoint'] }).then(function success() {
+        ContainerService.prune({ label: ['io.portainer.job.endpoint'] })
+          .then(function success() {
             Notifications.success('Success', 'Job history cleared');
             $state.reload();
-          }).catch(function error(err) {
+          })
+          .catch(function error(err) {
             Notifications.error('Failure', err.message, 'Unable to clear job history');
           });
       });
     };
 
-      this.$onInit = function() {
+    this.$onInit = function () {
       this.setDefaults();
       this.prepareTableFromDataset();
 
@@ -137,5 +146,5 @@ angular.module('portainer.docker')
       }
       this.onSettingsRepeaterChange();
     };
-    }
+  },
-  ]);
+]);

app/docker/components/datatables/images-datatable/imagesDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <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.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>
@@ -16,7 +14,7 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -46,11 +44,17 @@
       </div>
       <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
         <div class="btn-group" authorization="DockerImageDelete">
-          <button type="button" class="btn btn-sm btn-danger"
+          <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems, false)">
-            ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems, false)">
             <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
           </button>
-          <button type="button" class="btn btn-sm btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-disabled="$ctrl.state.selectedItemCount === 0">
+          <button
+            type="button"
+            class="btn btn-sm btn-danger dropdown-toggle"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+          >
             <span class="caret"></span>
             <span class="sr-only">Toggle Dropdown</span>
           </button>
@@ -65,8 +69,14 @@
           <button type="button" class="btn btn-sm btn-primary" ng-disabled="$ctrl.exportInProgress" ui-sref="docker.images.import" authorization="DockerImageLoad">
             <i class="fa fa-upload space-right" aria-hidden="true"></i>Import
           </button>
-          <button type="button" class="btn btn-sm btn-primary" ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
+          <button
-            ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)" button-spinner="$ctrl.exportInProgress" authorization="DockerImageGet">
+            type="button"
+            class="btn btn-sm btn-primary"
+            ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
+            ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
+            button-spinner="$ctrl.exportInProgress"
+            authorization="DockerImageGet"
+          >
             <i class="fa fa-download space-right" aria-hidden="true"></i>
             <span ng-hide="$ctrl.exportInProgress">Export</span>
             <span ng-show="$ctrl.exportInProgress">Export in progress...</span>
@@ -75,7 +85,15 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
@@ -102,11 +120,11 @@
                     </div>
                     <div class="menuContent">
                       <div class="md-checkbox">
-                        <input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onUsageFilterChange()"/>
+                        <input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onUsageFilterChange()" />
                         <label for="filter_usage_usedImages">Used images</label>
                       </div>
                       <div class="md-checkbox">
-                        <input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onUsageFilterChange()"/>
+                        <input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onUsageFilterChange()" />
                         <label for="filter_usage_unusedImages">Unused images</label>
                       </div>
                     </div>
@@ -147,14 +165,19 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <span class="md-checkbox" ng-if="!$ctrl.offlineMode">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate:40 }}</a>
+                <a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{
-                <span ng-if="$ctrl.offlineMode">{{ item.Id | truncate:40 }}</span>
+                  item.Id | truncate: 40
+                }}</a>
+                <span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
                 <span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="::item.ContainerCount === 0">Unused</span>
               </td>
               <td>
@@ -174,9 +197,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

app/docker/components/datatables/images-datatable/imagesDatatable.js

@@ -14,6 +14,6 @@ angular.module('portainer.docker').component('imagesDatatable', {
     forceRemoveAction: '<',
     exportInProgress: '<',
     offlineMode: '<',
-    refreshCallback: '<'
+    refreshCallback: '<',
-  }
+  },
 });

app/docker/components/datatables/images-datatable/imagesDatatableController.js

@@ -1,8 +1,9 @@
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('ImagesDatatableController', [
-.controller('ImagesDatatableController', ['$scope', '$controller', 'DatatableService',
+  '$scope',
-function ($scope, $controller, DatatableService) {
+  '$controller',
-
+  'DatatableService',
-  angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+  function ($scope, $controller, DatatableService) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
     var ctrl = this;
 
@@ -11,21 +12,20 @@ function ($scope, $controller, DatatableService) {
         open: false,
         enabled: false,
         showUsedImages: true,
-      showUnusedImages: true
+        showUnusedImages: true,
-    }
+      },
     };
 
-  this.applyFilters = function(value) {
+    this.applyFilters = function (value) {
       var image = value;
       var filters = ctrl.filters;
-    if ((image.ContainerCount === 0 && filters.state.showUnusedImages)
+      if ((image.ContainerCount === 0 && filters.state.showUnusedImages) || (image.ContainerCount !== 0 && filters.state.showUsedImages)) {
-      || (image.ContainerCount !== 0 && filters.state.showUsedImages)) {
         return true;
       }
       return false;
     };
 
-  this.onstateFilterChange = function() {
+    this.onstateFilterChange = function () {
       var filters = this.filters.state;
       var filtered = false;
       if (!filters.showUsedImages || !filters.showUnusedImages) {
@@ -35,7 +35,7 @@ function ($scope, $controller, DatatableService) {
       DatatableService.setDataTableFilters(this.tableKey, this.filters);
     };
 
-  this.$onInit = function() {
+    this.$onInit = function () {
       this.setDefaults();
       this.prepareTableFromDataset();
 
@@ -68,4 +68,5 @@ function ($scope, $controller, DatatableService) {
 
       this.onSettingsRepeaterChange();
     };
-}]);
+  },
+]);

app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html

@@ -2,13 +2,19 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -56,8 +62,10 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+            <tr
-              ng-class="{active: item.Checked}">
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <span class="md-checkbox">
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />

app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.js

@@ -10,6 +10,6 @@ angular.module('portainer.docker').component('macvlanNodesDatatable', {
     reverseOrder: '<',
     showIpAddressColumn: '<',
     accessToNodeDetails: '<',
-    state: '='
+    state: '=',
-  }
+  },
 });

app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html

@@ -1,14 +1,22 @@
 <td ng-if="allowCheckbox">
   <span class="md-checkbox" ng-if="!parentCtrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
-    <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="parentCtrl.selectItem(item, $event); $event.stopPropagation()" ng-disabled="parentCtrl.disableRemove(item)"/>
+    <input
+      id="select_{{ $index }}"
+      type="checkbox"
+      ng-model="item.Checked"
+      ng-click="parentCtrl.selectItem(item, $event); $event.stopPropagation()"
+      ng-disabled="parentCtrl.disableRemove(item)"
+    />
     <label for="select_{{ $index }}"></label>
   </span>
-  <a ng-if="parentCtrl.itemCanExpand(item)"><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i></a>
+  <a ng-if="parentCtrl.itemCanExpand(item)"
+    ><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i
+  ></a>
 </td>
 <td ng-if="!allowCheckbox"></td>
 <td>
-  <a ng-if="!parentCtrl.offlineMode" ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate:40 }}</a>
+  <a ng-if="!parentCtrl.offlineMode" ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate: 40 }}</a>
-  <span ng-if="parentCtrl.offlineMode">{{ item.Name | truncate:40 }}</span>
+  <span ng-if="parentCtrl.offlineMode">{{ item.Name | truncate: 40 }}</span>
   <span style="margin-left: 10px;" class="label label-info image-tag space-left" ng-if="item.ResourceControl.System">System</span>
 </td>
 <td>{{ item.StackName ? item.StackName : '-' }}</td>

app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.js

@@ -1,7 +1,7 @@
 import { ResourceControlOwnership as RCO } from 'Portainer/models/resourceControl/resourceControlOwnership';
 
-angular.module('portainer.docker')
+angular.module('portainer.docker').directive('networkRowContent', [
-.directive('networkRowContent', [function networkRowContent() {
+  function networkRowContent() {
     var directive = {
       templateUrl: './networkRowContent.html',
       restrict: 'A',
@@ -10,11 +10,12 @@ angular.module('portainer.docker')
         item: '<',
         parentCtrl: '<',
         allowCheckbox: '<',
-      allowExpand: '<'
+        allowExpand: '<',
       },
       controller: ($scope) => {
         $scope.RCO = RCO;
-    }
+      },
     };
     return directive;
-}]);
+  },
+]);

app/docker/components/datatables/networks-datatable/networksDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <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.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>
@@ -16,7 +14,7 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -45,8 +43,13 @@
         </div>
       </div>
       <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
-        <button type="button" class="btn btn-sm btn-danger" authorization="DockerNetworkDelete"
+        <button
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+          type="button"
+          class="btn btn-sm btn-danger"
+          authorization="DockerNetworkDelete"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+        >
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
         <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.networks.new" authorization="DockerNetworkCreate">
@@ -55,13 +58,21 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
-              <th style="width:55px;">
+              <th style="width: 55px;">
                 <span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
                   <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                   <label for="select_all"></label>
@@ -150,12 +161,17 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+            <tr
-              ng-class="{active: item.Checked}" network-row-content item="item" parent-ctrl="$ctrl" ng-click="$ctrl.expandItem(item, !item.Expanded)" allow-checkbox="true">
+              dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-            </tr>
+              ng-class="{ active: item.Checked }"
-            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="it in item.Subs" style="background: #d5e8f3;"
+              network-row-content
-              network-row-content item="it" parent-ctrl="$ctrl">
+              item="item"
+              parent-ctrl="$ctrl"
+              ng-click="$ctrl.expandItem(item, !item.Expanded)"
+              allow-checkbox="true"
+            >
             </tr>
+            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="it in item.Subs" style="background: #d5e8f3;" network-row-content item="it" parent-ctrl="$ctrl"> </tr>
             <tr ng-if="!$ctrl.dataset">
               <td colspan="9" class="text-center text-muted">Loading...</td>
             </tr>
@@ -166,9 +182,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

app/docker/components/datatables/networks-datatable/networksDatatable.js

@@ -12,6 +12,6 @@ angular.module('portainer.docker').component('networksDatatable', {
     showHostColumn: '<',
     removeAction: '<',
     offlineMode: '<',
-    refreshCallback: '<'
+    refreshCallback: '<',
-  }
+  },
 });

app/docker/components/datatables/networks-datatable/networksDatatableController.js

@@ -1,27 +1,29 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('NetworksDatatableController', [
-  .controller('NetworksDatatableController', ['$scope', '$controller', 'NetworkHelper', 'DatatableService',
+  '$scope',
+  '$controller',
+  'NetworkHelper',
+  'DatatableService',
   function ($scope, $controller, NetworkHelper, DatatableService) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
-      angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+    this.disableRemove = function (item) {
-
-      this.disableRemove = function(item) {
       return NetworkHelper.isSystemNetwork(item);
     };
 
     this.state = Object.assign(this.state, {
-        expandedItems: []
+      expandedItems: [],
-      })
+    });
 
     /**
      * Do not allow system networks to be selected
      */
-      this.allowSelection = function(item) {
+    this.allowSelection = function (item) {
       return !this.disableRemove(item);
-      }
+    };
 
-      this.$onInit = function() {
+    this.$onInit = function () {
       this.setDefaults();
       this.prepareTableFromDataset();
 
@@ -54,19 +56,19 @@ angular.module('portainer.docker')
       this.onSettingsRepeaterChange();
     };
 
-      this.expandItem = function(item, expanded) {
+    this.expandItem = function (item, expanded) {
       item.Expanded = expanded;
     };
 
-      this.itemCanExpand = function(item) {
+    this.itemCanExpand = function (item) {
       return item.Subs.length > 0;
-      }
+    };
 
-      this.hasExpandableItems = function() {
+    this.hasExpandableItems = function () {
       return _.filter(this.state.filteredDataSet, (item) => this.itemCanExpand(item)).length;
     };
 
-      this.expandAll = function() {
+    this.expandAll = function () {
       this.state.expandAll = !this.state.expandAll;
       _.forEach(this.state.filteredDataSet, (item) => {
         if (this.itemCanExpand(item)) {
@@ -74,5 +76,5 @@ angular.module('portainer.docker')
         }
       });
     };
-  }
+  },
 ]);

app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html

@@ -2,13 +2,19 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -52,9 +58,16 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
-              <td><a ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a></td>
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              <td><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td>
+              ng-class="{ active: item.Checked }"
+            >
+              <td
+                ><a ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a></td
+              >
+              <td
+                ><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td
+              >
               <td>{{ item.Slot ? item.Slot : '-' }}</td>
               <td>{{ item.Spec.ContainerSpec.Image | hideshasum }}</td>
               <td>{{ item.Updated | getisodate }}</td>

app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.js

@@ -7,6 +7,6 @@ angular.module('portainer.docker').component('nodeTasksDatatable', {
     dataset: '<',
     tableKey: '@',
     orderBy: '@',
-    reverseOrder: '<'
+    reverseOrder: '<',
-  }
+  },
 });

app/docker/components/datatables/nodes-datatable/nodesDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <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.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>
@@ -16,7 +14,7 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -46,7 +44,15 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -111,7 +117,10 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <a ui-sref="docker.nodes.node({id: item.Id})" ng-if="$ctrl.accessToNodeDetails">{{ item.Name || item.Hostname }}</a>
                 <span ng-if="!$ctrl.accessToNodeDetails">{{ item.Name || item.Hostname }}</span>
@@ -121,8 +130,12 @@
               <td>{{ item.Memory | humansize }}</td>
               <td>{{ item.EngineVersion }}</td>
               <td ng-if="$ctrl.showIpAddressColumn">{{ item.Addr }}</td>
-              <td><span class="label label-{{ item.Status | nodestatusbadge }}">{{ item.Status }}</span></td>
+              <td
-              <td><span class="label label-{{ item.Availability | dockerNodeAvailabilityBadge }}">{{ item.Availability }}</span></td>
+                ><span class="label label-{{ item.Status | nodestatusbadge }}">{{ item.Status }}</span></td
+              >
+              <td
+                ><span class="label label-{{ item.Availability | dockerNodeAvailabilityBadge }}">{{ item.Availability }}</span></td
+              >
             </tr>
             <tr ng-if="!$ctrl.dataset">
               <td colspan="7" class="text-center text-muted">Loading...</td>

app/docker/components/datatables/nodes-datatable/nodesDatatable.js

@@ -10,6 +10,6 @@ angular.module('portainer.docker').component('nodesDatatable', {
     reverseOrder: '<',
     showIpAddressColumn: '<',
     accessToNodeDetails: '<',
-    refreshCallback: '<'
+    refreshCallback: '<',
-  }
+  },
 });

app/docker/components/datatables/secrets-datatable/secretsDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-          <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.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>
@@ -16,7 +14,7 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
+                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -45,8 +43,13 @@
         </div>
       </div>
       <div class="actionBar" authorization="DockerSecretDelete, DockerSecretCreate">
-        <button type="button" class="btn btn-sm btn-danger" authorization="DockerSecretDelete"
+        <button
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+          type="button"
+          class="btn btn-sm btn-danger"
+          authorization="DockerSecretDelete"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+        >
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
         <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.secrets.new" authorization="DockerSecretCreate">
@@ -55,7 +58,15 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -89,10 +100,13 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <span class="md-checkbox" authorization="DockerSecretDelete, DockerSecretCreate">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
                 <a ui-sref="docker.secrets.secret({id: item.Id})">{{ item.Name }}</a>
@@ -115,9 +129,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

app/docker/components/datatables/secrets-datatable/secretsDatatable.js

@@ -10,6 +10,6 @@ angular.module('portainer.docker').component('secretsDatatable', {
     reverseOrder: '<',
     showOwnershipColumn: '<',
     removeAction: '<',
-    refreshCallback: '<'
+    refreshCallback: '<',
-  }
+  },
 });

app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html

@@ -1,6 +1,6 @@
-<div style="background-color: #d5e8f3; padding: 2px">
+<div style="background-color: #d5e8f3; padding: 2px;">
   <table class="table table-condensed table-hover nowrap-cells">
-    <thead style="background-color: #e7f6ff">
+    <thead style="background-color: #e7f6ff;">
       <tr>
         <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" style="width: 10%;">
           <a ng-click="$ctrl.changeOrderBy('Status.State')">
@@ -19,7 +19,7 @@
               </div>
               <div class="menuContent">
                 <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                  <input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()"/>
+                  <input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
                   <label for="filter_state_{{ $ctrl.serviceId }}_{{ $index }}">{{ filter.label }}</label>
                 </div>
               </div>
@@ -55,17 +55,33 @@
       </tr>
     </thead>
     <tbody style="background-color: #f1f9fd;">
-      <tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
+      <tr
+        ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))"
+      >
         <td class="text-center">
           <span class="label label-{{ item.Status.State | taskstatusbadge }} space-right">{{ item.Status.State }}</span>
         </td>
         <td>
           <a ng-if="!$ctrl.agentProxy || !item.Container" ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a>
-          <a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{ item.Id }}</a>
+          <a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{
+            item.Id
+          }}</a>
         </td>
         <td>
-          <container-quick-actions ng-if="!$ctrl.agentProxy || !item.Container" container-id="item.ContainerId" task-id="item.Id" status="item.Status.State" state="$ctrl.state"></container-quick-actions>
+          <container-quick-actions
-          <container-quick-actions ng-if="$ctrl.agentProxy && item.Container" container-id="item.Container.Id" node-name="item.Container.NodeName" status="item.Status.State" state="$ctrl.state"></container-quick-actions>
+            ng-if="!$ctrl.agentProxy || !item.Container"
+            container-id="item.ContainerId"
+            task-id="item.Id"
+            status="item.Status.State"
+            state="$ctrl.state"
+          ></container-quick-actions>
+          <container-quick-actions
+            ng-if="$ctrl.agentProxy && item.Container"
+            container-id="item.Container.Id"
+            node-name="item.Container.NodeName"
+            status="item.Status.State"
+            state="$ctrl.state"
+          ></container-quick-actions>
         </td>
         <td>{{ item.Slot ? item.Slot : '-' }}</td>
         <td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>

app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.js

@@ -10,6 +10,6 @@ angular.module('portainer.docker').component('serviceTasksDatatable', {
     nodes: '<',
     agentProxy: '<',
     textFilter: '=',
-    showTaskLogsButton: '<'
+    showTaskLogsButton: '<',
-  }
+  },
 });

app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatableController.js

@@ -1,10 +1,11 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.docker')
+angular.module('portainer.docker').controller('ServiceTasksDatatableController', [
-  .controller('ServiceTasksDatatableController', ['$scope', '$controller', 'DatatableService',
+  '$scope',
+  '$controller',
+  'DatatableService',
   function ($scope, $controller, DatatableService) {
-
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-      angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
 
     var ctrl = this;
 
@@ -14,18 +15,18 @@ angular.module('portainer.docker')
       showQuickActionConsole: true,
       showQuickActionInspect: true,
       showQuickActionExec: true,
-        showQuickActionAttach: false
+      showQuickActionAttach: false,
     });
 
     this.filters = {
       state: {
         open: false,
         enabled: false,
-          values: []
+        values: [],
-        }
+      },
     };
 
-      this.applyFilters = function(item) {
+    this.applyFilters = function (item) {
       var filters = ctrl.filters;
       for (var i = 0; i < filters.state.values.length; i++) {
         var filter = filters.state.values[i];
@@ -36,7 +37,7 @@ angular.module('portainer.docker')
       return false;
     };
 
-      this.onStateFilterChange = function() {
+    this.onStateFilterChange = function () {
       var filters = this.filters.state.values;
       var filtered = false;
       for (var i = 0; i < filters.length; i++) {
@@ -48,7 +49,7 @@ angular.module('portainer.docker')
       this.filters.state.enabled = filtered;
     };
 
-      this.prepareTableFromDataset = function() {
+    this.prepareTableFromDataset = function () {
       var availableStateFilters = [];
       for (var i = 0; i < this.dataset.length; i++) {
         var item = this.dataset[i];
@@ -57,7 +58,7 @@ angular.module('portainer.docker')
       this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
     };
 
-      this.$onInit = function() {
+    this.$onInit = function () {
       this.setDefaults();
       this.prepareTableFromDataset();
 
@@ -89,5 +90,5 @@ angular.module('portainer.docker')
       }
       this.onSettingsRepeaterChange();
     };
-    }
+  },
 ]);