Replacing empty tables with empty state message

app/scripts/controllers/builds.js

@@ -24,9 +24,10 @@ angular.module('openshiftConsole')
     $scope.unfilteredBuildConfigs = {};
     $scope.buildConfigs = undefined;
     $scope.labelSuggestions = {};
-    $scope.alerts = $scope.alerts || {};
-    $scope.emptyMessage = "Loading...";
     $scope.latestByConfig = {};
+    $scope.clearFilter = function() {
+      LabelFilter.clear();
+    };
 
     var buildConfigForBuild = $filter('buildConfigForBuild');
 
@@ -43,9 +44,9 @@ angular.module('openshiftConsole')
         var isPipeline = $filter('isJenkinsPipelineStrategy');
 
         watches.push(DataService.watch(buildsVersion, context, function(builds) {
+          $scope.buildsLoaded = true;
           // Filter out pipeline builds, which have a separate page.
           $scope.builds = _.omitBy(builds.by("metadata.name"), isPipeline);
-          $scope.emptyMessage = "No builds to show";
           associateBuildsToBuildConfig();
           LabelFilter.addLabelSuggestionsFromResources($scope.builds, $scope.labelSuggestions);
 
@@ -59,7 +60,7 @@ angular.module('openshiftConsole')
           LabelFilter.setLabelSuggestions($scope.labelSuggestions);
           $scope.buildConfigs = LabelFilter.getLabelSelector().select($scope.unfilteredBuildConfigs);
           associateBuildsToBuildConfig();
-          updateFilterWarning();
+          updateFilterMessage();
           Logger.log("buildconfigs (subscribe)", $scope.buildConfigs);
         }));
 
@@ -113,27 +114,17 @@ angular.module('openshiftConsole')
           });
         }
 
-        function updateFilterWarning() {
+        function updateFilterMessage() {
           var visibleBuilds = _.omitBy($scope.latestByConfig, _.isNull);
-          if (!LabelFilter.getLabelSelector().isEmpty() &&
-              _.isEmpty($scope.buildConfigs) &&
-              _.isEmpty(visibleBuilds)) {
-            $scope.alerts["builds"] = {
-              type: "warning",
-              details: "The active filters are hiding all builds."
-            };
-          }
-          else {
-            delete $scope.alerts["builds"];
-          }
+          $scope.filterWithZeroResults = !LabelFilter.getLabelSelector().isEmpty() && _.isEmpty($scope.buildConfigs) && _.isEmpty(visibleBuilds);
         }
 
         LabelFilter.onActiveFiltersChanged(function(labelSelector) {
           // trigger a digest loop
-          $scope.$apply(function() {
+          $scope.$evalAsync(function() {
             $scope.buildConfigs = labelSelector.select($scope.unfilteredBuildConfigs);
             associateBuildsToBuildConfig();
-            updateFilterWarning();
+            updateFilterMessage();
           });
         });
 

app/scripts/controllers/configMaps.js

@@ -16,24 +16,17 @@ angular.module('openshiftConsole')
                         LabelFilter,
                         ProjectsService) {
     $scope.projectName = $routeParams.project;
-    $scope.alerts = $scope.alerts || {};
     $scope.loaded = false;
     $scope.labelSuggestions = {};
     $scope.configMapsVersion = APIService.getPreferredVersion('configmaps');
+    $scope.clearFilter = function () {
+      LabelFilter.clear();
+    };
     var watches = [];
     var configMaps;
 
-    var updateFilterWarning = function() {
-      if (!LabelFilter.getLabelSelector().isEmpty() &&
-          _.isEmpty($scope.configMaps) &&
-          !_.isEmpty(configMaps)) {
-        $scope.alerts["config-maps"] = {
-          type: "warning",
-          details: "The active filters are hiding all config maps."
-        };
-      } else {
-        delete $scope.alerts["config-maps"];
-      }
+    var updateFilterMessage = function() {
+      $scope.filterWithZeroResults = !LabelFilter.getLabelSelector().isEmpty() && _.isEmpty($scope.configMaps) && !_.isEmpty(configMaps);
     };
 
     var updateLabelSuggestions = function() {
@@ -44,7 +37,7 @@ angular.module('openshiftConsole')
     var updateConfigMaps = function() {
       var filteredConfigMaps = LabelFilter.getLabelSelector().select(configMaps);
       $scope.configMaps = _.sortBy(filteredConfigMaps, 'metadata.name');
-      updateFilterWarning();
+      updateFilterMessage();
     };
 
     ProjectsService
@@ -60,7 +53,7 @@ angular.module('openshiftConsole')
         }));
 
         LabelFilter.onActiveFiltersChanged(function() {
-          $scope.$apply(updateConfigMaps);
+          $scope.$evalAsync(updateConfigMaps);
         });
 
         $scope.$on('$destroy', function(){

app/scripts/controllers/deployments.js

@@ -24,11 +24,14 @@ angular.module('openshiftConsole')
     $scope.unfilteredDeployments = {};
     $scope.replicationControllersByDC = {};
     $scope.labelSuggestions = {};
-    $scope.alerts = $scope.alerts || {};
     $scope.emptyMessage = "Loading...";
     $scope.expandedDeploymentConfigRow = {};
     $scope.unfilteredReplicaSets = {};
     $scope.unfilteredReplicationControllers = {};
+    $scope.showEmptyState = true;
+    $scope.clearFilter = function() {
+      LabelFilter.clear();
+    };
 
     var replicaSets, deploymentsByUID;
     var annotation = $filter('annotation');
@@ -38,6 +41,26 @@ angular.module('openshiftConsole')
     var replicationControllersVersion = APIService.getPreferredVersion('replicationcontrollers');
     var replicaSetsVersion = APIService.getPreferredVersion('replicasets');
 
+    function updateFilterMessage() {
+
+      var unfilteredDeploymentsEmpty =
+        _.isEmpty($scope.unfilteredDeploymentConfigs) &&
+        _.isEmpty($scope.unfilteredReplicationControllers) &&
+        _.isEmpty($scope.unfilteredDeployments) &&
+        _.isEmpty($scope.unfilteredReplicaSets);
+
+      var isFiltering = !LabelFilter.getLabelSelector().isEmpty();
+
+      var filteredDeploymentsEmpty =
+        _.isEmpty($scope.deploymentConfigs) &&
+        _.isEmpty($scope.replicationControllersByDC['']) &&
+        _.isEmpty($scope.deployments) &&
+        _.isEmpty($scope.replicaSets);
+
+      $scope.showEmptyState = unfilteredDeploymentsEmpty;
+      $scope.filterWithZeroResults = isFiltering && filteredDeploymentsEmpty && !unfilteredDeploymentsEmpty;
+    }
+
     var groupReplicaSets = function() {
       if (!replicaSets || !deploymentsByUID) {
         return;
@@ -58,6 +81,7 @@ angular.module('openshiftConsole')
         $scope.latestReplicaSetByDeploymentUID[deploymentUID] =
           DeploymentsService.getActiveReplicaSet(replicaSets, deploymentsByUID[deploymentUID]);
       });
+      updateFilterMessage();
     };
 
     var watches = [];
@@ -82,7 +106,7 @@ angular.module('openshiftConsole')
             LabelFilter.setLabelSuggestions($scope.labelSuggestions);
             $scope.replicationControllersByDC[''] = LabelFilter.getLabelSelector().select($scope.replicationControllersByDC['']);
           }
-          updateFilterWarning();
+          updateFilterMessage();
 
           if (!action) {
             // Loading of the page that will create deploymentConfigDeploymentsInProgress structure, which will associate running deployment to his deploymentConfig.
@@ -121,6 +145,7 @@ angular.module('openshiftConsole')
         }));
 
         watches.push(DataService.watch(deploymentConfigsVersion, context, function(deploymentConfigs) {
+          $scope.deploymentConfigsLoaded = true;
           $scope.unfilteredDeploymentConfigs = deploymentConfigs.by("metadata.name");
           LabelFilter.addLabelSuggestionsFromResources($scope.unfilteredDeploymentConfigs, $scope.labelSuggestions);
           LabelFilter.setLabelSuggestions($scope.labelSuggestions);
@@ -131,7 +156,7 @@ angular.module('openshiftConsole')
             $scope.unfilteredReplicationControllers = $scope.replicationControllersByDC[''];
             $scope.replicationControllersByDC[''] = LabelFilter.getLabelSelector().select($scope.replicationControllersByDC['']);
           }
-          updateFilterWarning();
+          updateFilterMessage();
           Logger.log("deploymentconfigs (subscribe)", $scope.deploymentConfigs);
         }));
 
@@ -144,54 +169,15 @@ angular.module('openshiftConsole')
           Logger.log("deployments (subscribe)", $scope.unfilteredDeployments);
         }));
 
-        function updateFilterWarning() {
-          var isFiltering = !LabelFilter.getLabelSelector().isEmpty();
-          if (!isFiltering) {
-            delete $scope.alerts["deployments"];
-            return;
-          }
-
-          var unfilteredDeploymentsEmpty =
-            _.isEmpty($scope.unfilteredDeploymentConfigs) &&
-            _.isEmpty($scope.unfilteredReplicationControllers) &&
-            _.isEmpty($scope.unfilteredDeployments) &&
-            _.isEmpty($scope.unfilteredReplicaSets);
-          if (unfilteredDeploymentsEmpty) {
-            delete $scope.alerts["deployments"];
-            return;
-          }
-
-          var filteredDeploymentsEmpty =
-            _.isEmpty($scope.deploymentConfigs) &&
-            _.isEmpty($scope.replicationControllersByDC['']) &&
-            _.isEmpty($scope.deployments) &&
-            _.isEmpty($scope.replicaSets);
-          if (!filteredDeploymentsEmpty) {
-            delete $scope.alerts["deployments"];
-            return;
-          }
-
-          $scope.alerts["deployments"] = {
-            type: "warning",
-            details: "The active filters are hiding all deployments."
-          };
-        }
-
-        $scope.showEmptyMessage = function() {
-          if ($filter('hashSize')($scope.replicationControllersByDC) === 0) {
-            return true;
-          }
-
-          if ($filter('hashSize')($scope.replicationControllersByDC) === 1 && $scope.replicationControllersByDC['']) {
-            return true;
-          }
-
-          return false;
+        // Does the deployment config table have content?
+        $scope.showDeploymentConfigTable = function() {
+          var size = _.size($scope.replicationControllersByDC);
+          return size > 1 || (size === 1 && !$scope.replicationControllersByDC['']);
         };
 
         LabelFilter.onActiveFiltersChanged(function(labelSelector) {
           // trigger a digest loop
-          $scope.$apply(function() {
+          $scope.$evalAsync(function() {
             $scope.deploymentConfigs = labelSelector.select($scope.unfilteredDeploymentConfigs);
             $scope.replicationControllersByDC = DeploymentsService.associateDeploymentsToDeploymentConfig($scope.replicationControllers, $scope.deploymentConfigs, true);
             if ($scope.replicationControllersByDC['']) {
@@ -200,7 +186,7 @@ angular.module('openshiftConsole')
             }
             $scope.deployments = labelSelector.select($scope.unfilteredDeployments);
             $scope.replicaSets = labelSelector.select($scope.unfilteredReplicaSets);
-            updateFilterWarning();
+            updateFilterMessage();
           });
         });
 

app/scripts/controllers/images.js

@@ -23,8 +23,9 @@ angular.module('openshiftConsole')
     $scope.missingStatusTagsByImageStream = {};
     $scope.builds = {};
     $scope.labelSuggestions = {};
-    $scope.alerts = $scope.alerts || {};
-    $scope.emptyMessage = "Loading...";
+    $scope.clearFilter = function() {
+      LabelFilter.clear();
+    };
 
     var imageStreamsVersion = APIService.getPreferredVersion('imagestreams');
 
@@ -35,13 +36,13 @@ angular.module('openshiftConsole')
       .then(_.spread(function(project, context) {
         $scope.project = project;
         watches.push(DataService.watch(imageStreamsVersion, context, function(imageStreams) {
+          $scope.imageStreamsLoaded = true;
           $scope.unfilteredImageStreams = imageStreams.by("metadata.name");
           LabelFilter.addLabelSuggestionsFromResources($scope.unfilteredImageStreams, $scope.labelSuggestions);
           LabelFilter.setLabelSuggestions($scope.labelSuggestions);
           $scope.imageStreams = LabelFilter.getLabelSelector().select($scope.unfilteredImageStreams);
-          $scope.emptyMessage = "No image streams to show";
           updateMissingStatusTags();
-          updateFilterWarning();
+          updateFilterMessage();
           Logger.log("image streams (subscribe)", $scope.imageStreams);
         }));
 
@@ -71,23 +72,15 @@ angular.module('openshiftConsole')
           });
         }
 
-        function updateFilterWarning() {
-          if (!LabelFilter.getLabelSelector().isEmpty() && $.isEmptyObject($scope.imageStreams) && !$.isEmptyObject($scope.unfilteredImageStreams)) {
-            $scope.alerts["imageStreams"] = {
-              type: "warning",
-              details: "The active filters are hiding all image streams."
-            };
-          }
-          else {
-            delete $scope.alerts["imageStreams"];
-          }
+        function updateFilterMessage() {
+          $scope.filterWithZeroResults = !LabelFilter.getLabelSelector().isEmpty() && _.isEmpty($scope.imageStreams) && !_.isEmpty($scope.unfilteredImageStreams);
         }
 
         LabelFilter.onActiveFiltersChanged(function(labelSelector) {
           // trigger a digest loop
-          $scope.$apply(function() {
+          $scope.$evalAsync(function() {
             $scope.imageStreams = labelSelector.select($scope.unfilteredImageStreams);
-            updateFilterWarning();
+            updateFilterMessage();
           });
         });
 

app/scripts/controllers/otherResources.js

@@ -14,8 +14,6 @@ angular.module('openshiftConsole')
     APIService) {
     $scope.projectName = $routeParams.project;
     $scope.labelSuggestions = {};
-    $scope.alerts = $scope.alerts || {};
-    $scope.emptyMessage = "Select a resource from the list above ...";
     $scope.kindSelector = {disabled: true};
     $scope.kinds = _.filter(APIService.availableKinds(), function(kind) {
       switch (kind.kind) {
@@ -47,6 +45,9 @@ angular.module('openshiftConsole')
           return true;
       }
     });
+    $scope.clearFilter = function () {
+      LabelFilter.clear();
+    };
 
     var isListable = function(kind) {
       if(!kind) {
@@ -125,16 +126,8 @@ angular.module('openshiftConsole')
         }
       }));
 
-    function updateFilterWarning() {
-      if (!LabelFilter.getLabelSelector().isEmpty() && $.isEmptyObject($scope.resources)  && !$.isEmptyObject($scope.unfilteredResources)) {
-        $scope.alerts["resources"] = {
-          type: "warning",
-          details: "The active filters are hiding all " + APIService.kindToResource($scope.kindSelector.selected.kind, true) + "."
-        };
-      }
-      else {
-        delete $scope.alerts["resources"];
-      }
+    function updateFilterMessage() {
+      $scope.filterWithZeroResults = !LabelFilter.getLabelSelector().isEmpty() && _.isEmpty($scope.resources)  && !_.isEmpty($scope.unfilteredResources);
     }
 
     function loadKind() {
@@ -158,13 +151,13 @@ angular.module('openshiftConsole')
         LabelFilter.addLabelSuggestionsFromResources($scope.unfilteredResources, $scope.labelSuggestions);
         LabelFilter.setLabelSuggestions($scope.labelSuggestions);
         $scope.resources = LabelFilter.getLabelSelector().select($scope.unfilteredResources);
-        $scope.emptyMessage = "No " + APIService.kindToResource(selected.kind, true) + " to show";
-        updateFilterWarning();
+        $scope.resourceName = APIService.kindToResource(selected.kind, true);
+        updateFilterMessage();
       });
     }
     $scope.loadKind = loadKind;
     $scope.$watch("kindSelector.selected", function() {
-      $scope.alerts = {};
+      LabelFilter.clear();
       loadKind();
     });
 
@@ -175,9 +168,9 @@ angular.module('openshiftConsole')
 
     LabelFilter.onActiveFiltersChanged(function(labelSelector) {
       // trigger a digest loop
-      $scope.$apply(function() {
+      $scope.$evalAsync(function() {
         $scope.resources = labelSelector.select($scope.unfilteredResources);
-        updateFilterWarning();
+        updateFilterMessage();
       });
     });
   });