From c52ec1197b43afe201de681db74f1bc1c2044554 Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Fri, 10 Jul 2015 11:22:40 -0400
Subject: [PATCH] [system_tracking] Remove truncation of fact values

This is a temporary fix until we can get a permanent fix to the
performance issues we have with rendering this much data to the DOM. For
more info see my comment on https://trello.com/c/QrbeaZfK.
---
 .../js/shared/truncated-text.directive.js      |  9 ++++++---
 .../js/shared/utilities/truncated-text.less    |  5 +++++
 .../fact-data-table/fact-data-table.block.less |  3 +--
 .../fact-data-table.partial.html               | 18 +++++++++---------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/awx/ui/static/js/shared/truncated-text.directive.js b/awx/ui/static/js/shared/truncated-text.directive.js
index bf3d1fd8cc..745ae352ca 100644
--- a/awx/ui/static/js/shared/truncated-text.directive.js
+++ b/awx/ui/static/js/shared/truncated-text.directive.js
@@ -1,4 +1,5 @@
 /* jshint unused: vars */
+import {addResizeListener, removeResizeListener} from 'tower/shared/element-resize';
 
 function link($compile, scope, element, attrs) {
 
@@ -65,12 +66,14 @@ function link($compile, scope, element, attrs) {
     // wanted to leave this as a regular event binding, but
     // was running into issues with the resized element getting
     // removed from the DOM after truncating! No idea why yet.
-    element.resize(function() {
+    function resizeListener() {
         addTitleIfWrapping(getText());
-    });
+    }
+
+    addResizeListener(element[0], resizeListener);
 
     scope.$watch('$destroy', function() {
-        element.off('resize');
+        removeResizeListener(element[0], resizeListener);
     });
 }
 
diff --git a/awx/ui/static/js/shared/utilities/truncated-text.less b/awx/ui/static/js/shared/utilities/truncated-text.less
index 938ed45bcc..42be763ab9 100644
--- a/awx/ui/static/js/shared/utilities/truncated-text.less
+++ b/awx/ui/static/js/shared/utilities/truncated-text.less
@@ -2,3 +2,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.u-wrappedText {
+  white-space: normal;
+  word-wrap: break-word;
+}
diff --git a/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.block.less b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.block.less
index 16194ebf07..350aa6dd08 100644
--- a/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.block.less
+++ b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.block.less
@@ -9,7 +9,7 @@
       margin-bottom: 0.5em;
       align-items: center;
       transition: background-color 100ms, border-color 100ms;
-      max-height: 36px;
+      // max-height: 36px;
       border: solid 1px #fff;
       &:hover {
         background-color: #ebebeb;
@@ -31,7 +31,6 @@
     &-column {
         padding: 8px;
         flex: 1 0 33%;
-        white-space: nowrap;
         align-self: flex-start;
         &--offsetLeft {
             margin-left: 33%;
diff --git a/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html
index 44df785f58..29047d293b 100644
--- a/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html
+++ b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html
@@ -28,20 +28,20 @@
             <div class="FactDataTable-row FactDataTable-row--flexible" ng-if="group.containsValueArray">
                 <span class="FactDataTable-column">{{group.facts.keyName}}</span>
                 <span class="FactDataTable-column FactDataTable-columnArray">
-                    <span class="FactDataTable-columnMember" truncated-text ng-repeat="value in group.facts.value1">
+                    <span class="FactDataTable-columnMember u-wrappedText" ng-repeat="value in group.facts.value1" style="position: relative;">
                         {{value}}
                     </span>
                 </span>
                 <span class="FactDataTable-column FactDataTable-columnArray" ng-if="!singleResultView">
-                    <span class="FactDataTable-columnMember" truncated-text ng-repeat="value in group.facts.value2">
+                    <span class="FactDataTable-columnMember u-wrappedText" ng-repeat="value in group.facts.value2" style="position: relative;">
                         {{value}}
                     </span>
                 </span>
             </div>
             <div class="FactDataTable-row" ng-if="!group.containsValueArray">
                 <span class="FactDataTable-column">{{group.facts.keyName}}</span>
-                <span class="FactDataTable-column">{{group.facts.value1}}</span>
-                <span class="FactDataTable-column" ng-if="!singleResultView">{{group.facts.value2}}</span>
+                <span class="FactDataTable-column u-wrappedText" style="position: relative;">{{group.facts.value1}}</span>
+                <span class="FactDataTable-column u-wrappedText" ng-if="!singleResultView" style="position: relative;">{{group.facts.value2}}</span>
             </div>
         </div>
     </div>
@@ -60,13 +60,13 @@
                         <span class="FactDatum-keyName FactDataTable-column" ng-if="!fact.isArrayMember">
                         {{fact.keyName}}
                         </span>
-                        <span class="FactDatum-keyName FactDataTable-column" ng-if="fact.isArrayMember">
+                        <span class="FactDatum-keyName FactDataTable-column u-wrappedText" ng-if="fact.isArrayMember">
                           {{fact.keyPath[0]}}.{{fact.keyName}}
                         </span>
-                        <span class="FactDatum-value FactDataTable-column" truncated-text>
+                        <span class="FactDatum-value FactDataTable-column u-wrappedText" style="position: relative;">
                         {{fact.value1}}
                         </span>
-                        <span class="FactDatum-value FactDataTable-column" truncated-text ng-if="!singleResultView">
+                        <span class="FactDatum-value FactDataTable-column u-wrappedText" ng-if="!singleResultView" style="position: relative;">
                         {{fact.value2}}
                         </span>
                     </div>
@@ -78,10 +78,10 @@
                     <span class="FactDataTable-column FactDatum-keyName" ng-if="fact.isArrayMember">
                       {{fact.keyPath[0]}}.{{fact.keyName}}
                     </span>
-                    <span class="FactDataTable-column FactDatum-value" truncated-text>
+                    <span class="FactDataTable-column FactDatum-value u-wrappedText" style="position: relative;">
                     {{fact.value1}}
                     </span>
-                    <span class="FactDataTable-column FactDatum-value" truncated-text ng-if="!singleResultView">
+                    <span class="FactDataTable-column FactDatum-value u-wrappedText" ng-if="!singleResultView" style="position: relative;">
                     {{fact.value2}}
                     </span>
                 </div>