mirror of
https://github.com/ansible/awx.git
synced 2026-03-06 11:11:07 -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
@@ -89,6 +89,14 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
|
|||||||
id: 'eventviewer-modal-dialog',
|
id: 'eventviewer-modal-dialog',
|
||||||
// onResizeStop: resizeText,
|
// onResizeStop: resizeText,
|
||||||
title: ( (title) ? title : 'Event Details' ),
|
title: ( (title) ? title : 'Event Details' ),
|
||||||
|
onClose: function() {
|
||||||
|
try {
|
||||||
|
scope.$destroy();
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
//ignore
|
||||||
|
}
|
||||||
|
},
|
||||||
onOpen: function() {
|
onOpen: function() {
|
||||||
$('#eventview-tabs a:first').tab('show');
|
$('#eventview-tabs a:first').tab('show');
|
||||||
$('#dialog-ok-button').focus();
|
$('#dialog-ok-button').focus();
|
||||||
|
|||||||
@@ -56,6 +56,14 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
|
|||||||
id: 'host-events-modal-dialog',
|
id: 'host-events-modal-dialog',
|
||||||
onResizeStop: fixHeight,
|
onResizeStop: fixHeight,
|
||||||
title: ( (title) ? title : 'Host Events' ),
|
title: ( (title) ? title : 'Host Events' ),
|
||||||
|
onClose: function() {
|
||||||
|
try {
|
||||||
|
scope.$destroy();
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
//ignore
|
||||||
|
}
|
||||||
|
},
|
||||||
onOpen: function() {
|
onOpen: function() {
|
||||||
fixHeight();
|
fixHeight();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -268,25 +268,16 @@
|
|||||||
.table-detail {
|
.table-detail {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border: 1px solid @well-border;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: @white;
|
background-color: @white;
|
||||||
/*padding-left: 3px; */
|
|
||||||
.row {
|
.row {
|
||||||
border-top: 1px solid @well-border;
|
border-top: 1px solid @well-border;
|
||||||
}
|
}
|
||||||
.row:first-child {
|
.row:first-child {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
/*.row:nth-child(odd) {
|
|
||||||
background-color: @well;
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}*/
|
|
||||||
.active {
|
.active {
|
||||||
background-color: #EDF2F2;
|
background-color: #EDF2F2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-info {
|
.loading-info {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-left: 3px;
|
padding-left: 3px;
|
||||||
@@ -307,16 +298,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
padding: bottom: 5px;
|
padding: bottom: 5px;
|
||||||
|
|
||||||
.title {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-field {
|
.search-field {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -361,11 +352,31 @@
|
|||||||
font-size: 14px;
|
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 {
|
#search-all-input-icons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 3px;
|
right: 3px;
|
||||||
top: 5px;
|
top: 3px;
|
||||||
z-index: 100;
|
|
||||||
a {
|
a {
|
||||||
color: #a9a9a9;
|
color: #a9a9a9;
|
||||||
}
|
}
|
||||||
@@ -384,8 +395,6 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
#hosts-table-detail {
|
#hosts-table-detail {
|
||||||
padding: 3px 0 3px 5px;
|
padding: 3px 0 3px 5px;
|
||||||
border: 1px solid @well-border;
|
|
||||||
border-top: 2px solid @well-border;
|
|
||||||
height: 150px;
|
height: 150px;
|
||||||
background-color: @white;
|
background-color: @white;
|
||||||
.col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {
|
.col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {
|
||||||
@@ -419,6 +428,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.legend-row {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.legend {
|
.legend {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -432,13 +445,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mCSB_container {
|
|
||||||
margin-right: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#graph-section {
|
#graph-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
.legend {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
.header {
|
.header {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
.legend {
|
.legend {
|
||||||
|
|||||||
@@ -75,7 +75,33 @@
|
|||||||
|
|
||||||
<div id="job-detail-tables">
|
<div id="job-detail-tables">
|
||||||
<div id="play-section" class="section">
|
<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="table-header">
|
||||||
<div class="row">
|
<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 col-sm-2 hidden-xs">Started</div>
|
||||||
@@ -106,7 +132,33 @@
|
|||||||
</div><!-- section -->
|
</div><!-- section -->
|
||||||
|
|
||||||
<div id="task-section" class="section" tasks=>
|
<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="table-header">
|
||||||
<div class="row">
|
<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 col-sm-2 hidden-xs">Started</div>
|
||||||
@@ -142,14 +194,33 @@
|
|||||||
</div><!-- section -->
|
</div><!-- section -->
|
||||||
|
|
||||||
<div id="task-hosts-section" class="section">
|
<div id="task-hosts-section" class="section">
|
||||||
<div class="header">
|
|
||||||
<div class="title">Hosts</div>
|
<div class="row title-row">
|
||||||
<!-- <div class="search-field">
|
<div class="col-lg-1 col-md-2 col-sm-2 title">Hosts</div>
|
||||||
<input type="text" ng-model="task_host_name" placeholder="Host Name" ng-keypress="taskHostNameKeyPress($event)" />
|
<div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
|
||||||
<a class="search-icon" ng-show="searchTaskHostsEnabled" ng-click="searchTaskHosts()"><i class="fa fa-search"></i></a>
|
<form id="host-search-form" class="search-form form-inline">
|
||||||
<a class="search-icon" ng-show="!searchTaskHostsEnabled" ng-click="task_host_name=''; searchTaskHosts()"><i class="fa fa-times"></i></a>
|
<div class="form-group">
|
||||||
</div>!-->
|
<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>
|
||||||
|
|
||||||
<div id="hosts-table-detail" class="table-detail" lr-infinite-scroll="hostResultsScrollDown" scroll-threshold="10" time-threshold="500">
|
<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 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)">
|
<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>
|
<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>
|
||||||
|
|
||||||
<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 id="hosts-summary-section" class="section job_summary">
|
||||||
<div class="header">
|
|
||||||
<div class="title">Host Summary</div>
|
<div class="row title-row">
|
||||||
<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
|
<div class="col-lg-1 col-md-2 col-sm-2 title">Summary</div>
|
||||||
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</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>
|
||||||
|
|
||||||
|
<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="table-header">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<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">Host</div>
|
||||||
@@ -248,8 +319,8 @@
|
|||||||
|
|
||||||
<div id="graph-section" class="section">
|
<div id="graph-section" class="section">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">Host Status Summary</div>
|
<div class="title">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="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>
|
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- graph section -->
|
</div><!-- graph section -->
|
||||||
|
|||||||
Reference in New Issue
Block a user