From fc361336da257a36fb39cb55cafb00143885efc4 Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Wed, 10 Jun 2015 10:33:39 -0400
Subject: [PATCH] [system_tracking] Truncate long values in nested facts

---
 awx/ui/static/js/shared/main.js               |  2 +
 .../js/shared/truncated-text.directive.js     | 43 +++++++++++++++++++
 .../fact-data-table.block.less                |  1 +
 .../system-tracking.partial.html              | 24 +++++------
 awx/ui/static/less/ansible-ui.less            |  4 ++
 5 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 awx/ui/static/js/shared/truncated-text.directive.js

diff --git a/awx/ui/static/js/shared/main.js b/awx/ui/static/js/shared/main.js
index c97aaa774d..357cd73b09 100644
--- a/awx/ui/static/js/shared/main.js
+++ b/awx/ui/static/js/shared/main.js
@@ -8,6 +8,7 @@ import listGenerator from './list-generator/main';
 import title from './title.directive';
 import lodashAsPromised from './lodash-as-promised';
 import stringFilters from './string-filters/main';
+import truncatedText from './truncated-text.directive';
 
 export default
     angular.module('shared',
@@ -15,4 +16,5 @@ export default
                         stringFilters.name
                    ])
         .factory('lodashAsPromised', lodashAsPromised)
+        .directive('truncatedText', truncatedText)
         .directive('title', title);
diff --git a/awx/ui/static/js/shared/truncated-text.directive.js b/awx/ui/static/js/shared/truncated-text.directive.js
new file mode 100644
index 0000000000..270358aba1
--- /dev/null
+++ b/awx/ui/static/js/shared/truncated-text.directive.js
@@ -0,0 +1,43 @@
+/* jshint unused: vars */
+
+function link($compile, scope, element, attrs) {
+
+    function elementTextWillWrap(element) {
+        var fullTextWidth = element[0].scrollWidth;
+        var elementWidth = element.outerWidth();
+
+        if(fullTextWidth > elementWidth) {
+            return true;
+        }
+
+        return false;
+    }
+
+    function getText() {
+        return element.text();
+    }
+
+    function addTitleIfWrapping(text) {
+        if (elementTextWillWrap(element)) {
+            element
+                .addClass('u-truncatedText')
+                .removeAttr('truncated-text')
+                .attr('title', text);
+
+            $compile(element)(scope);
+        }
+    }
+
+    scope.$watch(getText, addTitleIfWrapping);
+}
+
+export default
+    ['$compile',
+        function($compile) {
+            return {
+                priority: 1000, // make sure this gets compiled
+                               // before `title`
+                link: _.partial(link, $compile)
+            };
+        }
+    ];
diff --git a/awx/ui/static/js/system-tracking/fact-data-table.block.less b/awx/ui/static/js/system-tracking/fact-data-table.block.less
index 09545fa890..81c084f132 100644
--- a/awx/ui/static/js/system-tracking/fact-data-table.block.less
+++ b/awx/ui/static/js/system-tracking/fact-data-table.block.less
@@ -24,6 +24,7 @@
     &-column {
         padding: 0.5em 0;
         flex: 1;
+        white-space: nowrap;
         &--offsetLeft {
             margin-left: 33%;
         }
diff --git a/awx/ui/static/js/system-tracking/system-tracking.partial.html b/awx/ui/static/js/system-tracking/system-tracking.partial.html
index b2c50972d0..5b2dec27d9 100644
--- a/awx/ui/static/js/system-tracking/system-tracking.partial.html
+++ b/awx/ui/static/js/system-tracking/system-tracking.partial.html
@@ -84,27 +84,27 @@
                 <div class="FactDataGroup-facts" data-facts="{{group.facts}}">
                     <div class="FactDataTable-arrayGroup" ng-if="group.isFactArray" ng-repeat="arrayGroup in group.facts" data-array-group="{{arrayGroup}}">
                         <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in arrayGroup" data-fact="{{fact}}">
-                            <p class="FactDatum-keyName FactDataTable-column">
+                            <span class="FactDatum-keyName FactDataTable-column">
                             {{fact.keyName}}
-                            </p>
-                            <p class="FactDatum-value FactDataTable-column" style="word-break: break-all">
+                            </span>
+                            <span class="FactDatum-value FactDataTable-column u-truncatedText">
                             {{fact.value1}}
-                            </p>
-                            <p class="FactDatum-value FactDataTable-column" style="word-break: break-all">
+                            </span>
+                            <span class="FactDatum-value FactDataTable-column u-truncatedText">
                             {{fact.value2}}
-                            </p>
+                            </span>
                         </div>
                     </div>
                     <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in group.facts" ng-unless="group.isFactArray" data-fact="{{fact}}">
-                        <p class="FactDataTable-column FactDatum-keyName">
+                        <span class="FactDataTable-column FactDatum-keyName">
                         {{fact.keyName}}
-                        </p>
-                        <p class="FactDataTable-column FactDatum-value" style="word-break: break-all">
+                        </span>
+                        <span class="FactDataTable-column FactDatum-value" truncated-text>
                         {{fact.value1}}
-                        </p>
-                        <p class="FactDataTable-column FactDatum-value" style="word-break: break-all">
+                        </span>
+                        <span class="FactDataTable-column FactDatum-value" truncated-text>
                         {{fact.value2}}
-                        </p>
+                        </span>
                     </div>
                 </div>
         </div>
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 1c28b32886..cfb9680d93 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -78,6 +78,10 @@ a.red-txt:active {
     text-overflow: ellipsis;
 }
 
+.tooltip {
+    word-break: break-all;
+}
+
 blockquote {
     font-size: 14px;
 }