From b81d4fa7f2058f1318bddb001c17a576f318a8e9 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Sat, 8 Oct 2016 14:59:58 +1300
Subject: [PATCH] feat(global): display a loading text in list views (#267)

---
 app/components/containers/containers.html         | 3 +++
 app/components/containers/containersController.js | 5 ++++-
 app/components/images/images.html                 | 3 +++
 app/components/images/imagesController.js         | 2 +-
 app/components/networks/networks.html             | 3 +++
 app/components/networks/networksController.js     | 3 +--
 app/components/services/services.html             | 6 ++++++
 app/components/services/servicesController.js     | 3 +--
 app/components/volumes/volumes.html               | 3 +++
 app/components/volumes/volumesController.js       | 3 +--
 10 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/components/containers/containers.html b/app/components/containers/containers.html
index 1e13ffac3..6369dcc37 100644
--- a/app/components/containers/containers.html
+++ b/app/components/containers/containers.html
@@ -98,6 +98,9 @@
                 <span ng-if="container.Ports.length == 0" >-</span>
               </td>
             </tr>
+            <tr ng-if="!containers">
+              <td colspan="8" class="text-center text-muted">Loading...</td>
+            </tr>
             <tr ng-if="containers.length == 0">
               <td colspan="8" class="text-center text-muted">No containers available.</td>
             </tr>
diff --git a/app/components/containers/containersController.js b/app/components/containers/containersController.js
index bbbe506d0..caef7c94b 100644
--- a/app/components/containers/containersController.js
+++ b/app/components/containers/containersController.js
@@ -8,7 +8,6 @@ function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config)
   $scope.sortReverse = false;
   $scope.state.selectedItemCount = 0;
   $scope.swarm_mode = false;
-  $scope.containers = [];
 
   $scope.order = function (sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
@@ -34,6 +33,10 @@ function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config)
         return model;
       });
       $('#loadContainersSpinner').hide();
+    }, function (e) {
+      $('#loadContainersSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve containers");
+      $scope.containers = [];
     });
   };
 
diff --git a/app/components/images/images.html b/app/components/images/images.html
index 1405432c0..cad9b590b 100644
--- a/app/components/images/images.html
+++ b/app/components/images/images.html
@@ -107,6 +107,9 @@
                 <td>{{ image.VirtualSize|humansize }}</td>
                 <td>{{ image.Created|getisodatefromtimestamp }}</td>
               </tr>
+              <tr ng-if="!images">
+                <td colspan="5" class="text-center text-muted">Loading...</td>
+              </tr>
               <tr ng-if="images.length == 0">
                 <td colspan="5" class="text-center text-muted">No images available.</td>
               </tr>
diff --git a/app/components/images/imagesController.js b/app/components/images/imagesController.js
index 76ff6e29d..0d17817c4 100644
--- a/app/components/images/imagesController.js
+++ b/app/components/images/imagesController.js
@@ -5,7 +5,6 @@ function ($scope, $state, Config, Image, Messages) {
   $scope.sortType = 'RepoTags';
   $scope.sortReverse = true;
   $scope.state.selectedItemCount = 0;
-  $scope.images = [];
 
   $scope.config = {
     Image: '',
@@ -98,6 +97,7 @@ function ($scope, $state, Config, Image, Messages) {
     }, function (e) {
       $('#loadImagesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve images");
+      $scope.images = [];
     });
   }
 
diff --git a/app/components/networks/networks.html b/app/components/networks/networks.html
index 20ebf0f5b..6d75df9c5 100644
--- a/app/components/networks/networks.html
+++ b/app/components/networks/networks.html
@@ -131,6 +131,9 @@
                 <td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td>
                 <td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td>
               </tr>
+              <tr ng-if="!networks">
+                <td colspan="8" class="text-center text-muted">Loading...</td>
+              </tr>
               <tr ng-if="networks.length == 0">
                 <td colspan="8" class="text-center text-muted">No networks available.</td>
               </tr>
diff --git a/app/components/networks/networksController.js b/app/components/networks/networksController.js
index 818f4f58b..4178cd047 100644
--- a/app/components/networks/networksController.js
+++ b/app/components/networks/networksController.js
@@ -6,8 +6,6 @@ function ($scope, $state, Network, Config, Messages) {
   $scope.state.advancedSettings = false;
   $scope.sortType = 'Name';
   $scope.sortReverse = false;
-  $scope.networks = [];
-
   $scope.config = {
     Name: ''
   };
@@ -93,6 +91,7 @@ function ($scope, $state, Network, Config, Messages) {
     }, function (e) {
       $('#loadNetworksSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve networks");
+      $scope.networks = [];
     });
   }
 
diff --git a/app/components/services/services.html b/app/components/services/services.html
index 8cc618a28..ede13aabd 100644
--- a/app/components/services/services.html
+++ b/app/components/services/services.html
@@ -69,6 +69,12 @@
                   </span>
                 </td>
               </tr>
+              <tr ng-if="!services">
+                <td colspan="4" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="services.length == 0">
+                <td colspan="4" class="text-center text-muted">No services available.</td>
+              </tr>
             </tbody>
           </table>
         </div>
diff --git a/app/components/services/servicesController.js b/app/components/services/servicesController.js
index ac7054e01..52ff25a86 100644
--- a/app/components/services/servicesController.js
+++ b/app/components/services/servicesController.js
@@ -1,8 +1,6 @@
 angular.module('services', [])
 .controller('ServicesController', ['$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages',
 function ($scope, $stateParams, $state, Service, ServiceHelper, Messages) {
-
-  $scope.services = [];
   $scope.state = {};
   $scope.state.selectedItemCount = 0;
   $scope.sortType = 'Name';
@@ -77,6 +75,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Messages) {
     }, function(e) {
       $('#loadServicesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve services");
+      $scope.services = [];
     });
   }
 
diff --git a/app/components/volumes/volumes.html b/app/components/volumes/volumes.html
index 4c3ae2072..88791d2ac 100644
--- a/app/components/volumes/volumes.html
+++ b/app/components/volumes/volumes.html
@@ -59,6 +59,9 @@
               <td>{{ volume.Driver }}</td>
               <td>{{ volume.Mountpoint }}</td>
             </tr>
+            <tr ng-if="!volumes">
+              <td colspan="4" class="text-center text-muted">Loading...</td>
+            </tr>
             <tr ng-if="volumes.length == 0">
               <td colspan="4" class="text-center text-muted">No volumes available.</td>
             </tr>
diff --git a/app/components/volumes/volumesController.js b/app/components/volumes/volumesController.js
index fc0dc8888..202b0835b 100644
--- a/app/components/volumes/volumesController.js
+++ b/app/components/volumes/volumesController.js
@@ -5,8 +5,6 @@ function ($scope, $state, Volume, Messages) {
   $scope.state.selectedItemCount = 0;
   $scope.sortType = 'Name';
   $scope.sortReverse = true;
-  $scope.volumes = [];
-
   $scope.config = {
     Name: ''
   };
@@ -61,6 +59,7 @@ function ($scope, $state, Volume, Messages) {
     }, function (e) {
       $('#loadVolumesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve volumes");
+      $scope.volumes = [];
     });
   }
   fetchVolumes();