diff --git a/awx/ui/client/legacy-styles/job-details.less b/awx/ui/client/legacy-styles/job-details.less index 0adc42ea1a..d3cc2bae50 100644 --- a/awx/ui/client/legacy-styles/job-details.less +++ b/awx/ui/client/legacy-styles/job-details.less @@ -214,9 +214,7 @@ } #job-detail-container { - position: relative; - padding-left: 15px; - padding-right: 7px; + .well { overflow: hidden; } diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js index a6ab910194..3c12eadfb1 100644 --- a/awx/ui/client/src/app.js +++ b/awx/ui/client/src/app.js @@ -975,7 +975,7 @@ var tower = angular.module('Tower', [ $log.debug("sending status to standard out"); $rootScope.$emit('JobStatusChange-jobStdout', data); - } else if ($state.is('jobDetail')) { + } if ($state.is('jobDetail')) { $rootScope.$emit('JobStatusChange-jobDetails', data); } else if ($state.is('dashboard')) { $rootScope.$emit('JobStatusChange-home', data); diff --git a/awx/ui/client/src/helpers/JobDetail.js b/awx/ui/client/src/helpers/JobDetail.js index d5c511e0f5..121786de3a 100644 --- a/awx/ui/client/src/helpers/JobDetail.js +++ b/awx/ui/client/src/helpers/JobDetail.js @@ -235,7 +235,7 @@ export default } if (newActivePlay) { scope.activePlay = newActivePlay; - scope.jobData.plays[scope.activePlay].playActiveClass = 'List-tableRow--selected'; + scope.jobData.plays[scope.activePlay].playActiveClass = 'JobDetail-tableRow--selected'; } } }; @@ -265,7 +265,7 @@ export default } if (newActiveTask) { scope.activeTask = newActiveTask; - scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'List-tableRow--selected'; + scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'JobDetail-tableRow--selected'; } } }; @@ -793,7 +793,7 @@ export default scope.selectedPlay = id; scope.plays.forEach(function(play, idx) { if (play.id === scope.selectedPlay) { - scope.plays[idx].playActiveClass = 'List-tableRow--selected'; + scope.plays[idx].playActiveClass = 'JobDetail-tableRow--selected'; } else { scope.plays[idx].playActiveClass = ''; @@ -940,7 +940,7 @@ export default scope.selectedTask = id; scope.tasks.forEach(function(task, idx) { if (task.id === scope.selectedTask) { - scope.tasks[idx].taskActiveClass = 'List-tableRow--selected'; + scope.tasks[idx].taskActiveClass = 'JobDetail-tableRow--selected'; } else { scope.tasks[idx].taskActiveClass = ''; @@ -1143,7 +1143,7 @@ export default return function(params) { var scope = params.scope, resize = params.resize, - width, height, svg_height, svg_width, svg_radius, graph_data = []; + graph_data = []; // Ready the data if (scope.host_summary.ok) { @@ -1192,7 +1192,8 @@ export default element = $("#graph-section"), colors, total,job_detail_chart; - colors = ['#60D66F', '#FF9900','#FF0000','#ff5850']; + // colors = ['#60D66F', '#FF9900','#FF0000','#ff5850']; + colors = _.map(dataset, function(d){return d.color}); total = d3.sum(dataset.map(function(d) { return d.value; })); @@ -1221,6 +1222,7 @@ export default "font-weight":400, "src": "url(/static/assets/OpenSans-Regular.ttf)" }); + d3.select(element.find(".nv-label text")[0]) .attr("class", "DashboardGraphs-hostStatusLabel--successful") .style({ @@ -1228,7 +1230,7 @@ export default "text-anchor": "start", "font-size": "16px", "text-transform" : "uppercase", - "fill" : '#3CB878', + "fill" : colors[0], "src": "url(/static/assets/OpenSans-Regular.ttf)" }); d3.select(element.find(".nv-label text")[1]) @@ -1238,7 +1240,7 @@ export default "text-anchor" : "end !imporant", "font-size": "16px", "text-transform" : "uppercase", - "fill" : "#FF9900", + "fill" : colors[1], "src": "url(/static/assets/OpenSans-Regular.ttf)" }); d3.select(element.find(".nv-label text")[2]) @@ -1248,7 +1250,7 @@ export default "text-anchor" : "end !imporant", "font-size": "16px", "text-transform" : "uppercase", - "fill" : "#FF0000", + "fill" : colors[2], "src": "url(/static/assets/OpenSans-Regular.ttf)" }); d3.select(element.find(".nv-label text")[3]) @@ -1258,7 +1260,7 @@ export default "text-anchor" : "end !imporant", "font-size": "16px", "text-transform" : "uppercase", - "fill" : "#ff5850", + "fill" : colors[3], "src": "url(/static/assets/OpenSans-Regular.ttf)" }); return job_detail_chart; diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less index 854584959d..83671a21da 100644 --- a/awx/ui/client/src/job-detail/job-detail.block.less +++ b/awx/ui/client/src/job-detail/job-detail.block.less @@ -3,7 +3,19 @@ @import '../shared/branding/colors.less'; @import '../shared/branding/colors.default.less'; +.JobDetail{ + display: flex; + flex-direction: row; +} + .JobDetail-leftSide{ + flex: 1 0 auto; + width: 50%; + padding-right: 20px; +} + +.JobDetail-rightSide{ + flex: 1 0 auto; width: 50%; } @@ -49,6 +61,7 @@ display: flex; flex-wrap: wrap; flex-direction: row; + padding-top: 25px; } .JobDetail-resultRow{ @@ -56,6 +69,10 @@ display: flex; } +.JobDetail-resultRowLabel{ + text-transform: uppercase; +} + .JobDetail-resultRow label{ color: @default-interface-txt; font-size: 14px; @@ -64,14 +81,26 @@ } .JobDetail-resultRow--variables{ - width: 90%; - display: block; + width: 100%; + display: flex; + flex-direction: column; + padding-left:15px; +} + +.JobDetail-extraVars{ + text-transform: none; +} + +.JobDetail-extraVarsLabel{ + margin-left:-15px; + padding-bottom: 15px; } .JobDetail-resultRowText{ width: 40%; flex: 1 0 auto; padding:0px; + text-transform: none; } .JobDetail-searchHeaderRow{ @@ -101,7 +130,7 @@ .JobDetail-tableToggle.active{ background-color: @default-link; border: 1px solid @default-link; - color: @toggle-selected-text; + color: @default-bg; } .JobDetail-tableToggle--left{ @@ -127,7 +156,27 @@ padding-left: 10px; } +.JobDetail-tableRow--selected, +.JobDetail-tableRow--selected > :first-child{ + border-left: 5px solid @list-row-select-bord; +} + +.JobDetail-tableRow--selected > :first-child > .JobDetail-statusIcon{ + margin-left: -5px; +} + +.JobDetail-statusIcon--results{ + padding-left: 0px; + padding-right: 10px; +} + .JobDetail-graphSection{ height: 320px; width:100%; } + +.JobDetail-stdoutActionButton--active{ + flex:none; + width:0px; + padding-right: 0px; +} diff --git a/awx/ui/client/src/job-detail/job-detail.controller.js b/awx/ui/client/src/job-detail/job-detail.controller.js index 220424352c..447cec8d8c 100644 --- a/awx/ui/client/src/job-detail/job-detail.controller.js +++ b/awx/ui/client/src/job-detail/job-detail.controller.js @@ -43,6 +43,7 @@ export default scope.plays = []; scope.parseType = 'yaml'; scope.previousTaskFailed = false; + $scope.stdoutFullScreen = false; scope.$watch('job_status', function(job_status) { if (job_status && job_status.explanation && job_status.explanation.split(":")[0] === "Previous Task Failed") { @@ -202,7 +203,7 @@ export default scope.processing = false; scope.lessStatus = false; scope.lessDetail = false; - scope.lessEvents = false; + scope.lessEvents = true; scope.host_summary = {}; scope.host_summary.ok = 0; @@ -557,7 +558,7 @@ export default }); }); if (scope.activeTask && scope.jobData.plays[scope.activePlay] && scope.jobData.plays[scope.activePlay].tasks[scope.activeTask]) { - scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'List-tableRow--selected'; + scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'JobDetail-tableRow--selected'; } scope.$emit('LoadHosts'); }) @@ -677,7 +678,7 @@ export default scope.host_summary.failed; }); if (scope.activePlay && scope.jobData.plays[scope.activePlay]) { - scope.jobData.plays[scope.activePlay].playActiveClass = 'List-tableRow--selected'; + scope.jobData.plays[scope.activePlay].playActiveClass = 'JobDetail-tableRow--selected'; } scope.$emit('LoadTasks', events_url); }) @@ -981,11 +982,11 @@ export default scope.toggleLessStatus = function() { if (!scope.lessStatus) { - $('#job-status-form .toggle-show').slideUp(200); + $('#job-status-form').slideUp(200); scope.lessStatus = true; } else { - $('#job-status-form .toggle-show').slideDown(200); + $('#job-status-form').slideDown(200); scope.lessStatus = false; } }; @@ -1009,6 +1010,7 @@ export default else { $('#events-summary').slideDown(200); scope.lessEvents = false; + DrawGraph({scope:scope}); } }; @@ -1432,16 +1434,10 @@ export default $scope.$emit('LoadJob'); }; - scope.editHost = function(id) { - HostsEdit({ - host_scope: scope, - group_scope: null, - host_id: id, - inventory_id: scope.job.inventory, - mode: 'edit', // 'add' or 'edit' - selected_group_id: null - }); - }; + // Click binding for the expand/collapse button on the standard out log + $scope.toggleStdoutFullscreen = function() { + $scope.stdoutFullScreen = !$scope.stdoutFullScreen; + } scope.editSchedule = function() { // We need to get the schedule's ID out of the related links diff --git a/awx/ui/client/src/job-detail/job-detail.partial.html b/awx/ui/client/src/job-detail/job-detail.partial.html index fcdfe87acb..8bbbc4aaaa 100644 --- a/awx/ui/client/src/job-detail/job-detail.partial.html +++ b/awx/ui/client/src/job-detail/job-detail.partial.html @@ -1,238 +1,406 @@
-
-
-
-
-
-
- - RESULTS - - - RESULTS - -
-
- - -
+
+ + +
+ + +
+
+
+ + RESULTS + + + RESULTS +
- -
-
- -
{{ job_status.status_label }}
-
-
- -
-
Previous Task Failed - - - - -
-
- -
- -
-
- -
- -
- {{ job_template_name }} -
-
- -
- -
{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}
-
- -
- -
{{ job_type }}
-
- -
- -
{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}
-
- -
- -
- {{ created_by }} -
-
- -
- -
{{ job_status.elapsed }}
-
- -
- -
- {{scheduled_by}} -
-
- -
- -
- {{ inventory_name }} -
-
- -
- -
- {{ project_name }} -
-
- -
- -
{{ job.playbook }}
-
- -
- -
- {{ credential_name }} -
-
- -
- -
- {{ cloud_credential_name }} -
-
- -
- -
{{ job.forks }}
-
- -
- -
{{ job.limit }}
-
- -
- -
{{ verbosity }}
-
- -
- -
{{ job.job_tags }}
-
- -
- - -
- +
+ + +
- -
-
-
- - DETAILS - - - DETAILS +
+
+ +
{{ job_status.status_label }}
+
+ +
+ +
+
Previous Task Failed + + +
-
-
-
-
-
- - - -
-
-
-
- - -
-
-
- - -
- - - - - - - - -
PlaysStartedElapsed
-
-
- - - - - - - - - - - - - - - - - - -
{{ play.name }}{{ play.created | date: 'HH:mm:ss' }}{{ play.elapsed }}
Waiting...
Loading...
No matching plays
-
- +
+ +
- -
+
+ +
+ {{ job_template_name }} +
+
+
+ +
{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}
+
+ +
+ +
{{ job_type }}
+
+ +
+ +
{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}
+
+ +
+ +
+ {{ created_by }} +
+
+ +
+ +
{{ job_status.elapsed }}
+
+ +
+ +
+ {{scheduled_by}} +
+
+ +
+ +
+ {{ inventory_name }} +
+
+ +
+ +
+ {{ project_name }} +
+
+ +
+ +
{{ job.playbook }}
+
+ +
+ +
+ {{ credential_name }} +
+
+ +
+ +
+ {{ cloud_credential_name }} +
+
+ +
+ +
{{ job.forks }}
+
+ +
+ +
{{ job.limit }}
+
+ +
+ +
{{ verbosity }}
+
+ +
+ +
{{ job.job_tags }}
+
+ +
+ + +
+ +
+
+ + + +
+
+
+ + DETAILS + + + DETAILS + +
+
+ +
+
+
+
+
+ + + +
+
+
+
+ + +
+
+
+ + +
+ + + + + + + + +
PlaysStartedElapsed
+
+
+ + + + + + + + + + + + + + + + + + +
{{ play.name }}{{ play.created | date: 'HH:mm:ss' }}{{ play.elapsed }}
Waiting...
Loading...
No matching plays
+
+ +
+ + +
- - + + +
+
+
+
+ + +
+
+
+ +
+ + + + + + + + + +
TasksStartedElapsed
+
+
+ + + + + + + + + + + + + + + + + + + +
{{ task.name }}{{ task.created | date: 'HH:mm:ss' }}{{ task.elapsed }}
Waiting...
Loading...
No matching tasks
+
+ +
+ + +
+
+
+
+ + +
-
+
+ + +
+
+
+
+ + + + + + + + +
HostsItemMessage
+
+ +
+ + + + + + + + + + + + + + + + + +
{{ result.name }}{{ result.name }}{{ result.item }}{{ result.msg }}
Waiting...
Loading...
No matching host events
+
+ +
+ +
+
+ + + +
+ + + +
+ + +
+
+
+ + EVENT SUMMARY + + + EVENT SUMMARY + +
+
+ + - -
-
-
- -
- -
-
- - EVENT SUMMARY - - - EVENT SUMMARY - -
-
-
-
-
-
-
- - - -
-
-
-
- - -
-
-
-
- - - - - - - - -
HostsCompleted TasksActions
-
- + + +
-
- + +
+ +
+
+ +
+ + + +
+
+
STANDARD OUT
+
+ + + +
-
-
-
- + +
- +
+
diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index f63c3860f3..dd53943e88 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -161,9 +161,6 @@ @db-graph-axis: @default-border; @db-graph-axis-label: @default-interface-txt; -//job detail -@toggle-selected-text: #eeeeee; - // panel @panel-bg: @default-bg; @panel-border: @default-border; diff --git a/awx/ui/client/src/standard-out/log/standard-out-log.controller.js b/awx/ui/client/src/standard-out/log/standard-out-log.controller.js index 3316d088a9..ca3bff7947 100644 --- a/awx/ui/client/src/standard-out/log/standard-out-log.controller.js +++ b/awx/ui/client/src/standard-out/log/standard-out-log.controller.js @@ -21,6 +21,15 @@ export default ['$log', '$rootScope', '$scope', '$state', '$stateParams', 'Proce // Open up a socket for events depending on the type of job function openSockets() { + if ($state.current.name == 'jobDetail') { + $log.debug("socket watching on job_events-" + job_id); + $rootScope.event_socket.on("job_events-" + job_id, function() { + $log.debug("socket fired on job_events-" + job_id); + if (api_complete) { + event_queue++; + } + }); + } if ($state.current.name == 'adHocJobStdout') { $log.debug("socket watching on ad_hoc_command_events-" + job_id); $rootScope.adhoc_event_socket.on("ad_hoc_command_events-" + job_id, function() { @@ -108,7 +117,7 @@ export default ['$log', '$rootScope', '$scope', '$state', '$stateParams', 'Proce function getNextSection() { // get the next range of data from the API var start = loaded_sections[loaded_sections.length - 1].end, url; - url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (start + page_size); + url = $scope.stdoutEndpoint + '?format=json&start_line=' + start + '&end_line=' + (start + page_size); $('#stdoutMoreRowsBottom').fadeIn(); Rest.setUrl(url); Rest.get()