mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
Job detail page re-refactor
Latest host event viewer changes.
This commit is contained in:
Chris Houseknecht
parent
93986d0fd8
commit
9c2e4c91df
@ -35,12 +35,58 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
scope.removeJobReady();
|
||||
}
|
||||
scope.removeEventReady = scope.$on('EventsReady', function(e, data) {
|
||||
//var elem;
|
||||
var elem, html;
|
||||
|
||||
//scope.host_events = data.results;
|
||||
//$log.debug(scope.host_events);
|
||||
|
||||
scope.host_events = data.results;
|
||||
|
||||
//elem = angular.element(document.getElementById('host-events-modal-dialog'));
|
||||
//$compile(elem)(scope);
|
||||
scope.host_events_search_name = host_name;
|
||||
scope.host_events_search_status = 'all';
|
||||
scope.host_events = [];
|
||||
html = "<table class=\"table\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr><th class=\"col-md-3\">Status</th>" +
|
||||
"<th class=\"col-md-3\">Play</th>" +
|
||||
"<th class=\"col-md-3\">Task</th>" +
|
||||
"<th class=\"col-md-3\">Result</th></tr>\n";
|
||||
html += "</thead>\n";
|
||||
html += "<tbody>\n";
|
||||
data.results.forEach(function(result) {
|
||||
var msg = '',
|
||||
status = 'ok',
|
||||
status_text = 'OK';
|
||||
if (result.event_data.res) {
|
||||
msg = result.event_data.res.msg;
|
||||
}
|
||||
if (result.event === "runner_on_no_hoss") {
|
||||
msg = "No hosts remaining";
|
||||
}
|
||||
if (result.event === 'runner_on_unreachable') {
|
||||
status = 'unreachable';
|
||||
status_text = 'Unreachable';
|
||||
}
|
||||
else if (result.failed) {
|
||||
status = 'failed';
|
||||
status_text = 'Failed';
|
||||
}
|
||||
else if (result.changed) {
|
||||
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 += "<td><i class=\"fa icon-job-" + status + "\"></i> <a href=\"\">" + status_text + "</a></td>\n";
|
||||
html += "<td><a href=\"\">" + result.play + "</a></td>\n";
|
||||
html += "<td><a href=\"\">" + result.task + "</a></td>\n";
|
||||
html += "<td><a href=\"\">" + msg + "</a></td>";
|
||||
html += "</tr>"
|
||||
});
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
$('#host-events').html(html);
|
||||
|
||||
elem = angular.element(document.getElementById('host-events-modal-dialog'));
|
||||
$compile(elem)(scope);
|
||||
|
||||
CreateDialog({
|
||||
scope: scope,
|
||||
@ -50,10 +96,9 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
|
||||
callback: 'ModalReady',
|
||||
id: 'host-events-modal-dialog',
|
||||
// onResizeStop: resizeText,
|
||||
title: ( (title) ? title : 'Event Details' ),
|
||||
onOpen: function() {
|
||||
|
||||
}
|
||||
title: ( (title) ? title : 'Host Events' )
|
||||
//onOpen: function() {
|
||||
//}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
82
awx/ui/static/js/lists/HostEvents.js
Normal file
82
awx/ui/static/js/lists/HostEvents.js
Normal file
@ -0,0 +1,82 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2014 AnsibleWorks, Inc.
|
||||
*
|
||||
* HostEvents.js
|
||||
* Host summary event viewer dialog.
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
angular.module('HostEventsListDefinition', [])
|
||||
.value('HostEventList', {
|
||||
|
||||
name: 'host_events',
|
||||
iterator: 'host_event',
|
||||
editTitle: 'Host Events',
|
||||
index: false,
|
||||
hover: true,
|
||||
|
||||
fields: {
|
||||
status: {
|
||||
label: 'Status',
|
||||
columnClass: 'col-md-2',
|
||||
|
||||
},
|
||||
play: {
|
||||
label: 'Play',
|
||||
columnClass: 'col-md-3',
|
||||
key: true,
|
||||
nosort: true,
|
||||
searchable: false,
|
||||
noLink: true
|
||||
},
|
||||
status: {
|
||||
label: 'Status',
|
||||
showValue: false,
|
||||
columnClass: 'col-sm-1 col-xs-2 text-center',
|
||||
searchField: 'failed',
|
||||
searchType: 'boolean',
|
||||
searchOptions: [{
|
||||
name: 'success',
|
||||
value: 0
|
||||
}, {
|
||||
name: 'error',
|
||||
value: 1
|
||||
}],
|
||||
nosort: true,
|
||||
searchable: false,
|
||||
ngClick: 'viewJobEvent(jobevent.id)',
|
||||
awToolTip: '{{ jobevent.statusBadgeToolTip }}',
|
||||
dataPlacement: 'top',
|
||||
badgeIcon: 'fa icon-job-{{ jobevent.status }}',
|
||||
badgePlacement: 'left',
|
||||
badgeToolTip: '{{ jobevent.statusBadgeToolTip }}',
|
||||
badgeTipPlacement: 'top',
|
||||
badgeNgClick: 'viewJobEvent(jobevent.id)'
|
||||
},
|
||||
event_display: {
|
||||
label: 'Event',
|
||||
hasChildren: true,
|
||||
ngClick: 'toggleChildren(jobevent.id, jobevent.related.children)',
|
||||
nosort: true,
|
||||
searchable: false,
|
||||
ngClass: '{{ jobevent.class }}',
|
||||
appendHTML: 'jobevent.event_detail'
|
||||
},
|
||||
host: {
|
||||
label: 'Host',
|
||||
ngBind: 'jobevent.summary_fields.host.name',
|
||||
ngHref: '{{ jobevent.hostLink }}',
|
||||
searchField: 'hosts__name',
|
||||
nosort: true,
|
||||
searchOnly: false,
|
||||
id: 'job-event-host-header',
|
||||
'class': 'break',
|
||||
columnClass: 'col-lg-2 hidden-sm hidden-xs'
|
||||
}
|
||||
},
|
||||
|
||||
actions: { },
|
||||
|
||||
});
|
||||
@ -984,6 +984,7 @@ input[type="checkbox"].checkbox-no-label {
|
||||
.icon-job-successful:before,
|
||||
.icon-job-changed:before,
|
||||
.icon-job-ok:before,
|
||||
.icon-job-OK:before,
|
||||
.icon-job-skipped:before {
|
||||
content: "\f111";
|
||||
}
|
||||
@ -1008,7 +1009,8 @@ input[type="checkbox"].checkbox-no-label {
|
||||
.icon-job-running,
|
||||
.icon-job-success,
|
||||
.icon-job-successful,
|
||||
.icon-job-ok {
|
||||
.icon-job-ok,
|
||||
.icon-job-OK {
|
||||
color: @green;
|
||||
}
|
||||
|
||||
|
||||
@ -14,6 +14,34 @@
|
||||
@unreachable-hosts-color: @unreachable;
|
||||
|
||||
|
||||
#host-events-modal-dialog {
|
||||
#search-form {
|
||||
margin-left: 7px;
|
||||
}
|
||||
#host-events-search-name {
|
||||
width: 200px;
|
||||
}
|
||||
#search-form-input-icons {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 5px;
|
||||
z-index: 100;
|
||||
a {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
a:hover {
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
#status-field {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#jobs-detail {
|
||||
|
||||
.job_summary {
|
||||
|
||||
@ -258,38 +258,36 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div id="host-events-modal-dialog" style="display:none;">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<div id="job-detail-footer" class="footer-row"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-include="'/static/partials/eventviewer.html'"></div>
|
||||
|
||||
<div id="host-events-modal-dialog" style="display:none;">
|
||||
<form id="search-form" class="form-inline">
|
||||
<div class="form-group" style="position:relative;">
|
||||
<label>Search</label>
|
||||
<input type="text" class="form-control" id="host-events-search-name" ng-model="host_events_search_name" placeholder="Host name" >
|
||||
<input type="text" class="form-control input-sm" id="host-events-search-name" ng-model="host_events_search_name" placeholder="Host name" >
|
||||
<div id="search-form-input-icons">
|
||||
<a class="search-icon" ng-show="!eventsSearchActive" ng-click="searchEvents()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="eventsSearchActive" ng-click="host_events_search_name=''; searchEvents()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="status-field">
|
||||
<label>Status</label>
|
||||
<select id="host-events-search-status" ng-model="host_events_search_status" name="host-events-search-name">
|
||||
<select id="host-events-search-status" class="form-control input-sm" 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="failed">Failed</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" ng-repeat="event in host_events">
|
||||
<div class="col-md-2"><i class="fa icon-job{{ event.status }}"></i></div>
|
||||
<div class="col-md-2">{{ event.play }}</div>
|
||||
<div class="col-md-2">{{ event.role }}</div>
|
||||
<div class="col-md-2">{{ event.task }}</div>
|
||||
<div class="col-md-2">{{ event.msg }}</div>
|
||||
</div>
|
||||
<div id="host-events"></div>
|
||||
</div>
|
||||
|
||||
<div id="job-detail-footer" class="footer-row"></div>
|
||||
</div>
|
||||
|
||||
<div ng-include="'/static/partials/eventviewer.html'"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user