mirror of
https://github.com/ansible/awx.git
synced 2026-05-18 06:47:41 -02:30
Restyled new job detail page making it completely responsive down to small viewports. Moved things around as discussed in last status meeting. Incorporated event_name element from event object.
This commit is contained in:
Chris Houseknecht
@@ -2,98 +2,111 @@
|
||||
<div ng-cloak id="htmlTemplate">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div id="breadcrumb-container" class="col-md-12">
|
||||
<div class="nav-path">
|
||||
<ul class="breadcrumb" id="breadcrumb-list">
|
||||
<li><a href="/#/jobs">Jobs</a></li>
|
||||
<li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}">{{ job_template_name }}</a> - <a href="{{ project_url }}">{{ project_name }}</a> - <a href="{{ inventory_url }}">{{ inventory_name }}</a></li>
|
||||
<li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}" aw-tool-tip="View the job template" data-placement="top">{{ job_template_name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="row" style="position: relative;">
|
||||
<div id="job-detail-container">
|
||||
|
||||
<div class="job_well">
|
||||
|
||||
<div id="job-status">
|
||||
<ul>
|
||||
<li ng-show="job_status.explanation" style="display: block; margin-bottom: 10px;"><div ng-class="job_status.status_class"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} -{{ job_status.explanation }}</div></li>
|
||||
<li ng-show="!job_status.explanation"><div class="label">Status</div> <i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</li>
|
||||
<li ng-show="job_status.started"><div class="label">Start</div> {{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</li>
|
||||
<li ng-show="!job_status.started"><div class="label">Start</div> Not Started</li>
|
||||
<li ng-show="job_status.finished"><div class="label">Finish</div> {{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}<li>
|
||||
<li><div class="label">Elapsed</div> {{ job_status.elapsed }}</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="job-detail-tables">
|
||||
<div class="section">
|
||||
|
||||
<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="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="View 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="View the inventory" data-placement="top">{{ inventory_name }}</a></div>
|
||||
</div>
|
||||
|
||||
<div id="job-detail-tables">
|
||||
<div id="play-section" class="section">
|
||||
<h5>Plays</h5>
|
||||
<table class="table job-detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</th>
|
||||
<th class="col-lg-10 col-md-10 col-sm-10 col-xs-12">Name</th>
|
||||
<th class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id)" class="cursor-pointer">
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</td>
|
||||
<td class="col-lg-10 col-md-9 col-sm-10 col-xs-12 status-column">
|
||||
<i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span></td>
|
||||
<td class="col-lg-1 col-md-1 col-hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ play.elapsed }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
</div>
|
||||
<div id="plays-table-detail" class="table-detail">
|
||||
<div class="row cursor-pointer" ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
|
||||
<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">
|
||||
<i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- section -->
|
||||
|
||||
<div class="section">
|
||||
<div id="task-section" class="section">
|
||||
<h5>Tasks</h5>
|
||||
<table class="table job-detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</th>
|
||||
<th class="col-lg-6 col-md-6 col-sm-6 col-xs-7">Name</th>
|
||||
<th class="col-lg-4 col-md-4 col-sm-4 col-xs-5">Host Status</th>
|
||||
<th class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="task-table-body">
|
||||
<tr ng-repeat="task in tasks | filter:{ play_id: activePlay }" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)" class="cursor-pointer">
|
||||
<td class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</td>
|
||||
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-7 status-column">
|
||||
<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>
|
||||
</div>
|
||||
<div id="tasks-table-detail" class="table-detail">
|
||||
<div class="row cursor-pointer" ng-repeat="task in tasks | filter:{ play_id: activePlay }" 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">
|
||||
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span>{{ task.name }}
|
||||
</td>
|
||||
<td class="col-lg-4 col-md-4 col-sm-4 col-xs-5">
|
||||
<div class="status-bar">
|
||||
<div class="successful-hosts inner-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="{{ task.successfulStyle }}">{{ task.successfulCount }}</div>
|
||||
<div class="changed-hosts inner-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="{{ task.changedStyle }}">{{ task.changedCount }}</div>
|
||||
<div class="skipped-hosts inner-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="{{ task.skippedStyle }}">{{ task.skippedCount }}</div>
|
||||
<div class="failed-hosts inner-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="{{ task.failedStyle }}">{{ task.failedCount }}</div>
|
||||
</div>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
|
||||
<div class="status-bar">
|
||||
<div class="successful-hosts inner-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="{{ task.successfulStyle }}">{{ task.successfulCount }}</div>
|
||||
<div class="changed-hosts inner-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="{{ task.changedStyle }}">{{ task.changedCount }}</div>
|
||||
<div class="skipped-hosts inner-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="{{ task.skippedStyle }}">{{ task.skippedCount }}</div>
|
||||
<div class="failed-hosts inner-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="{{ task.failedStyle }}">{{ task.failedCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- section -->
|
||||
|
||||
<div class="section" style="position: relative;">
|
||||
<div id="task-hosts-section" class="section">
|
||||
<h5>Hosts</h5>
|
||||
<div id="hosts-section">
|
||||
<div id="host-details">
|
||||
<ul>
|
||||
<li ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
|
||||
<div class="status-column inline-block"><i class="fa icon-job-{{ result.status }}"></i> <a href="" ng-click="doSomething()" aw-tool-tip="Click to view results" data-placement="top">{{ result.name }}</a></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="hosts-table-detail" class="table-detail">
|
||||
<div class="row" ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
|
||||
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 status-column">
|
||||
<a href="" ng-click="doSomething()" aw-tool-tip="Status: {{ result.status }}. Click for details" data-placement="top">
|
||||
<i class="fa icon-job-{{ result.status }}"></i></a>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<a href="" ng-click="doSomething()" aw-tool-tip="Status: {{ result.status }}. Click for details" data-placement="top">{{ result.name }}</a>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
||||
{{ result.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hosts-slider-vertical" style="position:absolute; top:27px; right: 0; width:9px; height:150px;"></div>
|
||||
@@ -105,30 +118,29 @@
|
||||
|
||||
</div><!-- col-md-7 -->
|
||||
|
||||
<div class="col-md-5">
|
||||
<div id="job-summary-container">
|
||||
<div class="job_well">
|
||||
<div class="section job_summary">
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<h5>Host Summary</h5>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-lg-8 col-md-8 col-sm-8 col-xs-4">Host</th>
|
||||
<th class="col-lg-1 col-md-1 col-sm-1 col-xs-2">OK</th>
|
||||
<th class="col-lg-1 col-md-1 col-sm-1 col-xs-2">Changed</th>
|
||||
<th class="col-lg-1 col-md-1 col-sm-1 col-xs-2">Dark</th>
|
||||
<th class="col-lg-1 col-md-1 col-sm-1 col-xs-2">Failed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody >
|
||||
<tr ng-repeat="host in hosts">
|
||||
<td class="col-lg-8 col-md-8 col-sm-8 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}">{{ host.name }}</a></td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-1 col-xs-2">{{ host.ok }}</td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-1 col-xs-2">{{ host.changed }}</td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-1 col-xs-2">{{ host.unreachable }}</td>
|
||||
<td class="col-lg-1 col-md-1 col-sm-1 col-xs-2">{{ host.failed }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Host</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">OK</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Change</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Dark</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-detail">
|
||||
<div class="row" ng-repeat="host in hosts">
|
||||
<div class="name col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}"
|
||||
aw-tool-tip="View host" data-placement="top">{{ host.name }}</a></div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.ok }}</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.changed }}</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.unreachable }}</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.failed }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- section -->
|
||||
</div>
|
||||
</div><!-- col-md-5 -->
|
||||
|
||||
Reference in New Issue
Block a user