AC-503 now that we can cloud, tree views need to handle long (really long) group names. This fixes the Hosts tree view.

This commit is contained in:
chouseknecht
2013-10-17 03:46:59 +00:00
parent 432ed60a1f
commit 5bd3d8456b
6 changed files with 56 additions and 23 deletions

View File

@@ -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');
});

View File

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