From d08319100dcdf2d003656c1bbac7018b51a76619 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Tue, 4 Feb 2014 21:26:58 +0000 Subject: [PATCH] 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. --- awx/ui/static/js/controllers/JobEvents.js | 19 +- awx/ui/static/js/lists/JobEvents.js | 73 +++--- awx/ui/static/lib/ansible/list-generator.js | 253 ++++++++++---------- 3 files changed, 179 insertions(+), 166 deletions(-) diff --git a/awx/ui/static/js/controllers/JobEvents.js b/awx/ui/static/js/controllers/JobEvents.js index bca8c3a81b..735fe2eaee 100644 --- a/awx/ui/static/js/controllers/JobEvents.js +++ b/awx/ui/static/js/controllers/JobEvents.js @@ -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 += "
\n"; html += "\n"; - html += "\n"; + html += "\n"; html += "
\n"; found = true; } @@ -104,7 +104,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest, if (fld == "rc" && eventData.res[fld] != '') { html += "
\n"; html += "\n"; - html += "\n"; + html += "\n"; html += "
\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, diff --git a/awx/ui/static/js/lists/JobEvents.js b/awx/ui/static/js/lists/JobEvents.js index 29059e68ec..47e65504e0 100644 --- a/awx/ui/static/js/lists/JobEvents.js +++ b/awx/ui/static/js/lists/JobEvents.js @@ -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' - } } - }); + } + }); diff --git a/awx/ui/static/lib/ansible/list-generator.js b/awx/ui/static/lib/ansible/list-generator.js index c53d1a64f5..da7d625966 100644 --- a/awx/ui/static/lib/ansible/list-generator.js +++ b/awx/ui/static/lib/ansible/list-generator.js @@ -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: - // - // Inject into a custom element using options.id: <'.selector'> - // Control breadcrumb creation with options.breadCrumbs: - // - 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: + // + // Inject into a custom element using options.id: <'.selector'> + // Control breadcrumb creation with options.breadCrumbs: + // + var element; - // Remove any lingering tooltip and popover
elements - $('.tooltip').each( function(index) { - $(this).remove(); - }); - - $('.popover').each(function(index) { - // remove lingering popover
. 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: , action: } - 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
elements + $('.tooltip').each( function(index) { + $(this).remove(); + }); + + $('.popover').each(function(index) { + // remove lingering popover
. 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: , action: } + 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 += ""; - 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 += ""; - } - else { - html += SelectIcon({ action: action }); - } - html += (fAction.label) ? " " + list.fieldActions[action]['label'] : ""; - html += ""; + html += ">"; + if (fAction.iconClass) { + html += ""; + } + else { + html += SelectIcon({ action: field_action }); + } + html += (fAction.label) ? " " + list.fieldActions[field_action]['label'] : ""; + html += ""; + } } } html += "";