External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 15:27:47 -02:30
Code Issues Packages Projects Releases Wiki Activity

Added start of search controls to summary section. Removed reload of task and host summary tables on screen resize. We're now maintaining 300 rows for each.

Browse Source
This commit is contained in:
chouseknecht
2014-05-09 10:28:10 -04:00
parent 3a5544801a
commit b320fc725f
4 changed files with 89 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
awx/ui/static/js/controllers/JobDetail.js
View File

@@ -29,8 +29,11 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
scope.auto_scroll = false; scope.auto_scroll = false;
scope.searchTaskHostsEnabled = true; scope.searchTaskHostsEnabled = true;
scope.searchSummaryHostsEnabled = true; scope.searchSummaryHostsEnabled = true;
scope.hostTableRows = 120; scope.hostTableRows = 300;
scope.hostSummaryTableRows = 120; scope.hostSummaryTableRows = 300;
scope.searchAllHostsEnabled = true;
scope.liveEventsEnabled = true;
scope.liveEventToggleDisabled = false;
event_socket = Socket({ event_socket = Socket({
scope: scope, scope: scope,
@@ -223,6 +226,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
scope.job_status.elapsed = '00:00:00'; scope.job_status.elapsed = '00:00:00';
} }
scope.setSearchAll('host');
scope.$emit('JobReady', data.related.job_events + '?page_size=50&order_by=id'); scope.$emit('JobReady', data.related.job_events + '?page_size=50&order_by=id');
scope.$emit('GetCredentialNames', data); scope.$emit('GetCredentialNames', data);
}) })
@@ -237,7 +241,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
} }
scope.removeRefreshCompleted = scope.$on('RefreshCompleted', function() { scope.removeRefreshCompleted = scope.$on('RefreshCompleted', function() {
refresh_count++; refresh_count++;
if (refresh_count === 2) { if (refresh_count === 1) {
// First time. User just loaded page.
scope.$emit('LoadJob'); scope.$emit('LoadJob');
} }
}); });
@@ -263,29 +268,30 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
// Detail table height adjusting. First, put page height back to 'normal'. // Detail table height adjusting. First, put page height back to 'normal'.
$('#plays-table-detail').height(150); $('#plays-table-detail').height(150);
$('#plays-table-detail').mCustomScrollbar("update");
$('#tasks-table-detail').height(150); $('#tasks-table-detail').height(150);
$('#tasks-table-detail').mCustomScrollbar("update");
$('#hosts-table-detail').height(150); $('#hosts-table-detail').height(150);
scope.hostTableRows = 120; $('#hosts-table-detail').mCustomScrollbar("update");
height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height(); height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
if (height > 15) { if (height > 15) {
// there's a bunch of white space at the bottom, let's use it // there's a bunch of white space at the bottom, let's use it
$('#plays-table-detail').height(150 + (height / 3)); $('#plays-table-detail').height(150 + (height / 3));
//$('#plays-table-detail').mCustomScrollbar("update"); $('#plays-table-detail').mCustomScrollbar("update");
$('#tasks-table-detail').height(150 + (height / 3)); $('#tasks-table-detail').height(150 + (height / 3));
// Host details $('#tasks-table-detail').mCustomScrollbar("update");
$('#hosts-table-detail').height(150 + (height / 3)); $('#hosts-table-detail').height(150 + (height / 3));
scope.hostTableRows = Math.max(Math.ceil((150 + (height / 3)) / 20) * 3, 120); $('#hosts-table-detail').mCustomScrollbar("update");
} }
refreshHostRows();
// Summary table height adjusting. // Summary table height adjusting.
height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() - 20; height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() -
scope.hostSummaryTableRows = Math.max(Math.ceil(height / 20), 120); $('#summary-search-section').outerHeight() - 20;
$('#hosts-summary-table').height(height); $('#hosts-summary-table').height(height);
refreshSummaryHostRows(); scope.$emit('RefreshCompleted');
}; };
function refreshHostRows() { /*function refreshHostRows() {
var url; var url;
if (scope.activeTask) { if (scope.activeTask) {
scope.hostResults = []; scope.hostResults = [];
@@ -376,7 +382,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
$('#hosts-table-detail').mCustomScrollbar("update"); $('#hosts-table-detail').mCustomScrollbar("update");
scope.$emit('RefreshCompleted'); scope.$emit('RefreshCompleted');
} }
} }*/
setTimeout(function() { scope.adjustSize(); }, 500); setTimeout(function() { scope.adjustSize(); }, 500);
@@ -385,21 +391,34 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
scope.adjustSize(); scope.adjustSize();
}, 500)); }, 500));
$scope.selectPlay = function(id) { scope.setSearchAll = function(search) {
if (search === 'host') {
scope.search_all_label = 'Host name';
scope.searchAllDisabled = false;
scope.search_all_placeholder = 'Search all by host name';
}
else {
scope.search_all_label = 'Failures';
scope.searchAllDisabled = true;
scope.search_all_placeholder = '';
}
};
scope.selectPlay = function(id) {
SelectPlay({ SelectPlay({
scope: scope, scope: scope,
id: id id: id
}); });
}; };
$scope.selectTask = function(id) { scope.selectTask = function(id) {
SelectTask({ SelectTask({
scope: scope, scope: scope,
id: id id: id
}); });
}; };
$scope.toggleSummary = function(hide) { scope.toggleSummary = function(hide) {
var docw, doch, height = $('#job-detail-container').height(), slide_width; var docw, doch, height = $('#job-detail-container').height(), slide_width;
if (!hide) { if (!hide) {
docw = $(window).width(); docw = $(window).width();
@@ -430,7 +449,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
} }
}; };
$scope.HostDetailOnTotalScroll = _.debounce(function() { scope.HostDetailOnTotalScroll = _.debounce(function() {
// Called when user scrolls down (or forward in time). Using _.debounce // Called when user scrolls down (or forward in time). Using _.debounce
var url, mcs = arguments[0]; var url, mcs = arguments[0];
scope.$apply(function() { scope.$apply(function() {
@@ -475,7 +494,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
}); });
}, 300); }, 300);
$scope.HostDetailOnTotalScrollBack = _.debounce(function() { scope.HostDetailOnTotalScrollBack = _.debounce(function() {
// Called when user scrolls up (or back in time) // Called when user scrolls up (or back in time)
var url, mcs = arguments[0]; var url, mcs = arguments[0];
scope.$apply(function() { scope.$apply(function() {
@@ -520,7 +539,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
}); });
}, 300); }, 300);
$scope.HostSummaryOnTotalScroll = function(mcs) { scope.HostSummaryOnTotalScroll = function(mcs) {
var url; var url;
if (!scope.auto_scroll && scope.hosts) { if (!scope.auto_scroll && scope.hosts) {
url = GetBasePath('jobs') + job_id + '/job_host_summaries/?'; url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
@@ -561,7 +580,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
scope.auto_scroll = false; scope.auto_scroll = false;
}; };
$scope.HostSummaryOnTotalScrollBack = function(mcs) { scope.HostSummaryOnTotalScrollBack = function(mcs) {
var url; var url;
if (!scope.auto_scroll && scope.hosts) { if (!scope.auto_scroll && scope.hosts) {
url = GetBasePath('jobs') + job_id + '/job_host_summaries/?'; url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
@@ -601,7 +620,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
} }
}; };
$scope.searchTaskHosts = function() { scope.searchTaskHosts = function() {
var url; var url;
Wait('start'); Wait('start');
scope.hostResults = []; scope.hostResults = [];
@@ -638,13 +657,13 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
} }
}; };
$scope.taskHostNameKeyPress = function(e) { scope.taskHostNameKeyPress = function(e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
$scope.searchTaskHosts(); scope.searchTaskHosts();
} }
}; };
$scope.searchSummaryHosts = function() { scope.searchSummaryHosts = function() {
var url; var url;
Wait('start'); Wait('start');
scope.hosts = []; scope.hosts = [];
@@ -681,9 +700,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
} }
}; };
$scope.summaryHostNameKeyPress = function(e) { scope.summaryHostNameKeyPress = function(e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
$scope.searchSummaryHosts(); scope.searchSummaryHosts();
} }
}; };
} }

2
awx/ui/static/js/helpers/JobDetail.js
View File

@@ -218,6 +218,8 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
}); });
scope.job_status.status = (event.failed) ? 'failed' : 'successful'; scope.job_status.status = (event.failed) ? 'failed' : 'successful';
scope.job_status.status_class = ""; scope.job_status.status_class = "";
scope.liveEventsEnabled = true; // Show the stop button
scope.liveEventToggleDisabled = true; //Disable clicking on the button, the job is over
} }
}); });
}; };

16
awx/ui/static/less/job-details.less
View File

@@ -148,7 +148,8 @@
.table-detail { .table-detail {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border: 1px solid @black; border: 1px solid @grey;
border-radius: 4px;
background-color: @white; background-color: @white;
padding-left: 3px; padding-left: 3px;
.row { .row {
@@ -216,6 +217,19 @@
} }
} }
#search-all-input-icons {
position: absolute;
right: 3px;
top: 5px;
z-index: 100;
a {
color: #a9a9a9;
}
a:hover {
color: @black;
}
}
#task-hosts-section { #task-hosts-section {
position: relative; position: relative;
top: 0; top: 0;

25
awx/ui/static/partials/job_detail.html
View File

@@ -135,6 +135,31 @@
<div id="hide-summary-button" style="display: hidden;"> <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> <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>
<div id="summary-search-section" class="section">
<div class="row">
<div class="col-lg-8">
<div class="input-group input-group-sm">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span ng-bind="search_all_label"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="" ng-click="setSearchAll('host')">Host</a></li>
<li><a href="" ng-click="setSearchAll('failures')">Failures</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name" placeholder="{{ search_all_placeholder }}" ng-disabled="searchAllDisabled"
ng-keypress="allHostNameKeyPress($event)" />
<div id="search-all-input-icons">
<a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllHosts()"><i class="fa fa-search"></i></a>
<a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllHosts()"><i class="fa fa-times"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<button type="button" class="btn btn-sm btn-default" aw-tool-top="Live updates enabled. Click to disable." ng-show="!liveEventsEnabled"><i class="fa fa-play"></i> Play</button>
<button type="button" class="btn btn-sm btn-default" aw-tool-top="Live updates disabled. Click to Enable." ng-show="liveEventsEnabled" ng-disabled="liveEventToggleDisabled"><i class="fa fa-stop"></i> Stop</button>
</div>
</div>
</div>
<div id="hosts-summary-section" class="section job_summary"> <div id="hosts-summary-section" class="section job_summary">
<div class="header"> <div class="header">
<div class="title">Host Summary</div> <div class="title">Host Summary</div>