External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 18:07:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fixed styling on Job Events page to give the Event column more room. Added monospacing and nowrap to txt fields.Shotened Created On and Status columns. Centered Status column. Fixed Actions column so that columnClass directive works.

Browse Source
This commit is contained in:
Chris Houseknecht
2014-02-04 21:26:58 +00:00
parent 00156a5518
commit d08319100d
3 changed files with 179 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
awx/ui/static/js/controllers/JobEvents.js
View File

@@ -10,7 +10,7 @@
'use strict'; 'use strict';
function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobEventList, function JobEventsList ($filter, $scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobEventList,
GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren, ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren,
FormatDate, EventView, Refresh, Wait) FormatDate, EventView, Refresh, Wait)
@@ -96,7 +96,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
if (txt !== '') { if (txt !== '') {
html += "<div class=\"form-group\">\n"; html += "<div class=\"form-group\">\n";
html += "<label>Results:</label>\n"; html += "<label>Results:</label>\n";
html += "<textarea readonly class=\"form-control nowrap\" rows=\"" + rows + "\">" + txt + "</textarea>\n"; html += "<textarea readonly class=\"form-control nowrap mono-space\" rows=\"" + rows + "\">" + txt + "</textarea>\n";
html += "</div>\n"; html += "</div>\n";
found = true; found = true;
} }
@@ -104,7 +104,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
if (fld == "rc" && eventData.res[fld] != '') { if (fld == "rc" && eventData.res[fld] != '') {
html += "<div class=\"form-group\">\n"; html += "<div class=\"form-group\">\n";
html += "<label>Return Code:</label>\n"; html += "<label>Return Code:</label>\n";
html += "<input type=\"text\" class=\"form-control\" value=\"" + eventData.res[fld] + "\" readonly >\n"; html += "<input type=\"text\" class=\"form-control nowrap mono-space\" value=\"" + eventData.res[fld] + "\" readonly >\n";
html += "</div>\n"; html += "</div>\n";
found = true; found = true;
} }
@@ -178,8 +178,9 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
scope.jobevents[i].statusBadgeToolTip = "No errors occurred. Click to view details"; scope.jobevents[i].statusBadgeToolTip = "No errors occurred. Click to view details";
} }
} }
cDate = new Date(set[i].created); //cDate = new Date(set[i].created);
set[i].created = FormatDate(cDate); //set[i].created = FormatDate(cDate);
set[i].created = $filter('date')(set[i].created, 'MM/dd HH:mm:ss');
} }
// Need below lookup to get inventory_id, which is not on event record. Plus, good idea to get status and name // Need below lookup to get inventory_id, which is not on event record. Plus, good idea to get status and name
@@ -233,10 +234,10 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
} }
} }
JobEventsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList', JobEventsList.$inject = [ '$filter', '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList',
'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'FormatDate', 'EventView', 'Refresh', 'Wait' 'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'FormatDate', 'EventView', 'Refresh', 'Wait'
]; ];
function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm, function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm,
Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath, FormatDate, EventView, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath, FormatDate, EventView,

73
awx/ui/static/js/lists/JobEvents.js
View File

@@ -16,89 +16,94 @@ angular.module('JobEventsListDefinition', [])
index: false, index: false,
hover: true, hover: true,
hasChildren: true, hasChildren: true,
filterBy: '\{ show: true \}', filterBy: '{ show: true }',
navigationLinks: { navigationLinks: {
details: { details: {
href: "/#/jobs/{{ job_id }}", href: '/#/jobs/{{ job_id }}',
label: 'Status', label: 'Status',
icon: 'icon-zoom-in', icon: 'icon-zoom-in',
ngShow: "job_id !== null" ngShow: 'job_id !== null'
}, },
events: { events: {
href: "/#/jobs/{{ job_id }}/job_events", href: '/#/jobs/{{ job_id }}/job_events',
label: 'Events', label: 'Events',
active: true, active: true,
icon: 'icon-list-ul' icon: 'icon-list-ul'
}, },
hosts: { hosts: {
href: "/#/jobs/{{ job_id }}/job_host_summaries", href: '/#/jobs/{{ job_id }}/job_host_summaries',
label: 'Host Summary', label: 'Host Summary',
icon: 'icon-laptop' icon: 'icon-laptop'
} }
}, },
fields: { fields: {
created: { created: {
label: 'Created On', label: 'Created On',
columnClass: 'col-lg-1 col-md-1 hidden-sm hidden-xs',
key: true, key: true,
nosort: true, nosort: true,
searchable: false, searchable: false,
link: false link: false
}, },
status: { status: {
label: 'Status', label: 'Status',
showValue: true, showValue: false,
columnClass: 'col-sm-1 col-xs-2 text-center',
searchField: 'failed', searchField: 'failed',
searchType: 'boolean', searchType: 'boolean',
searchOptions: [{ name: "success", value: 0 }, { name: "error", value: 1 }], searchOptions: [{ name: 'success', value: 0 }, { name: 'error', value: 1 }],
nosort: true, nosort: true,
searchable: false, searchable: false,
ngClick: "viewJobEvent(\{\{ jobevent.id \}\})", ngClick: 'viewJobEvent({{ jobevent.id }})',
awToolTip: "\{\{ jobevent.statusBadgeToolTip \}\}", awToolTip: '{{ jobevent.statusBadgeToolTip }}',
dataPlacement: 'top', dataPlacement: 'top',
badgeIcon: 'fa icon-job-\{\{ jobevent.status \}\}', badgeIcon: 'fa icon-job-{{ jobevent.status }}',
badgePlacement: 'left', badgePlacement: 'left',
badgeToolTip: "\{\{ jobevent.statusBadgeToolTip \}\}", badgeToolTip: '{{ jobevent.statusBadgeToolTip }}',
badgeTipPlacement: 'top', badgeTipPlacement: 'top',
badgeNgClick: "viewJobEvent(\{\{ jobevent.id \}\})" badgeNgClick: 'viewJobEvent({{ jobevent.id }})'
}, },
event_display: { event_display: {
label: 'Event', label: 'Event',
hasChildren: true, hasChildren: true,
ngClick: "toggleChildren(\{\{ jobevent.id \}\}, '\{\{ jobevent.related.children \}\}')", ngClick: 'toggleChildren({{ jobevent.id }}, \'{{ jobevent.related.children }}\')',
nosort: true, nosort: true,
searchable: false, searchable: false,
ngClass: '\{\{ jobevent.class \}\}', ngClass: '{{ jobevent.class }}',
appendHTML: 'jobevent.event_detail', appendHTML: 'jobevent.event_detail'
'columnClass': 'col-lg-4' },
},
host: { host: {
label: 'Host', label: 'Host',
ngBind: 'jobevent.summary_fields.host.name', ngBind: 'jobevent.summary_fields.host.name',
ngHref: "\{\{ jobevent.hostLink \}\}", ngHref: '{{ jobevent.hostLink }}',
searchField: 'hosts__name', searchField: 'hosts__name',
nosort: true, nosort: true,
searchOnly: false, searchOnly: false,
id: 'job-event-host-header', id: 'job-event-host-header',
columnClass: 'col-lg-3 hidden-sm hidden-xs' 'class': 'break',
} columnClass: 'col-lg-2 hidden-sm hidden-xs'
}, }
},
actions: { actions: {
refresh: { refresh: {
mode: 'all', mode: 'all',
awToolTip: "Refresh the page", awToolTip: 'Refresh the page',
ngClick: "refresh()" ngClick: 'refresh()'
} }
}, },
fieldActions: { fieldActions: {
columnClass: 'col-sm-1 col-xs-2',
view: { view: {
label: 'View', label: 'View',
ngClick: "viewJobEvent(\{\{ jobevent.id \}\})", ngClick: 'viewJobEvent({{ jobevent.id }})',
awToolTip: 'View event details', awToolTip: 'View event details',
dataPlacement: 'top' dataPlacement: 'top'
}
} }
}); }
});

239
awx/ui/static/lib/ansible/list-generator.js
View File

@@ -12,105 +12,107 @@
angular.module('ListGenerator', ['GeneratorHelpers']) angular.module('ListGenerator', ['GeneratorHelpers'])
.factory('GenerateList', [ '$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon', .factory('GenerateList', [ '$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon',
'Column', 'DropDown', 'NavigationLink', 'Button', 'SelectIcon', 'Breadcrumbs', 'Column', 'DropDown', 'NavigationLink', 'Button', 'SelectIcon', 'Breadcrumbs',
function($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink, Button, SelectIcon, function($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink, Button, SelectIcon,
Breadcrumbs) { Breadcrumbs) {
return { return {
setList: function(list) { setList: function(list) {
this.list = list; this.list = list;
}, },
attr: Attr, attr: Attr,
icon: Icon, icon: Icon,
has: function(key) { has: function(key) {
return (this.form[key] && this.form[key] != null && this.form[key] != undefined) ? true : false; return (this.form[key] && this.form[key] !== null && this.form[key] !== undefined) ? true : false;
}, },
hide: function() { hide: function() {
$('#lookup-modal').modal('hide'); $('#lookup-modal').modal('hide');
}, },
button: Button, button: Button,
inject: function(list, options) { inject: function(list, options) {
// options.mode = one of edit, select or lookup // options.mode = one of edit, select or lookup
// //
// Modes edit and select will inject the list as html into element #htmlTemplate. // Modes edit and select will inject the list as html into element #htmlTemplate.
// 'lookup' mode injects the list html into #lookup-modal-body. // 'lookup' mode injects the list html into #lookup-modal-body.
// //
// For options.mode == 'lookup', include the following: // For options.mode == 'lookup', include the following:
// //
// hdr: <lookup dialog header> // hdr: <lookup dialog header>
// //
// Inject into a custom element using options.id: <'.selector'> // Inject into a custom element using options.id: <'.selector'>
// Control breadcrumb creation with options.breadCrumbs: <true | false> // Control breadcrumb creation with options.breadCrumbs: <true | false>
// //
if (options.mode == 'lookup') { var element;
var element = angular.element(document.getElementById('lookup-modal-body'));
}
else if (options.id) {
var element = angular.element(document.getElementById(options.id));
}
else {
var element = angular.element(document.getElementById('htmlTemplate'));
}
this.setList(list);
element.html(this.build(options)); // Inject the html
if (options.prepend) { // Add any extra HTML passed in options
element.prepend(options.prepend);
}
if (options.append) {
element.append(options.prepend);
}
if (options.scope) { if (options.mode === 'lookup') {
this.scope = options.scope; element = angular.element(document.getElementById('lookup-modal-body'));
} }
else { else if (options.id) {
this.scope = element.scope(); // Set scope specific to the element we're compiling, avoids circular reference element = angular.element(document.getElementById(options.id));
} // From here use 'scope' to manipulate the form, as the form is not in '$scope' }
else {
element = angular.element(document.getElementById('htmlTemplate'));
}
this.setList(list);
element.html(this.build(options)); // Inject the html
if (options.prepend) { // Add any extra HTML passed in options
element.prepend(options.prepend);
}
if (options.append) {
element.append(options.prepend);
}
$compile(element)(this.scope); if (options.scope) {
this.scope = options.scope;
}
else {
this.scope = element.scope(); // Set scope specific to the element we're compiling, avoids circular reference
} // From here use 'scope' to manipulate the form, as the form is not in '$scope'
// Reset the scope to prevent displaying old data from our last visit to this list $compile(element)(this.scope);
this.scope[list.name] = null;
this.scope[list.iterator] = null;
// Remove any lingering tooltip and popover <div> elements // Reset the scope to prevent displaying old data from our last visit to this list
$('.tooltip').each( function(index) { this.scope[list.name] = null;
$(this).remove(); this.scope[list.iterator] = null;
});
$('.popover').each(function(index) { // Remove any lingering tooltip and popover <div> elements
// remove lingering popover <div>. Seems to be a bug in TB3 RC1 $('.tooltip').each( function(index) {
$(this).remove(); $(this).remove();
}); });
$(window).unbind('resize');
try { $('.popover').each(function(index) {
$('#help-modal').empty().dialog('destroy'); // remove lingering popover <div>. Seems to be a bug in TB3 RC1
} $(this).remove();
catch(e) { });
//ignore any errors should the dialog not be initialized $(window).unbind('resize');
}
if (options.mode == 'lookup') { try {
// options should include {hdr: <dialog header>, action: <function...> } $('#help-modal').empty().dialog('destroy');
this.scope.formModalActionDisabled = false; }
this.scope.lookupHeader = options.hdr; catch(e) {
$('#lookup-modal').modal({ backdrop: 'static', keyboard: true }); //ignore any errors should the dialog not be initialized
$('#lookup-modal').unbind('hidden.bs.modal'); }
$(document).bind('keydown', function(e) {
if (e.keyCode === 27) {
$('#lookup-modal').modal('hide');
}
});
}
return this.scope; if (options.mode === 'lookup') {
}, // options should include {hdr: <dialog header>, action: <function...> }
this.scope.formModalActionDisabled = false;
this.scope.lookupHeader = options.hdr;
$('#lookup-modal').modal({ backdrop: 'static', keyboard: true });
$('#lookup-modal').unbind('hidden.bs.modal');
$(document).bind('keydown', function(e) {
if (e.keyCode === 27) {
$('#lookup-modal').modal('hide');
}
});
}
return this.scope;
},
build: function(options) { build: function(options) {
// //
@@ -332,41 +334,46 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
// Row level actions // Row level actions
html += "<td class=\"actions\">"; html += "<td class=\"actions\">";
for (action in list.fieldActions) {
if (list.fieldActions[action].type && list.fieldActions[action].type == 'DropDown') { var field_action, fAction, itm;
html += DropDown({
list: list, for (field_action in list.fieldActions) {
fld: action, if (field_action !== 'columnClass') {
options: options, if (list.fieldActions[field_action].type && list.fieldActions[field_action].type == 'DropDown') {
base: base, html += DropDown({
type: 'fieldActions', list: list,
td: false fld: field_action,
}); options: options,
} base: base,
else { type: 'fieldActions',
var fAction = list.fieldActions[action]; td: false
html += "<a "; });
html += (fAction.href) ? "href=\"" + fAction.href + "\" " : ""; }
html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : ""; else {
html += (action == 'cancel') ? "class=\"cancel red-txt\" " : ""; fAction = list.fieldActions[field_action];
html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : ""; html += "<a ";
html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : ""; html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : ""; html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
for (var itm in fAction) { html += (field_action == 'cancel') ? "class=\"cancel red-txt\" " : "";
if (itm != 'ngHref' && itm != 'href' && itm != 'label' && itm != 'icon' && itm != 'class' && html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
itm != 'iconClass' && itm != "dataPlacement" && itm != "awPopOver" && itm != "dataTitle") { html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
html += Attr(fAction, itm); html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
for (itm in fAction) {
if (itm != 'ngHref' && itm != 'href' && itm != 'label' && itm != 'icon' && itm != 'class' &&
itm != 'iconClass' && itm != "dataPlacement" && itm != "awPopOver" && itm != "dataTitle") {
html += Attr(fAction, itm);
}
} }
} html += ">";
html += ">"; if (fAction.iconClass) {
if (fAction.iconClass) { html += "<i class=\"" + fAction.iconClass + "\"></i>";
html += "<i class=\"" + fAction.iconClass + "\"></i>"; }
} else {
else { html += SelectIcon({ action: field_action });
html += SelectIcon({ action: action }); }
} html += (fAction.label) ? " " + list.fieldActions[field_action]['label'] : "";
html += (fAction.label) ? " " + list.fieldActions[action]['label'] : ""; html += "</a>";
html += "</a>"; }
} }
} }
html += "</td>"; html += "</td>";