From 6b8deab753fbd1365b68b405a9d4810c44ebf311 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Wed, 19 Jun 2013 13:03:17 -0400 Subject: [PATCH] Job Event detail is now displayed in a modal dialog. Inside all modal dialogs displaying a form, reduced amount of space given to field labels and expanded amount of space given to text area fields. --- ansibleworks/ui/static/css/ansible-ui.css | 32 ++++++++-- ansibleworks/ui/static/js/app.js | 3 +- .../ui/static/js/controllers/JobEvents.js | 27 ++------- ansibleworks/ui/static/js/forms/JobEvents.js | 12 +--- ansibleworks/ui/static/js/helpers/Events.js | 59 +++++++++++++++++++ ansibleworks/ui/static/js/helpers/Groups.js | 3 + ansibleworks/ui/static/js/helpers/Hosts.js | 3 + ansibleworks/ui/static/js/lists/JobEvents.js | 9 +-- ansibleworks/ui/templates/ui/index.html | 3 +- 9 files changed, 110 insertions(+), 41 deletions(-) create mode 100644 ansibleworks/ui/static/js/helpers/Events.js diff --git a/ansibleworks/ui/static/css/ansible-ui.css b/ansibleworks/ui/static/css/ansible-ui.css index 08b4a82b28..cce4e4b41e 100644 --- a/ansibleworks/ui/static/css/ansible-ui.css +++ b/ansibleworks/ui/static/css/ansible-ui.css @@ -403,10 +403,6 @@ margin-left: 5px; } - .modal-input-xlarge { - width: 325px; - } - #tree-view { min-height: 100px; } @@ -453,4 +449,30 @@ #job-event-host-header { min-width: 200px; - } \ No newline at end of file + } + + + +/* form displayed in modal window */ + +.modal .form-horizontal .control-label { + float: left; + width: 80px; + padding-top: 5px; + text-align: right; +} + +.modal .form-horizontal .controls { + *display: inline-block; + *padding-left: 20px; + margin-left: 100px; + *margin-left: 0; +} + +.modal .form-horizontal .controls:first-child { + *padding-left: 100px; +} + +.modal-input-xlarge { + width: 400px; +} diff --git a/ansibleworks/ui/static/js/app.js b/ansibleworks/ui/static/js/app.js index fd433c7b0a..7fdb38ab33 100644 --- a/ansibleworks/ui/static/js/app.js +++ b/ansibleworks/ui/static/js/app.js @@ -53,7 +53,8 @@ angular.module('ansible', [ 'GroupsHelper', 'HostsHelper', 'ParseHelper', - 'ChildrenHelper' + 'ChildrenHelper', + 'EventsHelper' ]) .config(['$routeProvider', function($routeProvider) { $routeProvider. diff --git a/ansibleworks/ui/static/js/controllers/JobEvents.js b/ansibleworks/ui/static/js/controllers/JobEvents.js index 040aa1a2f7..90170cfe59 100644 --- a/ansibleworks/ui/static/js/controllers/JobEvents.js +++ b/ansibleworks/ui/static/js/controllers/JobEvents.js @@ -12,7 +12,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobEventList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, - ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren) + ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren, EventView) { ClearScope('htmlTemplate'); var list = JobEventList; @@ -59,25 +59,10 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest, LoadBreadCrumbs(); - scope.editJobEvent = function(id) { - $location.path($location.path() + '/' + id); + scope.viewJobEvent = function(id) { + EventView({"event_id": id }); } - scope.viewHost = function(id) { - if (id !== undefined && id !== null) { - Rest.setUrl(GetBasePath('jobs') + $routeParams.id + '/'); - Rest.get() - .success( function(data, status, headers, config) { - LoadBreadCrumbs({ path: '/inventories/' + data.inventory, title: data.summary_fields.inventory.name }); - $location.path('/inventories/' + data.inventory + /hosts/ + id); - }) - .error( function(data, status, headers, config) { - ProcessErrors(scope, data, status, null, - { hdr: 'Error!', msg: 'Failed to lookup job record for job ' + $routeParams.id + ' GET returned status: ' + status }); - }); - }; - } - scope.refresh = function() { scope.search(list.iterator); } @@ -94,11 +79,11 @@ 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' + 'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'EventView' ]; -function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, - GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) +function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm, + Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) { ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior //scope. diff --git a/ansibleworks/ui/static/js/forms/JobEvents.js b/ansibleworks/ui/static/js/forms/JobEvents.js index 566b505d69..ab44787dce 100644 --- a/ansibleworks/ui/static/js/forms/JobEvents.js +++ b/ansibleworks/ui/static/js/forms/JobEvents.js @@ -12,15 +12,9 @@ angular.module('JobEventFormDefinition', []) editTitle: '{{ id }} - {{ event }}', //Legend in edit mode name: 'job_events', - well: true, + well: false, fields: { - id: { - label: 'Event ID', - type: 'text', - readonly: true, - "class": 'span2' - }, event_display: { label: 'Event', type: 'text', @@ -30,7 +24,7 @@ angular.module('JobEventFormDefinition', []) label: 'Created', type: 'text', readonly: true, - "class": 'span4' + "class": 'span3' }, host: { label: 'Host', @@ -46,7 +40,7 @@ angular.module('JobEventFormDefinition', []) event_data: { label: 'Event Data', type: 'textarea', - "class": 'span12', + "class": "modal-input-xlarge", rows: 10, readonly: true } diff --git a/ansibleworks/ui/static/js/helpers/Events.js b/ansibleworks/ui/static/js/helpers/Events.js new file mode 100644 index 0000000000..bc068d758f --- /dev/null +++ b/ansibleworks/ui/static/js/helpers/Events.js @@ -0,0 +1,59 @@ + +angular.module('EventsHelper', ['RestServices', 'Utilities', 'JobEventFormDefinition']) +.factory('EventView', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventForm', 'GenerateForm', + 'Prompt', 'ProcessErrors', 'GetBasePath', + function($rootScope, $location, $log, $routeParams, Rest, Alert, JobEventForm, GenerateForm, Prompt, ProcessErrors, GetBasePath) { + return function(params) { + var event_id = params.event_id; + var generator = GenerateForm; + var form = JobEventForm; + var defaultUrl = GetBasePath('base') + 'job_events/' + event_id + '/'; + var scope = generator.inject(form, { mode: 'edit', modal: true, related: false}); + generator.reset(); + var master = {}; + + scope.formModalActionLabel = 'OK'; + scope.formModalHeader = 'View Event'; + scope.formModalCancelShow = false; + + scope.formModalAction = function() { + $('#form-modal').modal("hide"); + } + + // Retrieve detail record and prepopulate the form + Rest.setUrl(defaultUrl); + Rest.get() + .success( function(data, status, headers, config) { + for (var fld in form.fields) { + if (fld == 'status') { + scope['status'] = (data.failed) ? 'error' : 'success'; + } + else if (fld == 'event_data') { + scope['event_data'] = JSON.stringify(data['event_data'], undefined, '\t'); + } + else if (fld == 'host') { + if (data['summary_fields'] && data['summary_fields']['host']) { + scope['host'] = data['summary_fields']['host']['name']; + } + } + else if (fld == 'event_display') { + scope['event_display'] = data.event_display.replace(/^\u00a0*/g,'') + } + else { + if (data[fld]) { + scope[fld] = data[fld]; + } + } + } + }) + .error( function(data, status, headers, config) { + ProcessErrors(scope, data, status, form, + { hdr: 'Error!', msg: 'Failed to retrieve host: ' + event_id + '. GET status: ' + status }); + }); + + if (!scope.$$phase) { + scope.$digest(); + } + + } + }]); \ No newline at end of file diff --git a/ansibleworks/ui/static/js/helpers/Groups.js b/ansibleworks/ui/static/js/helpers/Groups.js index b54becb0d6..2abe05ce20 100644 --- a/ansibleworks/ui/static/js/helpers/Groups.js +++ b/ansibleworks/ui/static/js/helpers/Groups.js @@ -34,6 +34,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' scope.formModalActionLabel = 'Finished'; scope.formModalHeader = 'Add Group'; + scope.formModalCancelShow = true; $('#form-modal').modal(); @@ -171,6 +172,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' scope.formModalActionLabel = 'Save'; scope.formModalHeader = 'Create Group'; + scope.formModalCancelShow = true; scope.parseType = 'json'; ParseTypeChange(scope); @@ -263,6 +265,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' scope.formModalActionLabel = 'Save'; scope.formModalHeader = 'Edit Group'; + scope.formModalCancelShow = true; scope.parseType = 'json'; ParseTypeChange(scope); diff --git a/ansibleworks/ui/static/js/helpers/Hosts.js b/ansibleworks/ui/static/js/helpers/Hosts.js index 0f1e977619..0dc4a0ba12 100644 --- a/ansibleworks/ui/static/js/helpers/Hosts.js +++ b/ansibleworks/ui/static/js/helpers/Hosts.js @@ -35,6 +35,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H scope.formModalActionLabel = 'Finished'; scope.formModalHeader = 'Add Host'; + scope.formModalCancelShow = true; $('#form-modal').modal(); $('#form-modal').unbind('hidden'); @@ -162,6 +163,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H scope.formModalActionLabel = 'Save'; scope.formModalHeader = 'Create Host'; + scope.formModalCancelShow = true; scope.parseType = 'json'; ParseTypeChange(scope); @@ -253,6 +255,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H scope.formModalActionLabel = 'Save'; scope.formModalHeader = 'Edit Host'; + scope.formModalCancelShow = true; scope.parseType = 'json'; ParseTypeChange(scope); diff --git a/ansibleworks/ui/static/js/lists/JobEvents.js b/ansibleworks/ui/static/js/lists/JobEvents.js index ae629fcc7f..b75d9db971 100644 --- a/ansibleworks/ui/static/js/lists/JobEvents.js +++ b/ansibleworks/ui/static/js/lists/JobEvents.js @@ -22,18 +22,19 @@ angular.module('JobEventsListDefinition', []) label: 'Creation Date', key: true, nosort: true, - notSearchable: true + notSearchable: true, + ngClick: "viewJobEvent(\{\{ jobevent.id \}\})", }, event_display: { label: 'Event', hasChildren: true, - link: true, + ngClick: "viewJobEvent(\{\{ jobevent.id \}\})", nosort: true, notSearchable: true }, host: { label: 'Host', - ngClick: "viewHost(\{\{ jobevent.host \}\})", + ngClick: "viewJobEvent(\{\{ jobevent.id \}\})", ngBind: 'jobevent.summary_fields.host.name', searchField: 'hosts__name', nosort: true, @@ -80,7 +81,7 @@ angular.module('JobEventsListDefinition', []) fieldActions: { edit: { label: 'View', - ngClick: "editJobEvent(\{\{ jobevent.id \}\})", + ngClick: "viewJobEvent(\{\{ jobevent.id \}\})", icon: 'icon-zoom-in', "class": 'btn-small', awToolTip: 'View event details' diff --git a/ansibleworks/ui/templates/ui/index.html b/ansibleworks/ui/templates/ui/index.html index 054f39b1f6..1644656041 100644 --- a/ansibleworks/ui/templates/ui/index.html +++ b/ansibleworks/ui/templates/ui/index.html @@ -74,6 +74,7 @@ + @@ -177,7 +178,7 @@
- Cancel + Cancel