mirror of
https://github.com/ansible/awx.git
synced 2026-01-12 10:30:03 -03:30
Summary section slides in and out based on screen width. When screen less than 1240px the summary section hides and a button is presented allowing user to view summary panel as an overlayor slide-in panel. Fixed handling of websocket connection indicator tool-tip.
This commit is contained in:
Chris Houseknecht
parent
6b4b8ab6e3
commit
ad5ca80e47
@ -510,16 +510,16 @@ angular.module('Tower', [
|
||||
setTimeout(function() {
|
||||
$rootScope.$apply(function() {
|
||||
sock.checkStatus();
|
||||
$rootScope.$emit('SocketErrorEncountered');
|
||||
//$rootScope.$emit('SocketErrorEncountered');
|
||||
$log.debug('socket status: ' + $rootScope.socketStatus);
|
||||
});
|
||||
});
|
||||
},2000);
|
||||
sock.on("status_changed", function(data) {
|
||||
$rootScope.$emit('JobStatusChange', data);
|
||||
});
|
||||
}
|
||||
openSocket();
|
||||
|
||||
/*
|
||||
$rootScope.socketToggle = function() {
|
||||
switch($rootScope.socketStatus) {
|
||||
case 'ok':
|
||||
@ -534,6 +534,6 @@ angular.module('Tower', [
|
||||
$rootScope.socketTip = '';
|
||||
setTimeout(openSocket, 500);
|
||||
}
|
||||
};
|
||||
};*/
|
||||
}
|
||||
]);
|
||||
|
||||
@ -258,10 +258,18 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
if (ww < 1240) {
|
||||
$('#job-summary-container').hide();
|
||||
$('#job-detail-container').css({ "width": "100%", "padding-right": "15px" });
|
||||
$('#summary-button').show();
|
||||
}
|
||||
else {
|
||||
$('.overlay').hide();
|
||||
$('#summary-button').hide();
|
||||
$('#hide-summary-button').hide();
|
||||
$('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" });
|
||||
$('#job-summary-container').show();
|
||||
$('#job-summary-container .job_well').css({
|
||||
'box-shadow': 'none',
|
||||
'height': 'auto'
|
||||
});
|
||||
$('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px" }).show();
|
||||
}
|
||||
}
|
||||
$(document).ready(function() {
|
||||
@ -272,6 +280,35 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
adjustSize();
|
||||
}, 500));
|
||||
|
||||
$scope.toggleSummary = function(hide) {
|
||||
var docw, doch, height = $('#job-detail-container').height();
|
||||
if (!hide) {
|
||||
docw = $(window).width();
|
||||
doch = $(window).height();
|
||||
$('#summary-button').hide();
|
||||
$('.overlay').css({
|
||||
width: $(document).width(),
|
||||
height: $(document).height()
|
||||
}).show();
|
||||
$('#job-summary-container .job_well').height(height - 18).css({
|
||||
'box-shadow': '-3px 3px 5px 0 #ccc'
|
||||
});
|
||||
$('#hide-summary-button').show();
|
||||
$('#job-summary-container').css({
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: '75%',
|
||||
'z-index': 2000,
|
||||
'padding-right': '15px'
|
||||
}).show('slide', {'direction': 'right'});
|
||||
}
|
||||
else {
|
||||
$('.overlay').hide();
|
||||
$('#summary-button').show();
|
||||
$('#job-summary-container').hide('slide', {'direction': 'right'});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.HostDetailOnTotalScroll = function(mcs) {
|
||||
var url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask;
|
||||
url += '&host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=5&order_by=host__name';
|
||||
@ -388,6 +425,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
}
|
||||
scope.auto_scroll = false;
|
||||
};
|
||||
|
||||
$scope.HostSummaryOnTotalScrollBack = function(mcs) {
|
||||
|
||||
@ -101,6 +101,17 @@
|
||||
|
||||
|
||||
|
||||
#summary-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#hide-summary-button {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
h5 {
|
||||
@ -249,6 +260,7 @@
|
||||
}
|
||||
.table-header {
|
||||
font-size: 12px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.table-detail {
|
||||
height: 200px;
|
||||
|
||||
@ -20,27 +20,21 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
|
||||
protocol = $location.protocol(),
|
||||
url = protocol + '://' + host + ':8080/socket.io/' + endpoint;
|
||||
|
||||
if (scope.removeSocketErrorEncountered) {
|
||||
scope.removeSocketErrorEncountered();
|
||||
}
|
||||
scope.removeSocketErrorEncountered = scope.$on('socketStatusChange', function() {
|
||||
switch(scope.socketStatus) {
|
||||
function getSocketTip(status) {
|
||||
var result = '';
|
||||
switch(status) {
|
||||
case 'error':
|
||||
scope.socketTip = "There was an error connecting to the websocket server. Click for troubleshooting help.";
|
||||
result = "There was an error connecting to the websocket server. Click for troubleshooting help.";
|
||||
break;
|
||||
case 'connecting':
|
||||
scope.socketTip = "Attempting to connect to the websocket server. Click for troubleshooting help.";
|
||||
result = "Attempting to connect to the websocket server. Click for troubleshooting help.";
|
||||
break;
|
||||
case "ok":
|
||||
scope.socketTip = "Connected to the websocket server. Pages containing job status information for playbook runs, SCM updates and inventory " +
|
||||
result = "Connected to the websocket server. Pages containing job status information for playbook runs, SCM updates and inventory " +
|
||||
"sync processes will automatically update in real-time.";
|
||||
}
|
||||
/*else if (scope.socketStatus === 'error') {
|
||||
Alert("Connection Error", "Error encountered while attempting to connect to the websocket server. Confirm the server " +
|
||||
"is up. Use the <i class=\"fa fa-power-off\"></i> button found on the Inventories, Projects and Jobs pages to reconnect.",
|
||||
"alert-danger");
|
||||
}*/
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
return {
|
||||
scope: scope,
|
||||
@ -67,14 +61,14 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
|
||||
$log.debug('Socket connecting...');
|
||||
self.scope.$apply(function () {
|
||||
self.scope.socketStatus = 'connecting';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
self.socket.on('connect', function() {
|
||||
$log.debug('Socket connection established');
|
||||
self.scope.$apply(function () {
|
||||
self.scope.socketStatus = 'ok';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
self.socket.on('connect_failed', function(reason) {
|
||||
@ -82,7 +76,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
|
||||
$log.error('Socket connection failed: ' + r);
|
||||
self.scope.$apply(function () {
|
||||
self.scope.socketStatus = 'error';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
|
||||
});
|
||||
@ -90,7 +84,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
|
||||
$log.debug('Socket disconnected');
|
||||
self.scope.$apply(function() {
|
||||
self.socketStatus = 'error';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
self.socket.on('error', function(reason) {
|
||||
@ -98,28 +92,28 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
|
||||
$log.debug('Socket error: ' + r);
|
||||
self.scope.$apply(function() {
|
||||
self.scope.socketStatus = 'error';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
self.socket.on('reconnecting', function() {
|
||||
$log.debug('Socket attempting reconnect...');
|
||||
self.scope.$apply(function() {
|
||||
self.scope.socketStatus = 'connecting';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
self.socket.on('reconnect', function() {
|
||||
$log.debug('Socket reconnected');
|
||||
self.scope.$apply(function() {
|
||||
self.scope.socketStatus = 'ok';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
self.socket.on('reconnect_failed', function(reason) {
|
||||
$log.error('Socket reconnect failed: ' + reason);
|
||||
self.scope.$apply(function() {
|
||||
self.scope.socketStatus = 'error';
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -144,7 +138,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
|
||||
$log.debug('Socket error: connection refused');
|
||||
self.scope.socketStatus = 'error';
|
||||
}
|
||||
self.scope.$emit('socketStatusChange');
|
||||
self.scope.socketTip = getSocketTip(self.scope.socketStatus);
|
||||
return self.scope.socketStatus;
|
||||
},
|
||||
on: function (eventName, callback) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div ng-cloak id="htmlTemplate">
|
||||
|
||||
<div class="row">
|
||||
<div id="breadcrumb-container" class="col-md-12">
|
||||
<div id="breadcrumb-container" class="col-md-12" style="position: relative;">
|
||||
<div class="nav-path">
|
||||
<ul class="breadcrumb" id="breadcrumb-list">
|
||||
<li><a href="/#/jobs">Jobs</a></li>
|
||||
@ -15,7 +15,9 @@
|
||||
|
||||
<div class="row" style="position: relative;">
|
||||
<div id="job-detail-container">
|
||||
|
||||
<div id="summary-button" style="display: hidden;">
|
||||
<a href="" class="btn btn-xs btn-default" ng-click="toggleSummary()" aw-tool-tip="View hosts summary" data-placement="top"><i class="fa fa-arrow-circle-left fa-lg"></i></a>
|
||||
</div>
|
||||
<div class="job_well">
|
||||
<div class="row status-row">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Status</div>
|
||||
@ -126,10 +128,13 @@
|
||||
|
||||
</div><!-- well -->
|
||||
|
||||
</div><!-- col-md-7 -->
|
||||
</div><!-- job-detail-container -->
|
||||
|
||||
<div id="job-summary-container">
|
||||
<div class="job_well">
|
||||
<div id="hide-summary-button" style="display: hidden;">
|
||||
<a href="" class="btn btn-xs btn-default" ng-click="toggleSummary('hide')" aw-tool-tip="Hide hosts summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
|
||||
</div>
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<div class="header">
|
||||
<div class="title">Host Summary</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user