Misc.

Added schedules to the #/sockets page, so that we can see what events are being emitted via the schedules endpoint. Added a schedule_events socket to the Jobs controller. Once we have 'created', 'changed', 'deleted', etc. events coming throught the schedules endpoint the schedules widget on the jobs page should automatically update. Changed 'Dashboard' back to 'Home' in menus. Fixed event viewer bug on jobs detail page.

awx/ui/static/js/controllers/Jobs.js

@@ -20,19 +20,20 @@ function JobsListController ($log, $scope, $compile, $routeParams, ClearScope, B
         listCount = 0,
         api_complete = false,
         event_socket,
+        schedule_socket,
+        job_socket,
         event_queue = [],
         expecting = 0,
         max_rows;
 
-
+    job_socket = Socket({
-    event_socket =  Socket({
         scope: $scope,
         endpoint: "jobs"
     });
 
-    event_socket.init();
+    job_socket.init();
 
-    event_socket.on("status_changed", function(data) {
+    job_socket.on("status_changed", function(data) {
         if (api_complete) {
             processEvent(data);
         }
@@ -41,6 +42,18 @@ function JobsListController ($log, $scope, $compile, $routeParams, ClearScope, B
         }
     });
 
+    schedule_socket = Socket({
+        scope: $scope,
+        endpoint: "schedules"
+    });
+
+    schedule_socket.init();
+    schedule_socket.on("status_change", function(data) {
+        if (api_complete) {
+            schedule_scope.search('schedule');
+        }
+    });
+
     function processEvent(event) {
         expecting = 0;
         switch(event.status) {

awx/ui/static/js/controllers/Sockets.js

@@ -15,18 +15,23 @@ function SocketsController ($scope, $compile, ClearScope, Socket) {
     var test_scope = $scope.$new(),
         jobs_scope = $scope.$new(),
         job_events_scope = $scope.$new(),
+        schedules_scope = $scope.$new(),
         test_socket = Socket({ scope: test_scope, endpoint: "test" }),
         jobs_socket = Socket({ scope: jobs_scope, endpoint: "jobs" }),
+        schedules_socket = Socket({ scope: schedules_scope, endpoint: "schedules" }),
         job_events_socket = Socket({ scope: job_events_scope, endpoint: "job_events" }),
         e, html;
 
     test_scope.messages = [];
     jobs_scope.messages = [];
+    schedules_scope.messages = [];
     job_events_scope.messages = [];
 
-    html = "<div class=\"alert alert-info\"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>\n" +
+    html = "<div class=\"section-title\"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>\n" +
-        "<div class=\"well\">\n" +
+        "<div class=\"message-title\">\n" +
         "<h5>Received Messages:</h5>\n" +
+        "</div>\n" +
+        "<div class=\"well message-section\">\n" +
         "<ul>\n" +
         "<li ng-repeat=\"message in messages\">{{ message }} </li>\n" +
         "</ul>\n" +
@@ -35,11 +40,18 @@ function SocketsController ($scope, $compile, ClearScope, Socket) {
     e = angular.element(document.getElementById('test-container'));
     e.append(html);
     $compile(e)(test_scope);
+    e = angular.element(document.getElementById('schedules-container'));
+    e.append(html);
+    $compile(e)(schedules_scope);
     e = angular.element(document.getElementById('jobs-container'));
     e.append(html);
     $compile(e)(jobs_scope);
 
-    html = "<div class=\"alert alert-info\"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>\n" +
+    html = "<div class=\"row events-section\">\n" +
+            "<div class=\"col-md-6\">\n" +
+            "<div class=\"section-title\"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>\n" +
+            "</div>\n" +
+            "<div class=\"col-md-6\">\n" +
             "<form class=\"form-inline\">\n" +
                 "<div class=\"form-group\">\n" +
                    "<label for=\"job_id\">Job Id</label>\n" +
@@ -47,9 +59,13 @@ function SocketsController ($scope, $compile, ClearScope, Socket) {
                 "</div>\n" +
                 "<button type=\"submit\" ng-disabled=\"!job_id\" ng-click=\"subscribeToJobEvent()\" class=\"btn btn-sm btn-primary\"><i class=\"fa fa-check\"></i> Subscribe</button>\n" +
             "</form>\n" +
-            "<div style=\"margin-top: 15px;\" class=\"well\">\n" +
+            "</div>\n" +
-               "<p>Subscribed to events for job: {{ jobs_list }}</p>\n" +
+            "</div>\n" +
-               "<h5>Received Messages:</h5>\n" +
+            "<div class=\"message-title\">" +
+            "<p>Subscribed to events for job: {{ jobs_list }}</p>\n" +
+            "<h5>Received Messages:</h5>\n" +
+            "</div>\n" +
+            "<div class=\"well message-section\" id=\"event-message-container\">\n" +
                "<ul>\n" +
                   "<li ng-repeat=\"message in messages\">{{ message }} </li>\n" +
                "</ul>\n" +
@@ -59,16 +75,26 @@ function SocketsController ($scope, $compile, ClearScope, Socket) {
     e.append(html);
     $compile(e)(job_events_scope);
 
+    schedules_socket.init();
     test_socket.init();
     jobs_socket.init();
     job_events_socket.init();
 
+    schedules_scope.url = schedules_socket.getUrl();
+    test_scope.url = test_socket.getUrl();
+    jobs_scope.url = jobs_socket.getUrl();
+    job_events_scope.url = job_events_socket.getUrl();
+
     test_scope.messages.push('Message Displayed Before Connection');
 
     test_socket.on('test', function(data) {
         test_scope.messages.push(data);
     });
 
+    schedules_socket.on("status_changed", function(data) {
+        schedules_scope.messages.push(data);
+    });
+
     jobs_socket.on("status_changed", function(data) {
         jobs_scope.messages.push(data);
     });
@@ -79,6 +105,10 @@ function SocketsController ($scope, $compile, ClearScope, Socket) {
         job_events_scope.jobs_list.push(job_events_scope.job_id);
         job_events_socket.on("job_events-" + job_events_scope.job_id, function(data) {
             job_events_scope.messages.push(data);
+            setTimeout(function() {
+                $(document).scrollTop($(document).prop("scrollHeight"));
+                $('#event-message-container').scrollTop($('#event-message-container').prop("scrollHeight"));
+            }, 300);
         });
     };
 }

awx/ui/static/js/forms/EventsViewer.js

@@ -8,6 +8,10 @@ angular.module('EventsViewerFormDefinition', [])
     .value('EventsViewerForm', {
 
         fields: {
+            host_name: {
+                label: 'Host',
+                section: 'Event'
+            },
             status: {
                 label: 'Status',
                 section: 'Event'
@@ -20,10 +24,6 @@ angular.module('EventsViewerFormDefinition', [])
                 label: 'Created On',
                 section: 'Event'
             },
-            host_name: {
-                label: 'Host',
-                section: 'Event'
-            },
             role: {
                 label: 'Role',
                 section: 'Event'

awx/ui/static/js/helpers/EventViewer.js

@@ -226,10 +226,12 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
                     onOpen: function() {
                         $('#eventview-tabs a:first').tab('show');
                         $('#dialog-ok-button').focus();
-                        if (scope.events.length > 1 && current_event === 0) {
+                        if (scope.events.length > 1 && current_event === 0 && !scope.prev_event_set) {
                             $('#events-prev-button').prop('disabled', true);
                         }
-
+                        if ((current_event === scope.events.length - 1) && !scope.next_event_set) {
+                            $('#events-next-button').prop('disabled', true);
+                        }
                         if (scope.events.length > 1) {
                             setButtonMargin();
                             addSpinner();

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

@@ -1636,6 +1636,34 @@ tr td button i {
 }
 
 
+/* Socket testing page */
+#sockets {
+    .section-title {
+        font-weight: bold;
+        color: @blue;
+        margin-top: 30px;
+    }
+    #test-container .section-title {
+        margin-top: 20px;
+    }
+    .well {
+        padding: 9px;
+    }
+    .message-section {
+        height: 150px;
+        overflow: auto;
+    }
+    .events-section {
+        margin-top: 40px;
+        .section-title {
+            margin-top: 0;
+        }
+    }
+    #event-message-container {
+        height: 200px;
+    }
+}
+
 /* Large desktop */
 
 @media (min-width: 1200px) {

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

@@ -160,6 +160,9 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             }
                         });
                     });
+                },
+                getUrl: function() {
+                    return url;
                 }
             };
         };

awx/ui/static/partials/sockets.html

@@ -2,6 +2,7 @@
     <div ng-cloak id="htmlTemplate">
         <div id="test-container"></div>
         <div id="jobs-container"></div>
+        <div id="schedules-container"></div>
         <div id="job-events-container"></div>
     </div>
 </div>