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

host event/events UX work items, fix json results, remove host event standard out, resolves #1545, #2052, #2063, #2061

Browse Source
This commit is contained in:
Leigh Johnson 2016-05-27 16:01:15 -04:00
parent 4f6fd558a0
commit 62382a1dad
13 changed files with 96 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui/client/src/job-detail/host-event/host-event-details.partial.html
View File

@ -1,8 +1,5 @@
<div class="HostEvent-details--left">
<div class="HostEvent-field">
<div class="HostEvent-title">EVENT</div>
<span class="HostEvent-field--content"></span>
</div>
<div class="HostEvent-title">EVENT</div>
<div class="HostEvent-field">
<span class="HostEvent-field--label">HOST</span>
<span class="HostEvent-field--content">

17
awx/ui/client/src/job-detail/host-event/host-event-modal.partial.html
View File

@ -12,24 +12,23 @@
</div>
<div class="HostEvent-nav">
<!-- view navigation buttons -->
<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default" >Details</button>
<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default ">JSON</button>
<button ng-show="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default ">Standard Out</button>
<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default" 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 " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
</div>
<div class="HostEvent-body">
<!-- views -->
<div ui-view></div>
<div class="HostEvent-view--container" ui-view></div>
</div>
<!-- controls -->
<div class="HostEvent-controls">
<button ng-show="showPrev()" ng-click="goPrev()"
class="btn btn-sm btn-default">Prev</button>
<button ng-show="showNext()"ng-click="goNext()" class="btn btn-sm btn-default">Next</button>
<button ui-sref="jobDetail" class="btn btn-sm btn-default" ng-show="true" >Close</button>
<button ng-disabled="!showPrev()" ng-click="goPrev()"
class="btn btn-sm btn-default">Prev Host</button>
<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default">Next Host</button>
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close" ng-show="true" >Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

2
awx/ui/client/src/job-detail/host-event/host-event-stdout.partial.html
View File

@ -1,2 +0,0 @@
<textarea id="HostEvent-stdout" class="HostEvent-stdout">
</textarea>

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

@ -2,6 +2,35 @@
@import "awx/ui/client/src/shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/layouts/one-plus-two.less";
@media screen and (min-width: 768px){
.HostEvent .modal-dialog{
width: 700px;
}
}
.HostEvent-controls button.HostEvent-close{
color: #FFFFFF;
text-transform: uppercase;
padding-left: 15px;
padding-right: 15px;
background-color: @default-link;
&:hover{
background-color: @default-link-hov;
}
}
.HostEvent-body{
margin-bottom: 10px;
}
.HostEvent-tab--selected{
background-color: #D7D7D7 !important;
border-color: #D7D7D7 !important;
}
.HostEvent-view--container{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.HostEvent .modal-footer{
border: 0;
margin-top: 0px;
@ -30,7 +59,8 @@
}
.HostEvent-title{
color: @default-interface-txt;
font-weight: 600;
font-weight: 600;
margin-bottom: 8px;
}
.HostEvent .modal-body{
max-height: 500px;
@ -43,10 +73,11 @@
}
.HostEvent-field{
margin-bottom: 8px;
flex: 0 1 12em;
}
.HostEvent-field--label{
.OnePlusTwo-left--detailsLabel;
width: 80px;
text-transform: uppercase;
flex: 0 1 80px;
margin-right: 20px;
font-size: 12px;
word-wrap: break-word;
@ -55,21 +86,20 @@
.OnePlusTwo-left--detailsRow;
}
.HostEvent-field--content{
.OnePlusTwo-left--detailsContent;
flex: 0 1 13em;
}
.HostEvent-details--left, .HostEvent-details--right{
vertical-align:top;
width:265px;
display: inline-block;
flex: 1 1 47%;
}
.HostEvent-details--left{
margin-right: 10px;
margin-right: 40px;
}
.HostEvent-details--right{
.HostEvent-field--label{
width: auto;
flex: 0 1 25em;
}
.HostEvent-field--content{
text-align: right;
flex: 0 1 15em;
align-self: flex-end;
}
}
}

22
awx/ui/client/src/job-detail/host-event/host-event.controller.js
View File

@ -17,16 +17,20 @@
if (typeof value === 'object'){return false;}
else {return true;}
};
//var CodeMirror;
var codeMirror = function(el, json){
/* jshint ignore:start */
var initCodeMirror = function(el, json){
var container = $(el)[0];
var editor = codeMirror.fromTextArea(container, {
var editor = CodeMirror.fromTextArea(container, {
lineNumbers: true,
mode: {name: "javascript", json: true}
});
});
editor.setSize("100%", 300);
editor.getDoc().setValue(JSON.stringify(json, null, 4));
};
/* jshint ignore:end */
$scope.isActiveState = function(name){
return $state.current.name === name;
};
$scope.getActiveHostIndex = function(){
var result = $scope.hostResults.filter(function( obj ) {
@ -61,19 +65,21 @@
$scope.hostResults = res.results;
});
$scope.json = JobDetailService.processJson($scope.event);
/* jshint ignore:start */
if ($state.current.name === 'jobDetail.host-event.json'){
codeMirror('#HostEvent-json', $scope.json);
initCodeMirror('#HostEvent-json', $scope.json);
}
try {
$scope.stdout = JobDetailService
.processJson($scope.event.event_data.res);
.processJson($scope.event.event_data.res.stdout);
if ($state.current.name === 'jobDetail.host-event.stdout'){
codeMirror('#HostEvent-stdout', $scope.stdout);
initCodeMirror('#HostEvent-stdout', $scope.stdout);
}
}
catch(err){
$scope.sdout = null;
$scope.stdout = null;
}
/* jshint ignore:end */
$('#HostEvent').modal('show');
};
init();

12
awx/ui/client/src/job-detail/host-event/host-event.route.js
View File

@ -11,6 +11,7 @@ var hostEventModal = {
url: '/task/:taskId/host-event/:eventId',
controller: 'HostEventController',
templateUrl: templateUrl('job-detail/host-event/host-event-modal'),
abtract: true,
resolve: {
hostEvent: ['JobDetailService','$stateParams', function(JobDetailService, $stateParams) {
return JobDetailService.getRelatedJobEvents($stateParams.id, {
@ -32,7 +33,7 @@ var hostEventModal = {
name: 'jobDetail.host-event.details',
url: '/details',
controller: 'HostEventController',
templateUrl: templateUrl('job-detail/host-event/host-event-details'),
templateUrl: templateUrl('job-detail/host-event/host-event-details')
};
var hostEventJson = {
@ -42,11 +43,4 @@ var hostEventModal = {
templateUrl: templateUrl('job-detail/host-event/host-event-json')
};
var hostEventStdout = {
name: 'jobDetail.host-event.stdout',
url: '/stdout',
controller: 'HostEventController',
templateUrl: templateUrl('job-detail/host-event/host-event-stdout')
};
export {hostEventDetails, hostEventJson, hostEventStdout, hostEventModal};
export {hostEventDetails, hostEventJson, hostEventModal};

5
awx/ui/client/src/job-detail/host-event/main.js
View File

@ -5,7 +5,7 @@
*************************************************/
import {hostEventModal, hostEventDetails,
hostEventJson, hostEventStdout} from './host-event.route';
hostEventJson} from './host-event.route';
import controller from './host-event.controller';
export default
@ -16,5 +16,4 @@
$stateExtender.addState(hostEventModal);
$stateExtender.addState(hostEventDetails);
$stateExtender.addState(hostEventJson);
$stateExtender.addState(hostEventStdout);
}]);
}]);

14
awx/ui/client/src/job-detail/host-events/host-events.block.less
View File

@ -9,6 +9,17 @@
margin-top: 0px;
padding-top: 5px;
}
button.HostEvents-close{
width: 70px;
color: #FFFFFF;
text-transform: uppercase;
padding-left: 15px;
padding-right: 15px;
background-color: @default-link;
&:hover{
background-color: @default-link-hov;
}
}
.HostEvents-status--ok{
color: @green;
}
@ -28,9 +39,6 @@
max-width: 420px;
display: inline-block;
}
.HostEvents-close{
width: 70px;
}
.HostEvents-filter--form{
padding-top: 15px;
padding-bottom: 15px;

8
awx/ui/client/src/job-detail/host-events/host-events.partial.html
View File

@ -1,11 +1,11 @@
<div id="HostEvents" class="HostEvents modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="HostEvents-header">
<span class="HostEvents-title">HOST EVENTS | {{hostName}}</span>
<!-- Close -->
<button ui-sref="jobDetail" type="button" class="close">
<button ui-sref="jobDetail.host-summary" type="button" class="close">
<i class="fa fa fa-times-circle"></i>
</button>
</div>
@ -54,9 +54,9 @@
<div class="modal-footer">
<!-- pagination -->
<!-- close -->
<button ui-sref="jobDetail" class="btn btn-default pull-right HostEvents-close">OK</button>
<button ui-sref="jobDetail.host-summary" class="btn btn-default pull-right HostEvents-close">OK</button>
</div>
</div>
</div>
</div>
</div>

2
awx/ui/client/src/job-detail/host-events/host-events.route.js
View File

@ -8,7 +8,7 @@ import {templateUrl} from '../../shared/template-url/template-url.factory';
export default {
name: 'jobDetail.host-events',
url: '/host-events/:hostName?:filter',
url: '/host-events/{hostName:any}?:filter',
controller: 'HostEventsController',
params: {
page_size: 10

14
awx/ui/client/src/job-detail/host-summary/host-summary.route.js
View File

@ -9,20 +9,6 @@ import {templateUrl} from '../../shared/template-url/template-url.factory';
export default {
name: 'jobDetail.host-summary',
url: '/event-summary',
/*
resolve: {
jobSocket: ['Socket', '$rootScope', function(Socket, $rootScope) {
var job_socket = Socket({
scope: $rootScope,
endpoint: "jobs"
});
if (!$rootScope.event_socket){
job_socket.init();
}
return job_socket;
}]
},
*/
views:{
'host-summary': {
controller: 'HostSummaryController',

14
awx/ui/client/src/job-detail/job-detail.controller.js
View File

@ -11,13 +11,13 @@
*/
export default
[ '$location', '$rootScope', '$filter', '$scope', '$compile', '$stateParams', '$log', 'ClearScope',
[ '$location', '$rootScope', '$filter', '$scope', '$compile', '$state', '$stateParams', '$log', 'ClearScope',
'GetBasePath', 'Wait', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'GetElapsed', 'JobIsFinished',
'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'DeleteJob', 'InitiatePlaybookRun', 'LoadPlays', 'LoadTasks',
'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels', 'EditSchedule',
'ParseTypeChange', 'JobDetailService',
function(
$location, $rootScope, $filter, $scope, $compile, $stateParams, $log, ClearScope,
$location, $rootScope, $filter, $scope, $compile, $state, $stateParams, $log, ClearScope,
GetBasePath, Wait, ProcessErrors, SelectPlay, SelectTask, GetElapsed, JobIsFinished,
SetTaskStyles, DigestEvent, UpdateDOM, DeleteJob, InitiatePlaybookRun, LoadPlays, LoadTasks,
ParseVariableString, GetChoices, fieldChoices, fieldLabels, EditSchedule,
@ -160,8 +160,14 @@ export default
scope.processing = false;
scope.lessStatus = false;
scope.lessDetail = false;
scope.lessEvents = true;
// pops the event summary panel open if we're in the host summary child state
//scope.lessEvents = ($state.current.name === 'jobDetail.host-summary' || $state.current.name === 'jobDetail.host-events') ? false : true;
if ($state.current.name === 'jobDetail.host-summary' ){
scope.lessEvents = false;
}
else{
scope.lessEvents = true;
}
scope.jobData = {};
scope.jobData.hostSummaries = {};

3
awx/ui/client/src/job-detail/job-detail.service.js
View File

@ -41,8 +41,7 @@ export default
});
}
catch(err){result.event_data = undefined;}
return result;
return result === {} ? null : result;
},
// Return Ansible's passed-through response msg on a job_event
processEventMsg: function(event){