diff --git a/awx/ui/client/legacy-styles/job-details.less b/awx/ui/client/legacy-styles/job-details.less index 621e0267ca..a3044945c5 100644 --- a/awx/ui/client/legacy-styles/job-details.less +++ b/awx/ui/client/legacy-styles/job-details.less @@ -166,9 +166,6 @@ .unreachable-hosts-color { color: @unreachable-hosts-color; } - .missing-hosts { - color: transparent; - } .job_well { padding: 8px; @@ -197,9 +194,6 @@ margin-bottom: 0; } - #job-detail-tables { - margin-top: 20px; - } #job_options { height: 100px; @@ -208,7 +202,7 @@ } #job_plays, #job_tasks { - height: 150px; + // height: 150px; overflow-y: auto; overflow-x: none; } @@ -224,7 +218,6 @@ position: relative; padding-left: 15px; padding-right: 7px; - width: 58.33333333%; .well { overflow: hidden; } @@ -292,9 +285,6 @@ .row:first-child { border: none; } - .active { - background-color: @active-color; - } .loading-info { padding-top: 5px; padding-left: 3px; @@ -330,7 +320,7 @@ } #tasks-table-detail { - height: 150px; + // height: 150px; } #play-section { diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less index 2dcac015c8..e52ca73ec0 100644 --- a/awx/ui/client/legacy-styles/lists.less +++ b/awx/ui/client/legacy-styles/lists.less @@ -32,6 +32,7 @@ table, tbody { background-color: @list-header-bg; padding-left: 15px; padding-right: 15px; + border-bottom-width:0px!important; } .List-tableHeader:first-of-type { @@ -69,6 +70,7 @@ table, tbody { .List-tableCell { padding-left: 15px; padding-right: 15px; + border-top:0px!important; } .List-actionButtonCell { diff --git a/awx/ui/client/src/helpers/JobDetail.js b/awx/ui/client/src/helpers/JobDetail.js index 3e54f37a5d..d5c511e0f5 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 = 'active'; + scope.jobData.plays[scope.activePlay].playActiveClass = 'List-tableRow--selected'; } } }; @@ -265,7 +265,7 @@ export default } if (newActiveTask) { scope.activeTask = newActiveTask; - scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'active'; + scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'List-tableRow--selected'; } } }; @@ -700,12 +700,12 @@ export default task.missingPct = task.missingPct - diff; } } - task.successfulStyle = (task.successfulPct > 0) ? { 'display': 'inline-block', 'width': task.successfulPct + "%" } : { 'display': 'none' }; - task.changedStyle = (task.changedPct > 0) ? { 'display': 'inline-block', 'width': task.changedPct + "%" } : { 'display': 'none' }; - task.skippedStyle = (task.skippedPct > 0) ? { 'display': 'inline-block', 'width': task.skippedPct + "%" } : { 'display': 'none' }; - task.failedStyle = (task.failedPct > 0) ? { 'display': 'inline-block', 'width': task.failedPct + "%" } : { 'display': 'none' }; - task.unreachableStyle = (task.unreachablePct > 0) ? { 'display': 'inline-block', 'width': task.unreachablePct + "%" } : { 'display': 'none' }; - task.missingStyle = (task.missingPct > 0) ? { 'display': 'inline-block', 'width': task.missingPct + "%" } : { 'display': 'none' }; + task.successfulStyle = (task.successfulPct > 0) ? { 'display': 'inline-block' }: { 'display': 'none' }; + task.changedStyle = (task.changedPct > 0) ? { 'display': 'inline-block'} : { 'display': 'none' }; + task.skippedStyle = (task.skippedPct > 0) ? { 'display': 'inline-block' } : { 'display': 'none' }; + task.failedStyle = (task.failedPct > 0) ? { 'display': 'inline-block' } : { 'display': 'none' }; + task.unreachableStyle = (task.unreachablePct > 0) ? { 'display': 'inline-block' } : { 'display': 'none' }; + task.missingStyle = (task.missingPct > 0) ? { 'display': 'inline-block' } : { 'display': 'none' }; }; }]) @@ -793,7 +793,7 @@ export default scope.selectedPlay = id; scope.plays.forEach(function(play, idx) { if (play.id === scope.selectedPlay) { - scope.plays[idx].playActiveClass = 'active'; + scope.plays[idx].playActiveClass = 'List-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 = 'active'; + scope.tasks[idx].taskActiveClass = 'List-tableRow--selected'; } else { scope.tasks[idx].taskActiveClass = ''; @@ -1155,21 +1155,21 @@ export default } if (scope.host_summary.changed) { graph_data.push({ - label: 'Changed', + label: 'CHANGED', value: scope.host_summary.changed, color: '#FF9900' }); } if (scope.host_summary.unreachable) { graph_data.push({ - label: 'Unreachable', + label: 'UNREACHABLE', value: scope.host_summary.unreachable, color: '#FF0000' }); } if (scope.host_summary.failed) { graph_data.push({ - label: 'Failed', + label: 'FAILED', value: scope.host_summary.failed, color: '#ff5850' }); @@ -1180,148 +1180,88 @@ export default total_count += graph_data[gd_obj].value; } scope.total_count_for_graph = total_count; - // Adjust the size - width = $('#job-summary-container .job_well').width(); - height = $('#job-summary-container .job_well').height() - $('#summary-well-top-section').height() - $('#graph-section .header').outerHeight() - 80; - svg_radius = Math.min(width, height); - svg_width = width; - svg_height = height; - if (svg_height > 0 && svg_width > 0) { - if (!resize && $('#graph-section svg').length > 0) { - // Donut3D.transition("completedHostsDonut", graph_data, Math.floor(svg_radius * 0.50), Math.floor(svg_radius * 0.25), 18, 0.4); - DonutChart({ - target: '#graph-section', - height: height, - width: width, - data: graph_data, - radius: svg_radius - }); - } - else { - if ($('#graph-section svg').length > 0) { - $('#graph-section svg').remove(); - } - // svg = d3.select("#graph-section").append("svg").attr("width", svg_width).attr("height", svg_height); - // svg.append("g").attr("id","completedHostsDonut"); - // Donut3D.draw("completedHostsDonut", graph_data, Math.floor(svg_width / 2), Math.floor(svg_height / 2) - 35, Math.floor(svg_radius * 0.50), Math.floor(svg_radius * 0.25), 18, 0.4); - DonutChart({ - target: '#graph-section', - height: height, - width: width, - data: graph_data, - radius: svg_radius - }); - $('#graph-section .header .legend').show(); - } - } + DonutChart({ + data: graph_data + }); }; }]) .factory('DonutChart', [function() { return function(params) { - var target = params.target, - height = Math.max(params.height, 250), - width = Math.max(params.width, 250), - dataset = params.data, - outerRadius = Math.min(width, height) / 2, - innerRadius = (outerRadius/3), - svg, arc, pie, legend, - tooltip, path, - legendRectSize = 18, - legendSpacing = 4; + var dataset = params.data, + element = $("#graph-section"), + colors, total,job_detail_chart; - svg = d3.select(target) - .append('svg') - .data([dataset]) - .attr('width', width) - .attr('height', height) - .append('g') - .attr('transform', 'translate(' + (width / 2) + - ',' + (height / 2) + ')'); - - arc = d3.svg.arc() - .innerRadius(outerRadius - innerRadius) - .outerRadius(outerRadius); - - pie = d3.layout.pie() - .value(function(d) { return d.value; }) - .sort(function() {return null; }); - - tooltip = d3.select(target) - .append('div') - .attr('class', 'donut-tooltip'); - - tooltip.append('div') - .attr('class', 'donut-tooltip-inner'); - - path = svg.selectAll('path') - .data(pie(dataset)) - .enter() - .append('path') - .attr('d', arc) - .attr('fill', function(d) { - return d.data.color; - }); - - path.on('mouseenter', function(d) { - var total = d3.sum(dataset.map(function(d) { + colors = ['#60D66F', '#FF9900','#FF0000','#ff5850']; + total = d3.sum(dataset.map(function(d) { return d.value; - })); + })); + job_detail_chart = nv.models.pieChart() + .margin({bottom: 15}) + .x(function(d) { + return d.label +': '+ Math.round((d.value/total)*100) + "%"; + }) + .y(function(d) { return d.value; }) + .showLabels(true) + .showLegend(false) + .growOnHover(false) + .labelThreshold(0.01) + .tooltipContent(function(x, y) { + return '

'+x+'

'+ '

' + Math.floor(y.replace(',','')) + ' HOSTS ' + '

'; + }) + .color(colors); - var label; - if (d.data.value === 1) { - label = " host "; - } else { - label = " hosts "; - } - var percent = Math.round(1000 * d.data.value / total) / 10; - tooltip.select('.donut-tooltip-inner').html(d.data.value + label + " (" + - percent + "%) " + d.data.label + "."); - //.attr('style', 'color:white;font-family:'); - tooltip.style('display', 'block'); - }); - - path.on('mouseleave', function() { - tooltip.style('display', 'none'); - }); - - path.on('mousemove', function() { - // d3.mouse() gives the coordinates of hte mouse, then add - // some offset to provide breathing room for hte tooltip - // based on the dimensions of the donut - tooltip.style('top', (d3.mouse(this)[1] + (height/5) + 'px')) - .style('left', (d3.mouse(this)[0] + (width/3) + 'px')); - }); - - legend = svg.selectAll('.legend') - .data(pie(dataset)) - .enter() - .append('g') - .attr('class', 'legend') - .attr('transform', function(d, i) { - var height = legendRectSize + legendSpacing; - var offset = height * dataset.length / 2; - var horz = -2 * legendRectSize; - var vert = i * height - offset; - return 'translate(' + horz + ',' + vert + ')'; - }); - - legend.append('rect') - .attr('width', legendRectSize) - .attr('height', legendRectSize) - .attr('fill', function(d) { - return d.data.color; - }) - .attr('stroke', function(d) { - return d.data.color; - }); - - legend.append('text') - .attr('x', legendRectSize + legendSpacing) - .attr('y', legendRectSize - legendSpacing) - .text(function(d) { - return d.data.label; - }); + d3.select(element.find('svg')[0]) + .datum(dataset) + .transition().duration(350) + .call(job_detail_chart) + .style({ + "font-family": 'Open Sans', + "font-style": "normal", + "font-weight":400, + "src": "url(/static/assets/OpenSans-Regular.ttf)" + }); + d3.select(element.find(".nv-label text")[0]) + .attr("class", "DashboardGraphs-hostStatusLabel--successful") + .style({ + "font-family": 'Open Sans', + "text-anchor": "start", + "font-size": "16px", + "text-transform" : "uppercase", + "fill" : '#3CB878', + "src": "url(/static/assets/OpenSans-Regular.ttf)" + }); + d3.select(element.find(".nv-label text")[1]) + .attr("class", "DashboardGraphs-hostStatusLabel--failed") + .style({ + "font-family": 'Open Sans', + "text-anchor" : "end !imporant", + "font-size": "16px", + "text-transform" : "uppercase", + "fill" : "#FF9900", + "src": "url(/static/assets/OpenSans-Regular.ttf)" + }); + d3.select(element.find(".nv-label text")[2]) + .attr("class", "DashboardGraphs-hostStatusLabel--successful") + .style({ + "font-family": 'Open Sans', + "text-anchor" : "end !imporant", + "font-size": "16px", + "text-transform" : "uppercase", + "fill" : "#FF0000", + "src": "url(/static/assets/OpenSans-Regular.ttf)" + }); + d3.select(element.find(".nv-label text")[3]) + .attr("class", "DashboardGraphs-hostStatusLabel--failed") + .style({ + "font-family": 'Open Sans', + "text-anchor" : "end !imporant", + "font-size": "16px", + "text-transform" : "uppercase", + "fill" : "#ff5850", + "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 c25f167be1..5e4ad5ab77 100644 --- a/awx/ui/client/src/job-detail/job-detail.block.less +++ b/awx/ui/client/src/job-detail/job-detail.block.less @@ -3,9 +3,13 @@ @import '../shared/branding/colors.less'; @import '../shared/branding/colors.default.less'; +.JobDetail-leftSide{ + width: 50%; +} + .JobDetail-panelHeader{ - height: 50px; display: flex; + height: 30px; } .JobDetail-panelHeaderText{ @@ -52,7 +56,71 @@ flex: 1 0 auto; } +.JobDetail-resultRow--variables{ + width: 90%; + display: block; +} + .JobDetail-resultRowText{ width: 40%; flex: 1 0 auto; + padding:0px; +} + +.JobDetail-searchHeaderRow{ + display: flex; + flex-wrap: wrap; + flex-direction: row; + height: 50px; + margin-top: 25px; +} + +.JobDetail-searchContainer{ + flex: 1 0 auto; +} + +.JobDetail-tableToggleContainer{ + flex: 1 0 auto; + display: flex; + justify-content: flex-end; +} + +.JobDetail-tableToggle{ + padding-left:10px; + padding-right: 10px; + border: 1px solid @default-second-border; +} + +.JobDetail-tableToggle.active{ + background-color: @default-link; + border: 1px solid @default-link; + color: #eeeeee; +} + +.JobDetail-tableToggle--left{ + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.JobDetail-tableToggle--right{ + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.JobDetail-searchInput{ + border-radius: 5px !important; +} + +.JobDetail-tableHeader:last-of-type{ + text-align:justify; +} + +.JobDetail-statusIcon{ + padding-right: 10px; + padding-left: 10px; +} + +.JobDetail-graphSection{ + height: 320px; + width:100%; } 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 6432e68849..8601c7651a 100644 --- a/awx/ui/client/src/job-detail/job-detail.controller.js +++ b/awx/ui/client/src/job-detail/job-detail.controller.js @@ -19,7 +19,7 @@ export default 'EventViewer', 'DeleteJob', 'PlaybookRun', 'HostEventsViewer', 'LoadPlays', 'LoadTasks', 'LoadHosts', 'HostsEdit', 'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels', - 'EditSchedule', + 'EditSchedule', 'ParseTypeChange', function( $location, $rootScope, $filter, $scope, $compile, $stateParams, $log, ClearScope, GetBasePath, Wait, Rest, ProcessErrors, @@ -28,7 +28,7 @@ export default SetTaskStyles, DigestEvent, UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit, ParseVariableString, GetChoices, fieldChoices, - fieldLabels, EditSchedule + fieldLabels, EditSchedule, ParseTypeChange ) { ClearScope(); @@ -41,7 +41,7 @@ export default job_type_options; scope.plays = []; - + scope.parseType = 'yaml'; scope.previousTaskFailed = false; scope.$watch('job_status', function(job_status) { @@ -201,6 +201,8 @@ export default scope.haltEventQueue = false; scope.processing = false; scope.lessStatus = false; + scope.lessDetail = false; + scope.lessEvents = false; scope.host_summary = {}; scope.host_summary.ok = 0; @@ -555,7 +557,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 = 'active'; + scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'List-tableRow--selected'; } scope.$emit('LoadHosts'); }) @@ -675,7 +677,7 @@ export default scope.host_summary.failed; }); if (scope.activePlay && scope.jobData.plays[scope.activePlay]) { - scope.jobData.plays[scope.activePlay].playActiveClass = 'active'; + scope.jobData.plays[scope.activePlay].playActiveClass = 'List-tableRow--selected'; } scope.$emit('LoadTasks', events_url); }) @@ -804,6 +806,7 @@ export default return true; }); //scope.setSearchAll('host'); + ParseTypeChange({ scope: scope, field_id: 'pre-formatted-variables' }); scope.$emit('LoadPlays', data.related.job_events); }) .error(function(data, status) { @@ -839,7 +842,7 @@ export default $('.overlay').hide(); $('#summary-button').hide(); $('#hide-summary-button').hide(); - $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" }); + // $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" }); $('#job-summary-container .job_well').css({ 'box-shadow': 'none', 'height': 'auto' @@ -859,12 +862,12 @@ export default // Detail table height adjusting. First, put page height back to 'normal'. $('#plays-table-detail').height(80); //$('#plays-table-detail').mCustomScrollbar("update"); - $('#tasks-table-detail').height(120); + // $('#tasks-table-detail').height(120); //$('#tasks-table-detail').mCustomScrollbar("update"); $('#hosts-table-detail').height(150); //$('#hosts-table-detail').mCustomScrollbar("update"); height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - - $('#job-detail-container').outerHeight() - $('#job-detail-footer').outerHeight() - 20; + $('#job-detail-container').outerHeight() - 20; if (height > 15) { // there's a bunch of white space at the bottom, let's use it $('#plays-table-detail').height(80 + (height * 0.10)); @@ -872,10 +875,9 @@ export default $('#hosts-table-detail').height(150 + (height * 0.70)); } // Summary table height adjusting. - height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - - $('#hosts-summary-section .table-header').outerHeight() - - $('#summary-search-section').outerHeight() - 20; - $('#hosts-summary-table').height(height); + height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .JobDetail-searchHeaderRow').outerHeight() - + $('#hosts-summary-section .table-header').outerHeight() - 20; + // $('#hosts-summary-table').height(height); //$('#hosts-summary-table').mCustomScrollbar("update"); scope.$emit('RefreshCompleted'); }; @@ -989,6 +991,28 @@ export default } }; + scope.toggleLessDetail = function() { + if (!scope.lessDetail) { + $('#job-detail-details').slideUp(200); + scope.lessDetail = true; + } + else { + $('#job-detail-details').slideDown(200); + scope.lessDetail = false; + } + }; + + scope.toggleLessEvents = function() { + if (!scope.lessEvents) { + $('#events-summary').slideUp(200); + scope.lessEvents = true; + } + else { + $('#events-summary').slideDown(200); + scope.lessEvents = false; + } + }; + scope.filterPlayStatus = function() { scope.search_play_status = (scope.search_play_status === 'all') ? 'failed' : 'all'; if (!scope.liveEventProcessing || scope.pauseLiveEvents) { 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 a6b06ef6d8..57c439c7c3 100644 --- a/awx/ui/client/src/job-detail/job-detail.partial.html +++ b/awx/ui/client/src/job-detail/job-detail.partial.html @@ -1,8 +1,8 @@
-
-
+
+
RESULTS @@ -21,9 +21,9 @@
-
-
Previous Task Failed
-
- -
{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}
-
- -
- -
{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}
-
- -
- -
{{ job_status.elapsed }}
-
- -
@@ -68,11 +52,21 @@
+
+ +
{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}
+
+
{{ job_type }}
+
+ +
{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}
+
+
@@ -80,6 +74,11 @@
+
+ +
{{ job_status.elapsed }}
+
+
@@ -140,66 +139,65 @@
{{ job.job_tags }}
-
+
-
-
{{ variables }}
- -
+
+
-
-
+
+
+ + DETAILS + + + DETAILS + +
-
-
Plays
-
-
-
-
- -
- - -
-
+
+
+
+
+
+ + +
-
-
- - -
+
+
+
+ +
-
+
- - - - + + +
StartedElapsedStatusNamePlaysStartedElapsed
- +
- - - + + - - + @@ -213,31 +211,24 @@
{{ play.created | date: 'HH:mm:ss' }} + {{ play.name }}{{ play.created | date: 'HH:mm:ss' }}{{ play.elapsed }}{{ play.name }}
Waiting...
- -
+ +
+ -
+
-
-
Tasks
-
-
-
-
- -
- - -
-
-
-
-
- - -
-
+
+
+
+ + + +
+
+
+
+ +
@@ -246,46 +237,46 @@ - - - - + + +
StartedElapsedStatusName - Tasks + StartedElapsed
- +
- - - + + - - -
{{ task.created | date: 'HH:mm:ss' }} + {{ task.name }}{{ task.created | date: 'HH:mm:ss' }}{{ task.elapsed }}{{ task.name }}