mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 05:01:19 -03:30
Styling changes from 5/9 status meeting.
This commit is contained in:
chouseknecht
parent
bb071379c2
commit
e9ddf51387
@ -32,8 +32,11 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
scope.hostTableRows = 300;
|
||||
scope.hostSummaryTableRows = 300;
|
||||
scope.searchAllHostsEnabled = true;
|
||||
scope.liveEventsEnabled = true;
|
||||
scope.liveEventToggleDisabled = false;
|
||||
|
||||
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" +
|
||||
"<p><i class=\"fa fa-circle failed-hosts-color\"></i> Failed</p>\n";
|
||||
|
||||
event_socket = Socket({
|
||||
scope: scope,
|
||||
@ -265,7 +268,6 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
});
|
||||
$('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px", "z-index": 0 }).show();
|
||||
}
|
||||
|
||||
// Detail table height adjusting. First, put page height back to 'normal'.
|
||||
$('#plays-table-detail').height(150);
|
||||
$('#plays-table-detail').mCustomScrollbar("update");
|
||||
@ -283,9 +285,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
$('#hosts-table-detail').height(150 + (height / 3));
|
||||
$('#hosts-table-detail').mCustomScrollbar("update");
|
||||
}
|
||||
|
||||
// Summary table height adjusting.
|
||||
height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() -
|
||||
height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() -
|
||||
$('#hosts-summary-section .table-header').outerHeight() -
|
||||
$('#summary-search-section').outerHeight() - 20;
|
||||
$('#hosts-summary-table').height(height);
|
||||
$('#hosts-summary-table').mCustomScrollbar("update");
|
||||
@ -394,12 +396,13 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
|
||||
scope.setSearchAll = function(search) {
|
||||
if (search === 'host') {
|
||||
scope.search_all_label = 'Host name';
|
||||
scope.search_all_label = 'Host';
|
||||
scope.searchAllDisabled = false;
|
||||
scope.search_all_placeholder = 'Search all by host name';
|
||||
}
|
||||
else {
|
||||
scope.search_all_label = 'Failures';
|
||||
scope.search_all_placeholder = 'Show failed events';
|
||||
scope.searchAllDisabled = true;
|
||||
scope.search_all_placeholder = '';
|
||||
}
|
||||
|
||||
@ -65,6 +65,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
name: event.play,
|
||||
created: event.created,
|
||||
status: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none',
|
||||
elapsed: '00:00:00',
|
||||
children: []
|
||||
});
|
||||
SelectPlay({
|
||||
@ -107,6 +108,15 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
id: event.id
|
||||
});
|
||||
}
|
||||
if (event.event === 'playbook_on_no_hosts_matched') {
|
||||
UpdatePlayStatus({
|
||||
scope: scope,
|
||||
play_id: event.parent,
|
||||
failed: true,
|
||||
changed: false,
|
||||
modified: event.modified
|
||||
});
|
||||
}
|
||||
if (event.event === 'playbook_on_task_start') {
|
||||
hostCount = GetHostCount({
|
||||
scope: scope,
|
||||
@ -714,6 +724,9 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
}, 700);
|
||||
|
||||
// Get current list of hosts from the API
|
||||
|
||||
// is the job done? if so, only select hosts for the last task?
|
||||
|
||||
Wait('start');
|
||||
scope.hostResults = [];
|
||||
url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&';
|
||||
|
||||
@ -7,6 +7,11 @@
|
||||
*
|
||||
*/
|
||||
|
||||
@failed-hosts-color: #DA4D49;
|
||||
@successful-hosts-color: #9ED89E;
|
||||
@changed-hosts-color: #FFC773;
|
||||
|
||||
|
||||
#jobs-detail {
|
||||
.nav-path {
|
||||
margin-bottom: 20px;
|
||||
@ -49,19 +54,31 @@
|
||||
}
|
||||
|
||||
.failed-hosts {
|
||||
background-color: #DA4D49;
|
||||
background-color: @failed-hosts-color;
|
||||
}
|
||||
.failed-hosts-color {
|
||||
color: @failed-hosts-color;
|
||||
}
|
||||
.successful-hosts {
|
||||
background-color: #9ED89E;
|
||||
background-color: @successful-hosts-color;
|
||||
}
|
||||
.successful-hosts-color {
|
||||
color: @successful-hosts-color;
|
||||
}
|
||||
.changed-hosts {
|
||||
background-color: #FFC773;
|
||||
background-color: @changed-hosts-color;
|
||||
}
|
||||
.changed-hosts-color {
|
||||
color: @changed-hosts-color;
|
||||
}
|
||||
.skipped-hosts, .no-matching-hosts {
|
||||
background-color: #D4D4D4;
|
||||
}
|
||||
.unreachable-hosts {
|
||||
background-color: @black;
|
||||
background-color: @grey;
|
||||
}
|
||||
.unreachable-hosts-color {
|
||||
color: @grey;
|
||||
}
|
||||
|
||||
.job_well {
|
||||
@ -73,13 +90,6 @@
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
#summary-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#hide-summary-button {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@ -204,6 +214,7 @@
|
||||
float: right;
|
||||
input {
|
||||
width: 250px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
@ -217,6 +228,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
#search_all_hosts_name {
|
||||
font-size: 14px;
|
||||
padding-left: 3px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#event-help-link {
|
||||
margin-left: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#search-all-input-icons {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
@ -230,6 +252,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
label.small-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#task-hosts-section {
|
||||
position: relative;
|
||||
top: 0;
|
||||
@ -266,6 +292,9 @@
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
.badge-column a {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.mCSB_container {
|
||||
|
||||
@ -740,6 +740,28 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
|
||||
}
|
||||
});
|
||||
};
|
||||
}])
|
||||
|
||||
// Toggle switch inspired by http://www.bootply.com/92189
|
||||
.directive('awToggleButton', [ function() {
|
||||
return function(scope, element) {
|
||||
$(element).click(function() {
|
||||
$(this).find('.btn').toggleClass('active');
|
||||
if ($(this).find('.btn-primary').size()>0) {
|
||||
$(this).find('.btn').toggleClass('btn-primary');
|
||||
}
|
||||
if ($(this).find('.btn-danger').size()>0) {
|
||||
$(this).find('.btn').toggleClass('btn-danger');
|
||||
}
|
||||
if ($(this).find('.btn-success').size()>0) {
|
||||
$(this).find('.btn').toggleClass('btn-success');
|
||||
}
|
||||
if ($(this).find('.btn-info').size()>0) {
|
||||
$(this).find('.btn').toggleClass('btn-info');
|
||||
}
|
||||
$(this).find('.btn').toggleClass('btn-default');
|
||||
});
|
||||
};
|
||||
}]);
|
||||
|
||||
/*
|
||||
|
||||
@ -15,13 +15,15 @@
|
||||
|
||||
<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>
|
||||
<div class="col-lg-11 col-md-11 col-sm-10 col-xs-10 status-column"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} {{ job_status.explanation }}</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">
|
||||
<button type="button" class="btn btn-default btn-xs" aw-tool-tip="View standard out" data-placement="top"><i class="fa fa-external-link"></i></button>
|
||||
<button type="button" id="summary-button" class="btn btn-default 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">
|
||||
@ -89,7 +91,7 @@
|
||||
</div>
|
||||
<div class="row" ng-show="taskList.length === 0">
|
||||
<div class="col-lg-12">
|
||||
<div class="loading-info">No tasks found for selected play</div>
|
||||
<div class="loading-info">No tasks matched</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,7 +101,7 @@
|
||||
<div class="header">
|
||||
<div class="title">Hosts</div>
|
||||
<div class="search-field">
|
||||
<input type="text" ng-model="task_host_name" placeholder="Search" ng-keypress="taskHostNameKeyPress($event)" />
|
||||
<input type="text" ng-model="task_host_name" placeholder="Host Name" ng-keypress="taskHostNameKeyPress($event)" />
|
||||
<a class="search-icon" ng-show="searchTaskHostsEnabled" ng-click="searchTaskHosts()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchTaskHostsEnabled" ng-click="task_host_name=''; searchTaskHosts()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
@ -115,7 +117,7 @@
|
||||
{{ result.msg }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" ng-show="results.length === 0">
|
||||
<div class="row" ng-show="!results || results.length === 0">
|
||||
<div class="col-lg-12">
|
||||
<div class="loading-info">No hosts matched</div>
|
||||
</div>
|
||||
@ -133,64 +135,62 @@
|
||||
<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>
|
||||
<a href="" class="btn btn-xs btn-default" ng-click="toggleSummary('hide')" aw-tool-tip="Hide summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
|
||||
</div>
|
||||
<div id="summary-search-section" class="section">
|
||||
<div class="header">
|
||||
<div class="title">Filter Events</div>
|
||||
</div>
|
||||
<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 class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div style="position:relative;">
|
||||
<input type="text" class="input-sm form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name"
|
||||
placeholder="Host Name" 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 class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div style="padding-top: 5px;">
|
||||
<label class="small-label">Show</label>
|
||||
<div class="btn-group" aw-toggle-button>
|
||||
<button class="btn btn-xs btn-default">All</button>
|
||||
<button class="btn btn-xs btn-primary active">Errors</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<div class="header">
|
||||
<div class="title">Host Summary</div>
|
||||
<div class="search-field">
|
||||
<input type="text" ng-model="summary_host_name" placeholder="Search" ng-keypress="summaryHostNameKeyPress($event)" />
|
||||
<input type="text" ng-model="summary_host_name" placeholder="Host Name" ng-keypress="summaryHostNameKeyPress($event)" />
|
||||
<a class="search-icon" ng-show="searchSummaryHostsEnabled" ng-click="searchSummaryHosts()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchSummaryHostsEnabled" ng-click="summary_host_name=''; searchSummaryHosts()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 col-md-7 col-sm-4 col-xs-4">Host</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">Events</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Events
|
||||
<a href="" id="event-help-link" aw-pop-over="{{ eventsHelpText }}" aw-tool-tip="Click for help" aw-pop-over-watch="eventsHelpText" data-placement="top" data-container="body" data-title="Help" class="help-link"><i class="fa fa-question-circle"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
|
||||
data-on-total-scroll-back="HostSummaryOnTotalScrollBack">
|
||||
<div class="row" ng-repeat="host in hosts" id="{{ host.id }}">
|
||||
<div class="name col-lg-7 col-md-6 col-sm-4 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}"
|
||||
<div class="name col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="/#/home/hosts/?id={{ host.id }}"
|
||||
aw-tool-tip="Click to edit host" data-placement="top">{{ host.name }}</a>
|
||||
</div>
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column">
|
||||
<a href="" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
|
||||
</div>
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
|
||||
<a href="" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
|
||||
</div>
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
|
||||
<a href="" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
|
||||
</div>
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
|
||||
<a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user