mirror of
https://github.com/ansible/awx.git
synced 2026-01-21 22:48:02 -03:30
Job detail page re-refactor
First pass at host events viewer.
This commit is contained in:
Chris Houseknecht
parent
38b7a6d413
commit
04357bd471
@ -102,7 +102,8 @@ angular.module('Tower', [
|
||||
'EventViewerHelper',
|
||||
'JobDetailHelper',
|
||||
'SocketIO',
|
||||
'lrInfiniteScroll'
|
||||
'lrInfiniteScroll',
|
||||
'HostEventsViewer'
|
||||
])
|
||||
|
||||
.constant('AngularScheduler.partials', $basePath + 'lib/angular-scheduler/lib/')
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
function JobDetailController ($location, $rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
|
||||
ProcessErrors, SelectPlay, SelectTask, Socket, GetElapsed, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList,
|
||||
JobIsFinished, SetTaskStyles, DigestEvent, UpdateDOM, EventViewer, DeleteJob, PlaybookRun) {
|
||||
JobIsFinished, SetTaskStyles, DigestEvent, UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer) {
|
||||
|
||||
ClearScope();
|
||||
|
||||
@ -1004,9 +1004,17 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
|
||||
}
|
||||
};
|
||||
|
||||
scope.hostEventsViewer = function(id, name) {
|
||||
HostEventsViewer({
|
||||
id: id,
|
||||
name: name,
|
||||
url: scope.job.related.job_events + '?event__icontains=runner'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
|
||||
'Wait', 'Rest', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'FilterAllByHostName', 'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
|
||||
'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer', 'DeleteJob', 'PlaybookRun'
|
||||
'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer', 'DeleteJob', 'PlaybookRun', 'HostEventsViewer'
|
||||
];
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2014 AnsibleWorks, Inc.
|
||||
*
|
||||
* LogViewer.js
|
||||
* EventsViewer.js
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
83
awx/ui/static/js/helpers/HostEventsViewer.js
Normal file
83
awx/ui/static/js/helpers/HostEventsViewer.js
Normal file
@ -0,0 +1,83 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2014 AnsibleWorks, Inc.
|
||||
*
|
||||
* HostEventsViewer.js
|
||||
*
|
||||
* View a list of events for a given job and host
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
|
||||
.factory('HostEventsViewer', ['$compile', 'CreateDialog', 'GetEvent', 'Wait', 'GetBasePath', 'LookUpName', 'Empty', 'GetEvents',
|
||||
function($compile, CreateDialog, GetEvent, Wait, GetBasePath, LookUpName, Empty, GetEvents) {
|
||||
return function(params) {
|
||||
var parent_scope = params.scope,
|
||||
url = params.url,
|
||||
title = params.title, //optional
|
||||
scope = parent_scope.$new(true);
|
||||
|
||||
if (scope.removeModalReady) {
|
||||
scope.removeModalReady();
|
||||
}
|
||||
scope.removeModalReady = scope.$on('ModalReady', function() {
|
||||
Wait('stop');
|
||||
$('#host-events-modal-dialog').dialog('open');
|
||||
});
|
||||
|
||||
if (scope.removeJobReady) {
|
||||
scope.removeJobReady();
|
||||
}
|
||||
scope.removeEventReady = scope.$on('EventsReady', function(e, data) {
|
||||
var elem;
|
||||
|
||||
scope.host_events = data.results;
|
||||
|
||||
elem = angular.element(document.getElementById('host-events-modal-dialog'));
|
||||
$compile(elem)(scope);
|
||||
|
||||
CreateDialog({
|
||||
scope: scope,
|
||||
width: 675,
|
||||
height: 600,
|
||||
minWidth: 450,
|
||||
callback: 'ModalReady',
|
||||
id: 'eventviewer-modal-dialog',
|
||||
// onResizeStop: resizeText,
|
||||
title: ( (title) ? title : 'Event Details' ),
|
||||
onOpen: function() {
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
GetEvents({
|
||||
url: url,
|
||||
scope: scope
|
||||
});
|
||||
|
||||
scope.modalOK = function() {
|
||||
$('#eventviewer-modal-dialog').dialog('close');
|
||||
scope.$destroy();
|
||||
};
|
||||
};
|
||||
}])
|
||||
|
||||
.factory('GetEvents', ['Wait', 'Rest', 'ProcessErrors', function(Wait, Rest, ProcessErrors) {
|
||||
return function(params) {
|
||||
var url = params.url,
|
||||
scope = params.scope;
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
scope.$emit('EventsReady', data);
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Failed to get events ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
};
|
||||
}]);
|
||||
@ -226,9 +226,8 @@
|
||||
<div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
|
||||
<div class="row" ng-repeat="host in summaryList = (hosts | filter:{ status : searchAllStatus}) track by $index" id="{{ host.id }}">
|
||||
<div class="name col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<a ng-show="host.name != '<deleted host>'" ng-href="/#/job_events/{{ job.id }}/?host={{ host.name }}" target="_blank"
|
||||
aw-tool-tip="View all events for this host.<br />Opens in new tab or window." data-placement="top">{{ host.name }}</a>
|
||||
<span ng-show="host.name == '<deleted host>'">{{ host.name }}</span>
|
||||
<a ng-click="hostEventsViewer(host.id, host.name)" target="_blank" aw-tool-tip="View all events for this host"
|
||||
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>
|
||||
@ -262,5 +261,33 @@
|
||||
</div>
|
||||
|
||||
<div ng-include="'/static/partials/eventviewer.html'"></div>
|
||||
|
||||
<div id="host-events-modal-dialog">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label>Search</label>
|
||||
<input type="text" class="form-control" id="host-events-search-name" id="host_events_search_name" ng-model="host-events-search-name" placeholder="Host name" >
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="host-events-search-status" ng-model="host_events_search_status" name="host-events-search-name">
|
||||
<option value="all">All</option>
|
||||
<option value="failed">Failed</option>
|
||||
<option value="changed">Changed</option>
|
||||
<option value="ok">OK</option>
|
||||
<option value="unreachable">Unreachable</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<div id="host-events-table" lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500">
|
||||
<div class="row">
|
||||
<div class="col-md-2"><i class="fa icon-job{{ host_events.status }}"></i></div>
|
||||
<div class="col-md-2">{{ host_events.play }}</div>
|
||||
<div class="col-md-2">{{ host_events.role }}</div>
|
||||
<div class="col-md-2">{{ host_events.task }}</div>
|
||||
<div class="col-md-2">{{ host_events.msg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -161,6 +161,7 @@
|
||||
<script src="{{ STATIC_URL }}js/helpers/EventViewer.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/helpers/JobDetail.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/helpers/JobTemplates.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/helpers/HostEventsViewer.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/widgets/JobStatus.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/widgets/DashboardCounts.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/widgets/HostGraph.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user