Replacing empty tables with empty state message

Fixes openshift#109 Replaces openshift#497 HACK DAY!
f0x11 · Mar 6, 2018 · 13ff190 · 13ff190
1 parent 5ee4e89
commit 13ff190
Show file tree

Hide file tree

Showing 25 changed files with 860 additions and 449 deletions.
diff --git a/app/scripts/controllers/builds.js b/app/scripts/controllers/builds.js
@@ -44,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);
 
@@ -114,19 +114,9 @@ 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) {

diff --git a/app/scripts/controllers/configMaps.js b/app/scripts/controllers/configMaps.js
@@ -19,6 +19,9 @@ angular.module('openshiftConsole')
     $scope.loaded = false;
     $scope.labelSuggestions = {};
     $scope.configMapsVersion = APIService.getPreferredVersion('configmaps');
+    $scope.clearFilter = function () {
+      LabelFilter.clear();
+    };
     var watches = [];
     var configMaps;
 

diff --git a/app/scripts/controllers/images.js b/app/scripts/controllers/images.js
@@ -29,15 +29,14 @@ angular.module('openshiftConsole')
 
     var imageStreamsVersion = APIService.getPreferredVersion('imagestreams');
 
-    var imageStreamsVersion = APIService.getPreferredVersion('imagestreams');
-
     var watches = [];
 
     ProjectsService
       .get($routeParams.project)
       .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);

diff --git a/app/scripts/controllers/secrets.js b/app/scripts/controllers/secrets.js
@@ -11,7 +11,6 @@ angular.module('openshiftConsole')
   .controller('SecretsController', function ($routeParams, $scope, DataService, ProjectsService) {
     $scope.projectName = $routeParams.project;
     $scope.secretsByType = {};
-    var watches = [];
 
     ProjectsService
       .get($routeParams.project)

diff --git a/app/scripts/controllers/serviceInstances.js b/app/scripts/controllers/serviceInstances.js
@@ -11,14 +11,15 @@ angular.module('openshiftConsole')
                                                       LabelFilter,
                                                       Logger,
                                                       ProjectsService) {
-    $scope.alerts = {};
     $scope.bindingsByInstanceRef = {};
-    $scope.emptyMessage = "Loading...";
     $scope.labelSuggestions = {};
     $scope.projectName = $routeParams.project;
     $scope.serviceClasses = {};
     $scope.serviceInstances = {};
     $scope.unfilteredServiceInstances = {};
+    $scope.clearFilter = function() {
+      LabelFilter.clear();
+    };
 
     var watches = [];
 
@@ -49,12 +50,12 @@ angular.module('openshiftConsole')
 
         var serviceInstancesVersion = APIService.getPreferredVersion('serviceinstances');
         watches.push(DataService.watch(serviceInstancesVersion, context, function(serviceInstances) {
-          $scope.emptyMessage = "No provisioned services to show";
+          $scope.serviceInstancesLoaded = true;
           $scope.unfilteredServiceInstances = serviceInstances.by('metadata.name');
 
           sortServiceInstances();
           updateFilter();
-          updateFilterWarning();
+          updateFilterMessage();
 
           LabelFilter.addLabelSuggestionsFromResources($scope.unfilteredServiceInstances, $scope.labelSuggestions);
           LabelFilter.setLabelSuggestions($scope.labelSuggestions);
@@ -69,23 +70,15 @@ angular.module('openshiftConsole')
           updateFilter();
         });
 
-        function updateFilterWarning() {
-          if (!LabelFilter.getLabelSelector().isEmpty() && _.isEmpty($scope.serviceInstances)  && !_.isEmpty($scope.unfilteredServiceInstances)) {
-            $scope.alerts["all-instances-filtered"] = {
-              type: "warning",
-              details: "The active filters are hiding all provisioned services."
-            };
-          }
-          else {
-            delete $scope.alerts["all-instances-filtered"];
-          }
+        function updateFilterMessage() {
+          $scope.filterWithZeroResults = !LabelFilter.getLabelSelector().isEmpty() && _.isEmpty($scope.serviceInstances)  && !_.isEmpty($scope.unfilteredServiceInstances);
         }
 
         LabelFilter.onActiveFiltersChanged(function(labelSelector) {
           // trigger a digest loop
           $scope.$evalAsync(function() {
             $scope.serviceInstances = labelSelector.select($scope.unfilteredServiceInstances);
-            updateFilterWarning();
+            updateFilterMessage();
           });
         });
 

diff --git a/app/scripts/controllers/storage.js b/app/scripts/controllers/storage.js
@@ -15,9 +15,6 @@ angular.module('openshiftConsole')
     $scope.labelSuggestions = {};
     $scope.alerts = $scope.alerts || {};
     $scope.outOfClaims = false;
-    $scope.clearFilter = function() {
-      LabelFilter.clear();
-    };
 
     var setOutOfClaimsWarning = function() {
       var isHidden = AlertMessageService.isAlertPermanentlyHidden("storage-quota-limit-reached", $scope.projectName);
@@ -67,7 +64,17 @@ angular.module('openshiftConsole')
         }));
 
         function updateFilterWarning() {
-          $scope.filterWithZeroResults = !LabelFilter.getLabelSelector().isEmpty() && $.isEmptyObject($scope.pvcs)  && !$.isEmptyObject($scope.unfilteredPVCs);
+          if (!LabelFilter.getLabelSelector().isEmpty() && $.isEmptyObject($scope.pvcs)  && !$.isEmptyObject($scope.unfilteredPVCs)) {
+            $scope.alerts["storage"] = {
+              type: "warning",
+              details: "The active filters are hiding all persistent volume claims."
+            };
+            $scope.filterWithZeroResults = true;
+          }
+          else {
+            delete $scope.alerts["storage"];
+            $scope.filterWithZeroResults = false;
+          }
         }
 
         LabelFilter.onActiveFiltersChanged(function(labelSelector) {

diff --git a/app/styles/_layouts.less b/app/styles/_layouts.less
@@ -2,10 +2,6 @@
 // Layouts (substructure)
 // ------------------------------------
 
-.header-toolbar {
-  background-color: @panel-light;
-  border-bottom: 1px solid @page-header-border-color;
-}
 .layout-pf.layout-pf-fixed {
   height: 1px;
   body {

diff --git a/app/styles/_overview.less b/app/styles/_overview.less
@@ -470,6 +470,7 @@
     margin-bottom: 30px;
   }
   .toolbar-container {
+    border-bottom: 1px solid @page-header-border-color;
     padding-bottom: 13px;
     padding-top: 13px;
     .surface-shaded();

diff --git a/app/views/browse/config-maps.html b/app/views/browse/config-maps.html
@@ -2,7 +2,7 @@
   <div class="middle-header header-toolbar">
     <div class="container-fluid">
       <div class="page-header page-header-bleed-right page-header-bleed-left">
-        <div class="pull-right" ng-if="project && (configMapsVersion | canI : 'create')">
+        <div class="pull-right" ng-if="project && (configMapsVersion | canI : 'create') && ((configMaps | hashSize) > 0 || filterWithZeroResults)">
           <a ng-href="project/{{project.metadata.name}}/create-config-map" class="btn btn-default" translate>Create Config Map</a>
         </div>
         <h1>
@@ -14,7 +14,7 @@ <h1>
           </span>
         </h1>
       </div>
-      <div ng-if="!renderOptions.showGetStarted" class="data-toolbar">
+      <div ng-if="(configMaps | hashSize) > 0 || filterWithZeroResults" class="data-toolbar">
         <div class="data-toolbar-filter">
           <project-filter></project-filter>
         </div>
@@ -23,41 +23,51 @@ <h1>
   </div><!-- /middle-header-->
   <div class="middle-content">
     <div class="container-fluid">
-      <alerts alerts="alerts"></alerts>
       <div class="row">
         <div class="col-md-12">
-          <div ng-if="!loaded" translate>Loading...</div>
-          <div ng-if="loaded">
-            <table class="table table-bordered table-mobile table-layout-fixed">
-              <colgroup>
-                <col class="col-sm-5">
-              </colgroup>
-              <thead>
-                <tr>
-                  <th translate>Name</th>
-                  <th translate>Created</th>
-                  <th translate>Labels</th>
-                </tr>
-              </thead>
-              <tbody ng-if="(configMaps | hashSize) == 0">
-                <tr><td colspan="3"><em translate>No config maps to show</em></td></tr>
-              </tbody>
-              <tbody ng-if="(configMaps | hashSize) > 0">
-                <tr ng-repeat="configMap in configMaps">
-                  <td data-title="Name">
-                    <a href="{{configMap | navigateResourceURL}}">{{configMap.metadata.name}}</a>
-                  </td>
-                  <td data-title="Created">
-                    <span am-time-ago="configMap.metadata.creationTimestamp"></span>
-                  </td>
-                  <td data-title="Labels">
-                    <em ng-if="(configMap.metadata.labels | hashSize) === 0">none</em>
-                    <labels labels="configMap.metadata.labels" clickable="true" kind="Config Map" project-name="{{configMap.metadata.namespace}}" limit="3" filter-current-page="true"></labels>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+          <div ng-if="(configMaps | hashSize) == 0">
+            <p ng-if="!loaded" translate>
+              Loading...
+            </p>
+            <div ng-if="loaded" class="empty-state-message text-center">
+              <div ng-if="!filterWithZeroResults">
+                <h2 translate>No config maps.</h2>
+                <p>No config maps have been added to project {{projectName}}.</p>
+                <p ng-if="project && (configMapsVersion | canI : 'create')">
+                  <a ng-href="project/{{project.metadata.name}}/create-config-map" class="btn btn-primary btn-lg" translate>Create Config Map</a>
+                </p>
+              </div>
+              <div ng-if="filterWithZeroResults">
+		      <h2><translate>The filter is hiding all config maps.</translate> <a href="" ng-click="clearFilter()" translate>Clear Filter</a></h2>
+              </div>
+            </div>
           </div>
+          <table ng-if="(configMaps | hashSize) > 0" class="table table-bordered table-mobile table-layout-fixed">
+            <colgroup>
+              <col class="col-sm-5">
+            </colgroup>
+            <thead>
+              <tr>
+                <th translate>Name</th>
+                <th translate>Created</th>
+                <th translate>Labels</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="configMap in configMaps">
+                <td data-title="Name">
+                  <a href="{{configMap | navigateResourceURL}}">{{configMap.metadata.name}}</a>
+                </td>
+                <td data-title="Created">
+                  <span am-time-ago="configMap.metadata.creationTimestamp"></span>
+                </td>
+                <td data-title="Labels">
+                  <em ng-if="(configMap.metadata.labels | hashSize) === 0">none</em>
+                  <labels labels="configMap.metadata.labels" clickable="true" kind="Config Map" project-name="{{configMap.metadata.namespace}}" limit="3" filter-current-page="true"></labels>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div><!-- /col-* -->
       </div>
     </div>

diff --git a/app/views/browse/routes.html b/app/views/browse/routes.html
@@ -2,7 +2,7 @@
   <div class="middle-header header-toolbar">
     <div class="container-fluid">
       <div class="page-header page-header-bleed-right page-header-bleed-left">
-        <div class="pull-right" ng-if="project && ('routes' | canI : 'create')">
+        <div class="pull-right" ng-if="project && ('routes' | canI : 'create') && ((routes | hashSize) > 0 || filterWithZeroResults)">
           <a ng-href="project/{{project.metadata.name}}/create-route" class="btn btn-default" translate>Create Route</a>
         </div>
         <h1>
@@ -14,7 +14,7 @@ <h1>
           </span>
         </h1>
       </div>
-      <div ng-if="!renderOptions.showGetStarted" class="data-toolbar">
+      <div ng-if="(routes | hashSize) > 0 || filterWithZeroResults" class="data-toolbar">
         <div class="data-toolbar-filter">
           <project-filter></project-filter>
         </div>
@@ -23,10 +23,26 @@ <h1>
   </div><!-- /middle-header-->
   <div class="middle-content">
     <div class="container-fluid">
-      <alerts alerts="alerts"></alerts>
       <div class="row">
         <div class="col-md-12">
-          <table class="table table-bordered table-mobile table-layout-fixed">
+          <div ng-if="(routes | hashSize) == 0">
+            <p ng-if="!routesLoaded">
+              Loading...
+            </p>
+            <div ng-if="routesLoaded" class="empty-state-message text-center">
+              <div ng-if="!filterWithZeroResults">
+                <h2>No routes.</h2>
+                <p>No routes have been added to project {{projectName}}.</p>
+                <p ng-if="project && ('routes' | canI : 'create') && !filterWithZeroResults">
+                  <a ng-href="project/{{project.metadata.name}}/create-route" class="btn btn-primary btn-lg">Create Route</a>
+                </p>
+              </div>
+              <div ng-if="filterWithZeroResults">
+                <h2>The filter is hiding all routes. <a href="" ng-click="clearFilter()">Clear Filter</a></h2>
+              </div>
+            </div>
+          </div>
+          <table ng-if="(routes | hashSize) > 0" class="table table-bordered table-mobile table-layout-fixed">
             <colgroup>
               <col class="col-sm-3">
               <col class="col-sm-3">
@@ -47,10 +63,7 @@ <h1>
                 <th translate>TLS Termination</th>
               </tr>
             </thead>
-            <tbody ng-if="(routes | hashSize) == 0">
-              <tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
-            </tbody>
-            <tbody ng-if="(routes | hashSize) > 0">
+            <tbody>
               <tr ng-repeat="route in routes | orderObjectsByDate : true">
                 <td data-title="{{ customNameHeader || 'Name' }}">
                   <a href="{{route | navigateResourceURL}}">{{route.metadata.name}}</a>

diff --git a/app/views/browse/stateful-sets.html b/app/views/browse/stateful-sets.html
@@ -15,7 +15,7 @@ <h1 translate>
           -->
         </h1>
       </div>
-      <div ng-if="!renderOptions.showGetStarted" class="data-toolbar">
+      <div ng-if="((statefulSets | hashSize) > 0) || filterWithZeroResults" class="data-toolbar">
         <div class="data-toolbar-filter">
           <project-filter></project-filter>
         </div>
@@ -24,11 +24,23 @@ <h1 translate>
   </div>
   <div class="middle-content" persist-tab-state>
     <div class="container-fluid">
-      <alerts alerts="alerts"></alerts>
-      <div ng-if="!loaded" translate>Loading...</div>
       <div class="row" ng-if="loaded">
         <div class="col-md-12">
-          <table class="table table-bordered table-mobile table-layout-fixed">
+          <div ng-if="(statefulSets | hashSize) == 0">
+            <p ng-if="!loaded" translate>
+              Loading...
+            </p>
+            <div ng-if="loaded" class="empty-state-message text-center">
+              <div ng-if="!filterWithZeroResults">
+                <h2 translate>No stateful sets.</h2>
+                <p>No stateful sets have been added to project {{projectName}}.</p>
+              </div>
+              <div ng-if="filterWithZeroResults">
+		      <h2><translate>The filter is hiding all stateful sets.</translate> <a href="" ng-click="clearFilter()" translate>Clear Filter</a></h2>
+              </div>
+            </div>
+          </div>
+          <table ng-if="(statefulSets | hashSize) > 0" class="table table-bordered table-mobile table-layout-fixed">
             <colgroup>
               <col class="col-sm-5">
             </colgroup>
@@ -39,11 +51,6 @@ <h1 translate>
                 <th translate>Created</th>
               </tr>
             </thead>
-            <tbody ng-if="(statefulSets | hashSize) == 0">
-              <tr>
-                <td colspan="3"><em>No stateful sets to show</em></td>
-              </tr>
-            </tbody>
             <tbody ng-repeat="(statefulSetName, statefulSet) in statefulSets">
               <tr>
                 <td data-title="Name">