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

Job detail page refactor / 2.0 style changes

Browse Source 
Removed well and index from primary list pages. Job detail page cleanup. Fixed status filter on host summary list. Incresed # rows kept in memory for each list to 100. Showing unreachable host count on the play, mostly to help debugging.
This commit is contained in:
Chris Houseknecht 2014-06-25 22:45:16 -04:00
parent ed9bb6c572
commit 73255eace9
24 changed files with 75 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,10 +25,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.tasks = [];
scope.hostResults = [];
scope.hostResultsMaxRows = 15;
scope.hostSummariesMaxRows = 15;
scope.tasksMaxRows = 15;
scope.playsMaxRows = 15;
scope.hostResultsMaxRows = 100;
scope.hostSummariesMaxRows = 100;
scope.tasksMaxRows = 100;
scope.playsMaxRows = 100;
scope.liveEventProcessing = true; // control play/pause state of event processing
@ -126,7 +126,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
$rootScope.jobDetailInterval = setInterval(function() {
$log.debug('Updating the DOM...');
UpdateDOM({ scope: scope });
}, 5000);
}, 2500);
}
});
@ -149,7 +149,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
ok: event.ok,
changed: event.changed,
unreachable: event.dark,
failed: event.failures
failed: event.failures,
status: (event.failed) ? 'failed' : 'successful'
};
});
scope.$emit('InitialLoadComplete');
@ -222,7 +223,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
data.results.forEach(function(event, idx) {
var end, elapsed;
if (!play.firstTask) {
if (play.firstTask === undefined || play.firstTask === null) {
play.firstTask = event.id;
play.hostCount = (event.host_count) ? event.host_count : 0;
}
@ -341,6 +342,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
hostCount: 0,
fistTask: null,
playActiveClass: '',
unreachableCount: (data.unreachable_count) ? data.unreachable_count : 0,
status_text: status,
tasks: {}
};

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

@ -67,6 +67,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
elapsed: '00:00:00',
hostCount: 0,
fistTask: null,
unreachableCount: 0,
status_text: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
tasks: {}
};
if (scope.activePlay) {
@ -406,7 +408,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
ok: (status === 'successful') ? 1 : 0,
changed: (status === 'changed') ? 1 : 0,
unreachable: (status === 'unreachable') ? 1 : 0,
failed: (status === 'failed') ? 1 : 0
failed: (status === 'failed') ? 1 : 0,
status: (status === 'failed') ? 'failed' : 'successful'
};
}
@ -454,6 +457,11 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
msg: msg
};
// increment the unreachable count on the play
if (status === 'unreachable' && scope.jobData.plays[scope.activePlay]) {
scope.jobData.plays[scope.activePlay].unreachableCount++;
}
// update the task status bar
if (scope.jobData.plays[scope.activePlay].tasks[task_id] !== undefined) {
task = scope.jobData.plays[scope.activePlay].tasks[task_id];
@ -464,7 +472,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
task.reportedHosts += 1;
task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
task.failedCount += (status === 'failed') ? 1 : 0;
task.changedCount += (status === 'changed') ? 1 : 0;
task.successfulCount += (status === 'successful') ? 1 : 0;
task.skippedCount += (status === 'skipped') ? 1 : 0;
@ -745,10 +753,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
url = scope.job.related.job_host_summaries + '?';
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&': '';
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
url += 'page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
url += 'page_size=' + scope.hostSummariesMaxRows + '&order_by=host__name';
scope.hosts = [];
scope.hostsMap = {};
Rest.setUrl(url);
Rest.get()
@ -760,7 +767,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
ok: event.ok,
changed: event.changed,
unreachable: event.dark,
failed: event.failures
failed: event.failures,
status: (event.failed) ? 'failed' : 'successful'
});
});
$('#hosts-summary-table').mCustomScrollbar("update");
@ -790,7 +798,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
scope.host_summary.unreachable = 0;
for (host in data.dark) {
scope.host_summary.dark += data.dark[host];
scope.host_summary.unreachable += data.dark[host];
}
scope.host_summary.failed = 0;
for (host in data.failures) {

2
awx/ui/static/js/lists/Admins.js
View File

@ -19,7 +19,7 @@ angular.module('AdminListDefinition', [])
selectInstructions: '<p>Select existing users by clicking each user or checking the related checkbox. When finished, click the blue ' +
'<em>Select</em> button, located bottom right.</p>',
base: 'users',
index: true,
index: false,
hover: true,
fields: {

2
awx/ui/static/js/lists/CloudCredentials.js
View File

@ -18,7 +18,7 @@ angular.module('CloudCredentialsListDefinition', [])
editTitle: 'Cloud Credentials',
selectInstructions: '<p>Select existing credentials by clicking each credential or checking the related checkbox. When finished, click the blue ' +
'<em>Select</em> button, located bottom right.</p> <p>Create a brand new credential by clicking the green <em>Create New</em> button.</p>',
index: true,
index: false,
hover: true,
fields: {

2
awx/ui/static/js/lists/Credentials.js
View File

@ -19,7 +19,7 @@ angular.module('CredentialsListDefinition', [])
selectInstructions: "<p>Select existing credentials by clicking each credential or checking the related checkbox. When " +
"finished, click the blue <em>Select</em> button, located bottom right.</p> <p>Create a brand new credential by clicking " +
"the green <em>Create New</em> button.</p>",
index: true,
index: false,
hover: true,
fields: {

2
awx/ui/static/js/lists/Groups.js
View File

@ -16,7 +16,7 @@ angular.module('GroupListDefinition', [])
iterator: 'copy_group',
selectTitle: 'Copy Groups',
editTitle: 'Groups',
index: true,
index: false,
well: false,
fields: {

2
awx/ui/static/js/lists/HomeGroups.js
View File

@ -16,7 +16,7 @@ angular.module('HomeGroupListDefinition', [])
name: 'home_groups',
iterator: 'group',
editTitle: 'Groups',
index: true,
index: false,
hover: true,
well: true,

4
awx/ui/static/js/lists/HomeHosts.js
View File

@ -7,7 +7,7 @@
* on the home tab.
*
*/
'use strict';
angular.module('HomeHostListDefinition', [])
@ -17,7 +17,7 @@ angular.module('HomeHostListDefinition', [])
iterator: 'host',
selectTitle: 'Add Existing Hosts',
editTitle: 'Hosts',
index: true,
index: false,
hover: true,
well: true,

2
awx/ui/static/js/lists/Hosts.js
View File

@ -16,7 +16,7 @@ angular.module('HostListDefinition', [])
iterator: 'copy_host',
selectTitle: 'Add Existing Hosts',
editTitle: 'Hosts',
index: true,
index: false,
well: false,
fields: {

2
awx/ui/static/js/lists/Inventories.js
View File

@ -17,7 +17,7 @@ angular.module('InventoriesListDefinition', [])
editTitle: 'Inventories',
selectInstructions: "Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> " +
"button to create a new row.",
index: true,
index: false,
hover: true,
fields: {

2
awx/ui/static/js/lists/JobHosts.js
View File

@ -16,7 +16,7 @@ angular.module('JobHostDefinition', [])
iterator: 'jobhost',
editTitle: 'All summaries',
"class": "table-condensed",
index: true,
index: false,
hover: true,
navigationLinks: {

2
awx/ui/static/js/lists/JobTemplates.js
View File

@ -18,7 +18,7 @@ angular.module('JobTemplatesListDefinition', [])
editTitle: 'Job Templates',
selectInstructions: "Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> " +
"button to create a new row.",
index: true,
index: false,
hover: true,
fields: {

4
awx/ui/static/js/lists/Organizations.js
View File

@ -17,13 +17,13 @@ angular.module('OrganizationListDefinition', [])
selectTitle: 'Add Organizations',
editTitle: 'Organizations',
hover: true,
index: true,
index: false,
fields: {
name: {
key: true,
label: 'Name',
columnClass: 'col-sm-8 col-xs-8'
columnClass: 'col-lg-4 col-md-6 col-sm-8 col-xs-8'
},
description: {
label: 'Description',

2
awx/ui/static/js/lists/Permissions.js
View File

@ -18,7 +18,7 @@ angular.module('PermissionListDefinition', [])
selectInstructions: "Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> " +
"button to create a new row.",
editTitle: 'Permissions',
index: true,
index: false,
well: true,
fields: {

2
awx/ui/static/js/lists/Projects.js
View File

@ -18,7 +18,7 @@ angular.module('ProjectsListDefinition', [])
editTitle: 'Projects',
selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
'<em>Select</em> button, located bottom right.</p> <p>Create a brand new project by clicking the green <em>Create New</em> button.</p>',
index: true,
index: false,
hover: true,
fields: {

2
awx/ui/static/js/lists/Schedules.js
View File

@ -16,7 +16,7 @@ angular.module('SchedulesListDefinition', [])
selectTitle: '',
editTitle: 'Schedules',
well: false,
index: true,
index: false,
hover: true,
fields: {

6
awx/ui/static/js/lists/Teams.js
View File

@ -17,19 +17,19 @@ angular.module('TeamsListDefinition', [])
editTitle: 'Teams',
selectInstructions: "Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> " +
"button to create a new row.",
index: true,
index: false,
hover: true,
fields: {
name: {
key: true,
label: 'Name',
columnClass: 'col-md-4 col-sm-9 col-xs-9',
columnClass: 'col-lg-3 col-md-4 col-sm-9 col-xs-9',
modalColumnClass: 'col-md-8'
},
description: {
label: 'Description',
columnClass: 'col-md-3 hidden-sm hidden-xs',
columnClass: 'col-lg-3 col-md-3 hidden-sm hidden-xs',
excludeModal: true
},
organization: {

2
awx/ui/static/js/lists/Users.js
View File

@ -18,7 +18,7 @@ angular.module('UserListDefinition', [])
selectInstructions: '<p>Select existing users by clicking each user or checking the related checkbox. When finished, click the blue ' +
'<em>Select</em> button, located bottom right.</p> <p>When available, a brand new user can be created by clicking the green ' +
'<em>Create New</em> button.</p>',
index: true,
index: false,
hover: true,
fields: {

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

@ -55,6 +55,7 @@
@import "inventory-edit.less";
@import "breadcrumbs.less";
@import "stdout.less";
@import "lists.less";
/* Bootstrap fix that's causing a right margin to appear

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

@ -16,15 +16,15 @@
.job_summary {
.table {
margin-bottom: 0;
border: 1px solid @grey;
border: 1px solid @well-border;
background-color: @white;
}
.table>tbody>tr>td {
border-top-color: @well;
border-top-color: @well-border;
padding-bottom: 0;
}
.table>thead>tr>th {
border-bottom-color: @well;
border-bottom-color: @well-border;
padding-bottom: 0;
height: 22px;
}
@ -185,12 +185,12 @@
.table-detail {
overflow-x: hidden;
overflow-y: auto;
border: 1px solid @grey;
border: 1px solid @well-border;
border-radius: 4px;
background-color: @white;
/*padding-left: 3px; */
.row {
border-top: 1px solid @grey;
border-top: 1px solid @well-border;
}
.row:first-child {
border: none;
@ -301,8 +301,8 @@ label.small-label {
left: 0;
#hosts-table-detail {
padding: 3px 0 3px 5px;
border: 1px solid @grey;
border-top: 2px solid #ddd;
border: 1px solid @well-border;
border-top: 2px solid @well-border;
height: 150px;
background-color: @white;
.col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {

16
awx/ui/static/less/lists.less Normal file
View File

@ -0,0 +1,16 @@
/*********************************************
* Copyright (c) 2014 AnsibleWorks, Inc.
*
* lists.less
*
* custom styles for generated lists
*
*/
.list-well {
margin-top: 20px;
table >thead >tr >th {
font-weight: normal;
}
}

2
awx/ui/static/lib/ansible/directives.js
View File

@ -729,7 +729,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
updateOnContentResize: true
},
scrollButtons: {
enable: true
enable: false
},
theme: theme,
mouseWheel: true,

2
awx/ui/static/lib/ansible/list-generator.js
View File

@ -168,7 +168,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
}
if (options.mode !== 'lookup' && (list.well === undefined || list.well)) {
html += "<div class=\"well\">\n";
html += "<div class=\"list-well\">\n";
}
if (options.activityStream) {

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

@ -77,8 +77,9 @@
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">Name</div>
<div class="col-lg-6 col-md-6 col-sm-10 col-xs-12">Name</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Reporting Hosts</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Unreachable Hosts</div>
</div>
</div>
<div id="plays-table-detail" aw-custom-scroll class="table-detail">
@ -88,11 +89,12 @@
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
data-placement="top">{{ play.elapsed }}
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12 status-column"
aw-tool-tip="Event Id: {{ play.id }}<br />Status: {{ play.status }}" data-placement="top">
<div class="col-lg-6 col-md-6 col-sm-10 col-xs-12 status-column"
aw-tool-tip="Event Id: {{ play.id }}<br />Status: {{ play.status_text }}" data-placement="top">
<i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.hostCount }}</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.unreachableCount }}</div>
</div>
<div class="row" ng-show="playList.length == 0">
<div class="col-lg-12">