mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
Job detail page re-refactor
Added search dialogs to each list. Now need to wire them.
This commit is contained in:
Chris Houseknecht
parent
eac4798c63
commit
2ac09a34fb
@ -89,6 +89,14 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
|
||||
id: 'eventviewer-modal-dialog',
|
||||
// onResizeStop: resizeText,
|
||||
title: ( (title) ? title : 'Event Details' ),
|
||||
onClose: function() {
|
||||
try {
|
||||
scope.$destroy();
|
||||
}
|
||||
catch(e) {
|
||||
//ignore
|
||||
}
|
||||
},
|
||||
onOpen: function() {
|
||||
$('#eventview-tabs a:first').tab('show');
|
||||
$('#dialog-ok-button').focus();
|
||||
|
||||
@ -56,6 +56,14 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
|
||||
id: 'host-events-modal-dialog',
|
||||
onResizeStop: fixHeight,
|
||||
title: ( (title) ? title : 'Host Events' ),
|
||||
onClose: function() {
|
||||
try {
|
||||
scope.$destroy();
|
||||
}
|
||||
catch(e) {
|
||||
//ignore
|
||||
}
|
||||
},
|
||||
onOpen: function() {
|
||||
fixHeight();
|
||||
}
|
||||
|
||||
@ -268,25 +268,16 @@
|
||||
.table-detail {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 1px solid @well-border;
|
||||
border-radius: 4px;
|
||||
background-color: @white;
|
||||
/*padding-left: 3px; */
|
||||
.row {
|
||||
border-top: 1px solid @well-border;
|
||||
}
|
||||
.row:first-child {
|
||||
border: none;
|
||||
}
|
||||
/*.row:nth-child(odd) {
|
||||
background-color: @well;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}*/
|
||||
.active {
|
||||
background-color: #EDF2F2;
|
||||
}
|
||||
|
||||
.loading-info {
|
||||
padding-top: 5px;
|
||||
padding-left: 3px;
|
||||
@ -307,16 +298,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: bottom: 5px;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: inline-block;
|
||||
@ -361,11 +352,31 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
font-size: 12px;
|
||||
.form-control {
|
||||
font-size: 12px;
|
||||
}
|
||||
.form-group:nth-of-type(2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-name {
|
||||
.input-xs {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-all-input-icons {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 5px;
|
||||
z-index: 100;
|
||||
top: 3px;
|
||||
a {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
@ -384,8 +395,6 @@
|
||||
left: 0;
|
||||
#hosts-table-detail {
|
||||
padding: 3px 0 3px 5px;
|
||||
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 {
|
||||
@ -419,6 +428,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
@ -432,13 +445,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mCSB_container {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
#graph-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.legend {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.header {
|
||||
margin-top: 20px;
|
||||
.legend {
|
||||
|
||||
@ -75,7 +75,33 @@
|
||||
|
||||
<div id="job-detail-tables">
|
||||
<div id="play-section" class="section">
|
||||
<h5>Plays</h5>
|
||||
|
||||
<div class="row title-row">
|
||||
<div class="col-lg-1 col-md-2 col-sm-2 title">Plays</div>
|
||||
<div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
|
||||
<form id="play-search-form" class="search-form form-inline">
|
||||
<div class="form-group">
|
||||
<label>Search</label>
|
||||
<div class="search-name" style="display:inline-block; position:relative;">
|
||||
<input type="text" class="input-xs form-control" id="search_play_name" ng-model="search_play_name"
|
||||
placeholder="Play Name" ng-keypress="searchPlaysKeyPress($event)" >
|
||||
<div id="search-all-input-icons">
|
||||
<a class="search-icon" ng-show="searchPlaysEnabled" ng-click="searchPlays()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchPlaysEnabled" ng-click="search_play_name=''; searchPlays()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
|
||||
@ -106,7 +132,33 @@
|
||||
</div><!-- section -->
|
||||
|
||||
<div id="task-section" class="section" tasks=>
|
||||
<h5>Tasks</h5>
|
||||
|
||||
<div class="row title-row">
|
||||
<div class="col-lg-1 col-md-2 col-sm-2 title">Tasks</div>
|
||||
<div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
|
||||
<form id="task-search-form" class="search-form form-inline">
|
||||
<div class="form-group">
|
||||
<label>Search</label>
|
||||
<div class="search-name" style="display:inline-block; position:relative;">
|
||||
<input type="text" class="input-xs form-control" id="search_task_name" ng-model="search_task_name"
|
||||
placeholder="Task Name" ng-keypress="searchTasksKeyPress($event)" >
|
||||
<div id="search-all-input-icons">
|
||||
<a class="search-icon" ng-show="searchTasksEnabled" ng-click="searchTasks()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchTasksEnabled" ng-click="search_task_name=''; searchTasks()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
|
||||
@ -142,14 +194,33 @@
|
||||
</div><!-- section -->
|
||||
|
||||
<div id="task-hosts-section" class="section">
|
||||
<div class="header">
|
||||
<div class="title">Hosts</div>
|
||||
<!-- <div class="search-field">
|
||||
<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>!-->
|
||||
|
||||
<div class="row title-row">
|
||||
<div class="col-lg-1 col-md-2 col-sm-2 title">Hosts</div>
|
||||
<div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
|
||||
<form id="host-search-form" class="search-form form-inline">
|
||||
<div class="form-group">
|
||||
<label>Search</label>
|
||||
<div class="search-name" style="display:inline-block; position:relative;">
|
||||
<input type="text" class="input-xs form-control" id="search_host_name" ng-model="search_host_name"
|
||||
placeholder="Host Name" ng-keypress="searchHostsKeyPress($event)" >
|
||||
<div id="search-all-input-icons">
|
||||
<a class="search-icon" ng-show="searchHostsEnabled" ng-click="searchHosts()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchHostsEnabled" ng-click="search_host_name=''; searchHosts()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hosts-table-detail" class="table-detail" lr-infinite-scroll="hostResultsScrollDown" scroll-threshold="10" time-threshold="500">
|
||||
<div id="hosts-table-detail-inner">
|
||||
<div class="row cursor-pointer" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus}) track by $index" ng-click="viewHostResults(result.id)">
|
||||
@ -182,41 +253,41 @@
|
||||
<a href="" class="btn btn-xs btn-primary" 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</div>
|
||||
</div>
|
||||
<form class="form-inline" id="job-filter-form">
|
||||
<div class="col-sm-7 col-xs-7 remove-left-padding">
|
||||
<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="liveEventProcessing " ng-keypress="allHostNameKeyPress($event)" >
|
||||
<div id="search-all-input-icons">
|
||||
<a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllByHost()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllByHost()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 col-xs-5 remove-left-padding">
|
||||
<label>Status</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="display:block; clear:both; width:100%; height:1px; margin-top:55px; margin-bottom:20px;">
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<div class="header">
|
||||
<div class="title">Host Summary</div>
|
||||
<div class="legend pull-right"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
|
||||
|
||||
<div class="row title-row">
|
||||
<div class="col-lg-1 col-md-2 col-sm-2 title">Summary</div>
|
||||
<div class="col-lg-10 col-md-8 col-sm-8" style="text-align:right;">
|
||||
<form id="task-search-form" class="search-form form-inline">
|
||||
<div class="form-group">
|
||||
<label>Search</label>
|
||||
<div class="search-name" style="display:inline-block; position:relative;">
|
||||
<input type="text" class="input-xs form-control" id="search_taks_name" ng-model="search_task_name"
|
||||
placeholder="Task Name" ng-keypress="searchTasksKeyPress($event)" >
|
||||
<div id="search-all-input-icons">
|
||||
<a class="search-icon" ng-show="searchTasksEnabled" ng-click="searchTasks()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchTasksEnabled" ng-click="search_task_name=''; searchTasks()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row legend-row">
|
||||
<div class="col-md-12">
|
||||
<div class="legend"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</div>
|
||||
@ -248,8 +319,8 @@
|
||||
|
||||
<div id="graph-section" class="section">
|
||||
<div class="header">
|
||||
<div class="title">Host Status Summary</div>
|
||||
<div class="legend pull-right" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<div class="title">Status Summary</div>
|
||||
<div class="legend" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
|
||||
</div>
|
||||
</div><!-- graph section -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user