From be80a549ca80911110b6703a2741cf239c3a6b57 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Thu, 17 Jul 2014 15:29:54 -0400
Subject: [PATCH] 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    | 21 ++++++++++---
 awx/ui/static/js/controllers/Sockets.js | 42 +++++++++++++++++++++----
 awx/ui/static/js/forms/EventsViewer.js  |  8 ++---
 awx/ui/static/js/helpers/EventViewer.js |  6 ++--
 awx/ui/static/less/ansible-ui.less      | 28 +++++++++++++++++
 awx/ui/static/lib/ansible/Socket.js     |  3 ++
 awx/ui/static/partials/sockets.html     |  1 +
 7 files changed, 93 insertions(+), 16 deletions(-)

diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js
index 121f9a2b73..2bb3f28d21 100644
--- a/awx/ui/static/js/controllers/Jobs.js
+++ b/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;
 
-
-    event_socket =  Socket({
+    job_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) {
diff --git a/awx/ui/static/js/controllers/Sockets.js b/awx/ui/static/js/controllers/Sockets.js
index 558defae2c..545db44ae4 100644
--- a/awx/ui/static/js/controllers/Sockets.js
+++ b/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" +
-        "<div class=\"well\">\n" +
+    html = "<div class=\"section-title\"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>\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" +
-               "<p>Subscribed to events for job: {{ jobs_list }}</p>\n" +
-               "<h5>Received Messages:</h5>\n" +
+            "</div>\n" +
+            "</div>\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);
         });
     };
 }
diff --git a/awx/ui/static/js/forms/EventsViewer.js b/awx/ui/static/js/forms/EventsViewer.js
index c97eaf2362..f68fbf9eb5 100644
--- a/awx/ui/static/js/forms/EventsViewer.js
+++ b/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'
diff --git a/awx/ui/static/js/helpers/EventViewer.js b/awx/ui/static/js/helpers/EventViewer.js
index a6487e427d..e05688af0d 100644
--- a/awx/ui/static/js/helpers/EventViewer.js
+++ b/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();
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 0a383f8ada..4c13754229 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/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) {
diff --git a/awx/ui/static/lib/ansible/Socket.js b/awx/ui/static/lib/ansible/Socket.js
index 40305a5599..02c6fc2393 100644
--- a/awx/ui/static/lib/ansible/Socket.js
+++ b/awx/ui/static/lib/ansible/Socket.js
@@ -160,6 +160,9 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             }
                         });
                     });
+                },
+                getUrl: function() {
+                    return url;
                 }
             };
         };
diff --git a/awx/ui/static/partials/sockets.html b/awx/ui/static/partials/sockets.html
index 9be3d3425e..7a5de3bca1 100644
--- a/awx/ui/static/partials/sockets.html
+++ b/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>