External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-15 03:40:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

Misc.

Browse Source 
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.
This commit is contained in:
Chris Houseknecht 2014-07-17 15:29:54 -04:00
parent 985eaa70d0
commit be80a549ca
7 changed files with 93 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
awx/ui/static/js/controllers/Jobs.js
View File

@ -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) {

42
awx/ui/static/js/controllers/Sockets.js
View File

@ -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);
});
};
}

8
awx/ui/static/js/forms/EventsViewer.js
View File

@ -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'

6
awx/ui/static/js/helpers/EventViewer.js
View File

@ -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();

28
awx/ui/static/less/ansible-ui.less
View File

@ -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) {

3
awx/ui/static/lib/ansible/Socket.js
View File

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

1
awx/ui/static/partials/sockets.html
View File

@ -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>