External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 23:07:42 -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

13
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,7 +234,7 @@ 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'
]; ];

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

@@ -16,23 +16,23 @@ 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'
} }
@@ -41,6 +41,7 @@ angular.module('JobEventsListDefinition', [])
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,
@@ -48,55 +49,59 @@ angular.module('JobEventsListDefinition', [])
}, },
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'
} }

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

@@ -12,7 +12,7 @@
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 {
@@ -25,7 +25,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
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() {
@@ -47,14 +47,16 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
// 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'));
if (options.mode === 'lookup') {
element = angular.element(document.getElementById('lookup-modal-body'));
} }
else if (options.id) { else if (options.id) {
var element = angular.element(document.getElementById(options.id)); element = angular.element(document.getElementById(options.id));
} }
else { else {
var element = angular.element(document.getElementById('htmlTemplate')); element = angular.element(document.getElementById('htmlTemplate'));
} }
this.setList(list); this.setList(list);
element.html(this.build(options)); // Inject the html element.html(this.build(options)); // Inject the html
@@ -96,7 +98,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
//ignore any errors should the dialog not be initialized //ignore any errors should the dialog not be initialized
} }
if (options.mode == 'lookup') { if (options.mode === 'lookup') {
// options should include {hdr: <dialog header>, action: <function...> } // options should include {hdr: <dialog header>, action: <function...> }
this.scope.formModalActionDisabled = false; this.scope.formModalActionDisabled = false;
this.scope.lookupHeader = options.hdr; this.scope.lookupHeader = options.hdr;
@@ -332,11 +334,15 @@ 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;
for (field_action in list.fieldActions) {
if (field_action !== 'columnClass') {
if (list.fieldActions[field_action].type && list.fieldActions[field_action].type == 'DropDown') {
html += DropDown({ html += DropDown({
list: list, list: list,
fld: action, fld: field_action,
options: options, options: options,
base: base, base: base,
type: 'fieldActions', type: 'fieldActions',
@@ -344,15 +350,15 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
}); });
} }
else { else {
var fAction = list.fieldActions[action]; fAction = list.fieldActions[field_action];
html += "<a "; html += "<a ";
html += (fAction.href) ? "href=\"" + fAction.href + "\" " : ""; html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : ""; html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
html += (action == 'cancel') ? "class=\"cancel red-txt\" " : ""; html += (field_action == 'cancel') ? "class=\"cancel red-txt\" " : "";
html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : ""; html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : ""; html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : ""; html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
for (var itm in fAction) { for (itm in fAction) {
if (itm != 'ngHref' && itm != 'href' && itm != 'label' && itm != 'icon' && itm != 'class' && if (itm != 'ngHref' && itm != 'href' && itm != 'label' && itm != 'icon' && itm != 'class' &&
itm != 'iconClass' && itm != "dataPlacement" && itm != "awPopOver" && itm != "dataTitle") { itm != 'iconClass' && itm != "dataPlacement" && itm != "awPopOver" && itm != "dataTitle") {
html += Attr(fAction, itm); html += Attr(fAction, itm);
@@ -363,12 +369,13 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
html += "<i class=\"" + fAction.iconClass + "\"></i>"; html += "<i class=\"" + fAction.iconClass + "\"></i>";
} }
else { else {
html += SelectIcon({ action: action }); html += SelectIcon({ action: field_action });
} }
html += (fAction.label) ? " " + list.fieldActions[action]['label'] : ""; html += (fAction.label) ? " " + list.fieldActions[field_action]['label'] : "";
html += "</a>"; html += "</a>";
} }
} }
}
html += "</td>"; html += "</td>";
} }
html += "</tr>\n"; html += "</tr>\n";