mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 20:00:43 -03:30
Job detail page re-refactor
Changed the HTML for lists from row/column (bootstrap grid framework) to actual <table> elements. Hopeing to improve the responsiveness. Not sure if it does, but feels like a better strategy.
This commit is contained in:
Chris Houseknecht
parent
d24f5d2316
commit
cbb9383cce
@ -263,6 +263,12 @@
|
||||
.table-header {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
.table>thead>tr>th {
|
||||
border-bottom-color: @white;
|
||||
}
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-detail {
|
||||
@ -282,6 +288,13 @@
|
||||
padding-top: 5px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table-condensed > tbody > tr > td {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-column i {
|
||||
@ -412,7 +425,6 @@
|
||||
}
|
||||
.table-header {
|
||||
font-size: 12px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.table-detail {
|
||||
height: 200px;
|
||||
|
||||
@ -103,29 +103,33 @@
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<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 hidden-sm hidden-xs">Elapsed</div>
|
||||
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">Name</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</td>
|
||||
<td class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column">Status</td>
|
||||
<td class="col-lg-9 col-md-9 col-sm-8 col-xs-10">Name</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div id="plays-table-detail" class="table-detail" lr-infinite-scroll="playsScrollDown"
|
||||
scroll-threshold="10" time-threshold="500">
|
||||
<div class="row cursor-pointer" ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</div>
|
||||
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ play.elapsed }}
|
||||
</div>
|
||||
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 status-column"
|
||||
aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top">
|
||||
<i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" ng-show="playList.length == 0">
|
||||
<div class="col-lg-12">
|
||||
<div class="loading-info">No matching plays</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<tbody>
|
||||
<tr ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</td>
|
||||
<td class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ play.elapsed }}</td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
|
||||
<td class="col-lg-9 col-md-9 col-sm-8 col-xs-10">{{ play.name }}</td>
|
||||
</tr>
|
||||
<tr ng-show="plays.length === 0">
|
||||
<td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="scroll-spinner" id="playsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
|
||||
</div><!-- section -->
|
||||
@ -159,35 +163,38 @@
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<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 hidden-sm hidden-xs">Elapsed</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-12">Name</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-xs hidden-sm">Host Status</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</th>
|
||||
<th class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</th>
|
||||
<th class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column">Status</th>
|
||||
<th class="col-lg-4 col-md-4 col-sm-8 col-xs-1o">Name</div>
|
||||
<th class="col-lg-5 col-md-5 hidden-xs hidden-sm">Host Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div id="tasks-table-detail" class="table-detail" lr-infinite-scroll="tasksScrollDown"
|
||||
scroll-threshold="10" time-threshold="500">
|
||||
<div class="row cursor-pointer"
|
||||
ng-repeat="task in taskList = (tasks) track by $index"
|
||||
ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
|
||||
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ task.elapsed }}
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="{{ task.status_tip }}"
|
||||
data-tip-watch="task.status_tip" data-placement="top">
|
||||
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
|
||||
<div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" ng-show="taskList.length == 0">
|
||||
<div class="col-lg-12">
|
||||
<div class="loading-info">No matching tasks</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<tbody>
|
||||
<tr class="cursor-pointer" ng-repeat="task in taskList = (tasks) track by $index" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</td>
|
||||
<td class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ task.elapsed }}</td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ task.status_tip }}"
|
||||
data-tip-watch="task.status_tip" data-placement="top"><i class="fa icon-job-{{ task.status }}"></i></td>
|
||||
<td class="col-lg-4 col-md-4 col-sm-8 col-xs-10"><span ng-show="hasRoles">{{ task.role }}</span> {{ task.name }}</td>
|
||||
<td class="col-lg-5 col-md-5 hidden-sm hidden-xs">
|
||||
<div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-show="taskList.length === 0">
|
||||
<td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="scroll-spinner" id="tasksMoreRows"><i class="fa fa-cog fa-spin"></i></div>
|
||||
</div><!-- section -->
|
||||
@ -221,21 +228,18 @@
|
||||
</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) track by $index" ng-click="viewHostResults(result.id)">
|
||||
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
|
||||
<a href="" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="fa icon-job-{{ result.status }}"></i><i ng-show="result.status_text == 'Unreachable'" class="fa icon-job-unreachable"></i> {{ result.name }}</a>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
||||
{{ result.msg }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" ng-show="results.length == 0">
|
||||
<div class="col-lg-12">
|
||||
<div class="loading-info">No matching hosts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<tbody>
|
||||
<tr ng-repeat="result in results = (hostResults) track by $index" ng-click="viewHostResults(result.id)">
|
||||
<td class="col-lg-1 col-md-1 col-sm1 colxs-2 status-column"><a href="" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="fa icon-job-{{ result.status }}"></i><i ng-show="result.status_text == 'Unreachable'" class="fa icon-job-unreachable"></i></a></td>
|
||||
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 status-column"><a href="" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top">{{ result.name }}</a></td>
|
||||
<td class="col-lg-5 col-md-5 col-sm-5 col-xs-4">{{ result.msg }}</td>
|
||||
</tr>
|
||||
<tr ng-show="results.length === 0">
|
||||
<td colspan="3" class="col-lg-12 loading-info">No matching hosts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="scroll-spinner" id="hostResultsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
|
||||
</div><!-- section -->
|
||||
@ -252,7 +256,7 @@
|
||||
<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"></i></a>
|
||||
</div>
|
||||
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<div id="hosts-summary-section" class="section">
|
||||
|
||||
<div class="row title-row">
|
||||
<div class="col-lg-1 col-md-2 col-sm-2 title">Summary</div>
|
||||
@ -288,29 +292,28 @@
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<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">Completed Tasks</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr><th class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</th><th class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Completed Tasks</th></tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
|
||||
<div class="row" ng-repeat="host in summaryList = (hosts) track by $index" id="{{ host.id }}">
|
||||
<div class="name col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events for this host"
|
||||
data-placement="top">{{ host.name }}</a>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column">
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" ng-show="summaryList.length === 0">
|
||||
<div class="col-lg-12">
|
||||
<div class="loading-info">No matching hosts</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-condensed">
|
||||
<tbody>
|
||||
<tr ng-repeat="host in summaryList = (hosts) track by $index" id="{{ host.id }}">
|
||||
<td class="name col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events for this host" data-placement="top">{{ host.name }}</a></td>
|
||||
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column">
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
|
||||
<a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
|
||||
</tr>
|
||||
<tr ng-show="summaryList.length === 0">
|
||||
<td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="scroll-spinner" id="hostSummariesMoreRows"><i class="fa fa-cog fa-spin"></i></div>
|
||||
</div><!-- section -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user