mirror of
https://github.com/ansible/awx.git
synced 2024-11-02 01:21:21 +03:00
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.
This commit is contained in:
Chris Houseknecht
parent
00156a5518
commit
d08319100d
@ -10,7 +10,7 @@
|
||||
|
||||
'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,
|
||||
ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren,
|
||||
FormatDate, EventView, Refresh, Wait)
|
||||
@ -96,7 +96,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
|
||||
if (txt !== '') {
|
||||
html += "<div class=\"form-group\">\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";
|
||||
found = true;
|
||||
}
|
||||
@ -104,7 +104,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
|
||||
if (fld == "rc" && eventData.res[fld] != '') {
|
||||
html += "<div class=\"form-group\">\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";
|
||||
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";
|
||||
}
|
||||
}
|
||||
cDate = new Date(set[i].created);
|
||||
set[i].created = FormatDate(cDate);
|
||||
//cDate = new Date(set[i].created);
|
||||
//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
|
||||
@ -233,10 +234,10 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
|
||||
}
|
||||
}
|
||||
|
||||
JobEventsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList',
|
||||
'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
|
||||
'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'FormatDate', 'EventView', 'Refresh', 'Wait'
|
||||
];
|
||||
JobEventsList.$inject = [ '$filter', '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList',
|
||||
'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
|
||||
'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'FormatDate', 'EventView', 'Refresh', 'Wait'
|
||||
];
|
||||
|
||||
function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm,
|
||||
Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath, FormatDate, EventView,
|
||||
|
||||
@ -16,89 +16,94 @@ angular.module('JobEventsListDefinition', [])
|
||||
index: false,
|
||||
hover: true,
|
||||
hasChildren: true,
|
||||
filterBy: '\{ show: true \}',
|
||||
filterBy: '{ show: true }',
|
||||
|
||||
navigationLinks: {
|
||||
details: {
|
||||
href: "/#/jobs/{{ job_id }}",
|
||||
href: '/#/jobs/{{ job_id }}',
|
||||
label: 'Status',
|
||||
icon: 'icon-zoom-in',
|
||||
ngShow: "job_id !== null"
|
||||
},
|
||||
ngShow: 'job_id !== null'
|
||||
},
|
||||
events: {
|
||||
href: "/#/jobs/{{ job_id }}/job_events",
|
||||
href: '/#/jobs/{{ job_id }}/job_events',
|
||||
label: 'Events',
|
||||
active: true,
|
||||
icon: 'icon-list-ul'
|
||||
},
|
||||
},
|
||||
hosts: {
|
||||
href: "/#/jobs/{{ job_id }}/job_host_summaries",
|
||||
href: '/#/jobs/{{ job_id }}/job_host_summaries',
|
||||
label: 'Host Summary',
|
||||
icon: 'icon-laptop'
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
fields: {
|
||||
created: {
|
||||
label: 'Created On',
|
||||
columnClass: 'col-lg-1 col-md-1 hidden-sm hidden-xs',
|
||||
key: true,
|
||||
nosort: true,
|
||||
searchable: false,
|
||||
link: false
|
||||
},
|
||||
},
|
||||
status: {
|
||||
label: 'Status',
|
||||
showValue: true,
|
||||
showValue: false,
|
||||
columnClass: 'col-sm-1 col-xs-2 text-center',
|
||||
searchField: 'failed',
|
||||
searchType: 'boolean',
|
||||
searchOptions: [{ name: "success", value: 0 }, { name: "error", value: 1 }],
|
||||
searchOptions: [{ name: 'success', value: 0 }, { name: 'error', value: 1 }],
|
||||
nosort: true,
|
||||
searchable: false,
|
||||
ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
|
||||
awToolTip: "\{\{ jobevent.statusBadgeToolTip \}\}",
|
||||
ngClick: 'viewJobEvent({{ jobevent.id }})',
|
||||
awToolTip: '{{ jobevent.statusBadgeToolTip }}',
|
||||
dataPlacement: 'top',
|
||||
badgeIcon: 'fa icon-job-\{\{ jobevent.status \}\}',
|
||||
badgeIcon: 'fa icon-job-{{ jobevent.status }}',
|
||||
badgePlacement: 'left',
|
||||
badgeToolTip: "\{\{ jobevent.statusBadgeToolTip \}\}",
|
||||
badgeToolTip: '{{ jobevent.statusBadgeToolTip }}',
|
||||
badgeTipPlacement: 'top',
|
||||
badgeNgClick: "viewJobEvent(\{\{ jobevent.id \}\})"
|
||||
},
|
||||
badgeNgClick: 'viewJobEvent({{ jobevent.id }})'
|
||||
},
|
||||
event_display: {
|
||||
label: 'Event',
|
||||
hasChildren: true,
|
||||
ngClick: "toggleChildren(\{\{ jobevent.id \}\}, '\{\{ jobevent.related.children \}\}')",
|
||||
ngClick: 'toggleChildren({{ jobevent.id }}, \'{{ jobevent.related.children }}\')',
|
||||
nosort: true,
|
||||
searchable: false,
|
||||
ngClass: '\{\{ jobevent.class \}\}',
|
||||
appendHTML: 'jobevent.event_detail',
|
||||
'columnClass': 'col-lg-4'
|
||||
},
|
||||
ngClass: '{{ jobevent.class }}',
|
||||
appendHTML: 'jobevent.event_detail'
|
||||
},
|
||||
host: {
|
||||
label: 'Host',
|
||||
ngBind: 'jobevent.summary_fields.host.name',
|
||||
ngHref: "\{\{ jobevent.hostLink \}\}",
|
||||
ngHref: '{{ jobevent.hostLink }}',
|
||||
searchField: 'hosts__name',
|
||||
nosort: true,
|
||||
searchOnly: false,
|
||||
id: 'job-event-host-header',
|
||||
columnClass: 'col-lg-3 hidden-sm hidden-xs'
|
||||
}
|
||||
},
|
||||
'class': 'break',
|
||||
columnClass: 'col-lg-2 hidden-sm hidden-xs'
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
refresh: {
|
||||
mode: 'all',
|
||||
awToolTip: "Refresh the page",
|
||||
ngClick: "refresh()"
|
||||
}
|
||||
},
|
||||
awToolTip: 'Refresh the page',
|
||||
ngClick: 'refresh()'
|
||||
}
|
||||
},
|
||||
|
||||
fieldActions: {
|
||||
|
||||
columnClass: 'col-sm-1 col-xs-2',
|
||||
|
||||
view: {
|
||||
label: 'View',
|
||||
ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
|
||||
ngClick: 'viewJobEvent({{ jobevent.id }})',
|
||||
awToolTip: 'View event details',
|
||||
dataPlacement: 'top'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -12,105 +12,107 @@
|
||||
angular.module('ListGenerator', ['GeneratorHelpers'])
|
||||
.factory('GenerateList', [ '$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon',
|
||||
'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) {
|
||||
return {
|
||||
|
||||
setList: function(list) {
|
||||
this.list = list;
|
||||
},
|
||||
|
||||
setList: function(list) {
|
||||
this.list = list;
|
||||
},
|
||||
|
||||
attr: Attr,
|
||||
attr: Attr,
|
||||
|
||||
icon: Icon,
|
||||
icon: Icon,
|
||||
|
||||
has: function(key) {
|
||||
return (this.form[key] && this.form[key] != null && this.form[key] != undefined) ? true : false;
|
||||
},
|
||||
has: function(key) {
|
||||
return (this.form[key] && this.form[key] !== null && this.form[key] !== undefined) ? true : false;
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
$('#lookup-modal').modal('hide');
|
||||
},
|
||||
hide: function() {
|
||||
$('#lookup-modal').modal('hide');
|
||||
},
|
||||
|
||||
button: Button,
|
||||
|
||||
inject: function(list, options) {
|
||||
// options.mode = one of edit, select or lookup
|
||||
//
|
||||
// Modes edit and select will inject the list as html into element #htmlTemplate.
|
||||
// 'lookup' mode injects the list html into #lookup-modal-body.
|
||||
//
|
||||
// For options.mode == 'lookup', include the following:
|
||||
//
|
||||
// hdr: <lookup dialog header>
|
||||
//
|
||||
// Inject into a custom element using options.id: <'.selector'>
|
||||
// Control breadcrumb creation with options.breadCrumbs: <true | false>
|
||||
//
|
||||
if (options.mode == 'lookup') {
|
||||
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) {
|
||||
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'
|
||||
|
||||
$compile(element)(this.scope);
|
||||
button: Button,
|
||||
|
||||
// Reset the scope to prevent displaying old data from our last visit to this list
|
||||
this.scope[list.name] = null;
|
||||
this.scope[list.iterator] = null;
|
||||
inject: function(list, options) {
|
||||
// options.mode = one of edit, select or lookup
|
||||
//
|
||||
// Modes edit and select will inject the list as html into element #htmlTemplate.
|
||||
// 'lookup' mode injects the list html into #lookup-modal-body.
|
||||
//
|
||||
// For options.mode == 'lookup', include the following:
|
||||
//
|
||||
// hdr: <lookup dialog header>
|
||||
//
|
||||
// Inject into a custom element using options.id: <'.selector'>
|
||||
// Control breadcrumb creation with options.breadCrumbs: <true | false>
|
||||
//
|
||||
var element;
|
||||
|
||||
// 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();
|
||||
});
|
||||
$(window).unbind('resize');
|
||||
|
||||
try {
|
||||
$('#help-modal').empty().dialog('destroy');
|
||||
}
|
||||
catch(e) {
|
||||
//ignore any errors should the dialog not be initialized
|
||||
}
|
||||
if (options.mode === 'lookup') {
|
||||
element = angular.element(document.getElementById('lookup-modal-body'));
|
||||
}
|
||||
else if (options.id) {
|
||||
element = angular.element(document.getElementById(options.id));
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
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'
|
||||
|
||||
$compile(element)(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;
|
||||
},
|
||||
// Reset the scope to prevent displaying old data from our last visit to this list
|
||||
this.scope[list.name] = null;
|
||||
this.scope[list.iterator] = null;
|
||||
|
||||
// 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();
|
||||
});
|
||||
$(window).unbind('resize');
|
||||
|
||||
try {
|
||||
$('#help-modal').empty().dialog('destroy');
|
||||
}
|
||||
catch(e) {
|
||||
//ignore any errors should the dialog not be initialized
|
||||
}
|
||||
|
||||
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) {
|
||||
//
|
||||
@ -332,41 +334,46 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
|
||||
// Row level actions
|
||||
|
||||
html += "<td class=\"actions\">";
|
||||
for (action in list.fieldActions) {
|
||||
if (list.fieldActions[action].type && list.fieldActions[action].type == 'DropDown') {
|
||||
html += DropDown({
|
||||
list: list,
|
||||
fld: action,
|
||||
options: options,
|
||||
base: base,
|
||||
type: 'fieldActions',
|
||||
td: false
|
||||
});
|
||||
}
|
||||
else {
|
||||
var fAction = list.fieldActions[action];
|
||||
html += "<a ";
|
||||
html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
|
||||
html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
|
||||
html += (action == 'cancel') ? "class=\"cancel red-txt\" " : "";
|
||||
html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
|
||||
html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
|
||||
html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
|
||||
for (var 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);
|
||||
|
||||
var field_action, fAction, itm;
|
||||
|
||||
for (field_action in list.fieldActions) {
|
||||
if (field_action !== 'columnClass') {
|
||||
if (list.fieldActions[field_action].type && list.fieldActions[field_action].type == 'DropDown') {
|
||||
html += DropDown({
|
||||
list: list,
|
||||
fld: field_action,
|
||||
options: options,
|
||||
base: base,
|
||||
type: 'fieldActions',
|
||||
td: false
|
||||
});
|
||||
}
|
||||
else {
|
||||
fAction = list.fieldActions[field_action];
|
||||
html += "<a ";
|
||||
html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
|
||||
html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
|
||||
html += (field_action == 'cancel') ? "class=\"cancel red-txt\" " : "";
|
||||
html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
|
||||
html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
|
||||
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 += ">";
|
||||
if (fAction.iconClass) {
|
||||
html += "<i class=\"" + fAction.iconClass + "\"></i>";
|
||||
}
|
||||
else {
|
||||
html += SelectIcon({ action: action });
|
||||
}
|
||||
html += (fAction.label) ? " " + list.fieldActions[action]['label'] : "";
|
||||
html += "</a>";
|
||||
html += ">";
|
||||
if (fAction.iconClass) {
|
||||
html += "<i class=\"" + fAction.iconClass + "\"></i>";
|
||||
}
|
||||
else {
|
||||
html += SelectIcon({ action: field_action });
|
||||
}
|
||||
html += (fAction.label) ? " " + list.fieldActions[field_action]['label'] : "";
|
||||
html += "</a>";
|
||||
}
|
||||
}
|
||||
}
|
||||
html += "</td>";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user