mirror of
https://github.com/ansible/awx.git
synced 2026-01-19 21:51:26 -03:30
Job detail page re-refactor
Host event viewer now calls event viewer. Added search spinner.
This commit is contained in:
Chris Houseknecht
parent
fb9b5ae43c
commit
f223113cdc
@ -1004,15 +1004,16 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
|
||||
}
|
||||
};
|
||||
|
||||
scope.hostEventsViewer = function(id, name) {
|
||||
scope.hostEventsViewer = function(id, name, status) {
|
||||
HostEventsViewer({
|
||||
scope: scope,
|
||||
id: id,
|
||||
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',
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
angular.module('EventViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'HostEventsViewerHelper'])
|
||||
|
||||
.factory('EventViewer', ['$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');
|
||||
scope.$destroy();
|
||||
};
|
||||
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
@ -9,19 +9,22 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventViewerHelper'])
|
||||
|
||||
.factory('HostEventsViewer', ['$log', '$compile', 'CreateDialog', 'Wait', 'GetBasePath', 'Empty', 'GetEvents',
|
||||
function($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, EventViewer) {
|
||||
return function(params) {
|
||||
var parent_scope = params.scope,
|
||||
scope = parent_scope.$new(true),
|
||||
job_id = params.job_id,
|
||||
url = params.url,
|
||||
title = params.title, //optional
|
||||
fixHeight, buildTable;
|
||||
|
||||
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;
|
||||
|
||||
@ -29,7 +32,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
scope.removeModalReady();
|
||||
}
|
||||
scope.removeModalReady = scope.$on('ModalReady', function() {
|
||||
Wait('stop');
|
||||
scope.hostViewSearching = false;
|
||||
$('#host-events-modal-dialog').dialog('open');
|
||||
});
|
||||
|
||||
@ -65,9 +68,9 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
scope.removeRefreshHTML = scope.$on('RefreshHTML', function(e, data) {
|
||||
var elem, html = buildTable(data);
|
||||
$('#host-events').html(html);
|
||||
scope.hostViewSearching = false;
|
||||
elem = angular.element(document.getElementById('host-events'));
|
||||
$compile(elem)(scope);
|
||||
Wait('stop');
|
||||
});
|
||||
|
||||
buildTable = function(data) {
|
||||
@ -99,7 +102,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
status = '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\"><a href=\"\">" + result.play + "</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) {
|
||||
var url = params.url,
|
||||
scope = params.scope,
|
||||
@ -175,13 +185,15 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
url += '&event__icontains=runner¬__event=runner_on_skipped';
|
||||
}
|
||||
|
||||
Wait('start');
|
||||
scope.hostViewSearching = true;
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
scope.hostViewSearching = false;
|
||||
scope.$emit(callback, data);
|
||||
})
|
||||
.error(function(data, status) {
|
||||
scope.hostViewSearching = false;
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Failed to get events ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
#host-events-modal-dialog {
|
||||
overflow: hidden;
|
||||
i {
|
||||
i[class*='icon-job'] {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -57,6 +57,9 @@
|
||||
#fixed-table-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#search-indicator {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@ -230,10 +230,10 @@
|
||||
data-placement="top">{{ host.name }}</a>
|
||||
</div>
|
||||
<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="" 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="" 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, 'ok')" 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, 'changed')" 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, 'unreachable')" 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, '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 class="row" ng-show="summaryList.length === 0">
|
||||
@ -284,6 +284,7 @@
|
||||
<option value="unreachable">Unreachable</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="search-indicator" ng-show="hostViewSearching"><i class="fa fa-lg fa-spin fa-cog"></i></div>
|
||||
</form>
|
||||
<!-- lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500" -->
|
||||
<div id="host-events-table">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user