Addition of truncate class to tile headers and when no deployments have started

app/styles/_overview.less

@@ -299,6 +299,8 @@
       .flex-wrap(@wrap: wrap);
       .flex-direction(@direction: column);
       overview-service {
+        // default width needed to enable truncation on elements within
+        width: 100%;
         &:nth-child(n+3) {
           margin-top: @service-group-vertical-margin;
         }
@@ -380,8 +382,10 @@
     .service-name {
       .h3();
       font-weight: @overview-font-weight;
-      margin-top: 3px;
-      margin-bottom: 3px;
+      // minimum line-height to prevent descender clipping since they use truncate
+      line-height: 1.2;
+      margin-top: 2px;
+      margin-bottom: 2px;
       .pficon {
         margin-right: 7px;
         vertical-align: -2px;
@@ -398,8 +402,10 @@
     .rc-header {
       .text-muted();
       padding: 5px 10px;
-      // Prevent the content from overlapping the deployment shield
-      margin-right: @shield-width-lg;
+      &.rc-header-shield {
+        // Prevent the content from overlapping the deployment shield
+        margin-right: @shield-width-lg;
+      }
     }
     image-names {
       // truncate long image names
@@ -570,7 +576,6 @@
     width: 50%;
   }
   .no-child-services-message, .no-deployments-message {
-    .text-center();
     .text-muted();
     .well();
     margin-bottom: 0;
@@ -589,23 +594,27 @@
     }
   }
   .no-deployments-message {
-    .flex(@columns: 1 0 0%); // the parent overview-service is where width with flex-basis is set.
+    width: 100%;
   }
   .no-child-services-message {
     display: none;
     @media (min-width: @two-column-min-width) {
       .flex-display(@display: flex);
       .flex(@columns: 1 0 0%);
       .flex-direction(@direction: column);
+      height: 100%;
     }
   }
   .empty-tile {
-    padding: 50px;
+    .text-center();
+    padding: 50px 20px;
+    .word-break();
   }
   .empty-dc {
     .text-center();
     .text-muted();
-    padding: 0 50px 70px;
+    padding: 0 20px 70px;
+    .word-break();
   }
   @media (min-width: @screen-md-min) {
     .overview-services.single-alternate-service {

app/views/overview/_dc.html

@@ -1,8 +1,8 @@
 <div class="overview-tile" ng-class="{ 'deployment-in-progress': inProgressDeployment }">
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="overview-tile-header">
-    <div class="rc-header">
-      <div>
+    <div class="rc-header" ng-class="{ 'rc-header-shield' : activeReplicationController}">
+      <div class="truncate">
         Deployment Config
         <a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>
         <small class="overview-timestamp" ng-if="activeReplicationController && !inProgressDeployment">
@@ -43,8 +43,7 @@ <h2>No deployments.</h2>
         A new deployment will start automatically when
         <span ng-if="imageChangeTriggers.length === 1">
           an image is available for
-          <a ng-href="{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}">
-            {{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.
+          <a ng-href="{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}">{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.
         </span>
         <span ng-if="imageChangeParams.length > 1">
           one of the images for this deployment config changes.
@@ -63,11 +62,8 @@ <h2>No deployments.</h2>
           </div>
         </div>
         <div ng-if="!pipelinesForDC[deploymentConfig.metadata.name].length">
-          <p>
-            No deployments have started for
-            <a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>.
-          </p>
-
+            <p>No deployments have started for
+            <a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>.</p>
           <button ng-if="'deploymentconfigs' | canI : 'update'" class="btn btn-primary" ng-click="startDeployment(deploymentConfig)">
             Start Deployment
           </button>

app/views/overview/_deployment.html

@@ -1,8 +1,8 @@
 <div class="overview-tile" ng-class="{ 'deployment-in-progress': inProgressDeployment }">
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="overview-tile-header">
-    <div class="rc-header">
-      <div>
+    <div class="rc-header" ng-class="{ 'rc-header-shield' : latestReplicaSet && latestRevision && !inProgressDeployment}">
+      <div class="truncate">
         Deployment
         <a ng-href="{{deployment | navigateResourceURL}}">{{deploymentName}}</a>
         <small class="overview-timestamp" ng-if="latestReplicaSet">

app/views/overview/_pod.html

@@ -1,7 +1,7 @@
 <div class="overview-tile" ng-if="pod.kind === 'Pod'">
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="rc-header"> <!-- TODO may want different treatment for a pod-name? -->
-    <div>
+    <div class="truncate">
       Pod
       <a ng-href="{{pod | navigateResourceURL}}">{{pod.metadata.name}}</a>
       <small class="overview-timestamp">

app/views/overview/_service-group.html

@@ -67,14 +67,13 @@ <h3 class="route-title truncate">
               ng-repeat="service in childServices">
           </overview-service>
 
-          <div flex column ng-if="alternateServices.length === 0 && childServices.length === 0 && service" class="no-child-services-block">
+          <div column ng-if="alternateServices.length === 0 && childServices.length === 0 && service" class="no-child-services-block">
             <div class="no-child-services-message">
               <div class="empty-tile">
                 <h2>No grouped services.</h2>
-                <p>
-                  No services are grouped with <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>.
-                  <span ng-if="(services | hashSize) > 1 && ('services' | canI : 'update')">Add a service to group them together.</span>
-                </p>
+                  <p>No services are grouped with <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>.
+                    <span ng-if="(services | hashSize) > 1 && ('services' | canI : 'update')">Add a service to group them together.</span>
+                  </p>
                 <div ng-if="(services | hashSize) > 1 && ('services' | canI : 'update')">
                   <button class="btn btn-primary" ng-click="linkService()">
                     Group Service

app/views/overview/_service-header.html

@@ -1,5 +1,5 @@
 <div row class="service-title" ng-if="service">
-  <div class="service-name">
+  <div class="service-name truncate">
     <span class="pficon pficon-service" aria-hidden="true" title="Service"></span>
     <span class="sr-only">Service</span>
     <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>

app/views/overview/_service.html

@@ -1,11 +1,10 @@
 <div ng-if="!tileCount" class="no-deployments-block">
-  <div column class="no-deployments-message">
+  <div column class="no-deployments-message overview-tile">
     <ng-include src="'views/overview/_service-header.html'"></ng-include>
     <div class="empty-tile">
       <h2>No deployments or pods.</h2>
       <p>
-        Service
-        <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
+        Service <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
         does not route to any deployments or pods.
       </p>
     </div>

app/views/overview/_set.html

@@ -2,7 +2,7 @@
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="overview-tile-header">
     <div class="rc-header">
-      <div>
+      <div class="truncate">
         {{set.kind | humanizeKind : true}}
         <a ng-href="{{set | navigateResourceURL}}">{{set.metadata.name}}</a>
         <small class="overview-timestamp">

dist/scripts/templates.js

@@ -11374,8 +11374,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"overview-tile\" ng-class=\"{ 'deployment-in-progress': inProgressDeployment }\">\n" +
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"overview-tile-header\">\n" +
-    "<div class=\"rc-header\">\n" +
-    "<div>\n" +
+    "<div class=\"rc-header\" ng-class=\"{ 'rc-header-shield' : activeReplicationController}\">\n" +
+    "<div class=\"truncate\">\n" +
     "Deployment Config\n" +
     "<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>\n" +
     "<small class=\"overview-timestamp\" ng-if=\"activeReplicationController && !inProgressDeployment\">\n" +
@@ -11413,8 +11413,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "A new deployment will start automatically when\n" +
     "<span ng-if=\"imageChangeTriggers.length === 1\">\n" +
     "an image is available for\n" +
-    "<a ng-href=\"{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}\">\n" +
-    "{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.\n" +
+    "<a ng-href=\"{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}\">{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.\n" +
     "</span>\n" +
     "<span ng-if=\"imageChangeParams.length > 1\">\n" +
     "one of the images for this deployment config changes.\n" +
@@ -11433,10 +11432,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "<div ng-if=\"!pipelinesForDC[deploymentConfig.metadata.name].length\">\n" +
-    "<p>\n" +
-    "No deployments have started for\n" +
-    "<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>.\n" +
-    "</p>\n" +
+    "<p>No deployments have started for\n" +
+    "<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>.</p>\n" +
     "<button ng-if=\"'deploymentconfigs' | canI : 'update'\" class=\"btn btn-primary\" ng-click=\"startDeployment(deploymentConfig)\">\n" +
     "Start Deployment\n" +
     "</button>\n" +
@@ -11505,8 +11502,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"overview-tile\" ng-class=\"{ 'deployment-in-progress': inProgressDeployment }\">\n" +
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"overview-tile-header\">\n" +
-    "<div class=\"rc-header\">\n" +
-    "<div>\n" +
+    "<div class=\"rc-header\" ng-class=\"{ 'rc-header-shield' : latestReplicaSet && latestRevision && !inProgressDeployment}\">\n" +
+    "<div class=\"truncate\">\n" +
     "Deployment\n" +
     "<a ng-href=\"{{deployment | navigateResourceURL}}\">{{deploymentName}}</a>\n" +
     "<small class=\"overview-timestamp\" ng-if=\"latestReplicaSet\">\n" +
@@ -11576,7 +11573,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"overview-tile\" ng-if=\"pod.kind === 'Pod'\">\n" +
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"rc-header\"> \n" +
-    "<div>\n" +
+    "<div class=\"truncate\">\n" +
     "Pod\n" +
     "<a ng-href=\"{{pod | navigateResourceURL}}\">{{pod.metadata.name}}</a>\n" +
     "<small class=\"overview-timestamp\">\n" +
@@ -11661,12 +11658,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</overview-service>\n" +
     "<overview-service ng-init=\"isChild = true\" ng-repeat=\"service in childServices\">\n" +
     "</overview-service>\n" +
-    "<div flex column ng-if=\"alternateServices.length === 0 && childServices.length === 0 && service\" class=\"no-child-services-block\">\n" +
+    "<div column ng-if=\"alternateServices.length === 0 && childServices.length === 0 && service\" class=\"no-child-services-block\">\n" +
     "<div class=\"no-child-services-message\">\n" +
     "<div class=\"empty-tile\">\n" +
     "<h2>No grouped services.</h2>\n" +
-    "<p>\n" +
-    "No services are grouped with <a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>.\n" +
+    "<p>No services are grouped with <a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>.\n" +
     "<span ng-if=\"(services | hashSize) > 1 && ('services' | canI : 'update')\">Add a service to group them together.</span>\n" +
     "</p>\n" +
     "<div ng-if=\"(services | hashSize) > 1 && ('services' | canI : 'update')\">\n" +
@@ -11686,7 +11682,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/overview/_service-header.html',
     "<div row class=\"service-title\" ng-if=\"service\">\n" +
-    "<div class=\"service-name\">\n" +
+    "<div class=\"service-name truncate\">\n" +
     "<span class=\"pficon pficon-service\" aria-hidden=\"true\" title=\"Service\"></span>\n" +
     "<span class=\"sr-only\">Service</span>\n" +
     "<a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>\n" +
@@ -11714,13 +11710,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/overview/_service.html',
     "<div ng-if=\"!tileCount\" class=\"no-deployments-block\">\n" +
-    "<div column class=\"no-deployments-message\">\n" +
+    "<div column class=\"no-deployments-message overview-tile\">\n" +
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"empty-tile\">\n" +
     "<h2>No deployments or pods.</h2>\n" +
     "<p>\n" +
-    "Service\n" +
-    "<a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>\n" +
+    "Service <a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>\n" +
     "does not route to any deployments or pods.\n" +
     "</p>\n" +
     "</div>\n" +
@@ -11767,7 +11762,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"overview-tile-header\">\n" +
     "<div class=\"rc-header\">\n" +
-    "<div>\n" +
+    "<div class=\"truncate\">\n" +
     "{{set.kind | humanizeKind : true}}\n" +
     "<a ng-href=\"{{set | navigateResourceURL}}\">{{set.metadata.name}}</a>\n" +
     "<small class=\"overview-timestamp\">\n" +