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>

dist/scripts/scripts.js

@@ -13838,21 +13838,21 @@ templateUrl: "views/overview/_list-row.html"
 }(), function() {
 angular.module("openshiftConsole").component("serviceInstanceRow", {
 controller: [ "$filter", "APIService", "AuthorizationService", "BindingService", "ListRowUtils", "ServiceInstancesService", function(e, t, n, a, r, o) {
-var i = this, s = e("isBindingFailed"), c = e("isBindingReady");
+var i = this, s = e("isBindingFailed"), c = e("isBindingReady"), l = e("serviceInstanceFailedMessage"), u = e("truncate");
 _.extend(i, r.ui);
-var l = e("serviceInstanceDisplayName");
+var d = e("serviceInstanceDisplayName");
 i.serviceBindingsVersion = t.getPreferredVersion("servicebindings"), i.serviceInstancesVersion = t.getPreferredVersion("serviceinstances");
-var u = function() {
+var m = function() {
 var e = o.getServiceClassNameForInstance(i.apiObject);
 return _.get(i, [ "state", "serviceClasses", e ]);
-}, d = function() {
+}, p = function() {
 var e = o.getServicePlanNameForInstance(i.apiObject);
 return _.get(i, [ "state", "servicePlans", e ]);
-}, m = function() {
+}, f = function() {
 _.get(i.apiObject, "metadata.deletionTimestamp") ? i.instanceStatus = "deleted" : s(i.apiObject) ? i.instanceStatus = "failed" : c(i.apiObject) ? i.instanceStatus = "ready" : i.instanceStatus = "pending";
 };
 i.$doCheck = function() {
-m(), i.notifications = r.getNotifications(i.apiObject, i.state), i.serviceClass = u(), i.servicePlan = d(), i.displayName = l(i.apiObject, i.serviceClass), i.isBindable = a.isServiceBindable(i.apiObject, i.serviceClass, i.servicePlan);
+f(), i.notifications = r.getNotifications(i.apiObject, i.state), i.serviceClass = m(), i.servicePlan = p(), i.displayName = d(i.apiObject, i.serviceClass), i.isBindable = a.isServiceBindable(i.apiObject, i.serviceClass, i.servicePlan);
 }, i.$onChanges = function(e) {
 e.bindings && (i.deleteableBindings = _.reject(i.bindings, "metadata.deletionTimestamp"));
 }, i.getSecretForBinding = function(e) {
@@ -13863,6 +13863,11 @@ return !(_.get(i.apiObject, "metadata.deletionTimestamp") || (!i.isBindable || !
 _.set(i, "overlay.panelVisible", !1);
 }, i.showOverlayPanel = function(e, t) {
 _.set(i, "overlay.panelVisible", !0), _.set(i, "overlay.panelName", e), _.set(i, "overlay.state", t);
+}, i.getFailedTooltipText = function() {
+var e = l(i.apiObject);
+if (!e) return "";
+var t = u(e, 128);
+return e.length !== t.length && (t += "..."), t;
 }, i.deprovision = function() {
 o.deprovision(i.apiObject, i.deleteableBindings);
 };

dist/scripts/templates.js

@@ -3697,7 +3697,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div class=\"middle-content\" persist-tab-state>\n" +
+    "<div class=\"middle-content service-instance-details\" persist-tab-state>\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"row\" ng-if=\"serviceInstance\">\n" +
     "<div class=\"col-md-12\">\n" +
@@ -3721,9 +3721,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span flex>{{serviceInstance | serviceInstanceStatus | sentenceCase}}</span>\n" +
     "</dd>\n" +
     "<dt ng-if-start=\"serviceInstance | serviceInstanceConditionMessage\">Status Reason:</dt>\n" +
-    "<dd ng-if-end>\n" +
-    "{{serviceInstance | serviceInstanceConditionMessage}}\n" +
-    "</dd>\n" +
+    "<dd ng-if-end class=\"instance-status-message\">{{serviceInstance | serviceInstanceConditionMessage}}</dd>\n" +
     "</dl>\n" +
     "<div class=\"hidden-lg\">\n" +
     "<h3 ng-if-start=\"serviceClass.spec.description || serviceClass.spec.externalMetadata.longDescription\">Description</h3>\n" +
@@ -12551,10 +12549,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<a ng-href=\"{{row.apiObject | navigateResourceURL}}\" ng-bind-html=\"row.displayName | highlightKeywords : row.state.filterKeywords\"></a>\n" +
     "<div ng-bind-html=\"row.apiObject.metadata.name | highlightKeywords : row.state.filterKeywords\" class=\"list-row-longname\"></div>\n" +
     "</h3>\n" +
-    "<div class=\"status-icons\" ng-if=\"!row.expanded\">\n" +
+    "<div class=\"status-icons\" ng-if=\"!row.expanded\" ng-init=\"tooltipID = 'instance-status-tooltip-' + $id\">\n" +
     "<notification-icon alerts=\"row.notifications\"></notification-icon>\n" +
-    "<div ng-switch=\"row.instanceStatus\" class=\"instance-status-notification\">\n" +
-    "<span ng-switch-when=\"failed\" dynamic-content=\"{{row.apiObject | serviceInstanceFailedMessage}}\" data-toggle=\"tooltip\" data-trigger=\"hover\">\n" +
+    "<div ng-switch=\"row.instanceStatus\" class=\"instance-status-notification\" id=\"{{tooltipID}}\">\n" +
+    "\n" +
+    "<span ng-switch-when=\"failed\" dynamic-content=\"{{row.getFailedTooltipText()}}\" data-toggle=\"tooltip\" data-trigger=\"hover\" data-container=\"#{{tooltipID}}\">\n" +
     "<span class=\"pficon pficon-error-circle-o\" aria-hidden=\"true\"></span>\n" +
     "Error\n" +
     "</span>\n" +
@@ -12640,12 +12639,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span class=\"pficon pficon-error-circle-o\" aria-hidden=\"true\"></span>\n" +
     "<span class=\"sr-only\">error</span>\n" +
     "<span class=\"strong\">The service failed.</span>\n" +
-    "<span class=\"mar-right-md\">\n" +
-    "<truncate-long-text content=\"row.apiObject | serviceInstanceFailedMessage\" limit=\"265\"></truncate-long-text>\n" +
+    "<span class=\"instance-status-message\">\n" +
+    "<truncate-long-text content=\"row.apiObject | serviceInstanceFailedMessage\" expandable=\"true\" limit=\"265\" newline-limit=\"4\"></truncate-long-text>\n" +
     "</span>\n" +
-    "<span ng-if=\"row.serviceInstancesVersion | canI : 'delete'\" class=\"nowrap\">\n" +
+    "<div ng-if=\"row.serviceInstancesVersion | canI : 'delete'\">\n" +
     "<a href=\"\" ng-click=\"row.deprovision()\">Delete This Service</a>\n" +
-    "</span>\n" +
+    "</div>\n" +
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
@@ -12655,7 +12654,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
     "<span class=\"sr-only\">info</span>\n" +
     "<span class=\"strong\">The service is not yet ready.</span>\n" +
-    "<truncate-long-text content=\"row.apiObject | serviceInstanceReadyMessage\" limit=\"265\"></truncate-long-text>\n" +
+    "<span class=\"instance-status-message\">\n" +
+    "<truncate-long-text content=\"row.apiObject | serviceInstanceReadyMessage\" expandable=\"true\" limit=\"265\" newline-limit=\"4\"></truncate-long-text>\n" +
+    "</span>\n" +
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +