job details UX items, resolves #2045

awx/ui/client/src/helpers/JobDetail.js

@@ -934,7 +934,7 @@ export default
                 graph_data.push({
                     label: 'OK',
                     value: count.ok.length,
-                    color: '#60D66F'
+                    color: '#5CB85C'
                 });
             }
             if (count.changed.length > 0) {
@@ -982,15 +982,16 @@ export default
                     return d.label +': '+ Math.round((d.value/total)*100) + "%";
                 })
                 .y(function(d) { return d.value; })
-                .showLabels(true)
+                .showLabels(false)
-                .showLegend(false)
+                .showLegend(true)
                 .growOnHover(false)
                 .labelThreshold(0.01)
                 .tooltipContent(function(x, y) {
                     return '<p>'+x+'</p>'+ '<p>' +  Math.floor(y.replace(',','')) + ' HOSTS ' +  '</p>';
                 })
                 .color(colors);
-
+            job_detail_chart.legend.rightAlign(false);
+            job_detail_chart.legend.margin({top: 5, right: 450, left:0, bottom: 0});
             d3.select(element.find('svg')[0])
                 .datum(dataset)
                 .transition().duration(350)
@@ -1000,19 +1001,15 @@ export default
                     "font-style": "normal",
                     "font-weight":400,
                     "src": "url(/static/assets/OpenSans-Regular.ttf)",
-                    "width": 500,
+                    "width": 600,
                     "height": 300,
+                    "color": '#848992'
                 });
-
+            d3.select(element.find(".nv-noData")[0])
-            d3.select(element.find(".nv-label text")[0])
-                .attr("class", "HostSummary-graph--successful")
                 .style({
-                    "font-family": 'Open Sans',
+                    "text-anchor": 'start'
-                    "font-size": "16px",
-                    "text-transform" : "uppercase",
-                    "fill" : colors[0],
-                    "src": "url(/static/assets/OpenSans-Regular.ttf)"
                 });
+            /*
             d3.select(element.find(".nv-label text")[1])
                 .attr("class", "HostSummary-graph--changed")
                 .style({
@@ -1040,6 +1037,7 @@ export default
                     "fill" : colors[3],
                     "src": "url(/static/assets/OpenSans-Regular.ttf)"
                 });
+            */
                 return job_detail_chart;
         };
     }])

awx/ui/client/src/job-detail/host-summary/host-summary.partial.html

@@ -1,6 +1,6 @@
 
 <div id="hosts-summary-section" class="section">
-    <div class="JobDetail-instructions"><span class="badge">4</span> Please select a host below to view a summary of all associated tasks.</div>
+    <div class="JobDetail-instructions" ng-hide="hosts.length == 0"><span class="badge">4</span> Please select a host below to view a summary of all associated tasks.</div>
     <div class="JobDetail-searchHeaderRow" ng-hide="hosts.length == 0">
         <div class="JobDetail-searchContainer form-group">
             <div class="search-name">
@@ -33,7 +33,7 @@
         </table>
     </div>
 
-    <div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="getNextPage" scroll-threshold="10" time-threshold="500">
+    <div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="getNextPage" scroll-threshold="10" time-threshold="500" ng-hide="hosts.length == 0">
         <table class="table">
             <tbody>
                 <tr class="List-tableRow" ng-repeat="host in hosts track by $index" id="{{ host.id }}" ng-class-even="'List-tableRow--evenRow'" ng-class-odd="'List-tableRow--oddRow'">

awx/ui/client/src/job-detail/job-detail.block.less

@@ -152,7 +152,20 @@
     border: 1px solid @default-link;
     color: @default-bg;
 }
-
+.JobDetail .nvd3.nv-noData{
+    color: @default-interface-txt;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-family: 'Open Sans', sans-serif;
+}
+.JobDetail .nv-series{
+    padding-right: 30px;
+    display: block;
+}
+.JobDetail-instructions .badge{
+    background-color: @default-list-header-bg;
+    color: @default-interface-txt;
+}
 .JobDetail-tableToggle--left{
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
@@ -196,6 +209,8 @@
 }
 
 .JobDetail-stdoutActionButton--active{
+    display: none;
+    visibility: hidden;
     flex:none;
     width:0px;
     padding-right: 0px;

awx/ui/client/src/job-detail/job-detail.partial.html

@@ -171,7 +171,7 @@
 
                 <div id="job-detail-details">
                     <div id="play-section">
-                        <div class="JobDetail-instructions"><span class="badge">1</span> Please select from a play below to view its associated tasks.</div>
+                        <div class="JobDetail-instructions"><span class="badge">1.</span> Please select from a play below to view its associated tasks.</div>
                         <div class="JobDetail-searchHeaderRow">
                             <div class="JobDetail-searchContainer form-group">
                                 <div class="search-name">
@@ -230,7 +230,7 @@
                     <!-- end of plays section of details-->
 
                     <div id="task-section" class="section JobDetail-tasks" >
-                        <div class="JobDetail-instructions"><span class="badge">2</span> Please select a task below to view its associated hosts</div>
+                        <div class="JobDetail-instructions"><span class="badge">2.</span> Please select a task below to view its associated hosts</div>
                         <div class="JobDetail-searchHeaderRow">
                             <div class="JobDetail-searchContainer form-group">
                                 <div class="search-name">
@@ -314,7 +314,7 @@
                     <!--end of tasks section of details-->
 
                     <div id="task-hosts-section" class="section">
-                        <div class="JobDetail-instructions"><span class="badge">3</span> Please select a host below to view associated task details.</div>
+                        <div class="JobDetail-instructions"><span class="badge">3.</span> Please select a host below to view associated task details.</div>
                         <div class="JobDetail-searchHeaderRow">
                             <div class="JobDetail-searchContainer form-group">
                                 <div class="search-name">