Truncate long event messages to 1000 characters

Occasionally an event can have a long message. Limit the length to 1000
characters or 4 lines in the events table.

app/scripts/directives/truncate.js

@@ -12,7 +12,8 @@ angular.module('openshiftConsole')
         newlineLimit: '=',
         useWordBoundary: '=',
         expandable: '=',
-        prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true
+        keywords: '=highlightKeywords',  // optional keywords to highlight using the `highlightKeywords` filter
+        prettifyJson: '='                // prettifies JSON blobs when expanded, only used if expandable is true
       },
       templateUrl: 'views/directives/truncate-long-text.html',
       link: function(scope) {

app/views/catalog/_image.html

@@ -11,12 +11,11 @@ <h2 class="card-pf-title">
         <p class="card-pf-badge">Builds source code</p>
         <p>
           <truncate-long-text
-            ng-if="!keywords.length"
             class="project-description"
             content="imageStream | imageStreamTagAnnotation : 'description' : is.tag.tag"
             limit="200"
+            highlight-keywords="keywords"
             use-word-boundary="true"></truncate-long-text>
-          <span ng-if="keywords.length" ng-bind-html="imageStream | imageStreamTagAnnotation : 'description' : is.tag.tag | truncate : 200 | highlightKeywords : keywords"></span>
         </p>
         <p ng-if="imageStream | imageStreamTagAnnotation : 'provider' : is.tag.tag">
           Provider: {{imageStream | imageStreamTagAnnotation : 'provider' : is.tag.tag}}

app/views/catalog/_template.html

@@ -9,12 +9,11 @@ <h2 class="card-pf-title">
       </div>
       <p>
         <truncate-long-text
-          ng-if="!keywords.length"
           class="project-description"
           content="(template | description) || template.metadata.name"
           limit="200"
-          use-word-boundary="true"></truncate-long-text>
-        <span ng-if="keywords.length" ng-bind-html="template | description | truncate : 200 | highlightKeywords : keywords"></span>
+          use-word-boundary="true"
+          highlight-keywords="keywords"></truncate-long-text>
       </p>
       <p ng-if="template | annotation : 'provider'">
         Provider: {{template | annotation : 'provider'}}

app/views/directives/events.html

@@ -92,7 +92,15 @@
             <span ng-bind-html="event.reason | sentenceCase | highlightKeywords : filterExpressions"></span>&nbsp;
             <span class="pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span>
           </div>
-          <span ng-bind-html="event.message | highlightKeywords : filterExpressions"></span>
+          <!-- Truncate long messages to 1000 chars or 4 lines. -->
+          <truncate-long-text
+              content="event.message"
+              limit="1000"
+              newline-limit="4"
+              use-word-boundary="true"
+              highlight-keywords="filterExpressions"
+              expandable="true">
+          </truncate-long-text>
           <div ng-if="event.count > 1" class="text-muted small">
             {{event.count}} times in the last
             <duration-until-now timestamp="event.firstTimestamp" omit-single="true" precision="1"></duration-until-now>

app/views/directives/truncate-long-text.html

@@ -1,17 +1,19 @@
-<span ng-if="!truncated" class="truncated-content">{{content}}</span>
+<span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
 <span ng-if="truncated">
   <span ng-if="!toggles.expanded">
-    <span class="truncated-content" ng-attr-title="{{content}}">{{truncatedContent}}&hellip;</span>
+    <span ng-attr-title="{{content}}">
+      <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;
+    </span>
     <a ng-if="expandable" href="" ng-click="toggles.expanded = true" style="margin-left: 5px; white-space: nowrap;">See all</a>
   </span>
   <span ng-if="toggles.expanded">
     <div ng-if="prettifyJson" class="well">
       <span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false">Collapse</a></span>
-      <span class="pretty-json truncated-content">{{content | prettifyJSON}}</span>
+      <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>
     </div>
     <span ng-if="!prettifyJson">
       <span class="pull-right"><a href="" ng-click="toggles.expanded = false">Collapse</a></span>
-      <span class="truncated-content">{{content}}</span>
+      <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
     </span>
   </span>
 </span>

dist/scripts/scripts.js

@@ -10950,6 +10950,7 @@ limit:"=",
 newlineLimit:"=",
 useWordBoundary:"=",
 expandable:"=",
+keywords:"=highlightKeywords",
 prettifyJson:"="
 },
 templateUrl:"views/directives/truncate-long-text.html",

dist/scripts/templates.js

@@ -4123,8 +4123,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<p class=\"card-pf-badge\">Builds source code</p>\n" +
     "<p>\n" +
-    "<truncate-long-text ng-if=\"!keywords.length\" class=\"project-description\" content=\"imageStream | imageStreamTagAnnotation : 'description' : is.tag.tag\" limit=\"200\" use-word-boundary=\"true\"></truncate-long-text>\n" +
-    "<span ng-if=\"keywords.length\" ng-bind-html=\"imageStream | imageStreamTagAnnotation : 'description' : is.tag.tag | truncate : 200 | highlightKeywords : keywords\"></span>\n" +
+    "<truncate-long-text class=\"project-description\" content=\"imageStream | imageStreamTagAnnotation : 'description' : is.tag.tag\" limit=\"200\" highlight-keywords=\"keywords\" use-word-boundary=\"true\"></truncate-long-text>\n" +
     "</p>\n" +
     "<p ng-if=\"imageStream | imageStreamTagAnnotation : 'provider' : is.tag.tag\">\n" +
     "Provider: {{imageStream | imageStreamTagAnnotation : 'provider' : is.tag.tag}}\n" +
@@ -4175,8 +4174,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</h2>\n" +
     "</div>\n" +
     "<p>\n" +
-    "<truncate-long-text ng-if=\"!keywords.length\" class=\"project-description\" content=\"(template | description) || template.metadata.name\" limit=\"200\" use-word-boundary=\"true\"></truncate-long-text>\n" +
-    "<span ng-if=\"keywords.length\" ng-bind-html=\"template | description | truncate : 200 | highlightKeywords : keywords\"></span>\n" +
+    "<truncate-long-text class=\"project-description\" content=\"(template | description) || template.metadata.name\" limit=\"200\" use-word-boundary=\"true\" highlight-keywords=\"keywords\"></truncate-long-text>\n" +
     "</p>\n" +
     "<p ng-if=\"template | annotation : 'provider'\">\n" +
     "Provider: {{template | annotation : 'provider'}}\n" +
@@ -6768,7 +6766,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-bind-html=\"event.reason | sentenceCase | highlightKeywords : filterExpressions\"></span>&nbsp;\n" +
     "<span class=\"pficon pficon-warning-triangle-o\" ng-show=\"event.type === 'Warning'\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Warning\"></span>\n" +
     "</div>\n" +
-    "<span ng-bind-html=\"event.message | highlightKeywords : filterExpressions\"></span>\n" +
+    "\n" +
+    "<truncate-long-text content=\"event.message\" limit=\"1000\" newline-limit=\"4\" use-word-boundary=\"true\" highlight-keywords=\"filterExpressions\" expandable=\"true\">\n" +
+    "</truncate-long-text>\n" +
     "<div ng-if=\"event.count > 1\" class=\"text-muted small\">\n" +
     "{{event.count}} times in the last\n" +
     "<duration-until-now timestamp=\"event.firstTimestamp\" omit-single=\"true\" precision=\"1\"></duration-until-now>\n" +
@@ -8384,20 +8384,22 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/truncate-long-text.html',
-    "<span ng-if=\"!truncated\" class=\"truncated-content\">{{content}}</span>\n" +
+    "<span ng-if=\"!truncated\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
     "<span ng-if=\"truncated\">\n" +
     "<span ng-if=\"!toggles.expanded\">\n" +
-    "<span class=\"truncated-content\" ng-attr-title=\"{{content}}\">{{truncatedContent}}&hellip;</span>\n" +
+    "<span ng-attr-title=\"{{content}}\">\n" +
+    "<span ng-bind-html=\"truncatedContent | highlightKeywords : keywords\" class=\"truncated-content\"></span>&hellip;\n" +
+    "</span>\n" +
     "<a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" style=\"margin-left: 5px; white-space: nowrap\">See all</a>\n" +
     "</span>\n" +
     "<span ng-if=\"toggles.expanded\">\n" +
     "<div ng-if=\"prettifyJson\" class=\"well\">\n" +
     "<span class=\"pull-right\" style=\"margin-top: -10px\"><a href=\"\" ng-click=\"toggles.expanded = false\">Collapse</a></span>\n" +
-    "<span class=\"pretty-json truncated-content\">{{content | prettifyJSON}}</span>\n" +
+    "<span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
     "</div>\n" +
     "<span ng-if=\"!prettifyJson\">\n" +
     "<span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\">Collapse</a></span>\n" +
-    "<span class=\"truncated-content\">{{content}}</span>\n" +
+    "<span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
     "</span>\n" +
     "</span>\n" +
     "</span>"