From 5bd3d8456b40ed0594b3d43d10d0795ccd4155f2 Mon Sep 17 00:00:00 2001
From: chouseknecht <chouse@ansibleworks.com>
Date: Thu, 17 Oct 2013 03:46:59 +0000
Subject: [PATCH] AC-503 now that we can cloud, tree views need to handle long
 (really long) group names. This fixes the Hosts tree view.

---
 awx/ui/static/js/helpers/Hosts.js             | 31 +++++++++++++------
 awx/ui/static/js/helpers/inventory.js         |  2 +-
 awx/ui/static/less/ansible-ui.less            | 29 ++++++++++++-----
 awx/ui/static/lib/ansible/form-generator.js   |  2 +-
 awx/ui/static/lib/jstree/jquery.jstree.js     |  5 +--
 .../lib/jstree/themes/ansible/style.css       | 10 ++++--
 6 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/awx/ui/static/js/helpers/Hosts.js b/awx/ui/static/js/helpers/Hosts.js
index b6c9190da9..c8e7bcc4a4 100644
--- a/awx/ui/static/js/helpers/Hosts.js
+++ b/awx/ui/static/js/helpers/Hosts.js
@@ -527,16 +527,17 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
             var sorted = SortNodes(tree_data);
             html += (sorted.length > 0) ? "<ul>\n" : "";
             for(var i=0; i < sorted.length; i++) {
-               html += "<li id=\"search-node-1000\" data-state=\"opened\" data-hosts=\"" + sorted[i].related.hosts + "\" " +
+               html += "<li id=\"search-node-10" + i + "\" data-state=\"opened\" data-hosts=\"" + sorted[i].related.hosts + "\" " +
                    "data-description=\"" + sorted[i].description + "\" " + 
                    "data-failures=\"" + sorted[i].has_active_failures + "\" " +
                    "data-groups=\"" + sorted[i].related.groups + "\" " + 
                    "data-name=\"" + sorted[i].name + "\" " +
                    "data-group-id=\"" + sorted[i].id + "\" " + 
-                   "><a href=\"\" class=\"expand\"><i class=\"icon-caret-down\"></i></a> " +
-                   "<i class=\"field-badge icon-failures-" + sorted[i].has_active_failures + "\" " +
-                   "aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i> " +
-                   "<a href=\"\" class=\"activate\">" + sorted[i].name + "</a> ";
+                   "><div class=\"expand-container\"><a href=\"\" class=\"expand\"><i class=\"icon-caret-down\"></i></a></div> " +
+                   "<div class=\"badge-container\"><i class=\"field-badge icon-failures-" + sorted[i].has_active_failures + "\" " +
+                   "aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i></div> " +
+                   "<div class=\"title-container\"><a href=\"\" class=\"activate\">" + sorted[i].name + "</a></div>";
+              
                if (sorted[i].children.length > 0) {
                   buildHTML(sorted[i].children);
                }
@@ -565,7 +566,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         function activate(e) {
             /* Set the clicked node as active */
             var elm = angular.element(e.target);  //<a>
-            var parent = angular.element(e.target.parentNode); //<li>
+            var parent = angular.element(e.target.parentNode.parentNode); //<li>
             $('.search-tree .active').removeClass('active');
             elm.addClass('active');
             refresh(parent);
@@ -575,13 +576,13 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
             var id, parent, elm, icon;
 
             if (e.target.tagName == 'I') {
-               id = e.target.parentNode.parentNode.attributes.id.value;
-               parent = angular.element(e.target.parentNode.parentNode);  //<li>
+               id = e.target.parentNode.parentNode.parentNode.attributes.id.value;
+               parent = angular.element(e.target.parentNode.parentNode.parentNode);  //<li>
                elm = angular.element(e.target.parentNode);  // <a>
             }
             else {
-               id = e.target.parentNode.attributes.id.value;
-               parent = angular.element(e.target.parentNode);
+               id = e.target.parentNode.parentNode.attributes.id.value;
+               parent = angular.element(e.target.parentNode.parentNode);
                elm = angular.element(e.target);
             }
 
@@ -647,6 +648,16 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                    link.bind('click', activate);
                 }
             }
+             
+            // Attempt to stop the title from dropping to the next 
+            // line
+            $(container).find('.title-container').each(function(idx) {
+                var parent = $(this).parent();
+                if ($(this).width() >= parent.width()) {
+                   $(this).css('width','80%');
+                } 
+                });
+
             Wait('stop');
             });
 
diff --git a/awx/ui/static/js/helpers/inventory.js b/awx/ui/static/js/helpers/inventory.js
index bcde257c1a..878aa63d05 100644
--- a/awx/ui/static/js/helpers/inventory.js
+++ b/awx/ui/static/js/helpers/inventory.js
@@ -160,7 +160,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             // Force root node styling changes
             $('#tree-view').prepend("<div class=\"title\">Group Selector:</div>");
             $('#inventory-node ins').first().remove();
-            $('#inventory-node a ins').first().css('background-image', 'none').append('<i class="icon-sitemap"></i>').css('margin-right','10px');
+            //$('#inventory-node a ins').first().css('background-image', 'none').append('<i class="icon-sitemap"></i>').css('margin-right','10px');
             
             $('#tree-view ul').first().css('opacity','100'); // all our changes are done. display the tree
             scope['treeLoading'] = false;
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index aab7ebbdf5..802712be49 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -992,6 +992,11 @@ select.field-mini-height {
     ul {
       list-style-type: none;
       padding-left: 16px;
+      padding-top: 5px;
+    }
+
+    li { 
+      padding-bottom: 5px;
     }
 
     .tree-root {
@@ -1001,7 +1006,6 @@ select.field-mini-height {
     .activate {
       padding-left: 3px;
       padding-right: 3px;
-      word-break: break-all;
     }
 
     .activate:hover {
@@ -1010,18 +1014,28 @@ select.field-mini-height {
 
     .active {
       font-weight: bold;
-      padding-top: 5px;
-      padding-bottom: 5px;
     }
 
-    .expand {
+    div {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .expand-container {
+      width: 14px;
+      text-align: center;
+    }
+
+    .expand { 
       padding: 3px;
-      /*border: 1px solid rgb(245, 245, 245);*/
     }
 
-    .expand:hover {
+    .title-container {
+      word-break: break-all;
+    }
+
+    .expand-container:hover {
       background-color: #ddd;
-      border: 1px solid #ddd;
     }
 
     .field-badge {
@@ -1285,6 +1299,7 @@ tr td button i {
   #tree-view {
     margin-left: 0;
     margin-top: 10px;
+    overflow: hidden;
   }
 
   #tree-form {
diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js
index 3ba0882e50..6a1321af36 100644
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/awx/ui/static/lib/ansible/form-generator.js
@@ -1234,7 +1234,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           */
           html += "<div class=\"row\">\n";
           html += "<div class=\"col-lg-3\">\n" +
-                  "<div id=\"tree-view\"></div>\n" + 
+                  "<div id=\"tree-view\" class=\"col-lg-12\"></div>\n" + 
                   "</div>\n";
           html += "<div class=\"col-lg-9 tree-form-container\">\n";
           html += "<div id=\"tree-form\">\n</div>\n";
diff --git a/awx/ui/static/lib/jstree/jquery.jstree.js b/awx/ui/static/lib/jstree/jquery.jstree.js
index c92c2acd6e..8f685b38ec 100644
--- a/awx/ui/static/lib/jstree/jquery.jstree.js
+++ b/awx/ui/static/lib/jstree/jquery.jstree.js
@@ -272,12 +272,12 @@
 			v = (u.match( /.+?(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
 			css_string = '' + 
 				'.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; } ' + 
-				'.jstree li { display:block; min-height:18px; line-height:18px; white-space:nowrap; margin-left:18px; min-width:18px; } ' + 
+				'.jstree li { display:block; min-height:18px; line-height:18px; margin-left:18px; min-width:18px; } ' + 
 				'.jstree-rtl li { margin-left:0; margin-right:18px; } ' + 
 				'.jstree > ul > li { margin-left:0px; } ' + 
 				'.jstree-rtl > ul > li { margin-right:0px; } ' + 
 				'.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } ' + 
-				'.jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; } ' + 
+				'.jstree a { display:inline-block; line-height:16px; height:16px; color:black; text-wrap: unrestricted; text-decoration:none; padding:1px 2px; margin:0; } ' + 
 				'.jstree a:focus { outline: none; } ' + 
 				'.jstree a > ins { height:16px; width:16px; } ' + 
 				'.jstree a > .jstree-icon { margin-right:3px; } ' + 
@@ -1825,6 +1825,7 @@
 							if(m.icon.indexOf("/") === -1) { tmp.children("ins").addClass(m.icon); }
 							else { tmp.children("ins").css("background","url('" + m.icon + "') center center no-repeat"); }
 						}
+						var div = $("<div style=\"display:inline-block;\"></div>");
 						d.append(tmp);
 					});
 					d.prepend("<ins class='jstree-icon'>&#160;</ins>");
diff --git a/awx/ui/static/lib/jstree/themes/ansible/style.css b/awx/ui/static/lib/jstree/themes/ansible/style.css
index 711b6c1341..18a9dae786 100644
--- a/awx/ui/static/lib/jstree/themes/ansible/style.css
+++ b/awx/ui/static/lib/jstree/themes/ansible/style.css
@@ -6,13 +6,19 @@
  
 .jstree-ansible li, 
 .jstree-ansible ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
-.jstree-ansible li { background-position:-90px 0; background-repeat:repeat-y;  }
+
+.jstree-ansible li {
+    overflow: hidden;
+    background-position:-90px 0; 
+    background-repeat:repeat-y;
+    }
+
 .jstree-ansible li.jstree-last { background:transparent; }
 .jstree-ansible .jstree-open > ins { background-position:-72px 0; }
 .jstree-ansible .jstree-closed > ins { background-position:-54px 0; }
 .jstree-ansible .jstree-leaf > ins { background-position:-36px 0; }
 
-.jstree-ansible li a { height: 19px;}
+.jstree-ansible li a { height: 19px; }
 .jstree-ansible .jstree-hovered { background:#d9edf7; border:1px solid #e7f4f9; padding:0 2px 0 1px; }
 .jstree-ansible .jstree-clicked { background:#d9edf7; border:1px solid #3a87ad; padding:0 2px 0 1px; color: #000; }
 /* 3a87ad */