Zerostate cards for empty resources in details pages (#1132)

* Show empty resource message on relevant details pages

* Show empty resource message on relevant details pages

src/app/frontend/daemonsetdetail/daemonsetdetail.html

@@ -31,8 +31,13 @@ limitations under the License.
           <kd-title>{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_TITLE}}</kd-title>
           <kd-content>
             <kd-pod-card-list pod-list="::ctrl.daemonSetDetail.podList"
-                              pod-list-resource="::ctrl.daemonSetPodsResource">
+                              pod-list-resource="::ctrl.daemonSetPodsResource"
+                              with-statuses="true" ng-show="::ctrl.daemonSetDetail.podList.pods.length">
             </kd-pod-card-list>
+            <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.daemonSetDetail.podList.pods.length">
+              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
       </md-tab>

src/app/frontend/daemonsetdetail/daemonsetdetail_controller.js

@@ -50,4 +50,9 @@ const i18n = {
   /** @export {string} @desc Label 'Events' on the right navigation tab on the daemon set detail
      page. */
   MSG_DAEMON_SET_DETAIL_EVENTS_LABEL: goog.getMsg('Events'),
+  /** @export {string} @desc Title for pods card zerostate in daemon set details page. */
+  MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TITLE: goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for pods card zerostate in daemon set details page. */
+  MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no Pods scheduled on this Daemon Set'),
 };

src/app/frontend/deploymentdetail/deploymentdetail.html

@@ -4,21 +4,32 @@
       <md-tab label="{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OVERVIEW_LABEL}}">
         <kd-deployment-info deployment="::ctrl.deploymentDetail"></kd-deployment-info>
 
-        <kd-content-card ng-if="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name">
+        <kd-content-card>
           <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_TITLE}}</kd-title>
           <kd-content>
-            <kd-replica-set-card-list
+            <kd-replica-set-card-list ng-show="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name"
                     replica-set-list="::ctrl.newReplicaSetList">
             </kd-replica-set-card-list>
+            <div class="kd-zerostate-message" layout-padding
+                 ng-hide="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name">
+              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
 
-        <kd-content-card ng-if="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length">
+        <kd-content-card>
           <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_TITLE}}</kd-title>
           <kd-content>
             <kd-replica-set-card-list
+                    ng-show="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length"
                     replica-set-list="::ctrl.deploymentDetail.oldReplicaSetList">
             </kd-replica-set-card-list>
+            <div class="kd-zerostate-message" layout-padding
+                 ng-hide="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length">
+              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
       </md-tab>

src/app/frontend/deploymentdetail/deploymentdetail_controller.js

@@ -24,7 +24,7 @@ export class DeploymentDetailController {
 const i18n = {
   /** @export {string} @desc Label 'Overview' for the left navigation tab on the deployment details page. */
   MSG_DEPLOYMENT_DETAIL_OVERVIEW_LABEL: goog.getMsg('Overview'),
-  /** @export {string} @desc Title 'New Replica Set' for the newly createed replica set view,
+  /** @export {string} @desc Title 'New Replica Set' for the newly created replica set view,
       on the deployment details page. */
   MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_TITLE: goog.getMsg('New Replica Set'),
   /** @export {string} @desc Title 'Old Replica Sets' for the old replica sets view,
@@ -32,4 +32,16 @@ const i18n = {
   MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_TITLE: goog.getMsg('Old Replica Sets'),
   /** @export {string} @desc Label 'Events' for the right navigation tab on the deployment details page.  */
   MSG_DEPLOYMENT_DETAIL_EVENTS_LABEL: goog.getMsg('Events'),
+  /** @export {string} @desc Title for new replica sets cards zero-state in deployment details page. */
+  MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE:
+      goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Title for new replica set card zero-state in deployment details page. */
+  MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no new Replication Controllers on this Deployment'),
+  /** @export {string} @desc Title for old replica sets cards zero-state in deployment details page. */
+  MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE:
+      goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for old replica sets card zero-state in deployment details page. */
+  MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no old Replication Controllers on this Deployment'),
 };

src/app/frontend/petsetdetail/petsetdetail.html

@@ -20,13 +20,18 @@ limitations under the License.
       <md-tab label="{{::ctrl.i18n.MSG_PET_SET_DETAIL_OVERVIEW_TAB}}">
         <kd-pet-set-info pet-set="::ctrl.petSetDetail"></kd-pet-set-info>
 
-        <kd-content-card ng-if="::ctrl.petSetDetail.podList.pods.length">
+        <kd-content-card>
           <kd-title>{{::ctrl.i18n.MSG_PET_SET_DETAIL_PODS_CARD_TITLE}}</kd-title>
           <kd-content>
-            <kd-pod-card-list pod-list="::ctrl.petSetDetail.podList"
+            <kd-pod-card-list ng-show="::ctrl.petSetDetail.podList.pods.length"
+                              pod-list="::ctrl.petSetDetail.podList"
                               pod-list-resource="::ctrl.petSetPodsResource"
                               with-statuses="true">
             </kd-pod-card-list>
+            <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.petSetDetail.podList.pods.length">
+              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
       </md-tab>

src/app/frontend/petsetdetail/petsetdetail_controller.js

@@ -40,4 +40,9 @@ const i18n = {
   MSG_PET_SET_DETAIL_PODS_CARD_TITLE: goog.getMsg('Pods'),
   /** @export {string} @desc Events tab label on the pet set detail page. */
   MSG_PET_SET_DETAIL_EVENTS_TAB: goog.getMsg('Events'),
+  /** @export {string} @desc Title for pods card zerostate in pet set details page. */
+  MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TITLE: goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for pods card zerostate in pet set details page. */
+  MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no Pods scheduled on this Pet Set'),
 };

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -28,12 +28,17 @@ limitations under the License.
             </kd-service-card-list>
           </kd-content>
         </kd-content-card>
-        <kd-content-card ng-if="::ctrl.replicaSetDetail.podList.pods.length">
+        <kd-content-card>
           <kd-title>{{::ctrl.i18n.MSG_REPLICA_SET_DETAIL_PODS_TITLE}}</kd-title>
           <kd-content>
-            <kd-pod-card-list pod-list="::ctrl.replicaSetDetail.podList" with-statuses="true"
+            <kd-pod-card-list ng-show="::ctrl.replicaSetDetail.podList.pods.length"
+                              pod-list="::ctrl.replicaSetDetail.podList" with-statuses="true"
                               pod-list-resource="::ctrl.replicaSetPodsResource">
             </kd-pod-card-list>
+            <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.replicaSetDetail.podList.pods.length">
+              <div class="kd-zerostate-title">{{::$ctrl.i18n.MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::$ctrl.i18n.MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
       </md-tab>

src/app/frontend/replicasetdetail/replicasetdetail_controller.js

@@ -42,7 +42,7 @@ const i18n = {
       replica set details view. */
   MSG_REPLICA_SET_DETAIL_PODS_TITLE: goog.getMsg('Pods'),
   /** @export {string} @desc Title 'Services' for the services information section on the replica set
-   *  detail page. */
+      details page. */
   MSG_REPLICA_SET_DETAIL_SERVICES_TITLE: goog.getMsg('Services'),
   /** @export {string} @desc Label 'Overview' for the left navigation tab on the replica
       set details page. */
@@ -50,4 +50,9 @@ const i18n = {
   /** @export {string} @desc Label 'Events' for the right navigation tab on the replica
       set details page. */
   MSG_REPLICA_SET_DETAIL_EVENTS_LABEL: goog.getMsg('Events'),
+  /** @export {string} @desc Title for pods card zerostate in replica set details page. */
+  MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TITLE: goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for pods card zerostate in replica set details page. */
+  MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no Pods scheduled on this Replica Set'),
 };

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.html

@@ -21,22 +21,32 @@ limitations under the License.
         <kd-replication-controller-info replication-controller="::ctrl.replicationControllerDetail">
         </kd-replication-controller-info>
 
-        <kd-content-card ng-if="::ctrl.replicationControllerDetail.serviceList.services.length">
+        <kd-content-card>
           <kd-title>{{::ctrl.i18n.MSG_RC_DETAIL_SERVICES_TITLE}}</kd-title>
           <kd-content>
-            <kd-service-card-list service-list="::ctrl.replicationControllerDetail.serviceList"
+            <kd-service-card-list ng-show="::ctrl.replicationControllerDetail.serviceList.services.length"
+                                  service-list="::ctrl.replicationControllerDetail.serviceList"
                                   service-list-resource="::ctrl.serviceListResource">
             </kd-service-card-list>
+            <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.replicationControllerDetail.serviceList.services.length">
+              <div class="kd-zerostate-title">{{::$ctrl.i18n.MSG_RC_DETAIL_SERVICES_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::$ctrl.i18n.MSG_RC_DETAIL_SERVICES_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
 
-        <kd-content-card ng-if="::ctrl.replicationControllerDetail.podList.pods.length">
+        <kd-content-card>
           <kd-title>{{::ctrl.i18n.MSG_RC_DETAIL_PODS_TITLE}}</kd-title>
           <kd-content>
-            <kd-pod-card-list pod-list="::ctrl.replicationControllerDetail.podList"
+            <kd-pod-card-list ng-show="::ctrl.replicationControllerDetail.podList.pods.length"
+                              pod-list="::ctrl.replicationControllerDetail.podList"
                               pod-list-resource="::ctrl.podListResource"
                               with-statuses="true">
             </kd-pod-card-list>
+            <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.replicationControllerDetail.podList.pods.length">
+              <div class="kd-zerostate-title">{{::$ctrl.i18n.MSG_RC_DETAIL_PODS_ZEROSTATE_TITLE}}</div>
+              <div class="kd-zerostate-text">{{::$ctrl.i18n.MSG_RC_DETAIL_PODS_ZEROSTATE_TEXT}}</div>
+            </div>
           </kd-content>
         </kd-content-card>
       </md-tab>

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail_controller.js

@@ -80,4 +80,15 @@ const i18n = {
   /** @export {string} @desc Label 'Events' for the right navigation tab on the replication
       controller details page. */
   MSG_RC_DETAIL_EVENTS_LABEL: goog.getMsg('Events'),
+  /** @export {string} @desc Title for services card zerostate in replication controller details page. */
+  MSG_RC_DETAIL_SERVICES_ZEROSTATE_TITLE: goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for services card zerostate in replication controller details page. */
+  MSG_RC_DETAIL_SERVICES_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no Services scheduled on this Replication Controller'),
+  /** @export {string} @desc Title for pods card zerostate in replication controller details page. */
+  MSG_RC_DETAIL_PODS_ZEROSTATE_TITLE: goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for pods card zerostate in replication controller details page. */
+  MSG_RC_DETAIL_PODS_ZEROSTATE_TEXT:
+      goog.getMsg('There are currently no Pods scheduled on this Replication Controller'),
+
 };