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>

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)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected">
+    <button
+      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)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected">
+    <button
+      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)"
-      ng-disabled="$ctrl.selectedItemCount === 0">
+    <button
+      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)"
-      ng-disabled="$ctrl.selectedItemCount === 0">
+    <button
+      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)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected">
+    <button
+      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)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected">
+    <button
+      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"
-      ng-disabled="$ctrl.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.selectedItems)">
+    <button
+      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,106 +1,112 @@
-angular.module('portainer.docker')
-.controller('ContainersDatatableActionsController', ['$state', 'ContainerService', '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);
-  };
+angular.module('portainer.docker').controller('ContainersDatatableActionsController', [
+  '$state',
+  'ContainerService',
+  '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) {
-    var successMessage = 'Container successfully stopped';
-    var errorMessage = 'Unable to stop container';
-    executeActionOnContainerList(selectedItems, ContainerService.stopContainer, successMessage, errorMessage);
-  };
+    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) {
-    var successMessage = 'Container successfully restarted';
-    var errorMessage = 'Unable to restart container';
-    executeActionOnContainerList(selectedItems, ContainerService.restartContainer, successMessage, errorMessage);
-  };
+    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) {
-    var successMessage = 'Container successfully killed';
-    var errorMessage = 'Unable to kill container';
-    executeActionOnContainerList(selectedItems, ContainerService.killContainer, successMessage, errorMessage);
-  };
+    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) {
-    var successMessage = 'Container successfully paused';
-    var errorMessage = 'Unable to pause container';
-    executeActionOnContainerList(selectedItems, ContainerService.pauseContainer, successMessage, errorMessage);
-  };
+    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) {
-    var successMessage = 'Container successfully resumed';
-    var errorMessage = 'Unable to resume container';
-    executeActionOnContainerList(selectedItems, ContainerService.resumeContainer, successMessage, errorMessage);
-  };
+    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) {
-    var isOneContainerRunning = false;
-    for (var i = 0; i < selectedItems.length; i++) {
-      var container = selectedItems[i];
-      if (container.State === 'running') {
-        isOneContainerRunning = true;
-        break;
+    this.removeAction = function (selectedItems) {
+      var isOneContainerRunning = false;
+      for (var i = 0; i < selectedItems.length; i++) {
+        var container = selectedItems[i];
+        if (container.State === 'running') {
+          isOneContainerRunning = true;
+          break;
+        }
       }
-    }
 
-    var title = 'You are about to remove one or more container.';
-    if (isOneContainerRunning) {
-      title = 'You are about to remove one or more running container.';
-    }
+      var title = 'You are about to remove one or more container.';
+      if (isOneContainerRunning) {
+        title = 'You are about to remove one or more running container.';
+      }
 
-    ModalService.confirmContainerDeletion(title, function (result) {
-        if(!result) { return; }
+      ModalService.confirmContainerDeletion(title, function (result) {
+        if (!result) {
+          return;
+        }
         var cleanVolumes = false;
         if (result[0]) {
           cleanVolumes = true;
         }
         removeSelectedContainers(selectedItems, cleanVolumes);
-      }
-    );
-  };
-
-  function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
-    var actionCount = containers.length;
-    angular.forEach(containers, function (container) {
-      HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
-      action(container.Id)
-      .then(function success() {
-        Notifications.success(successMessage, container.Names[0]);
-      })
-      .catch(function error(err) {
-        errorMessage = errorMessage + ':' + container.Names[0];
-        Notifications.error('Failure', err, errorMessage);
-      })
-      .finally(function final() {
-        --actionCount;
-        if (actionCount === 0) {
-          $state.reload();
-        }
       });
-    });
-  }
+    };
 
-  function removeSelectedContainers(containers, cleanVolumes) {
-    var actionCount = containers.length;
-    angular.forEach(containers, function (container) {
-      HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
-      ContainerService.remove(container, cleanVolumes)
-      .then(function success() {
-        Notifications.success('Container successfully removed', container.Names[0]);
-      })
-      .catch(function error(err) {
-        Notifications.error('Failure', err, 'Unable to remove container');
-      })
-      .finally(function final() {
-        --actionCount;
-        if (actionCount === 0) {
-          $state.reload();
-        }
+    function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
+      var actionCount = containers.length;
+      angular.forEach(containers, function (container) {
+        HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
+        action(container.Id)
+          .then(function success() {
+            Notifications.success(successMessage, container.Names[0]);
+          })
+          .catch(function error(err) {
+            errorMessage = errorMessage + ':' + container.Names[0];
+            Notifications.error('Failure', err, errorMessage);
+          })
+          .finally(function final() {
+            --actionCount;
+            if (actionCount === 0) {
+              $state.reload();
+            }
+          });
       });
-    });
-  }
-}]);
+    }
+
+    function removeSelectedContainers(containers, cleanVolumes) {
+      var actionCount = containers.length;
+      angular.forEach(containers, function (container) {
+        HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
+        ContainerService.remove(container, cleanVolumes)
+          .then(function success() {
+            Notifications.success('Container successfully removed', container.Names[0]);
+          })
+          .catch(function error(err) {
+            Notifications.error('Failure', err, 'Unable to remove container');
+          })
+          .finally(function final() {
+            --actionCount;
+            if (actionCount === 0) {
+              $state.reload();
+            }
+          });
+      });
+    }
+  },
+]);

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

@@ -2,60 +2,65 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
         <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.columnVisibility.state.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.columnVisibility.state.open">
-              <span uib-dropdown-toggle ><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
-              <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-                <div class="tableMenu">
-                  <div class="menuHeader">
-                    Show / Hide Columns
+          <span
+            class="setting"
+            ng-class="{ 'setting-active': $ctrl.columnVisibility.state.open }"
+            uib-dropdown
+            dropdown-append-to-body
+            auto-close="disabled"
+            is-open="$ctrl.columnVisibility.state.open"
+          >
+            <span uib-dropdown-toggle><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Show / Hide Columns
+                </div>
+                <div class="menuContent">
+                  <div class="md-checkbox">
+                    <input id="col_vis_state" ng-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="menuContent">
-                    <div class="md-checkbox" >
-                      <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"/>
-                      <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"/>
-                      <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"/>
-                      <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"/>
-                      <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"/>
-                      <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"/>
-                      <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"/>
-                      <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"/>
-                      <label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.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" />
+                    <label for="col_vis_actions" ng-bind="$ctrl.columnVisibility.columns.actions.label"></label>
                   </div>
-                  <div>
-                    <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
+                  <div class="md-checkbox">
+                    <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" />
+                    <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" />
+                    <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" />
+                    <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" />
+                    <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" />
+                    <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" />
+                    <label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.label"></label>
                   </div>
                 </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
+                </div>
               </div>
+            </div>
           </span>
           <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>
@@ -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">
@@ -199,8 +227,8 @@
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.created.display">
                 <a ng-click="$ctrl.changeOrderBy('Created')">
-                    <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
-                    <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
                   Created
                 </a>
               </th>
@@ -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">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                <span
+                  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 ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status|containerstatusbadge }}">{{ item.Status }}</span>
+                <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>
+              <td ng-if="$ctrl.offlineMode"> </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">
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $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,207 +1,210 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.docker')
-.controller('ContainersDatatableController', ['$scope', '$controller', 'DatatableService', 'EndpointProvider',
-function ($scope, $controller, DatatableService, EndpointProvider) {
+angular.module('portainer.docker').controller('ContainersDatatableController', [
+  '$scope',
+  '$controller',
+  'DatatableService',
+  'EndpointProvider',
+  function ($scope, $controller, DatatableService, EndpointProvider) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
-  angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+    var ctrl = this;
 
-  var ctrl = this;
+    this.state = Object.assign(this.state, {
+      noStoppedItemsSelected: true,
+      noRunningItemsSelected: true,
+      noPausedItemsSelected: true,
+      publicURL: EndpointProvider.endpointPublicURL(),
+    });
 
-  this.state = Object.assign(this.state, {
-    noStoppedItemsSelected: true,
-    noRunningItemsSelected: true,
-    noPausedItemsSelected: true,
-    publicURL: EndpointProvider.endpointPublicURL()
-  });
+    this.settings = Object.assign(this.settings, {
+      truncateContainerName: true,
+      containerNameTruncateSize: 32,
+      showQuickActionStats: true,
+      showQuickActionLogs: true,
+      showQuickActionExec: true,
+      showQuickActionInspect: true,
+      showQuickActionAttach: false,
+    });
 
-  this.settings = Object.assign(this.settings, {
-    truncateContainerName: true,
-    containerNameTruncateSize: 32,
-    showQuickActionStats: true,
-    showQuickActionLogs: true,
-    showQuickActionExec: true,
-    showQuickActionInspect: true,
-    showQuickActionAttach: false
-  });
-
-  this.filters = {
-    state: {
-      open: false,
-      enabled: false,
-      values: []
-    }
-  };
-
-  this.columnVisibility = {
-    state: {
-      open: false
-    },
-    columns: {
+    this.filters = {
       state: {
-        label: 'State',
-        display: true
+        open: false,
+        enabled: false,
+        values: [],
       },
-      actions: {
-        label: 'Quick Actions',
-        display: true
+    };
+
+    this.columnVisibility = {
+      state: {
+        open: false,
       },
-      stack: {
-        label: 'Stack',
-        display: true
+      columns: {
+        state: {
+          label: 'State',
+          display: true,
+        },
+        actions: {
+          label: 'Quick Actions',
+          display: true,
+        },
+        stack: {
+          label: 'Stack',
+          display: true,
+        },
+        image: {
+          label: 'Image',
+          display: true,
+        },
+        created: {
+          label: 'Created',
+          display: true,
+        },
+        ip: {
+          label: 'IP Address',
+          display: true,
+        },
+        host: {
+          label: 'Host',
+          display: true,
+        },
+        ports: {
+          label: 'Published Ports',
+          display: true,
+        },
+        ownership: {
+          label: 'Ownership',
+          display: true,
+        },
       },
-      image: {
-        label: 'Image',
-        display: true
-      },
-      created: {
-        label: 'Created',
-        display: true
-      },
-      ip: {
-        label: 'IP Address',
-        display: true
-      },
-      host: {
-        label: 'Host',
-        display: true
-      },
-      ports: {
-        label: 'Published Ports',
-        display: true
-      },
-      ownership: {
-        label: 'Ownership',
-        display: true
+    };
+
+    this.onColumnVisibilityChange = function () {
+      DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
+    };
+
+    this.onSelectionChanged = function () {
+      this.updateSelectionState();
+    };
+
+    this.updateSelectionState = function () {
+      this.state.noStoppedItemsSelected = true;
+      this.state.noRunningItemsSelected = true;
+      this.state.noPausedItemsSelected = true;
+
+      for (var i = 0; i < this.dataset.length; i++) {
+        var item = this.dataset[i];
+        if (item.Checked) {
+          this.updateSelectionStateBasedOnItemStatus(item);
+        }
       }
-    }
-  };
+    };
 
-  this.onColumnVisibilityChange = function()  {
-    DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
-  };
-
-  this.onSelectionChanged = function() {
-    this.updateSelectionState();
-  }
-
-  this.updateSelectionState = function() {
-    this.state.noStoppedItemsSelected = true;
-    this.state.noRunningItemsSelected = true;
-    this.state.noPausedItemsSelected = true;
-
-    for (var i = 0; i < this.dataset.length; i++) {
-      var item = this.dataset[i];
-      if (item.Checked) {
-        this.updateSelectionStateBasedOnItemStatus(item);
+    this.updateSelectionStateBasedOnItemStatus = function (item) {
+      if (item.Status === 'paused') {
+        this.state.noPausedItemsSelected = false;
+      } else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
+        this.state.noStoppedItemsSelected = false;
+      } else if (['running', 'healthy', 'unhealthy', 'starting'].indexOf(item.Status) !== -1) {
+        this.state.noRunningItemsSelected = false;
       }
-    }
-  };
+    };
 
-  this.updateSelectionStateBasedOnItemStatus = function(item) {
-    if (item.Status === 'paused') {
-      this.state.noPausedItemsSelected = false;
-    } else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
-      this.state.noStoppedItemsSelected = false;
-    } else if (['running', 'healthy', 'unhealthy', 'starting'].indexOf(item.Status) !== -1) {
-      this.state.noRunningItemsSelected = false;
-    }
-  };
-
-  this.applyFilters = function(value) {
-    var container = value;
-    var filters = ctrl.filters;
-    for (var i = 0; i < filters.state.values.length; i++) {
-      var filter = filters.state.values[i];
-      if (container.Status === filter.label && filter.display) {
-        return true;
+    this.applyFilters = function (value) {
+      var container = value;
+      var filters = ctrl.filters;
+      for (var i = 0; i < filters.state.values.length; i++) {
+        var filter = filters.state.values[i];
+        if (container.Status === filter.label && filter.display) {
+          return true;
+        }
       }
-    }
-    return false;
-  };
+      return false;
+    };
 
-  this.onStateFilterChange = function() {
-    var filters = this.filters.state.values;
-    var filtered = false;
-    for (var i = 0; i < filters.length; i++) {
-      var filter = filters[i];
-      if (!filter.display) {
-        filtered = true;
+    this.onStateFilterChange = function () {
+      var filters = this.filters.state.values;
+      var filtered = false;
+      for (var i = 0; i < filters.length; i++) {
+        var filter = filters[i];
+        if (!filter.display) {
+          filtered = true;
+        }
       }
-    }
-    this.filters.state.enabled = filtered;
-  };
+      this.filters.state.enabled = filtered;
+    };
 
-  this.onSettingsContainerNameTruncateChange = function() {
-    if (this.settings.truncateContainerName) {
-      this.settings.containerNameTruncateSize = 32;
-    } else {
-      this.settings.containerNameTruncateSize = 256;
-    }
-    DatatableService.setDataTableSettings(this.tableKey, this.settings);
-  };
-
-  this.onSettingsQuickActionChange = function() {
-    DatatableService.setDataTableSettings(this.tableKey, this.settings);
-  };
-
-  this.prepareTableFromDataset = function() {
-    var availableStateFilters = [];
-    for (var i = 0; i < this.dataset.length; i++) {
-      var item = this.dataset[i];
-      availableStateFilters.push({ label: item.Status, display: true });
-    }
-    this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
-  };
-
-  this.updateStoredFilters = function(storedFilters) {
-    var datasetFilters = this.filters.state.values;
-
-    for (var i = 0; i < datasetFilters.length; i++) {
-      var filter = datasetFilters[i];
-      var existingFilter = _.find(storedFilters, ['label', filter.label]);
-      if (existingFilter && !existingFilter.display) {
-        filter.display = existingFilter.display;
-        this.filters.state.enabled = true;
+    this.onSettingsContainerNameTruncateChange = function () {
+      if (this.settings.truncateContainerName) {
+        this.settings.containerNameTruncateSize = 32;
+      } else {
+        this.settings.containerNameTruncateSize = 256;
       }
-    }
-  };
+      DatatableService.setDataTableSettings(this.tableKey, this.settings);
+    };
 
-  this.$onInit = function() {
-    this.setDefaults();
-    this.prepareTableFromDataset();
+    this.onSettingsQuickActionChange = function () {
+      DatatableService.setDataTableSettings(this.tableKey, this.settings);
+    };
 
-    this.state.orderBy = this.orderBy;
-    var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-    if (storedOrder !== null) {
-      this.state.reverseOrder = storedOrder.reverse;
-      this.state.orderBy = storedOrder.orderBy;
-    }
+    this.prepareTableFromDataset = function () {
+      var availableStateFilters = [];
+      for (var i = 0; i < this.dataset.length; i++) {
+        var item = this.dataset[i];
+        availableStateFilters.push({ label: item.Status, display: true });
+      }
+      this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
+    };
 
-    var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-    if (textFilter !== null) {
-      this.state.textFilter = textFilter;
-      this.onTextFilterChange();
-    }
+    this.updateStoredFilters = function (storedFilters) {
+      var datasetFilters = this.filters.state.values;
 
-    var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-    if (storedFilters !== null) {
-      this.filters = storedFilters;
-      this.filters.state.open = false;
-      this.updateStoredFilters(storedFilters.state.values);
-    }
+      for (var i = 0; i < datasetFilters.length; i++) {
+        var filter = datasetFilters[i];
+        var existingFilter = _.find(storedFilters, ['label', filter.label]);
+        if (existingFilter && !existingFilter.display) {
+          filter.display = existingFilter.display;
+          this.filters.state.enabled = true;
+        }
+      }
+    };
 
-    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-    if (storedSettings !== null) {
-      this.settings = storedSettings;
-      this.settings.open = false;
-    }
-    this.onSettingsRepeaterChange();
+    this.$onInit = function () {
+      this.setDefaults();
+      this.prepareTableFromDataset();
 
-    var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
-    if (storedColumnVisibility !== null) {
-      this.columnVisibility = storedColumnVisibility;
-      this.columnVisibility.state.open = false;
-    }
-  };
-}]);
+      this.state.orderBy = this.orderBy;
+      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
+      if (storedOrder !== null) {
+        this.state.reverseOrder = storedOrder.reverse;
+        this.state.orderBy = storedOrder.orderBy;
+      }
+
+      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+      if (textFilter !== null) {
+        this.state.textFilter = textFilter;
+        this.onTextFilterChange();
+      }
+
+      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
+      if (storedFilters !== null) {
+        this.filters = storedFilters;
+        this.filters.state.open = false;
+        this.updateStoredFilters(storedFilters.state.values);
+      }
+
+      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+      if (storedSettings !== null) {
+        this.settings = storedSettings;
+        this.settings.open = false;
+      }
+      this.onSettingsRepeaterChange();
+
+      var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
+      if (storedColumnVisibility !== null) {
+        this.columnVisibility = storedColumnVisibility;
+        this.columnVisibility.state.open = false;
+      }
+    };
+  },
+]);