External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-18 05:01:19 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fixing up host event modal

Browse Source 
Moving the details up from a nav pane and into the main body of hte modal.
This commit is contained in:
jaredevantabor 2016-11-15 16:39:50 -08:00
parent 86cf09ec71
commit 96952e7841
8 changed files with 75 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
awx/ui/client/src/job-detail/host-event/host-event.block.less
View File

@ -101,11 +101,11 @@
font-weight: 600;
margin-bottom: 8px;
}
.HostEvent .modal-body{
max-height: 500px;
overflow-y: auto;
padding: 20px;
}
// .HostEvent .modal-body{
// max-height: 500px;
// overflow-y: auto;
// padding: 20px;
// }
.HostEvent-nav{
padding-top: 12px;
padding-bottom: 12px;

46
awx/ui/client/src/job-results/host-event/host-event-details.partial.html
View File

@ -1,46 +0,0 @@
<div class="HostEvent-details--left">
<div class="HostEvent-title">EVENT</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">HOST</span>
<span class="HostEvent-field--content">
<a ui-sref="jobDetail.host-events({hostName: event.host_name})">{{event.host_name || "No result found"}}</a></span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">STATUS</span>
<span class="HostEvent-field--content">
<a class="HostEvents-status">
<i class="fa fa-circle" ng-class="processEventStatus(event).class"></i>
</a>
{{processEventStatus(event).status || "No result found"}}
</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">ID</span>
<span class="HostEvent-field--content">{{event.id || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">CREATED</span>
<span class="HostEvent-field--content">{{event.created || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">PLAY</span>
<span class="HostEvent-field--content">{{event.play || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">TASK</span>
<span class="HostEvent-field--content">{{event.task || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">MODULE</span>
<span class="HostEvent-field--content">{{event.event_data.res.invocation.module_name || "No result found"}}</span>
</div>
</div>
<div class="HostEvent-details--right" ng-show="event.event_data.res">
<div class="HostEvent-title">RESULTS</div>
<!-- discard any objects in the ansible response until we decide to flatten them -->
<div class="HostEvent-field" ng-repeat="(key, value) in results = event.event_data.res track by $index" ng-if="processResults(value)">
<span class="HostEvent-field--label">{{key}}</span>
<span class="HostEvent-field--content">{{value}}</span>
</div>
</div>

31
awx/ui/client/src/job-results/host-event/host-event-modal.partial.html
View File

@ -4,15 +4,39 @@
<!-- modal body -->
<div class="modal-body">
<div class="HostEvent-header">
<span class="HostEvent-title">HOST EVENT</span>
<a class="HostEvents-status">
<i class="fa fa-circle" ng-class="processEventStatus(event).class"></i>
</a>
<span class="HostEvent-title">{{event.host_name}}</span>
<!-- close -->
<button ui-sref="jobDetail" type="button" class="close">
<i class="fa fa-times-circle"></i>
</button>
</div>
<div class="HostEvent-details--left">
<div class="HostEvent-field">
<span class="HostEvent-field--label">CREATED</span>
<span class="HostEvent-field--content">{{event.created || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">PLAY</span>
<span class="HostEvent-field--content">{{event.play || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">TASK</span>
<span class="HostEvent-field--content">{{event.task || "No result found"}}</span>
</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">MODULE</span>
<span class="HostEvent-field--content">{{event.event_data.res.invocation.module_name || "No result found"}}</span>
</div>
</div>
<!-- end of details-->
<div class="HostEvent-nav">
<!-- view navigation buttons -->
<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.details')}">Details</button>
<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
<button ng-if="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stdout')}">Standard Out</button>
<button ng-if="stderr" ui-sref="jobDetail.host-event.stderr" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stderr')}">Standard Error</button>
@ -25,9 +49,6 @@
<!-- controls -->
<div class="HostEvent-controls">
<button ng-disabled="!showPrev()" ng-click="goPrev()"
class="btn btn-sm btn-default HostEvent-button">Prev Host</button>
<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default HostEvent-button">Next Host</button>
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close HostEvent-button" ng-show="true" >Close</button>
</div>
</div>

6
awx/ui/client/src/job-results/host-event/host-event.block.less
View File

@ -96,14 +96,16 @@
.HostEvent-status--skipped{
color: @skipped;
}
.HostEvent-header{
padding-bottom: 15px;
}
.HostEvent-title{
color: @default-interface-txt;
font-weight: 600;
margin-bottom: 8px;
}
.HostEvent .modal-body{
max-height: 500px;
overflow-y: auto;
height: 480px;
padding: 20px;
}
.HostEvent-nav{

28
awx/ui/client/src/job-results/host-event/host-event.controller.js
View File

@ -6,8 +6,8 @@
export default
['$stateParams', '$scope', '$state', 'Wait', 'JobDetailService', 'hostEvent', 'hostResults',
function($stateParams, $scope, $state, Wait, JobDetailService, hostEvent, hostResults){
['$stateParams', '$scope', '$state', 'Wait', 'JobDetailService', 'hostEvent', 'hostResults', 'parseStdoutService',
function($stateParams, $scope, $state, Wait, JobDetailService, hostEvent, hostResults, parseStdoutService){
$scope.processEventStatus = JobDetailService.processEventStatus;
$scope.hostResults = [];
@ -29,7 +29,7 @@
lineNumbers: true,
mode: mode
});
editor.setSize("100%", 300);
editor.setSize("100%", 200);
editor.getDoc().setValue(data);
};
/*ignore jslint end*/
@ -44,26 +44,6 @@
return $scope.hostResults.indexOf(result[0]);
};
$scope.showPrev = function(){
return $scope.getActiveHostIndex() !== 0;
};
$scope.showNext = function(){
return $scope.getActiveHostIndex() < $scope.hostResults.indexOf($scope.hostResults[$scope.hostResults.length - 1]);
};
$scope.goNext = function(){
var index = $scope.getActiveHostIndex() + 1;
var id = $scope.hostResults[index].id;
$state.go('jobDetail.host-event.details', {eventId: id});
};
$scope.goPrev = function(){
var index = $scope.getActiveHostIndex() - 1;
var id = $scope.hostResults[index].id;
$state.go('jobDetail.host-event.details', {eventId: id});
};
var init = function(){
$scope.event = _.cloneDeep(hostEvent);
$scope.hostResults = hostResults;
@ -71,7 +51,7 @@
// grab standard out & standard error if present, and remove from the results displayed in the details panel
if (hostEvent.stdout){
$scope.stdout = hostEvent.stdout;
$scope.stdout = parseStdoutService.prettifyLite(hostEvent.stdout);
delete $scope.event.stdout;
}
if (hostEvent.stderr){

11
awx/ui/client/src/job-results/host-event/host-event.route.js
View File

@ -11,7 +11,7 @@ var hostEventModal = {
url: '/task/:taskId/host-event/:eventId',
controller: 'HostEventController',
templateUrl: templateUrl('job-results/host-event/host-event-modal'),
'abstract': true,
'abstract': false,
resolve: {
hostEvent: ['JobDetailService', '$stateParams', function(JobDetailService, $stateParams) {
return JobDetailService.getRelatedJobEvents($stateParams.id, {
@ -33,13 +33,6 @@ var hostEventModal = {
}
};
var hostEventDetails = {
name: 'jobDetail.host-event.details',
url: '/details',
controller: 'HostEventController',
templateUrl: templateUrl('job-results/host-event/host-event-details'),
};
var hostEventJson = {
name: 'jobDetail.host-event.json',
url: '/json',
@ -62,4 +55,4 @@ var hostEventStderr = {
};
export { hostEventDetails, hostEventJson, hostEventModal, hostEventStdout, hostEventStderr };
export { hostEventJson, hostEventModal, hostEventStdout, hostEventStderr };

3
awx/ui/client/src/job-results/host-event/main.js
View File

@ -4,7 +4,7 @@
* All Rights Reserved
*************************************************/
import {hostEventModal, hostEventDetails,
import {hostEventModal,
hostEventJson, hostEventStdout, hostEventStderr} from './host-event.route';
import controller from './host-event.controller';
@ -14,7 +14,6 @@
.run(['$stateExtender', function($stateExtender){
$stateExtender.addState(hostEventModal);
$stateExtender.addState(hostEventDetails);
$stateExtender.addState(hostEventJson);
$stateExtender.addState(hostEventStdout);
$stateExtender.addState(hostEventStderr);

35
awx/ui/client/src/job-results/parse-stdout.service.js
View File

@ -33,13 +33,44 @@ export default ['$log', function($log){
line = line.replace(/\[0m/g, '</span>');
return line;
},
prettifyLite: function(line){
// this function will return a line of stdout without the <span>
// tags styling the output. This isn't needed in the case
// of the host event modal where stdout is displayed in a CodeMirror
// TODO: remove once Chris's fixes to the [K lines comes in
if (line.indexOf("[K") > -1) {
$log.error(line);
}
line = line.replace(/u001b/g, '');
// ansi classes
line = line.replace(/\[1;31m/g, '');
line = line.replace(/\[0;31m/g, '');
line = line.replace(/\[0;32m/g, '');
line = line.replace(/\[0;32m=/g, '');
line = line.replace(/\[0;32m1/g, '');
line = line.replace(/\[0;33m/g, '');
line = line.replace(/\[0;34m/g, '');
line = line.replace(/\[0;35m/g, '');
line = line.replace(/\[0;36m/g, '');
line = line.replace(/(<host.*?>)\s/g, '$1');
//end span
line = line.replace(/\[0m/g, '');
//TODO: figure out how to get rid of the hidden characters that
// show up in the codmirror as red dots
return line;
},
// adds anchor tags and tooltips to host status lines
getAnchorTags: function(event, line){
if(event.event.indexOf("runner_") === -1){
return line;
}
else{
return `<a ui-sref="jobDetail.host-event.details({eventId: ${event.parent}, taskId: ${event.id} })" aw-tool-tip="Event ID: ${event.id} <br>Status: ${event.event_display}. <br>Click for details" data-tip-watch="result.tip" data-placement="top">${line}</a>`;
return `<a ui-sref="jobDetail.host-event.json({eventId: ${event.id}, taskId: ${event.parent} })" aw-tool-tip="Event ID: ${event.id} <br>Status: ${event.event_display} <br>Click for details" data-placement="top">${line}</a>`;
}
},
@ -126,7 +157,7 @@ export default ['$log', function($log){
data-uuid="${clickClass}">
</i>
</span>`;
console.log(expandDom);
// console.log(expandDom);
return expandDom;
} else {
// non-header lines don't get an expander