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

Job detail page refactoration

Browse Source 
Expanded the available info in the less/more job parameter section
This commit is contained in:
Chris Houseknecht 2014-07-15 16:25:17 -04:00
parent 9f7763ee9f
commit 49bb4c567f
3 changed files with 102 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
function JobDetailController ($location, $rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
ProcessErrors, SelectPlay, SelectTask, Socket, GetElapsed, DrawGraph, LoadHostSummary, ReloadHostSummaryList, JobIsFinished, SetTaskStyles, DigestEvent,
UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit) {
UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit, ParseVariableString) {
ClearScope();
@ -18,7 +18,8 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
scope = $scope,
api_complete = false,
refresh_count = 0,
lastEventId = 0;
lastEventId = 0,
verbosity_options, job_type_options;
scope.plays = [];
scope.hosts = [];
@ -58,6 +59,17 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
scope.jobData = {};
verbosity_options = [
{ value: 0, label: 'Default' },
{ value: 1, label: 'Verbose' },
{ value: 3, label: 'Debug' }
];
job_type_options = [
{ value: 'run', label: 'Run' },
{ value: 'check', label: 'Check' }
];
scope.eventsHelpText = "<p><i class=\"fa fa-circle successful-hosts-color\"></i> Successful</p>\n" +
"<p><i class=\"fa fa-circle changed-hosts-color\"></i> Changed</p>\n" +
"<p><i class=\"fa fa-circle unreachable-hosts-color\"></i> Unreachable</p>\n" +
@ -469,7 +481,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
});
}
if (data.cloud_credential) {
url = GetBasePath('credentials') + data.credential + '/';
url = GetBasePath('credentials') + data.cloud_credential + '/';
Rest.setUrl(url);
Rest.get()
.success( function(data) {
@ -483,7 +495,6 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
}
});
if (scope.removeLoadJob) {
scope.removeLoadJob();
}
@ -493,6 +504,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
Rest.setUrl(GetBasePath('jobs') + job_id + '/');
Rest.get()
.success(function(data) {
var i;
scope.job = data;
scope.job_template_name = data.name;
scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
@ -500,7 +512,8 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
scope.inventory_url = (scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
scope.project_url = (scope.project_name && data.project) ? '/#/projects/' + data.project : '';
scope.job_type = data.job_type;
scope.credential_url = (data.credential) ? '/#/credentials/' + data.credential : '';
scope.cloud_credential_url = (data.cloud_credential) ? '/#/credentials/' + data.cloud_credential : '';
scope.playbook = data.playbook;
scope.credential = data.credential;
scope.cloud_credential = data.cloud_credential;
@ -508,6 +521,19 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
scope.limit = data.limit;
scope.verbosity = data.verbosity;
scope.job_tags = data.job_tags;
scope.variables = ParseVariableString(data.extra_vars);
for (i=0; i < verbosity_options.length; i++) {
if (verbosity_options[i].value === data.verbosity) {
scope.verbosity = verbosity_options[i].label;
}
}
for (i=0; i < job_type_options.length; i++) {
if (job_type_options[i].value === data.job_type) {
scope.job_type = job_type_options[i].label;
}
}
// In the case the job is already completed, or an error already happened,
// populate scope.job_status info
@ -1124,5 +1150,5 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
'Wait', 'Rest', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer', 'DeleteJob', 'PlaybookRun', 'HostEventsViewer', 'LoadPlays', 'LoadTasks',
'LoadHosts', 'HostsEdit'
'LoadHosts', 'HostsEdit', 'ParseVariableString'
];

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

@ -506,6 +506,18 @@
font-weight: bold;
}
#pre-formatted-variables {
border-radius: 4px;
border: 1px solid @well-border;
overflow: auto;
white-space: pre;
word-break: break-all;
word-wrap: break-word;
padding: 9.5px;
ont-family: Fixed, monospace;
max-height: 200px;
}
.footer-row {
height: 20px;
}

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

@ -43,28 +43,80 @@
<div class="form-group toggle-show" style="display:none;">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
<a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
</div>
</div>
<div class="form-group toggle-show" style="display:none;">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Type</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job_type }}</div>
</div>
<div class="form-group toggle-show" style="display:none;">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
<a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
</div>
</div>
<div class="form-group toggle-show" style="display:none;">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
<a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
</div>
</div>
<div class="form-group toggle-show" style="display:none;">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
<a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Playbook</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.playbook }}</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="credential_name">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Machine Credential</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
<a href="{{ credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ credential_name }}</a>
</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="cloud_credential_name">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Cloud Credential</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
<a href="{{ cloud_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ cloud_credential_name }}</a>
</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="job.forms">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Forks</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.forks }}</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="job.limit">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Limit</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.limit }}</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="job.verbosity">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Verbosity</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ verbosity }}</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="job.job_tags">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Tags</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.job_tags }}</div>
</div>
<div class="form-group toggle-show" style="display:none;" ng-show="job.extra_vars">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Extra Variables</label>
<div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
<div id="pre-formatted-variables">{{ variables }}</div>
<!-- <pre>{{ variables }}</pre> -->
</div>
</div>
<div class="row">
<div class="col-sm-12 more-or-less">
<a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more...</a>
<a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more <i class="fa fa-angle-down"></i></a>
<a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
</div>
</div>