[system_tracking] Truncate long values in nested facts

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);

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)
+            };
+        }
+    ];

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%;
         }

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>
+                            </span>
-                            <p class="FactDatum-value FactDataTable-column" style="word-break: break-all">
+                            <span class="FactDatum-value FactDataTable-column u-truncatedText">
                             {{fact.value1}}
-                            </p>
+                            </span>
-                            <p class="FactDatum-value FactDataTable-column" style="word-break: break-all">
+                            <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>
+                        </span>
-                        <p class="FactDataTable-column FactDatum-value" style="word-break: break-all">
+                        <span class="FactDataTable-column FactDatum-value" truncated-text>
                         {{fact.value1}}
-                        </p>
+                        </span>
-                        <p class="FactDataTable-column FactDatum-value" style="word-break: break-all">
+                        <span class="FactDataTable-column FactDatum-value" truncated-text>
                         {{fact.value2}}
-                        </p>
+                        </span>
                     </div>
                 </div>
         </div>

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;
 }