Preserve newlines in broker status messages

Preserve newlines in service instance status messages on the overview
and the provisioned service page. Truncate long message when displayed
in a tooltip.

Author: spadgett

app/scripts/directives/overview/serviceInstanceRow.js

@@ -29,6 +29,8 @@
     var row = this;
     var isBindingFailed = $filter('isBindingFailed');
     var isBindingReady = $filter('isBindingReady');
+    var serviceInstanceFailedMessage = $filter('serviceInstanceFailedMessage');
+    var truncate = $filter('truncate');
 
     _.extend(row, ListRowUtils.ui);
 
@@ -111,6 +113,20 @@
       _.set(row, 'overlay.state', state);
     };
 
+    row.getFailedTooltipText = function() {
+      var message = serviceInstanceFailedMessage(row.apiObject);
+      if (!message) {
+        return '';
+      }
+
+      var truncated = truncate(message, 128);
+      if (message.length !== truncated.length) {
+        truncated += '...';
+      }
+
+      return truncated;
+    };
+
     row.deprovision = function() {
       ServiceInstancesService.deprovision(row.apiObject, row.deleteableBindings);
     };

app/styles/_instances.less

@@ -0,0 +1,3 @@
+.service-instance-details .instance-status-message {
+  white-space: pre-line;
+}

app/styles/_overview.less

@@ -29,6 +29,11 @@
     margin-top: 5px;
   }
 }
+.instance-status-message .truncated-content,
+.instance-status-notification .tooltip {
+  // Preserve newlines in broker error messages.
+  white-space: pre-line;
+}
 .instance-status-notification,
 .notification-icon-count {
   display: inline-block;

app/styles/main.less

@@ -65,3 +65,4 @@
 @import "_builds.less";
 @import "_editor.less";
 @import "_add-config-to-application.less";
+@import "_instances.less";

app/views/browse/service-instance.html

@@ -54,7 +54,7 @@ <h1 class="contains-actions">
           </div>
         </div>
       </div><!-- /middle-header-->
-      <div class="middle-content" persist-tab-state>
+      <div class="middle-content service-instance-details" persist-tab-state>
         <div class="container-fluid">
           <div class="row" ng-if="serviceInstance">
             <div class="col-md-12">
@@ -78,9 +78,7 @@ <h3>Status</h3>
                             <span flex>{{serviceInstance | serviceInstanceStatus | sentenceCase}}</span>
                           </dd>
                           <dt ng-if-start="serviceInstance | serviceInstanceConditionMessage">Status Reason:</dt>
-                          <dd ng-if-end>
-                            {{serviceInstance | serviceInstanceConditionMessage}}
-                          </dd>
+                          <dd ng-if-end class="instance-status-message">{{serviceInstance | serviceInstanceConditionMessage}}</dd>
                         </dl>
                         <div class="hidden-lg">
                           <h3 ng-if-start="serviceClass.spec.description || serviceClass.spec.externalMetadata.longDescription">Description</h3>

app/views/overview/_service-instance-row.html

@@ -9,13 +9,15 @@ <h3>
           <a ng-href="{{row.apiObject | navigateResourceURL}}" ng-bind-html="row.displayName | highlightKeywords : row.state.filterKeywords"></a>
           <div ng-bind-html="row.apiObject.metadata.name | highlightKeywords : row.state.filterKeywords" class="list-row-longname"></div>
         </h3>
-        <div class="status-icons" ng-if="!row.expanded">
+        <div class="status-icons" ng-if="!row.expanded" ng-init="tooltipID = 'instance-status-tooltip-' + $id">
           <notification-icon alerts="row.notifications"></notification-icon>
-          <div ng-switch="row.instanceStatus" class="instance-status-notification">
+          <div ng-switch="row.instanceStatus" class="instance-status-notification" id="{{tooltipID}}">
+            <!-- Set the tooltip container so we can add write CSS rules that target the message. -->
             <span ng-switch-when="failed"
-                  dynamic-content="{{row.apiObject | serviceInstanceFailedMessage}}"
+                  dynamic-content="{{row.getFailedTooltipText()}}"
                   data-toggle="tooltip"
-                  data-trigger="hover">
+                  data-trigger="hover"
+                  data-container="#{{tooltipID}}">
               <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
               Error
             </span>
@@ -111,12 +113,16 @@ <h3>
                 <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
                 <span class="sr-only">error</span>
                 <span class="strong">The service failed.</span>
-                <span class="mar-right-md">
-                  <truncate-long-text content="row.apiObject | serviceInstanceFailedMessage" limit="265"></truncate-long-text>
+                <span class="instance-status-message">
+                  <truncate-long-text
+                    content="row.apiObject | serviceInstanceFailedMessage"
+                    expandable="true"
+                    limit="265"
+                    newline-limit="4"></truncate-long-text>
                 </span>
-                <span ng-if="row.serviceInstancesVersion | canI : 'delete'" class="nowrap">
+                <div ng-if="row.serviceInstancesVersion | canI : 'delete'">
                   <a href="" ng-click="row.deprovision()">Delete This Service</a>
-                </span>
+                </div>
               </div>
             </div>
           </div>
@@ -126,7 +132,13 @@ <h3>
                 <span class="pficon pficon-info" aria-hidden="true"></span>
                 <span class="sr-only">info</span>
                 <span class="strong">The service is not yet ready.</span>
-                <truncate-long-text content="row.apiObject | serviceInstanceReadyMessage" limit="265"></truncate-long-text>
+                <span class="instance-status-message">
+                  <truncate-long-text
+                    content="row.apiObject | serviceInstanceReadyMessage"
+                    expandable="true"
+                    limit="265"
+                    newline-limit="4"></truncate-long-text>
+                </span>
               </div>
             </div>
           </div>