mirror of
https://github.com/ansible/awx.git
synced 2026-01-19 05:31:22 -03:30
Job detail page refactor
Restyled status information using horizontal form layout with overrides to make not look like a form. Added a more/less link to hide or show additional details (i.e. job template, project, inventory). Added proper labels for finsished and elapsed. Looking much better.
This commit is contained in:
Chris Houseknecht
parent
3c05334d33
commit
0a829dc610
@ -42,6 +42,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
|
||||
scope.searchAllHostsEnabled = true;
|
||||
scope.haltEventQueue = false;
|
||||
scope.processing = false;
|
||||
scope.lessStatus = true;
|
||||
|
||||
scope.host_summary = {};
|
||||
scope.host_summary.ok = 0;
|
||||
@ -529,7 +530,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
$('#hosts-table-detail').height(150);
|
||||
$('#hosts-table-detail').mCustomScrollbar("update");
|
||||
height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
|
||||
//height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
|
||||
height = $(window).height() - $('#main-menu-container .navbar').outerHeight()
|
||||
if (height > 15) {
|
||||
// there's a bunch of white space at the bottom, let's use it
|
||||
$('#plays-table-detail').height(150 + (height / 3));
|
||||
@ -638,6 +640,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
|
||||
return true;
|
||||
};
|
||||
|
||||
scope.toggleLessStatus = function() {
|
||||
scope.lessStatus = (scope.lessStatus) ? false : true;
|
||||
};
|
||||
|
||||
scope.HostDetailOnTotalScroll = _.debounce(function() {
|
||||
// Called when user scrolls down (or forward in time)
|
||||
var url, mcs = arguments[0];
|
||||
|
||||
@ -242,8 +242,7 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
|
||||
search_row, page_row, height, header, row_height;
|
||||
if (docw > 1240 && doch > 800) {
|
||||
// customize the container height and # of rows based on available viewport height
|
||||
available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#job-status').outerHeight() -
|
||||
$('#breadcrumb-container').outerHeight() - 80;
|
||||
available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#job-status').outerHeight() - 80;
|
||||
$('.jobs-list-container').each(function() {
|
||||
$(this).height(Math.floor(available_height / 2));
|
||||
});
|
||||
|
||||
@ -13,11 +13,6 @@
|
||||
@skipped-hosts-color: @skipped;
|
||||
@unreachable-hosts-color: #A9A9A9;
|
||||
|
||||
|
||||
#jobs-detail {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.job_summary {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
@ -110,13 +105,6 @@
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
margin-bottom: 10px;
|
||||
.job-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#job_options {
|
||||
height: 100px;
|
||||
overflow-y: auto;
|
||||
@ -144,6 +132,31 @@
|
||||
.well {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#job-status-form {
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
.control-label {
|
||||
padding-top: 0;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 15px;
|
||||
}
|
||||
hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
.more-or-less {
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#job-summary-container {
|
||||
@ -352,3 +365,10 @@ svg text.percent{
|
||||
font-size:12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#job-status-form .more-or-less {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,42 +1,75 @@
|
||||
<div class="tab-pane" id="jobs-detail">
|
||||
<div ng-cloak id="htmlTemplate">
|
||||
|
||||
<!-- <div class="row">
|
||||
<div class="row">
|
||||
<div id="breadcrumb-container" class="col-md-12" style="position: relative;">
|
||||
<ul class="ansible-breadcrumb" id="breadcrumb-list">
|
||||
<li><a href="/#/jobs">Jobs</a></li>
|
||||
<li class="active"><a href="">{{ job_id }} - {{ job.name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="row" style="position: relative;">
|
||||
<div id="job-detail-container">
|
||||
<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>
|
||||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 status-column"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</div>
|
||||
<div class="col-lg-7 col-md-7 col-sm-4 col-xs-4">{{ job_status.explanation }}</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-right">
|
||||
<a href="/#/jobs/{{ job_id }}/stdout" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-external-link"></i></a>
|
||||
<button type="button" id="summary-button" class="btn btn-primary btn-xs" ng-click="toggleSummary()" aw-tool-tip="View summary" data-placement="top"><i class="fa fa-arrow-circle-left fa-lg"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row status-row">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Started</div>
|
||||
<div ng-show="job_status.started" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
|
||||
<div ng-show="!job_status.started" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">Not Started</div>
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Elapsed</div>
|
||||
<div ng-show="job_status.finished" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">{{ job_status.elapsed }}</div>
|
||||
<div ng-show="!job_status.finished" class="col-lg-5 col-md-5 col-sm-4 col-xs-4">00:00:00</div>
|
||||
</div>
|
||||
<div class="form-horizontal" id="job-status-form">
|
||||
<div class="form-group">
|
||||
<label class="col-md-1 col-sm-2 control-label">Status</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} {{ job_status.explanation }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row status-row">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Project</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a></div>
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 job-label">Inventory</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-4"><a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a></div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-1 col-sm-2 control-label">Started</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<span ng-show="job_status.started">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</span>
|
||||
<span ng-show="job_status.finished" id="finished-time">Finished {{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</span>
|
||||
<span ng-show="job_status.finished" id="elapsed-time">Elapsed {{ job_status.elapsed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="lessStatus">
|
||||
<div class="col-md-1 col-sm-2 more-or-less">
|
||||
<a href="" ng-click="toggleLessStatus()">more...</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="!lessStatus">
|
||||
<label class="col-md-1 col-sm-2 control-label">Template</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<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" ng-show="!lessStatus">
|
||||
<label class="col-md-1 col-sm-2 control-label">Project</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="!lessStatus">
|
||||
<label class="col-md-1 col-sm-2 control-label">Inventory</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="!lessStatus">
|
||||
<div class="col-md-1 col-sm-2 more-or-less">
|
||||
<a href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="job-detail-tables">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user