Job detail page refactor

Changed 'successful' to 'OK' throughout the page. Also fixed status tool tip text on unreachable hosts to be 'Unreachable' rather than 'failed'. Fixed tool tips on Plays and Tasks so that they updated in sync with status changes.

awx/ui/static/js/controllers/JobDetail.js

@@ -174,15 +174,42 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
-                    var idx, event;
+                    var idx, event, status, status_text;
                     if (data.results.length > 0) {
                         lastEventId =  data.results[0].id;
                     }
                     for (idx=data.results.length - 1; idx >= 0; idx--) {
                         event = data.results[idx];
+                        if (event.event === "runner_on_skipped") {
+                            status = 'skipped';
+                        }
+                        else if (event.event === "runner_on_unreachable") {
+                            status = 'unreachable';
+                        }
+                        else {
+                            status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                        }
+                        switch(status) {
+                            case "successful":
+                                status_text = 'OK';
+                                break;
+                            case "changed":
+                                status_text = "Changed";
+                                break;
+                            case "failed":
+                                status_text = "Failed";
+                                break;
+                            case "unreachable":
+                                status = "failed";
+                                status_text = "Unreachable";
+                                break;
+                            case "skipped":
+                                status_text = "Skipped";
+                        }
                         task.hostResults[event.id] = {
                             id: event.id,
-                            status: (event.event === "runner_on_skipped") ? 'skipped' : (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
+                            status: status,
+                            status_text: status_text,
                             host_id: event.host,
                             task_id: event.parent,
                             name: event.event_data.host,
@@ -221,7 +248,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                         scope.activeTask = data.results[0].id;
                     }
                     data.results.forEach(function(event, idx) {
-                        var end, elapsed;
+                        var end, elapsed, status, status_text;
 
                         if (play.firstTask === undefined  || play.firstTask === null) {
                             play.firstTask = event.id;
@@ -247,11 +274,16 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                             elapsed = '00:00:00';
                         }
 
+                        status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                        status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
+
                         play.tasks[event.id] = {
                             id: event.id,
                             play_id: scope.activePlay,
                             name: event.name,
-                            status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                            status: status,
+                            status_text: status_text,
+                            status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
                             created: event.created,
                             modified: event.modified,
                             finished: end,
@@ -309,9 +341,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                     scope.activePlay = data.results[0].id;
                 }
                 data.results.forEach(function(event, idx) {
-                    var status, start, end, elapsed, ok, changed, failed, skipped;
+                    var status, status_text, start, end, elapsed, ok, changed, failed, skipped;
 
                     status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                    status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
                     start = event.started;
 
                     if (idx < data.length - 1) {
@@ -338,12 +371,13 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                         created: start,
                         finished: end,
                         status: status,
+                        status_text: status_text,
+                        status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
                         elapsed: elapsed,
                         hostCount: 0,
                         fistTask: null,
                         playActiveClass: '',
                         unreachableCount: (event.unreachable_count) ? event.unreachable_count : 0,
-                        status_text: status,
                         tasks: {}
                     };
 
@@ -438,7 +472,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 scope.job_status.status = (data.status === 'waiting' || data.status === 'new') ? 'pending' : data.status;
                 scope.job_status.started = data.started;
                 scope.job_status.status_class = ((data.status === 'error' || data.status === 'failed') && data.job_explanation) ? "alert alert-danger" : "";
-                scope.job_status.finished = data.finished;
+                scope.job_status.finished = (data.status === 'successful' || data.status === 'failed' || data.status === 'error') ? data.finished : null;
                 scope.job_status.explanation = data.job_explanation;
 
                 if (data.started && data.finished) {
@@ -672,9 +706,37 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 Rest.get()
                     .success(function(data) {
                         data.results.forEach(function(row) {
+                            var status, status_text;
+                            if (row.event === "runner_on_skipped") {
+                                status = 'skipped';
+                            }
+                            else if (row.event === "runner_on_unreachable") {
+                                status = 'unreachable';
+                            }
+                            else {
+                                status = (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful';
+                            }
+                            switch(status) {
+                                case "successful":
+                                    status_text = 'OK';
+                                    break;
+                                case "changed":
+                                    status_text = "Changed";
+                                    break;
+                                case "failed":
+                                    status_text = "Failed";
+                                    break;
+                                case "unreachable":
+                                    status = "failed";
+                                    status_text = "Unreachable";
+                                    break;
+                                case "skipped":
+                                    status_text = "Skipped";
+                            }
                             scope.hostResults.push({
                                 id: row.id,
-                                status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
+                                status: status,
+                                status_text: status_text,
                                 host_id: row.host,
                                 task_id: row.parent,
                                 name: row.event_data.host,
@@ -716,9 +778,37 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 Rest.get()
                     .success(function(data) {
                         data.results.forEach(function(row) {
+                            var status, status_text;
+                            if (row.event === "runner_on_skipped") {
+                                status = 'skipped';
+                            }
+                            else if (row.event === "runner_on_unreachable") {
+                                status = 'unreachable';
+                            }
+                            else {
+                                status = (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful';
+                            }
+                            switch(status) {
+                                case "successful":
+                                    status_text = 'OK';
+                                    break;
+                                case "changed":
+                                    status_text = "Changed";
+                                    break;
+                                case "failed":
+                                    status_text = "Failed";
+                                    break;
+                                case "unreachable":
+                                    status = "failed";
+                                    status_text = "Unreachable";
+                                    break;
+                                case "skipped":
+                                    status_text = "Skipped";
+                            }
                             scope.hostResults.unshift({
                                 id: row.id,
-                                status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
+                                status: status,
+                                status_text: status_text,
                                 host_id: row.host,
                                 task_id: row.parent,
                                 name: row.event_data.host,
@@ -761,7 +851,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 Rest.get()
                     .success(function(data) {
                         data.results.forEach(function(event, idx) {
-                            var end, elapsed;
+                            var end, elapsed, status, status_text;
+
                             if (idx < data.length - 1) {
                                 // end date = starting date of the next event
                                 end = data[idx + 1].created;
@@ -785,11 +876,17 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                             else {
                                 elapsed = '00:00:00';
                             }
+
+                            status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                            status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
+
                             scope.tasks.push({
                                 id: event.id,
                                 play_id: scope.activePlay,
                                 name: event.name,
-                                status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                                status: status,
+                                status_text: status_text,
+                                status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
                                 created: event.created,
                                 modified: event.modified,
                                 finished: end,
@@ -843,7 +940,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 Rest.get()
                     .success(function(data) {
                         data.results.forEach(function(event, idx) {
-                            var end, elapsed;
+                            var end, elapsed, status, status_text;
+
                             if (idx < data.length - 1) {
                                 // end date = starting date of the next event
                                 end = data[idx + 1].created;
@@ -867,16 +965,22 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                             else {
                                 elapsed = '00:00:00';
                             }
+
+                            status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                            status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
+
                             scope.tasks.unshift({
                                 id: event.id,
                                 play_id: scope.activePlay,
                                 name: event.name,
                                 status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                                status_text: ( (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK' ),
+                                status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
                                 created: event.created,
                                 modified: event.modified,
                                 finished: end,
                                 elapsed: elapsed,
-                                hostCount: event.host_count,          // hostCount,
+                                hostCount: event.host_count,
                                 reportedHosts: event.reported_hosts,
                                 successfulCount: event.successful_count,
                                 failedCount: event.failed_count,

awx/ui/static/js/helpers/JobDetail.js

@@ -46,7 +46,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
     return function(params) {
 
         var scope = params.scope,
-            event = params.event;
+            event = params.event,
+            status, status_text;
 
         $log.debug('processing event: ' + event.id);
 
@@ -59,16 +60,19 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                 break;
 
             case 'playbook_on_play_start':
+                status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
                 scope.jobData.plays[event.id] = {
                     id: event.id,
                     name: event.play,
                     created: event.created,
-                    status: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
+                    status: status,
+                    status_text: status_text,
                     elapsed: '00:00:00',
                     hostCount: 0,
                     fistTask: null,
                     unreachableCount: 0,
-                    status_text: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
+                    status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
                     tasks: {}
                 };
                 if (scope.activePlay) {
@@ -109,7 +113,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     failed: true,
                     changed: false,
                     modified: event.modified,
-                    status_text: 'failed- no hosts matched'
+                    no_hosts: true
                 });
                 break;
 
@@ -219,13 +223,19 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
 .factory('AddNewTask', ['DrawGraph', 'UpdatePlayStatus', function(DrawGraph, UpdatePlayStatus) {
     return function(params) {
         var scope = params.scope,
-            event = params.event;
+            event = params.event,
+            status, status_text;
+
+        status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+        status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
 
         scope.jobData.plays[scope.activePlay].tasks[event.id] = {
             id: event.id,
             play_id: event.parent,
             name: event.event_display,
-            status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+            status: status,
+            status_text: status_text,
+            status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
             created: event.created,
             modified: event.modified,
             hostCount: scope.jobData.plays[scope.activePlay].hostCount,
@@ -266,7 +276,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
     };
 }])
 
-.factory('UpdateJobStatus', ['GetElapsed', 'Empty', function(GetElapsed, Empty) {
+.factory('UpdateJobStatus', ['GetElapsed', 'Empty', 'JobIsFinished', function(GetElapsed, Empty, JobIsFinished) {
     return function(params) {
         var scope = params.scope,
             failed = params.failed,
@@ -277,7 +287,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             scope.job_status.status !== 'canceled') {
             scope.job_status.status = 'failed';
         }
-        if (!Empty(modified)) {
+        if (JobIsFinished(scope) && !Empty(modified)) {
             scope.job_status.finished = modified;
         }
         if (!Empty(started) && Empty(scope.job_status.started)) {
@@ -301,29 +311,32 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             id = params.play_id,
             modified = params.modified,
             no_hosts = params.no_hosts,
-            status_text = params.status_text,
             play;
 
         if (scope.jobData.plays[id] !== undefined) {
             play = scope.jobData.plays[scope.activePlay];
             if (failed) {
                 play.status = 'failed';
+                play.status_text = 'Failed';
             }
             else if (play.status !== 'changed' && play.status !== 'failed') {
                 // once the status becomes 'changed' or 'failed' don't modify it
                 if (no_hosts) {
                     play.status = 'no-matching-hosts';
+                    play.status_text = 'No matching hosts';
                 }
                 else {
                     play.status = (changed) ? 'changed' : (failed) ? 'failed' : 'successful';
+                    play.status_text = (changed) ? 'Changed' : (failed) ? 'Failed' : 'OK';
                 }
             }
+            play.status_tip = "Event ID: " + play.id + "<br />Status: " + play.status_text;
             play.finished = modified;
             play.elapsed = GetElapsed({
                 start: play.created,
                 end: modified
             });
-            play.status_text = (status_text) ? status_text : play.status;
+            //play.status_text = (status_text) ? status_text : play.status;
         }
 
         UpdateJobStatus({
@@ -348,14 +361,18 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             task = scope.jobData.plays[scope.activePlay].tasks[scope.activeTask];
             if (no_hosts){
                 task.status = 'no-matching-hosts';
+                task.status_text = 'No matching hosts';
             }
             else if (failed) {
                 task.status = 'failed';
+                task.status_text = 'Failed';
             }
             else if (task.status !== 'changed' && task.status !== 'failed') {
                 // once the status becomes 'changed' or 'failed' don't modify it
                 task.status = (failed) ? 'failed' : (changed) ? 'changed' : 'successful';
+                task.status_text = (failed) ? 'Failed' : (changed) ? 'Changed' : 'OK';
             }
+            task.status_tip = "Event ID: " + task.id + "<br />Status: " + task.status_text;
             task.finished = params.modified;
             task.elapsed = GetElapsed({
                 start: task.created,
@@ -445,11 +462,31 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             created = params.created,
             name = params.name,
             msg = params.message,
+            status_text = '',
             task;
 
+        switch(status) {
+            case "successful":
+                status_text = 'OK';
+                break;
+            case "changed":
+                status_text = "Changed";
+                break;
+            case "failed":
+                status_text = "Failed";
+                break;
+            case "unreachable":
+                status_text = "Unreachable";
+                status = "failed";
+                break;
+            case "skipped":
+                status_text = "Skipped";
+        }
+
         scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].hostResults[event_id] = {
             id: event_id,
             status: status,
+            status_text: status_text,
             host_id: host_id,
             task_id: task_id,
             name: name,
@@ -578,7 +615,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             Rest.get()
                 .success(function(data) {
                     data.results.forEach(function(event, idx) {
-                        var end, elapsed;
+                        var end, elapsed, status, status_text;
 
                         //if (!scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
                         //    scope.plays[scope.playsMap[scope.activePlay]].firstTask = event.id;
@@ -610,11 +647,16 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                             elapsed = '00:00:00';
                         }
 
+                        status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                        status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
+
                         scope.tasks.push({
                             id: event.id,
                             play_id: scope.activePlay,
                             name: event.name,
-                            status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                            status: status,
+                            status_text: status_text,
+                            status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
                             created: event.created,
                             modified: event.modified,
                             finished: end,
@@ -714,9 +756,37 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             Rest.get()
                 .success(function(data) {
                     data.results.forEach(function(event) {
+                        var status, status_text;
+                        if (event.event === "runner_on_skipped") {
+                            status = 'skipped';
+                        }
+                        else if (event.event === "runner_on_unreachable") {
+                            status = 'unreachable';
+                        }
+                        else {
+                            status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                        }
+                        switch(status) {
+                            case "successful":
+                                status_text = 'OK';
+                                break;
+                            case "changed":
+                                status_text = "Changed";
+                                break;
+                            case "failed":
+                                status_text = "Failed";
+                                break;
+                            case "unreachable":
+                                status = "failed";
+                                status_text = "Unreachable";
+                                break;
+                            case "skipped":
+                                status_text = "Skipped";
+                        }
                         scope.hostResults.push({
                             id: event.id,
-                            status: (event.event === "runner_on_skipped") ? 'skipped' : (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
+                            status: status,
+                            status_text: status_text,
                             host_id: event.host,
                             task_id: event.parent,
                             name: event.event_data.host,

awx/ui/static/lib/ansible/directives.js

@@ -264,7 +264,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                 // Add dataTipWatch: 'variable_name'
                 scope.$watch(attrs.tipWatch, function(newVal, oldVal) {
                     if (newVal !== oldVal) {
-                        // Where did fixTitle come frome?:
+                        // Where did fixTitle come from?:
                         //   http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click
                         $(element).tooltip('hide').attr('data-original-title', newVal).tooltip('fixTitle');
                     }

awx/ui/static/partials/job_detail.html

@@ -77,9 +77,9 @@
                                 <div class="row">
                                     <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</div>
-                                    <div class="col-lg-6 col-md-6 col-sm-10 col-xs-12">Name</div>
+                                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">Name</div>
-                                    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Reporting Hosts</div>
+                                    <!-- <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Reporting Hosts</div>
-                                    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Unreachable Hosts</div>
+                                    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Unreachable Hosts</div> -->
                                 </div>
                             </div>
                             <div id="plays-table-detail" aw-custom-scroll class="table-detail">
@@ -89,12 +89,12 @@
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
                                         data-placement="top">{{ play.elapsed }}
                                     </div>
-                                    <div class="col-lg-6 col-md-6 col-sm-10 col-xs-12 status-column"
+                                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 status-column"
-                                        aw-tool-tip="Event Id: {{ play.id }}<br />Status: {{ play.status_text }}" data-placement="top">
+                                        aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top">
                                         <i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
                                     </div>
-                                    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.hostCount }}</div>
+                                    <!--<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.hostCount }}</div>
-                                    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.unreachableCount }}</div>
+                                    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.unreachableCount }}</div>-->
                                 </div>
                                 <div class="row" ng-show="playList.length == 0">
                                     <div class="col-lg-12">
@@ -123,8 +123,8 @@
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
                                             data-placement="top">{{ task.elapsed }}
                                     </div>
-                                    <div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="Event Id: {{ task.id }} Status: {{ task.status }}"
+                                    <div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="{{ task.status_tip }}"
-                                        data-placement="top">
+                                        data-tip-watch="task.status_tip" data-placement="top">
                                         <i class="fa icon-job-{{  task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
                                     </div>
                                     <div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
@@ -153,7 +153,7 @@
                                 <div id="hosts-table-detail-inner">
                                     <div class="row cursor-pointer" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus}) track by $index" ng-click="viewHostResults(result.id)">
                                         <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
-                                            <a href="" aw-tool-tip="Event Id: {{ result.id }} Status: {{ result.status }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
+                                            <a href="" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
                                         </div>
                                         <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                             {{ result.msg }}
@@ -213,7 +213,7 @@
                         <div id="hosts-summary-section" class="section job_summary">
                             <div class="header">
                                 <div class="title">Host Summary</div>
-                                <div class="legend pull-right"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
+                                <div class="legend pull-right"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                 <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                             </div>
                             <div class="table-header">
@@ -247,7 +247,7 @@
                     <div id="graph-section" class="section">
                         <div class="header">
                             <div class="title">Host Status Summary</div>
-                            <div class="legend pull-right" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
+                            <div class="legend pull-right" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                     <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                         </div>
                     </div><!-- graph section -->