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

Job detail page re-refactor

Browse Source 
Host event viewer now calls event viewer. Added search spinner.
This commit is contained in:
Chris Houseknecht
2014-07-09 00:38:07 -04:00
parent fb9b5ae43c
commit f223113cdc
5 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui/static/js/controllers/JobDetail.js
View File

@@ -1004,15 +1004,16 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
} }
}; };
scope.hostEventsViewer = function(id, name) { scope.hostEventsViewer = function(id, name, status) {
HostEventsViewer({ HostEventsViewer({
scope: scope, scope: scope,
id: id, id: id,
name: name, name: name,
url: scope.job.related.job_events url: scope.job.related.job_events,
job_id: scope.job.id,
status: status
}); });
}; };
} }
JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',

3
awx/ui/static/js/helpers/EventViewer.js
View File

@@ -7,7 +7,7 @@
'use strict'; 'use strict';
angular.module('EventViewerHelper', ['ModalDialog', 'Utilities']) angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'HostEventsViewerHelper'])
.factory('EventViewer', ['$compile', 'CreateDialog', 'GetEvent', 'Wait', 'EventAddTable', 'GetBasePath', 'LookUpName', 'Empty', 'EventAddPreFormattedText', .factory('EventViewer', ['$compile', 'CreateDialog', 'GetEvent', 'Wait', 'EventAddTable', 'GetBasePath', 'LookUpName', 'Empty', 'EventAddPreFormattedText',
function($compile, CreateDialog, GetEvent, Wait, EventAddTable, GetBasePath, LookUpName, Empty, EventAddPreFormattedText) { function($compile, CreateDialog, GetEvent, Wait, EventAddTable, GetBasePath, LookUpName, Empty, EventAddPreFormattedText) {
@@ -93,6 +93,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities'])
$('#eventviewer-modal-dialog').dialog('close'); $('#eventviewer-modal-dialog').dialog('close');
scope.$destroy(); scope.$destroy();
}; };
}; };
}]) }])

30
awx/ui/static/js/helpers/HostEventsViewer.js
View File

@@ -9,19 +9,22 @@
'use strict'; 'use strict';
angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities']) angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventViewerHelper'])
.factory('HostEventsViewer', ['$log', '$compile', 'CreateDialog', 'Wait', 'GetBasePath', 'Empty', 'GetEvents', .factory('HostEventsViewer', ['$log', '$compile', 'CreateDialog', 'Wait', 'GetBasePath', 'Empty', 'GetEvents', 'EventViewer',
function($log, $compile, CreateDialog, Wait, GetBasePath, Empty, GetEvents) { function($log, $compile, CreateDialog, Wait, GetBasePath, Empty, GetEvents, EventViewer) {
return function(params) { return function(params) {
var parent_scope = params.scope, var parent_scope = params.scope,
scope = parent_scope.$new(true), scope = parent_scope.$new(true),
job_id = params.job_id,
url = params.url, url = params.url,
title = params.title, //optional title = params.title, //optional
fixHeight, buildTable; fixHeight, buildTable;
scope.host_events_search_name = params.name; scope.host_events_search_name = params.name;
scope.host_events_search_status = 'all'; scope.host_events_search_status = (params.status) ? params.status : 'all';
$log.debug('job_id: ' + job_id + ' url: ' + url + ' title: ' + title + ' name: ' + name + ' status: ' + status);
scope.eventsSearchActive = (scope.host_events_search_name) ? true : false; scope.eventsSearchActive = (scope.host_events_search_name) ? true : false;
@@ -29,7 +32,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
scope.removeModalReady(); scope.removeModalReady();
} }
scope.removeModalReady = scope.$on('ModalReady', function() { scope.removeModalReady = scope.$on('ModalReady', function() {
Wait('stop'); scope.hostViewSearching = false;
$('#host-events-modal-dialog').dialog('open'); $('#host-events-modal-dialog').dialog('open');
}); });
@@ -65,9 +68,9 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
scope.removeRefreshHTML = scope.$on('RefreshHTML', function(e, data) { scope.removeRefreshHTML = scope.$on('RefreshHTML', function(e, data) {
var elem, html = buildTable(data); var elem, html = buildTable(data);
$('#host-events').html(html); $('#host-events').html(html);
scope.hostViewSearching = false;
elem = angular.element(document.getElementById('host-events')); elem = angular.element(document.getElementById('host-events'));
$compile(elem)(scope); $compile(elem)(scope);
Wait('stop');
}); });
buildTable = function(data) { buildTable = function(data) {
@@ -99,7 +102,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
status = 'changed'; status = 'changed';
status_text = 'Changed'; status_text = 'Changed';
} }
html += "<tr ng-click=\"showDetails()\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n"; html += "<tr ng-click=\"showDetails(" + result.id + ")\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n";
html += "<td class=\"col-md-3\"><i class=\"fa icon-job-" + status + "\"></i> <a href=\"\">" + status_text + "</a></td>\n"; html += "<td class=\"col-md-3\"><i class=\"fa icon-job-" + status + "\"></i> <a href=\"\">" + status_text + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + result.play + "</a></td>\n"; html += "<td class=\"col-md-3\"><a href=\"\">" + result.play + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + result.task + "</a></td>\n"; html += "<td class=\"col-md-3\"><a href=\"\">" + result.task + "</a></td>\n";
@@ -143,10 +146,17 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
} }
}; };
scope.showDetails = function(id) {
EventViewer({
scope: parent_scope,
url: GetBasePath('jobs') + job_id + '/job_events/?id=' + id,
});
};
}; };
}]) }])
.factory('GetEvents', ['Wait', 'Rest', 'ProcessErrors', function(Wait, Rest, ProcessErrors) { .factory('GetEvents', ['Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
return function(params) { return function(params) {
var url = params.url, var url = params.url,
scope = params.scope, scope = params.scope,
@@ -175,13 +185,15 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
url += '&event__icontains=runner&not__event=runner_on_skipped'; url += '&event__icontains=runner&not__event=runner_on_skipped';
} }
Wait('start'); scope.hostViewSearching = true;
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success(function(data) { .success(function(data) {
scope.hostViewSearching = false;
scope.$emit(callback, data); scope.$emit(callback, data);
}) })
.error(function(data, status) { .error(function(data, status) {
scope.hostViewSearching = false;
ProcessErrors(scope, data, status, null, { hdr: 'Error!', ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Failed to get events ' + url + '. GET returned: ' + status }); msg: 'Failed to get events ' + url + '. GET returned: ' + status });
}); });

5
awx/ui/static/less/job-details.less
View File

@@ -16,7 +16,7 @@
#host-events-modal-dialog { #host-events-modal-dialog {
overflow: hidden; overflow: hidden;
i { i[class*='icon-job'] {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
} }
@@ -57,6 +57,9 @@
#fixed-table-header { #fixed-table-header {
margin-bottom: 0; margin-bottom: 0;
} }
#search-indicator {
margin-left: 15px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {

9
awx/ui/static/partials/job_detail.html
View File

@@ -230,10 +230,10 @@
data-placement="top">{{ host.name }}</a> data-placement="top">{{ host.name }}</a>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column">
<a href="" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a> <a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
<a href="" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a> <a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
<a href="" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a> <a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
<a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a> <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
</div> </div>
</div> </div>
<div class="row" ng-show="summaryList.length === 0"> <div class="row" ng-show="summaryList.length === 0">
@@ -284,6 +284,7 @@
<option value="unreachable">Unreachable</option> <option value="unreachable">Unreachable</option>
</select> </select>
</div> </div>
<div class="form-group" id="search-indicator" ng-show="hostViewSearching"><i class="fa fa-lg fa-spin fa-cog"></i></div>
</form> </form>
<!-- lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500" --> <!-- lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500" -->
<div id="host-events-table"> <div id="host-events-table">