mirror of
https://github.com/ansible/awx.git
synced 2026-05-22 08:17:39 -02:30
Fixed jshint linting errors. Lates job detail page changes.
This commit is contained in:
Chris Houseknecht
@@ -1,168 +1,136 @@
|
||||
<div class="tab-pane" id="jobs">
|
||||
<div class="tab-pane" id="jobs-detail">
|
||||
<div ng-cloak id="htmlTemplate">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12" id="breadcrumbs"></div>
|
||||
<div class="col-md-12">
|
||||
<div class="nav-path">
|
||||
<ul class="breadcrumb" id="breadcrumb-list">
|
||||
<li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}">{{ job_template_name }}</a></li>
|
||||
<li><a href="{{ project_url }}">{{ project_name }}</a></li>
|
||||
<li><a href="{{ inventory_url }}">{{ inventory_name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
|
||||
<div class="job-detail-tables">
|
||||
<div class="section">
|
||||
<h5>Job</h5>
|
||||
<div id="job_options" class="job_well">
|
||||
<table class="table table-condensed job-detail-table">
|
||||
<div class="job_well">
|
||||
|
||||
<div id="job-status">
|
||||
<ul>
|
||||
<li><span class="label">Status</span> <i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</li>
|
||||
<li><span class="label">Start</span> {{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</li>
|
||||
<li><span class="label">Finish</span> {{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}<li>
|
||||
<li><span class="label">Elapsed</span> {{ job_status.elapsed }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="job-detail-tables">
|
||||
<div class="section">
|
||||
<h5>Plays</h5>
|
||||
<table class="table job-detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-lg-1 col-md-1 col-sm-1 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 col-sm-1 hidden-xs">Elapsed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-show="job_template_url">
|
||||
<td class="col-md-3 col-sm-2">Job Template</td>
|
||||
<td><a ng-href="{{ job_template_url }}">{{ job_template_name }}</a></td>
|
||||
</tr>
|
||||
<tr ng-show="project_url">
|
||||
<td class="col-md-3 col-sm-2">Project</td>
|
||||
<td><a ng-href="{{ project_url }}">{{ project_name }}</a></td>
|
||||
</tr>
|
||||
<tr ng-show="inventory_url">
|
||||
<td class="col-md-3 col-sm-2">Inventory</td>
|
||||
<td><a ng-href="{{ inventory_url }}">{{ inventory_name }}</a></td>
|
||||
</tr>
|
||||
<tr ng-show="playbook">
|
||||
<td class="col-md-3 col-sm-2">Playbook</td>
|
||||
<td>{{ playbook }}</td>
|
||||
</tr>
|
||||
<tr ng-show="job_type">
|
||||
<td class="col-md-3 col-sm-2">Run Type</td>
|
||||
<td>{{ job_type }}</td>
|
||||
</tr>
|
||||
<tr ng-show="credential">
|
||||
<td class="col-md-3 col-sm-2">Machine Credential</td>
|
||||
<td><a href="/#/credentials/{{ credential }}">{{ credential_name }}</a></td>
|
||||
</tr>
|
||||
<tr ng-show="cloud_credential">
|
||||
<td class="col-md-3 col-sm-2">Cloud Credential</td>
|
||||
<td><a href="/#/credentials/{{ credential }}">{{ cloud_credential_name }}</a></td>
|
||||
</tr>
|
||||
<tr ng-show="forks">
|
||||
<td class="col-md-3 col-sm-2">Forks</td>
|
||||
<td>{{ forks }}</td>
|
||||
</tr>
|
||||
<tr ng-show="limit">
|
||||
<td class="col-md-3 col-sm-2">Limit</td>
|
||||
<td>{{ limit }}</td>
|
||||
</tr>
|
||||
<tr ng-show="verbosity !== undefined">
|
||||
<td class="col-md-3 col-sm-2">Verbosity</td>
|
||||
<td>{{ verbosity }}</td>
|
||||
</tr>
|
||||
<tr ng-show="job_tags">
|
||||
<td class="col-md-3 col-sm-2">Job Tags</td>
|
||||
<td>{{ job_tags }}</td>
|
||||
<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-1 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-sm-1 hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ play.elapsed }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- section -->
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5>Plays</h5>
|
||||
<div id="job_plays" class="job_well">
|
||||
<table class="table table-condensed job-detail-table">
|
||||
<tbody>
|
||||
<tr ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id)" class="cursor-pointer">
|
||||
<td class="status-column"><i class="fa icon-job-{{ play.status }}"></i></td>
|
||||
<td><span aw-tool-tip="Event: {{ play.id }}" data-placement="top">{{ play.name }}</span></td>
|
||||
<div class="section">
|
||||
<h5>Tasks</h5>
|
||||
<table class="table job-detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-lg-1 col-md-1 col-sm-1 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 col-sm-1 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-1 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">
|
||||
<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 col-sm-1 hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ task.elapsed }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- section -->
|
||||
</div><!-- section -->
|
||||
|
||||
<div class="section">
|
||||
<h5>Tasks</h5>
|
||||
<table class="table table-condensed table-striped job-detail-table">
|
||||
<div class="section" style="position: relative;">
|
||||
<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>
|
||||
</div>
|
||||
<div id="hosts-slider-vertical" style="position:absolute; top:27px; right: 0; width:9px; height:150px;"></div>
|
||||
</div><!-- section -->
|
||||
|
||||
</div><!-- job-detail-tables -->
|
||||
|
||||
</div><!-- well -->
|
||||
|
||||
</div><!-- col-md-7 -->
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="job_well">
|
||||
<div class="section job_summary">
|
||||
<h5>Host Summary</h5>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-md-1 col-sm-1 col-xs-3">Started</th>
|
||||
<th class="col-md-2 col-sm-2 hidden-xs" ng-show="hasRoles">Role</th>
|
||||
<th class="col-md-5 col-sm-5 col-xs-5">Name</th>
|
||||
<th class="col-md-4 col-sm-4 col-xs-5">Status</td>
|
||||
<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 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-md-1 col-sm-1 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
|
||||
<td class="col-md-2 col-sm-2 hidden-xs" ng-show="hasRoles">{{ task.role }}</td>
|
||||
<td class="col-md-5 col-sm-5 col-xs-5">{{ task.name }}</td>
|
||||
<td class="col-md-4 col-sm-4 col-xs-5">
|
||||
<div class="successful-hosts status-bar" style="width:{{ task.successfulPct || 0 }}%">
|
||||
<div class="changed-hosts status-bar" style="width:{{ task.changedPct || 0 }}%"></div>
|
||||
</div>
|
||||
<div class="skipped-hosts status-bar" style="width:{{ task.skippedPct || 0 }}%"></div>
|
||||
<div class="failed-hosts status-bar" style="width:{{ task.failedPct || 0 }}%"></div>
|
||||
</td>
|
||||
<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><!-- section -->
|
||||
</div>
|
||||
</div><!-- col-md-5 -->
|
||||
|
||||
<div class="section">
|
||||
<h5>Hosts</h5>
|
||||
<div id="host_details" class="job_well">
|
||||
<table class="table table-condensed job-detail-table">
|
||||
<tbody>
|
||||
<tr ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
|
||||
<td class="status-column"><i class="fa icon-job-{{ result.status }}"></i></td>
|
||||
<td><a href="" ng-click="doSomething()" aw-tool-tip="Click to view results" data-placement="top">{{ result.host_name }} <i class="fa fa-external-link"></i></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- section -->
|
||||
</div><!-- job-detail-tables -->
|
||||
</div><!-- col-md-8 -->
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="section">
|
||||
<h5>Summary</h5>
|
||||
<div class="job_well">
|
||||
|
||||
<div class="job_status">
|
||||
<table class="table table-condensed job-detail-table">
|
||||
<tbody>
|
||||
<tr><td class="label_column">Status</td><td class="status-column"><i class="fa icon-job-{{ job_status }}"></i> {{ job_status }}</td></tr>
|
||||
<tr><td class="label_column">Started</td><td>{{ started | date:'MM/dd/yy HH:mm:ss' }}</td></tr>
|
||||
<tr><td class="label_column">Finished</td><td>{{ finished | date:'MM/dd/yy HH:mm:ss' }}</td></tr>
|
||||
<tr><td class="label_column">Elapsed</td><td>{{ elapsed }} seconds</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="job_summary">
|
||||
<table class="table table-condensed job-detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-md-8">Host</th>
|
||||
<th class="text-center col-md-1">OK</th>
|
||||
<th class="text-center col-md-1">Changed</th>
|
||||
<th class="text-center col-md-1">Unreachable</th>
|
||||
<th class="text-center col-md-1">Failed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="host in hosts">
|
||||
<td><a href="/#/home/hosts/?id={{ host.id }}">{{ host.name }}</a></td>
|
||||
<td class="text-center">{{ host.ok }}</td>
|
||||
<td class="text-center">{{ host.changed }}</td>
|
||||
<td class="text-center">{{ host.unreachable }}</td>
|
||||
<td class="text-center">{{ host.failed }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- section -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user