Job detail page re-refactor

Latest host event viewer changes.

awx/ui/static/js/helpers/HostEventsViewer.js

@@ -35,12 +35,58 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
                 scope.removeJobReady();
             }
             scope.removeEventReady = scope.$on('EventsReady', function(e, data) {
-                //var elem;
+                var elem, html;
+
+                //scope.host_events = data.results;
+                //$log.debug(scope.host_events);
 
                 scope.host_events = data.results;
+                scope.host_events_search_name = host_name;
+                scope.host_events_search_status = 'all';
+                scope.host_events = [];
+                html = "<table class=\"table\">\n";
+                html += "<thead>\n";
+                html += "<tr><th class=\"col-md-3\">Status</th>" +
+                        "<th class=\"col-md-3\">Play</th>" +
+                        "<th class=\"col-md-3\">Task</th>" +
+                        "<th class=\"col-md-3\">Result</th></tr>\n";
+                html += "</thead>\n";
+                html += "<tbody>\n";
+                data.results.forEach(function(result) {
+                    var msg = '',
+                        status = 'ok',
+                        status_text = 'OK';
+                    if (result.event_data.res) {
+                        msg = result.event_data.res.msg;
+                    }
+                    if (result.event === "runner_on_no_hoss") {
+                        msg = "No hosts remaining";
+                    }
+                    if (result.event === 'runner_on_unreachable') {
+                        status = 'unreachable';
+                        status_text = 'Unreachable';
+                    }
+                    else if (result.failed) {
+                        status = 'failed';
+                        status_text = 'Failed';
+                    }
+                    else if (result.changed) {
+                        status = 'changed';
+                        status_text = 'Changed';
+                    }
+                    html += "<tr ng-click=\"showDetails()\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n";
+                    html += "<td><i class=\"fa icon-job-" + status + "\"></i> <a href=\"\">" + status_text + "</a></td>\n";
+                    html += "<td><a href=\"\">" + result.play + "</a></td>\n";
+                    html += "<td><a href=\"\">" + result.task + "</a></td>\n";
+                    html += "<td><a href=\"\">" + msg + "</a></td>";
+                    html += "</tr>"
+                });
+                html += "</tbody>\n";
+                html += "</table>\n";
+                $('#host-events').html(html);
 
-                //elem = angular.element(document.getElementById('host-events-modal-dialog'));
+                elem = angular.element(document.getElementById('host-events-modal-dialog'));
-                //$compile(elem)(scope);
+                $compile(elem)(scope);
 
                 CreateDialog({
                     scope: scope,
@@ -50,10 +96,9 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
                     callback: 'ModalReady',
                     id: 'host-events-modal-dialog',
                     // onResizeStop: resizeText,
-                    title: ( (title) ? title : 'Event Details' ),
+                    title: ( (title) ? title : 'Host Events' )
-                    onOpen: function() {
+                    //onOpen: function() {
-
+                    //}
-                    }
                 });
             });
 

awx/ui/static/js/lists/HostEvents.js

@@ -0,0 +1,82 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ *  HostEvents.js
+ *  Host summary event viewer dialog.
+ *
+ */
+
+'use strict';
+
+angular.module('HostEventsListDefinition', [])
+    .value('HostEventList', {
+
+        name: 'host_events',
+        iterator: 'host_event',
+        editTitle: 'Host Events',
+        index: false,
+        hover: true,
+
+        fields: {
+            status: {
+                label: 'Status',
+                columnClass: 'col-md-2',
+
+            },
+            play: {
+                label: 'Play',
+                columnClass: 'col-md-3',
+                key: true,
+                nosort: true,
+                searchable: false,
+                noLink: true
+            },
+            status: {
+                label: 'Status',
+                showValue: false,
+                columnClass: 'col-sm-1 col-xs-2 text-center',
+                searchField: 'failed',
+                searchType: 'boolean',
+                searchOptions: [{
+                    name: 'success',
+                    value: 0
+                }, {
+                    name: 'error',
+                    value: 1
+                }],
+                nosort: true,
+                searchable: false,
+                ngClick: 'viewJobEvent(jobevent.id)',
+                awToolTip: '{{ jobevent.statusBadgeToolTip }}',
+                dataPlacement: 'top',
+                badgeIcon: 'fa icon-job-{{ jobevent.status }}',
+                badgePlacement: 'left',
+                badgeToolTip: '{{ jobevent.statusBadgeToolTip }}',
+                badgeTipPlacement: 'top',
+                badgeNgClick: 'viewJobEvent(jobevent.id)'
+            },
+            event_display: {
+                label: 'Event',
+                hasChildren: true,
+                ngClick: 'toggleChildren(jobevent.id, jobevent.related.children)',
+                nosort: true,
+                searchable: false,
+                ngClass: '{{ jobevent.class }}',
+                appendHTML: 'jobevent.event_detail'
+            },
+            host: {
+                label: 'Host',
+                ngBind: 'jobevent.summary_fields.host.name',
+                ngHref: '{{ jobevent.hostLink }}',
+                searchField: 'hosts__name',
+                nosort: true,
+                searchOnly: false,
+                id: 'job-event-host-header',
+                'class': 'break',
+                columnClass: 'col-lg-2 hidden-sm hidden-xs'
+            }
+        },
+
+        actions: { },
+
+    });

awx/ui/static/less/ansible-ui.less

@@ -984,6 +984,7 @@ input[type="checkbox"].checkbox-no-label {
   .icon-job-successful:before,
   .icon-job-changed:before,
   .icon-job-ok:before,
+  .icon-job-OK:before,
   .icon-job-skipped:before {
       content: "\f111";
   }
@@ -1008,7 +1009,8 @@ input[type="checkbox"].checkbox-no-label {
   .icon-job-running,
   .icon-job-success,
   .icon-job-successful,
-  .icon-job-ok {
+  .icon-job-ok,
+  .icon-job-OK {
       color: @green;
   }
 

awx/ui/static/less/job-details.less

@@ -14,6 +14,34 @@
 @unreachable-hosts-color:   @unreachable;
 
 
+#host-events-modal-dialog {
+    #search-form {
+        margin-left: 7px;
+    }
+    #host-events-search-name {
+        width: 200px;
+    }
+    #search-form-input-icons {
+        position: absolute;
+        right: 3px;
+        top: 5px;
+        z-index: 100;
+        a {
+            color: #a9a9a9;
+        }
+        a:hover {
+            color: @black;
+        }
+    }
+    #status-field {
+        margin-left: 15px;
+    }
+
+    table {
+        margin-top: 15px;
+    }
+}
+
 #jobs-detail {
 
     .job_summary {

awx/ui/static/partials/job_detail.html

@@ -258,38 +258,36 @@
 
         </div>
 
-        <div id="host-events-modal-dialog" style="display:none;">
+        <div id="job-detail-footer" class="footer-row"></div>
-        <form class="form-inline">
+
-            <div class="form-group">
+    </div>
+
+    <div ng-include="'/static/partials/eventviewer.html'"></div>
+
+    <div id="host-events-modal-dialog" style="display:none;">
+        <form id="search-form" class="form-inline">
+            <div class="form-group" style="position:relative;">
                 <label>Search</label>
-                <input type="text" class="form-control" id="host-events-search-name" ng-model="host_events_search_name" placeholder="Host name" >
+                <input type="text" class="form-control input-sm" id="host-events-search-name" ng-model="host_events_search_name" placeholder="Host name" >
+                <div id="search-form-input-icons">
+                    <a class="search-icon" ng-show="!eventsSearchActive" ng-click="searchEvents()"><i class="fa fa-search"></i></a>
+                    <a class="search-icon" ng-show="eventsSearchActive" ng-click="host_events_search_name=''; searchEvents()"><i class="fa fa-times"></i></a>
+                </div>
             </div>
-            <div class="form-group">
+            <div class="form-group" id="status-field">
                 <label>Status</label>
-                <select id="host-events-search-status" ng-model="host_events_search_status" name="host-events-search-name">
+                <select id="host-events-search-status" class="form-control input-sm" ng-model="host_events_search_status" name="host-events-search-name">
                     <option value="all">All</option>
-                    <option value="failed">Failed</option>
                     <option value="changed">Changed</option>
+                    <option value="failed">Failed</option>
                     <option value="ok">OK</option>
                     <option value="unreachable">Unreachable</option>
                 </select>
             </div>
         </form>
         <div id="host-events-table" lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500">
-            <div class="row" ng-repeat="event in host_events">
+            <div id="host-events"></div>
-                <div class="col-md-2"><i class="fa icon-job{{ event.status }}"></i></div>
-                <div class="col-md-2">{{ event.play }}</div>
-                <div class="col-md-2">{{ event.role }}</div>
-                <div class="col-md-2">{{ event.task }}</div>
-                <div class="col-md-2">{{ event.msg }}</div>
-            </div>
         </div>
-
-        <div id="job-detail-footer" class="footer-row"></div>
-    </div>
-
-    <div ng-include="'/static/partials/eventviewer.html'"></div>
-
     </div>
 
 </div>