feat(datatables): auto refresh on datatables (#2974)

* feat(datatables): auto refresh on datatables

* feat(datatables): auto refresh implementation on docker related resources

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

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="actionBar" authorization="DockerConfigDelete, DockerConfigCreate">
         <button type="button" class="btn btn-sm btn-danger" authorization="DockerConfigDelete"

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

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

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

@@ -69,6 +69,27 @@
                     <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
                 </div>
                 <div authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach">
                   <div class="menuHeader">

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

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

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

@@ -15,8 +15,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
     publicURL: EndpointProvider.endpointPublicURL()
   });
 
-  this.settings = {
+  this.settings = Object.assign(this.settings, {
-    open: false,
     truncateContainerName: true,
     containerNameTruncateSize: 32,
     showQuickActionStats: true,
@@ -24,7 +23,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
     showQuickActionExec: true,
     showQuickActionInspect: true,
     showQuickActionAttach: false
-  };
+  });
 
   this.filters = {
     state: {
@@ -197,6 +196,7 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
       this.settings = storedSettings;
       this.settings.open = false;
     }
+    this.onSettingsRepeaterChange();
 
     var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
     if (storedColumnVisibility !== null) {

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

@@ -128,6 +128,13 @@ angular.module('portainer.docker')
         if (this.filters && this.filters.state) {
           this.filters.state.open = false;
         }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+        this.onSettingsRepeaterChange();
       };
     }
   ]);

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

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
         <div class="btn-group" authorization="DockerImageDelete">

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

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

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

@@ -58,5 +58,13 @@ function ($scope, $controller, DatatableService) {
     if (this.filters && this.filters.state) {
       this.filters.state.open = false;
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+
+    this.onSettingsRepeaterChange();
   };
 }]);

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

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
         <button type="button" class="btn btn-sm btn-danger" authorization="DockerNetworkDelete"

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

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

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

@@ -38,6 +38,13 @@ angular.module('portainer.docker')
         if (this.filters && this.filters.state) {
           this.filters.state.open = false;
         }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+        this.onSettingsRepeaterChange();
       };
   }
 ]);

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

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>

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

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

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

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="actionBar" authorization="DockerSecretDelete, DockerSecretCreate">
         <button type="button" class="btn btn-sm btn-danger" authorization="DockerSecretDelete"

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

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

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

@@ -79,6 +79,13 @@ angular.module('portainer.docker')
         if (this.filters && this.filters.state) {
           this.filters.state.open = false;
         }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+        this.onSettingsRepeaterChange();
       };
     }
 ]);

app/docker/components/datatables/services-datatable/servicesDatatable.html

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <services-datatable-actions
         selected-items="$ctrl.state.selectedItems"

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

@@ -14,6 +14,7 @@ angular.module('portainer.docker').component('servicesDatatable', {
     showUpdateAction: '<',
     showAddAction: '<',
     showStackColumn: '<',
-    showTaskLogsButton: '<'
+    showTaskLogsButton: '<',
+    refreshCallback: '<'
   }
 });

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

@@ -92,5 +92,12 @@ function ($scope, $controller, DatatableService, EndpointProvider) {
     if (storedExpandedItems !== null) {
       this.expandItems(storedExpandedItems);
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+    this.onSettingsRepeaterChange();
   };
 }]);

app/docker/components/datatables/tasks-datatable/tasksDatatableController.js

@@ -35,5 +35,12 @@ function ($scope, $controller, DatatableService) {
     if (this.filters && this.filters.state) {
       this.filters.state.open = false;
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+    this.onSettingsRepeaterChange();
   };
 }]);

app/docker/components/datatables/volumes-datatable/volumesDatatable.html

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
         <button type="button" class="btn btn-sm btn-danger" authorization="DockerVolumeDelete"

app/docker/components/datatables/volumes-datatable/volumesDatatable.js

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

app/docker/components/datatables/volumes-datatable/volumesDatatableController.js

@@ -58,5 +58,12 @@ function ($scope, $controller, DatatableService) {
     if (this.filters && this.filters.state) {
       this.filters.state.open = false;
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+    this.onSettingsRepeaterChange();
   };
 }]);

app/docker/views/configs/configs.html

@@ -15,6 +15,7 @@
     order-by="Name" 
     show-ownership-column="applicationState.application.authentication"
     remove-action="ctrl.removeAction"
+    refresh-callback="ctrl.getConfigs"
     ></configs-datatable>
   </div>
 </div>

app/docker/views/configs/configsController.js

@@ -11,10 +11,15 @@ class ConfigsController {
 
     this.removeAction = this.removeAction.bind(this);
     this.removeActionAsync = this.removeActionAsync.bind(this);
+    this.getConfigs = this.getConfigs.bind(this);
+    this.getConfigsAsync = this.getConfigsAsync.bind(this);
   }
 
-  async $onInit() {
+  getConfigs() {
-    this.configs = [];
+    return this.$async(this.getConfigsAsync);
+  }
+
+  async getConfigsAsync() {
     try {
       this.configs = await this.ConfigService.configs();
     } catch (err) {
@@ -22,6 +27,11 @@ class ConfigsController {
     }
   }
 
+  async $onInit() {
+    this.configs = [];
+    this.getConfigs();
+  }
+
   removeAction(selectedItems) {
     return this.$async(this.removeActionAsync, selectedItems);
   }

app/docker/views/containers/containers.html

@@ -17,6 +17,7 @@
       show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
       show-add-action="true"
       offline-mode="offlineMode"
+      refresh-callback="getContainers"
     ></containers-datatable>
   </div>
 </div>

app/docker/views/containers/containersController.js

@@ -4,7 +4,9 @@ function ($scope, ContainerService, Notifications, EndpointProvider) {
 
   $scope.offlineMode = false;
 
-  function initView() {
+  $scope.getContainers = getContainers;
+
+  function getContainers() {
     ContainerService.containers(1)
     .then(function success(data) {
       $scope.containers = data;
@@ -16,5 +18,9 @@ function ($scope, ContainerService, Notifications, EndpointProvider) {
     });
   }
 
+  function initView() {
+    getContainers();
+  }
+
   initView();
 }]);

app/docker/views/images/images.html

@@ -64,6 +64,7 @@
     force-remove-action="confirmRemovalAction"
     export-in-progress="state.exportInProgress"
     offline-mode="offlineMode"
+    refresh-callback="getImages"
     ></images-datatable>
   </div>
 </div>

app/docker/views/images/imagesController.js

@@ -117,7 +117,8 @@ function ($scope, $state, ImageService, Notifications, ModalService, HttpRequest
 
   $scope.offlineMode = false;
 
-  function initView() {
+  $scope.getImages = getImages;
+  function getImages() {
     ImageService.images(true)
     .then(function success(data) {
       $scope.images = data;
@@ -129,5 +130,9 @@ function ($scope, $state, ImageService, Notifications, ModalService, HttpRequest
     });
   }
 
+  function initView() {
+    getImages();
+  }
+
   initView();
 }]);

app/docker/views/networks/networks.html

@@ -17,6 +17,7 @@
     show-ownership-column="applicationState.application.authentication"
     show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
     offline-mode="offlineMode"
+    refresh-callback="getNetworks"
     ></networks-datatable>
   </div>
 </div>

app/docker/views/networks/networksController.js

@@ -26,7 +26,9 @@ function ($scope, $state, NetworkService, Notifications, HttpRequestHelper, Endp
 
   $scope.offlineMode = false;
 
-  function initView() {
+  $scope.getNetworks = getNetworks;
+
+  function getNetworks() {
     NetworkService.networks(true, true, true)
     .then(function success(data) {
       $scope.networks = data;
@@ -38,5 +40,9 @@ function ($scope, $state, NetworkService, Notifications, HttpRequestHelper, Endp
     });
   }
 
+  function initView() {
+    getNetworks();
+  }
+
   initView();
 }]);

app/docker/views/secrets/secrets.html

@@ -15,6 +15,7 @@
     order-by="Name" 
     show-ownership-column="applicationState.application.authentication"
     remove-action="removeAction"
+    refresh-callback="getSecrets"
     ></secrets-datatable>
   </div>
 </div>

app/docker/views/secrets/secretsController.js

@@ -23,7 +23,9 @@ function ($scope, $state, SecretService, Notifications) {
     });
   };
 
-  function initView() {
+  $scope.getSecrets = getSecrets;
+
+  function getSecrets() {
     SecretService.secrets()
     .then(function success(data) {
       $scope.secrets = data;
@@ -34,5 +36,9 @@ function ($scope, $state, SecretService, Notifications) {
     });
   }
 
+  function initView() {
+    getSecrets();
+  }
+
   initView();
 }]);

app/docker/views/services/services.html

@@ -20,6 +20,7 @@
     show-task-logs-button="applicationState.endpoint.apiVersion >= 1.30"
     show-add-action="true"
     show-stack-column="true"
+    refresh-callback="getServices"
     ></services-datatable>
   </div>
 </div>

app/docker/views/services/servicesController.js

@@ -2,7 +2,8 @@ angular.module('portainer.docker')
 .controller('ServicesController', ['$q', '$scope', 'ServiceService', 'ServiceHelper', 'Notifications', 'TaskService', 'TaskHelper', 'NodeService', 'ContainerService',
 function ($q, $scope, ServiceService, ServiceHelper, Notifications, TaskService, TaskHelper, NodeService, ContainerService) {
 
-  function initView() {
+  $scope.getServices = getServices;
+  function getServices() {
     var agentProxy = $scope.applicationState.endpoint.mode.agentProxy;
 
     $q.all({
@@ -38,5 +39,9 @@ function ($q, $scope, ServiceService, ServiceHelper, Notifications, TaskService,
     });
   }
 
+  function initView() {
+    getServices();
+  }
+
   initView();
 }]);

app/docker/views/swarm/swarm.html

@@ -52,6 +52,7 @@
     order-by="Hostname" 
     show-ip-address-column="applicationState.endpoint.apiVersion >= 1.25"
     access-to-node-details="!applicationState.application.authentication || isAdmin"
+    refresh-callback="getNodes"
     ></nodes-datatable>
   </div>
 </div>

app/docker/views/swarm/swarmController.js

@@ -58,6 +58,21 @@ function ($q, $scope, SystemService, NodeService, Notifications, StateManager, A
     $scope.totalMemory = memory;
   }
 
+  $scope.getNodes = getNodes;
+  function getNodes() {
+    var provider = $scope.applicationState.endpoint.mode.provider;
+    if (provider === 'DOCKER_SWARM_MODE') {
+      NodeService.nodes().then(function(data) {
+          var nodes = data;
+          processTotalCPUAndMemory(nodes);
+          $scope.nodes = nodes;
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to retrieve cluster details');
+      });
+    }
+  }
+
   function initView() {
     if (StateManager.getState().application.authentication) {
       $scope.isAdmin = Authentication.isAdmin();
@@ -66,16 +81,13 @@ function ($q, $scope, SystemService, NodeService, Notifications, StateManager, A
     var provider = $scope.applicationState.endpoint.mode.provider;
     $q.all({
       version: SystemService.version(),
-      info: SystemService.info(),
+      info: SystemService.info()
-      nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes()
     })
     .then(function success(data) {
       $scope.docker = data.version;
       $scope.info = data.info;
       if (provider === 'DOCKER_SWARM_MODE') {
-        var nodes = data.nodes;
+        getNodes();
-        processTotalCPUAndMemory(nodes);
-        $scope.nodes = nodes;
       } else {
         extractSwarmInfo(data.info);
       }

app/docker/views/volumes/volumes.html

@@ -18,6 +18,7 @@
       show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
       show-browse-action="applicationState.endpoint.mode.agentProxy"
       offline-mode="offlineMode"
+      refresh-callback="getVolumes"
     ></volumes-datatable>
   </div>
 </div>

app/docker/views/volumes/volumesController.js

@@ -26,7 +26,8 @@ function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notif
 
   $scope.offlineMode = false;
 
-  function initView() {
+  $scope.getVolumes = getVolumes;
+  function getVolumes() {
     var endpointProvider = $scope.applicationState.endpoint.mode.provider;
     var endpointRole = $scope.applicationState.endpoint.mode.role;
 
@@ -53,5 +54,9 @@ function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notif
     });
   }
 
+  function initView() {
+    getVolumes();
+  }
+
   initView();
 }]);

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatableController.js

@@ -30,6 +30,13 @@ angular.module('portainer.docker')
         if (this.filters && this.filters.state) {
           this.filters.state.open = false;
         }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+        this.onSettingsRepeaterChange();
       };
   }
 ]);

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatableController.js

@@ -44,5 +44,12 @@ function($scope, $controller, clipboard, Notifications, StoridgeNodeService, Dat
     if (this.filters && this.filters.state) {
       this.filters.state.open = false;
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+    this.onSettingsRepeaterChange();
   };
 }]);

app/portainer/components/access-datatable/accessDatatableController.js

@@ -34,6 +34,13 @@ angular.module('portainer.app')
         if (this.filters && this.filters.state) {
           this.filters.state.open = false;
         }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+        this.onSettingsRepeaterChange();
       };
   }
 ]);

app/portainer/components/datatables/genericDatatableController.js

@@ -6,8 +6,8 @@ function isBetween(value, a, b) {
 }
 
 angular.module('portainer.app')
-.controller('GenericDatatableController', ['PaginationService', 'DatatableService', 'PAGINATION_MAX_ITEMS',
+.controller('GenericDatatableController', ['$interval', 'PaginationService', 'DatatableService', 'PAGINATION_MAX_ITEMS',
-function (PaginationService, DatatableService, PAGINATION_MAX_ITEMS) {
+function ($interval, PaginationService, DatatableService, PAGINATION_MAX_ITEMS) {
 
   this.state = {
     selectAll: false,
@@ -20,6 +20,13 @@ function (PaginationService, DatatableService, PAGINATION_MAX_ITEMS) {
     selectedItems: []
   };
 
+  this.settings = {
+    open: false,
+    repeater: {
+      autoRefresh: false,
+      refreshRate: '30'
+    }
+  }
 
   this.onTextFilterChange = function() {
     DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
@@ -87,7 +94,7 @@ function (PaginationService, DatatableService, PAGINATION_MAX_ITEMS) {
   /**
    * Override this method to execute code after selection changed on datatable
    */
-  this.onSelectionChanged = function () {
+  this.onSelectionChanged = function() {
     return;
   }
 
@@ -131,5 +138,47 @@ function (PaginationService, DatatableService, PAGINATION_MAX_ITEMS) {
     if (this.filters && this.filters.state) {
       this.filters.state.open = false;
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+    this.onSettingsRepeaterChange();
   };
+  
+  /**
+   * REPEATER SECTION
+   */
+  this.repeater = undefined;
+
+  this.$onDestroy = function() {
+    this.stopRepeater();
+  };
+
+  this.stopRepeater = function() {
+    if (angular.isDefined(this.repeater)) {
+      $interval.cancel(this.repeater);
+      this.repeater = undefined;
+    }
+  }
+
+  this.startRepeater = function() {
+    this.repeater = $interval(() => {
+      this.refreshCallback();
+    }, this.settings.repeater.refreshRate * 1000);
+  }
+
+  this.onSettingsRepeaterChange = function() {
+    this.stopRepeater();
+    if (angular.isDefined(this.refreshCallback) && this.settings.repeater.autoRefresh) {
+      this.startRepeater();
+      $('#refreshRateChange').show();
+      $('#refreshRateChange').fadeOut(1500);
+    }
+    DatatableService.setDataTableSettings(this.tableKey, this.settings);
+  }
+  /**
+   * !REPEATER SECTION
+   */
 }]);

app/portainer/components/datatables/schedules-datatable/schedulesDatatableController.js

@@ -34,6 +34,13 @@ angular.module('portainer.app')
         if (this.filters && this.filters.state) {
           this.filters.state.open = false;
         }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+        this.onSettingsRepeaterChange();
       };
   }
 ]);

app/portainer/components/datatables/stacks-datatable/stacksDatatable.html

@@ -5,6 +5,44 @@
         <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.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader">
+                  Table settings
+                </div>
+                <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()"/>
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate">
+                        Refresh rate
+                      </label>
+                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
       </div>
       <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
         <button type="button" class="btn btn-sm btn-danger" authorization="PortainerStackDelete"

app/portainer/components/datatables/stacks-datatable/stacksDatatable.js

@@ -10,6 +10,7 @@ angular.module('portainer.app').component('stacksDatatable', {
     reverseOrder: '<',
     showOwnershipColumn: '<',
     removeAction: '<',
-    offlineMode: '<'
+    offlineMode: '<',
+    refreshCallback: '<'
   }
 });

app/portainer/components/datatables/stacks-datatable/stacksDatatableController.js

@@ -34,6 +34,13 @@ function ($scope, $controller, DatatableService) {
     if (this.filters && this.filters.state) {
       this.filters.state.open = false;
     }
+
+    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+    if (storedSettings !== null) {
+      this.settings = storedSettings;
+      this.settings.open = false;
+    }
+    this.onSettingsRepeaterChange();
   };
 
 }]);

app/portainer/views/stacks/stacks.html

@@ -16,6 +16,7 @@
     remove-action="removeAction"
     show-ownership-column="applicationState.application.authentication"
     offline-mode="offlineMode"
+    refresh-callback="getStacks"
     ></stacks-datatable>
   </div>
 </div>

app/portainer/views/stacks/stacksController.js

@@ -35,7 +35,8 @@ function ($scope, $state, Notifications, StackService, ModalService, EndpointPro
 
   $scope.offlineMode = false;
 
-  function initView() {
+  $scope.getStacks = getStacks;
+  function getStacks() {
     var endpointMode = $scope.applicationState.endpoint.mode;
     var endpointId = EndpointProvider.endpointID();
 
@@ -55,5 +56,9 @@ function ($scope, $state, Notifications, StackService, ModalService, EndpointPro
     });
   }
 
+  function initView() {
+    getStacks();
+  }
+
   initView();
 }]);

assets/css/app.css

@@ -560,6 +560,17 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
   display: none;
 }
 
+.small-select {
+  display: inline-block;
+  padding: 0px 6px;
+  margin-left: 10px;
+  color: #555555;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
 .bootbox-form .checkbox i {
   margin-left: 21px;
 }