General HTML improvements
This commit is contained in:
David Moreau-Simard
@@ -1,19 +1,39 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<div class="row text-center">
|
||||
<h3>
|
||||
<a href="https://github.com/dmsimard/ara" target="_blank">ARA</a> is
|
||||
an attempt to make Ansible runs easier to visualize, understand and
|
||||
troubleshoot.<br>
|
||||
<br>
|
||||
</h3>
|
||||
<h4>
|
||||
It provides an
|
||||
<a href="https://www.ansible.com/" target="_blank">Ansible</a> callback
|
||||
to record playbook run data in a database and a web interface built
|
||||
with <a href="http://flask.pocoo.org/" target="_blank">Flask</a>
|
||||
to browse that data.
|
||||
</h4>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
ARA is meant to make it easy to browse Ansible playbook runs.
|
||||
<br>
|
||||
How to use:
|
||||
<div class="col-md-12">
|
||||
<h1>Documentation</h1>
|
||||
Documentation is available on <a href="http://ara.readthedocs.io/en/latest/" target="_blank">readthedocs.io</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>Browsing tips</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Browse hosts, tasks, plays and playbooks with the top menu</li>
|
||||
<li>When browsing details:</li>
|
||||
<ul>
|
||||
<li>Click on timestamps to generate a link to this specific event</li>
|
||||
<li>Click on a host in the table to go to this host's events</li>
|
||||
<li>Click on a task in the table to see all events for this task</li>
|
||||
<li>Click on a play in the table to see all events for this play</li>
|
||||
<li>Click on a playbook in the table to see all events for this playbook</li>
|
||||
<li>Click anywhere on a row to expand verbose output</li>
|
||||
<li>Click on a host, play or task to see events specific to them</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -5,60 +5,53 @@
|
||||
<h2>Playbook run for host: <span style="font-style: italic;">"{{ host }}"</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Run information</h2>
|
||||
<small class="text-center" style="font-style: italic">Click on a row to expand verbose output</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 table-responsive">
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th>Host</th>
|
||||
<th>Play > Task > Module</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in data %}
|
||||
<tr class="task">
|
||||
<td id="{{ row.end |datetime }}" style="white-space: nowrap;">
|
||||
<a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
|
||||
{{ row.duration |truncate(5) }}s
|
||||
</td>
|
||||
<td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
|
||||
<td style="white-space: nowrap;">
|
||||
<h2 class="text-center">Run information</h2>
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th>Host</th>
|
||||
<th>Play > Task > Module</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in data %}
|
||||
<tr class="task">
|
||||
<td id="{{ row.end |datetime }}" style="white-space: nowrap;">
|
||||
<a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
|
||||
{{ row.duration |truncate(5) }}s
|
||||
</td>
|
||||
<td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
|
||||
<td style="white-space: nowrap;">
|
||||
<ul>
|
||||
{% if row.play %}
|
||||
<li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% if row.play %}
|
||||
<li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
|
||||
{% if row.task %}
|
||||
<li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
<li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% if row.task %}
|
||||
<li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
<li><strong>Module:</strong> {{ row.module }}</li>
|
||||
</ul>
|
||||
<li><strong>Module:</strong> {{ row.module }}</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="results" style="display: none;">
|
||||
<td colspan="4">{{ row.result |to_nice_json }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="results" style="display: none;">
|
||||
<td colspan="4">{{ row.result |to_nice_json }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<body>
|
||||
<div class="container" style="border-bottom:1px dashed black;">
|
||||
<nav class="navbar navbar-inverse">
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
@@ -45,7 +45,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">ARA - Ansible Run Analysis</a>
|
||||
<a class="navbar-brand" href="/"><strong>ARA</strong> - Ansible Run Analysis</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
@@ -93,6 +93,9 @@
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="/">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -102,7 +105,7 @@
|
||||
</div>
|
||||
<br>
|
||||
<div class="container text-center">
|
||||
ARA - Ansible run analysis is an open source project available on <a href="http://github.com/dmsimard/ara">Github</a>.
|
||||
<strong>ARA</strong> - Ansible Run Analysis is an open source project available on <a href="http://github.com/dmsimard/ara" target="_blank">Github</a>.
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||
|
||||
@@ -5,60 +5,53 @@
|
||||
<h2>Playbook run for play: <span style="font-style: italic;">"{{ play }}"</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Run information</h2>
|
||||
<small class="text-center" style="font-style: italic">Click on a row to expand verbose output</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 table-responsive">
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th>Host</th>
|
||||
<th>Play > Task > Module</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in data %}
|
||||
<tr class="task">
|
||||
<td id="{{ row.end |datetime }}" style="white-space: nowrap;">
|
||||
<a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
|
||||
{{ row.duration |truncate(5) }}s
|
||||
</td>
|
||||
<td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
|
||||
<td style="white-space: nowrap;">
|
||||
<h2 class="text-center">Run information</h2>
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th>Host</th>
|
||||
<th>Play > Task > Module</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in data %}
|
||||
<tr class="task">
|
||||
<td id="{{ row.end |datetime }}" style="white-space: nowrap;">
|
||||
<a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
|
||||
{{ row.duration |truncate(5) }}s
|
||||
</td>
|
||||
<td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
|
||||
<td style="white-space: nowrap;">
|
||||
<ul>
|
||||
{% if row.play %}
|
||||
<li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% if row.play %}
|
||||
<li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
|
||||
{% if row.task %}
|
||||
<li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
<li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% if row.task %}
|
||||
<li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
<li><strong>Module:</strong> {{ row.module }}</li>
|
||||
</ul>
|
||||
<li><strong>Module:</strong> {{ row.module }}</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="results" style="display: none;">
|
||||
<td colspan="4">{{ row.result |to_nice_json }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="results" style="display: none;">
|
||||
<td colspan="4">{{ row.result |to_nice_json }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -33,15 +33,10 @@
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Run information</h2>
|
||||
<small class="text-center" style="font-style: italic">Click on a row to expand verbose output</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h2 class="text-center">Run information</h2>
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@@ -5,60 +5,53 @@
|
||||
<h2>Playbook run for task: <span style="font-style: italic;">"{{ task }}"</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-12">
|
||||
<h2>Run information</h2>
|
||||
<small class="text-center" style="font-style: italic">Click on a row to expand verbose output</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 table-responsive">
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th>Host</th>
|
||||
<th>Play > Task > Module</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in data %}
|
||||
<tr class="task">
|
||||
<td id="{{ row.end |datetime }}" style="white-space: nowrap;">
|
||||
<a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
|
||||
{{ row.duration |truncate(5) }}s
|
||||
</td>
|
||||
<td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
|
||||
<td style="white-space: nowrap;">
|
||||
<h2 class="text-center">Run information</h2>
|
||||
<table class="table table-striped table-hover table-condensed table-bordered" style="margin: 0 auto !important; float;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th>Host</th>
|
||||
<th>Play > Task > Module</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in data %}
|
||||
<tr class="task">
|
||||
<td id="{{ row.end |datetime }}" style="white-space: nowrap;">
|
||||
<a href="#{{ row.end |datetime }}">{{ row.end |datetime }}</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<label class="label {{ row |pick_status }}">{{ row |pick_status }}</label><br>
|
||||
{{ row.duration |truncate(5) }}s
|
||||
</td>
|
||||
<td><a href="/host/{{ row.host }}">{{ row.host }}</a></td>
|
||||
<td style="white-space: nowrap;">
|
||||
<ul>
|
||||
{% if row.play %}
|
||||
<li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% if row.play %}
|
||||
<li><strong>Play:</strong> <a href="/play/{{ row.play }}">{{ row.play }}</a></li>
|
||||
{% if row.task %}
|
||||
<li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Play:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
<li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% if row.task %}
|
||||
<li><strong>Task:</strong> <a href="/task/{{ row.task }}">{{ row.task }}</a></li>
|
||||
{% else %}
|
||||
<li><strong>Task:</strong> <span style="font-style: italic">No name provided</span></li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
<li><strong>Module:</strong> {{ row.module }}</li>
|
||||
</ul>
|
||||
<li><strong>Module:</strong> {{ row.module }}</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="results" style="display: none;">
|
||||
<td colspan="4">{{ row.result |to_nice_json }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="results" style="display: none;">
|
||||
<td colspan="4">{{ row.result |to_nice_json }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user