Latest inventory hosts tab changes

This commit is contained in:
chouseknecht
2013-08-18 20:20:39 -04:00
parent 707f98237b
commit 858c389fb0
10 changed files with 102 additions and 86 deletions

View File

@@ -104,6 +104,7 @@ angular.module('InventoryFormDefinition', [])
type: 'treeview',
title: "groupTitle",
iterator: 'host',
actions: {
},
@@ -111,50 +112,19 @@ angular.module('InventoryFormDefinition', [])
name: {
key: true,
label: 'Host Name',
ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')"
ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
badgeShow: "\{\{ host.has_active_failures \}\}",
badgeIcon: 'icon-exclamation-sign',
badgeToolTip: 'Most recent job failed',
badgePlacement: 'bottom'
},
description: {
label: 'Description',
ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')"
},
has_active_failures: {
label: 'Failed jobs?',
showValue: false,
ngClick: "showEvents('\{\{ host.name \}\}', '\{\{ host.related.last_job \}\}')",
ngShow: "\{\{ host.has_active_failures \}\}",
icon: 'icon-exclamation-sign',
"class": 'active-failures-\{\{ host.has_active_failures \}\}',
text: 'View failures',
searchField: 'has_active_failures',
searchType: 'boolean',
searchOptions: [{ name: "No", value: 0 }, { name: "Yes", value: 1 }]
}
},
fieldActions: {
edit: {
ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
icon: 'icon-edit',
label: 'Edit',
awToolTip: 'Edit host',
'class': 'btn-default'
},
"remove": {
ngClick: "removeHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
icon: 'icon-minus-sign',
label: 'Remove',
"class": 'btn-success',
ngHide: "group_id === null || group_id === undefined",
awToolTip: 'Remove this host from the group, but leave it as part of the inventory under All Hosts'
},
"delete": {
ngClick: "deleteHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
icon: 'icon-trash',
label: 'Delete',
"class": 'btn-danger',
awToolTip: 'Permanently remove this host from the inventory'
}
}
}
}
}

View File

@@ -448,7 +448,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
var relatedSets = { hosts: { url: url, iterator: 'host' } };
RelatedSearchInit({ scope: params.scope, form: InventoryForm, relatedSets: relatedSets });
RelatedPaginateInit({ scope: params.scope, relatedSets: relatedSets });
RelatedPaginateInit({ scope: params.scope, relatedSets: relatedSets, pageSize: 40 });
if (scope['hostFailureFilter']) {
// If the user checked 'show only hosts with failures', filter for hosts with failed jobs

View File

@@ -42,9 +42,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
Rest.get()
.success( function(data, status, headers, config) {
for (var i=0; i < data.results.length; i++) {
title = data.results[i].name;
title += (data.results[i].has_active_failures) ? ' <span class="tree-badge" title="Contains hosts with failed jobs">' +
'<i class="icon-exclamation-sign"></i></span>' : '';
title = data.results[i].name;
treeData[0].children.push({
data: {
title: title
@@ -147,9 +145,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
var title;
var filter = (scope.inventoryFailureFilter) ? "has_active_failures=true&" : "";
for (var i=0; i < data.results.length; i++) {
title = data.results[i].name;
title += (data.results[i].has_active_failures) ? ' <span class="tree-badge" title="Contains hosts with failed jobs">' +
'<i class="icon-exclamation-sign"></i></span>' : '';
title = data.results[i].name;
response.push({
data: {
title: title

View File

@@ -20,6 +20,7 @@ angular.module('RelatedPaginateHelper', ['RefreshRelatedHelper', 'ngCookies'])
var scope = params.scope;
var relatedSets = params.relatedSets;
var pageSize = (params.pageSize) ? params.pageSize : 10;
for (var key in relatedSets){
cookieSize = $cookieStore.get(relatedSets[key].iterator + 'PageSize');
@@ -29,7 +30,7 @@ angular.module('RelatedPaginateHelper', ['RefreshRelatedHelper', 'ngCookies'])
}
else {
scope[relatedSets[key].iterator + 'Page'] = 0;
scope[relatedSets[key].iterator + 'PageSize'] = 10;
scope[relatedSets[key].iterator + 'PageSize'] = pageSize;
}
}

View File

@@ -176,6 +176,8 @@ a:hover {
text-decoration: none;
}
.site-footer {
width: 100%;
padding-top: 20px;
@@ -184,6 +186,33 @@ a:hover {
color: @grey;
text-align: center;
background-color: @black;
.inner-container {
max-width: 1170px;
margin: 0 auto;
padding: 0 10px;
}
a,
a:active,
a:hover,
a:visited {
margin-right: 15px;
font-size: 18px;
color: @grey;
}
.social {
display: inline-block;
}
.logo {
display: inline-block;
}
.logo img {
max-width: 125px;
}
}
.copyright {
@@ -193,28 +222,9 @@ a:hover {
text-align: center;
}
.site-footer a,
.site-footer a:active,
.site-footer a:hover,
.site-footer a:visited {
margin-right: 15px;
font-size: 18px;
color: @grey;
}
.site-footer .social {
display: inline-block;
margin-left: 50px;
}
.site-footer .logo {
display: inline-block;
margin-right: 35px;
}
.site-footer .logo img {
max-width: 125px;
}
.login-header {
text-align: center;
@@ -602,7 +612,7 @@ input[type="text"].job-successful {
}
.tree-badge {
.host-badge {
color: @red;
font-size: 12px;
}

View File

@@ -477,7 +477,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
/* For reasons unknown calling Rest fails. It just dies with no errors
or any info */
$.ajax({
url: url,
url: url + '?order_by=name',
headers: { 'Authorization': 'Token ' + token },
dataType: 'json',
success: function(data) {
@@ -494,11 +494,17 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
html += "data-name=\"" + data.results[i].name + "\" ";
html += "data-group-id=\"" + data.results[i].id + "\">";
html += "<a href=\"\" class=\"expand\"><i class=\"icon-caret-right\"></i></a> ";
html += "<a href=\"\" class=\"activate\">" + data.results[i].name + "</a></li>\n";
html += "<a href=\"\" class=\"activate\">" + data.results[i].name + "</a> ";
html += "<a href=\"\" aw-tool-tip=\"Contains hosts with failed jobs\" ng-show=\"" +
data.results[i].has_active_failures + "\" data-placement=\"bottom\">" +
"<i class=\"host-badge icon-exclamation-sign\"></i></a></li>\n";
}
html = (html !== '') ? "<ul>" + html + "</ul>\n" : "";
var compiled = $compile(html)(scope);
parent.append(compiled); //append the new list to the parent <li>
if (!scope.$$phase) {
scope.$digest();
}
scope.$emit('childrenLoaded');
},
error: function(data, status) {
@@ -532,7 +538,10 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
"data-failures=\"{{ treeData[0].failures }}\" " +
"data-groups=\"{{ treeData[0].groups }}\" " +
"data-name=\"{{ treeData[0].name }}\" " +
"><a href=\"\" class=\"expand\"><i class=\"icon-caret-right\"></i></a> <a href=\"\" class=\"activate active\">{{ treeData[0].name }}</a>" +
"><a href=\"\" class=\"expand\"><i class=\"icon-caret-right\"></i></a> " +
"<a href=\"\" class=\"activate active\">{{ treeData[0].name }}</a> " +
"<a href=\"\" aw-tool-tip=\"Contains hosts with failed jobs\" ng-show=\"\{\{ treeData[0].failures \}\}\" data-placement=\"bottom\">" +
"<i class=\"host-badge icon-exclamation-sign\"></i></a>" +
"</li>\n" +
"</ul>\n";
var compiled = $compile(html)(scope);

View File

@@ -76,18 +76,18 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
}
}
// Remove any lingering tooltip <div> elements
// Remove any lingering tooltip and popover <div> elements
$('.tooltip').each( function(index) {
$(this).remove();
});
$('.popover').each(function(index) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
if (options.modal) {
this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle; //Default title for default modal
this.scope.formModalInfo = false //Disable info button for default modal
$('.popover').each(function(index) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
if (options.modal_selector) {
$(options.modal_selector).modal({ show: true, backdrop: 'static', keyboard: true });
$(options.modal_selector).on('shown.bs.modal', function() {
@@ -988,9 +988,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "<table class=\"" + form.related[itm].iterator + " table table-condensed table-hover\">\n";
html += "<thead>\n";
html += "<tr>\n";
html += "<th>#</th>\n";
//html += "<th>#</th>\n";
html += "<th><input type=\"checkbox\" ng-model=\"toggleAllFlag\" ng-change=\"toggleAllHosts()\" aw-tool-tip=\"Select all hosts\" data-placement=\"top\"></th>\n";
for (var fld in form.related[itm].fields) {
html += "<th class=\"list-header\" id=\"" + form.related[itm].iterator + '-' + fld + "-header\" " +
"ng-click=\"sort('" + form.related[itm].iterator + "', '" + fld + "')\">" +
@@ -1018,12 +1017,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
// Row counter
html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " +
form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
//html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " +
// form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
// Select checkbox
html += "<td><input type=\"checkbox\" ng-model=\"" + form.related[itm].iterator + ".selected\" ng-change=\"toggleOneHost()\" ></td>";
var cnt = 1;
var rfield;
var base = (form.related[itm].base) ? form.related[itm].base : itm;
@@ -1035,6 +1034,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
}
// Row level actions
/*
html += "<td class=\"actions\">";
for (action in form.related[itm].fieldActions) {
html += "<button class=\"btn btn-mini";
@@ -1049,6 +1050,22 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "</button> ";
}
html += "</td>";
*/
html += "<td>";
html += "<div class=\"btn-group\">\n";
html += "<button type=\"button\" class=\"btn btn-default btn-mini dropdown-toggle\" data-toggle=\"dropdown\">";
html += "View <span class=\"caret\"></span></button>\n";
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu1\">\n";
html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action</a></li>\n";
html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action</a></li>\n";
html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here</a></li>\n";
html += "<li role=\"presentation\" class=\"divider\"></li>\n";
html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link</a></li>\n";
html += "</ul>\n";
html += "</div>\n";
html += "</td>\n";
html += "</tr>\n";
// Message for when a related collection is empty

View File

@@ -101,7 +101,6 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
var field = list['fields'][fld];
var html = '';
//html += "<td ";
html += "<td class=\"" + fld + "-column";
html += (field['class']) ? " " + field['class'] : "";
html += (field['columnClass']) ? " " + field['columnClass'] : "";
@@ -176,6 +175,20 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
"ng-bind-html-unsafe=\"" + field.appendHTML + "\" " +
"class=\"level-\{\{ " + list.iterator + ".event_level \}\}-detail\" " +
"></div>\n" : "";
// Badge
if (field.badgeIcon) {
if (field.badgeToolTip) {
html += "<a href=\"\" aw-tool-tip=\"Most recent job failed\"";
html += (field.badgePlacement) ? " data-placement=\"" + field.badgePlacement + "\"" : "";
html += " ng-show=\"" + field.badgeShow + "\">";
html += " <i class=\"host-badge " + field.badgeIcon + "\"></i></a>\n";
}
else {
html += " <i class=\"host-badge " + field.badgeIcon + "\" ";
html += "ng-show=\"" + field.badgeShow + "\"></i>\n";
}
}
return html += "</td>\n";

View File

@@ -85,18 +85,18 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
this.scope[list.name] = null;
this.scope[list.iterator] = null;
// Remove any lingering tooltip <div> elements
// Remove any lingering tooltip and popover <div> elements
$('.tooltip').each( function(index) {
$(this).remove();
});
$('.popover').each(function(index) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
if (options.mode == 'lookup') {
// options should include {hdr: <dialog header>, action: <function...> }
this.scope.lookupHeader = options.hdr;
$('.popover').each(function(index) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
$('#lookup-modal').modal({ backdrop: 'static', keyboard: true });
$(document).bind('keydown', function(e) {
if (e.keyCode === 27) {

View File

@@ -323,9 +323,9 @@
<div class="overlay"></div>
<div class="spinny"><i class="icon-cog icon-spin icon-2x"></i> <p>working...</p></div>
<div class="site-footer">
<div>
<div class="inner-container">
<div class="social pull-left">
<a href="https://github.com/ansible" target="_blank"><i class="icon-github"></i></a>
<a href="https://www.facebook.com/pages/Ansibleworks/258737970923512?ref=hl" target="_blanck"><i class="icon-facebook"></i></a>