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

* feat(datatables): auto refresh on datatables

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

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() {
-    this.configs = [];
+  getConfigs() {
+    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(),
-      nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes()
+      info: SystemService.info()
     })
     .then(function success(data) {
       $scope.docker = data.version;
       $scope.info = data.info;
       if (provider === 'DOCKER_SWARM_MODE') {
-        var nodes = data.nodes;
-        processTotalCPUAndMemory(nodes);
-        $scope.nodes = nodes;
+        getNodes();
       } 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();
 }]);