From 92eb56e1d3559d0d794d7d1908eb3b838384d949 Mon Sep 17 00:00:00 2001
From: chouseknecht <chouse@ansible.com>
Date: Wed, 7 May 2014 15:01:14 -0400
Subject: [PATCH] Changed host summary section on job detail page to use
 badges.

---
 awx/ui/static/js/helpers/JobDetail.js  | 10 +++++--
 awx/ui/static/less/job-details.less    | 37 +++++-------------------
 awx/ui/static/partials/job_detail.html | 39 ++++++++++++++++----------
 3 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js
index a64411f023..e89392f480 100644
--- a/awx/ui/static/js/helpers/JobDetail.js
+++ b/awx/ui/static/js/helpers/JobDetail.js
@@ -216,7 +216,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
                     start: scope.job_status.started,
                     end: scope.job_status.finished
                 });
-                scope.job_status.status = (event.failed) ? 'error' : 'successful';
+                scope.job_status.status = (event.failed) ? 'failed' : 'successful';
                 scope.job_status.status_class = "";
             }
         });
@@ -740,7 +740,13 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
 }])
 
 .factory('DrawGraph', [ function() {
-
+    /*var salesData=[
+        {label:"OK", color:"#9ED89E"},
+        {label:"Changed", color:"#DC3912"},
+        {label:"Failed", color:"#DA4D49;"},
+        {label:"Skipped", color:"#D4D4D4"},
+        {label:"Unreachable", color:""}
+    ];*/
 }]);
 
 
diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index 56bb73f904..77831ffcbc 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -13,32 +13,6 @@
     }
 }
 
-.inline-block {
-    display: inline-block;
-    vertical-align: top;
-}
-
-#job-status {
-
-}
-
-.job-detail-table {
-    
-    tbody>tr>td {
-        border-top-color: @well;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-    thead>tr>th {
-        padding-top: 0;
-        padding-bottom: 0;
-        font-size: 14px;
-    }
-    tbody>tr.active, tbody>tr.active>td {
-        background-color: #EDF2F2;
-    }
-}
-
 .job_summary {
     .table {
         margin-bottom: 0;
@@ -86,6 +60,9 @@
 .skipped-hosts, .no-matching-hosts {
     background-color: #D4D4D4;
 }
+.unreachable-hosts {
+    background-color: @black;
+}
 
 .job_well {
     padding: 8px;
@@ -96,9 +73,6 @@
             box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
 }
 
-
-
-
 #summary-button {
     position: absolute;
     top: 5px;
@@ -147,7 +121,7 @@
 }
 
 #breadcrumb-container {
-    padding-right: 10px;
+    padding-right: 15px;
 }
 
 #job-detail-container {
@@ -275,6 +249,9 @@
     .name {
         word-break: break-all;
     }
+    .badge {
+        font-size: 12px;
+    }
 }
 
 .mCSB_container {
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index 29efa0e42d..d21248d26a 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -6,7 +6,7 @@
                 <div class="nav-path">
                     <ul class="breadcrumb" id="breadcrumb-list">
                         <li><a href="/#/jobs">Jobs</a></li>
-                        <li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}" aw-tool-tip="View the job template" data-placement="top">{{ job_template_name }}</a></li>
+                        <li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a></li>
                     </ul>
                 </div>
             </div>
@@ -35,9 +35,9 @@
 
                     <div class="row status-row">
                         <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Project</div>
-                        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ project_url }}" aw-tool-tip="View the project" data-placement="top">{{ project_name }}</a></div>
+                        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a></div>
                         <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Inventory</div>
-                        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ inventory_url }}" aw-tool-tip="View the inventory" data-placement="top">{{ inventory_name }}</a></div>
+                        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a></div>
                     </div>
 
                     <div id="job-detail-tables">
@@ -74,7 +74,7 @@
                                 </div>
                             </div>
                             <div id="tasks-table-detail" aw-custom-scroll class="table-detail">
-                                <div class="row cursor-pointer" ng-repeat="task in tasks | filter:{ play_id: activePlay }" ng-class="task.taskActiveClass"
+                                <div class="row cursor-pointer" ng-repeat="task in taskList = (tasks | filter:{ play_id: activePlay })" ng-class="task.taskActiveClass"
                                     ng-click="selectTask(task.id)">
                                     <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
@@ -87,6 +87,11 @@
                                         <div class="status-bar"><div class="successful-hosts inner-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="{{ task.successfulStyle }}">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="{{ task.changedStyle }}">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="{{ task.skippedStyle }}">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="{{ task.failedStyle }}">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
                                     </div>
                                 </div>
+                                <div class="row" ng-show="taskList.length === 0">
+                                    <div class="col-lg-12">
+                                        <div class="loading-info">No tasks found for selected play</div>
+                                    </div>
+                                </div>
                             </div>
                         </div><!-- section -->
 
@@ -141,22 +146,22 @@
                         </div>
                         <div class="table-header">
                             <div class="row">
-                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Host</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">OK</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Change</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Dark</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Fail</div>
+                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">Host</div>
+                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Events</div>
                             </div>
                         </div>
                         <div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
                                 data-on-total-scroll-back="HostSummaryOnTotalScrollBack">
                             <div class="row" ng-repeat="host in hosts" id="{{ host.id }}">
-                                <div class="name col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}"
-                                    aw-tool-tip="View host" data-placement="top">{{ host.name }}</a></div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.ok }}</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.changed }}</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.unreachable }}</div>
-                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.failed }}</div>
+                                <div class="name col-lg-8 col-md-8 col-sm-8 col-xs-8"><a href="/#/home/hosts/?id={{ host.id }}"
+                                    aw-tool-tip="Click to edit host" data-placement="top">{{ host.name }}</a>
+                                </div>
+                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
+                                    <a href="" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
+                                    <a href="" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
+                                    <a href="" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
+                                    <a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
+                                </div>
                             </div>
                             <div class="row" ng-show="hosts.length === 0">
                                 <div class="col-lg-12">
@@ -165,6 +170,10 @@
                             </div>
                         </div>
                     </div><!-- section -->
+
+                    <div id="graph-section">
+
+                    </div><!-- graph section -->
                 </div>
             </div><!-- col-md-5 -->