recordsansible
/
ara
Code Issues Proposed changes

Fold tips into tooltips and resize panels accordingly 

Browsing tips were wasting a bunch of useful space.
They've been improved, fleshed out and folded into tooltips at the
top right of each panel.

With all this new space, we're resized things accordingly so that
it doesn't look too wide and empty on large(r) resolutions.

Change-Id: Ifa0a2dffb65555dfbd18b2490e9b14d70ffaa383
This commit is contained in:
David Moreau-Simard 2017-05-02 22:29:48 -04:00
parent a39b21570e
commit ecf3948857
9 changed files with 107 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ara/static/css/ara.css
View File

@ -121,32 +121,36 @@
}
.link-report {
float: left;
padding-top: 3px;
font-size: 12px;
font-weight: bold;
line-height: 1;
float: left;
padding-top: 3px;
font-size: 12px;
font-weight: bold;
line-height: 1;
}
.link-modal {
float: right;
margin-right: 12px;
padding-top: 3px;
font-size: 18px;
font-weight: bold;
line-height: 1;
float: right;
margin-right: 12px;
padding-top: 3px;
font-size: 18px;
font-weight: bold;
line-height: 1;
}
.link:hover,
.link:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
button.link {
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.help-icon {
font-size: 18px;
}

131
ara/templates/report.html
View File

@ -82,26 +82,15 @@
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-8 col-md-offset-2">
<h3>
<strong>Playbook parameters</strong>
<span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/parameters.html" %}"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="pficon pficon-info"></span> Browsing tips</h3>
</div>
<div class="panel-body">
<ul>
<li>All table columns are sortable</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<table class="table table-striped table-bordered table-hover table-condensed" id="parameters_{{ playbook.id }}">
<thead>
<tr>
<th><span class="pull-left">Parameter</span></th>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>
@ -117,45 +106,21 @@
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-8 col-md-offset-2">
<h3>
<strong>Hosts</strong>
<span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/hosts.html" %}"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="pficon pficon-info"></span> Browsing tips</h3>
</div>
<div class="panel-body">
<ul>
<li>All table columns are sortable</li>
<li>If facts have been gathered:
<ul>
<li>Hover hosts to see a quick highlight summary of the recorded host facts</li>
<li>Click on a host to browse the full list of recorded host facts</li>
</ul>
</li>
<li>Use the search box to find specific hosts based on their properties, for example:
<ul>
<li><strong>localhost</strong> would match only 'localhost' (provided by default: the Ansible inventory hostname)</li>
<li><strong>fedora</strong> would match all 'fedora' hosts (provided by the <i>ansible_distribution</i> fact)</li>
<li><strong>192.168.1</strong> would match all hosts with an IP in the '192.168.1' range (provided by the <i>ansible_all_ipv4_addresses</i> fact)</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
{% if stats_count -%}
<table class="table table-striped table-bordered table-hover table-condensed" id="stats_{{ playbook.id }}">
<thead>
<tr>
<th><span class="pull-left">Host</span></th>
<th class="col-md-2"><span class="ok label">OK</span></th>
<th class="col-md-2"><span class="changed label">CHANGED</span></th>
<th class="col-md-2"><span class="failed label">FAILED</span></th>
<th class="col-md-2"><span class="skipped label">SKIPPED</span></th>
<th class="col-md-2"><span class="unreachable label">UNREACHABLE</span></th>
<th class="col-md-1"><span class="ok label">OK</span></th>
<th class="col-md-1"><span class="changed label">CHANGED</span></th>
<th class="col-md-1"><span class="failed label">FAILED</span></th>
<th class="col-md-1"><span class="skipped label">SKIPPED</span></th>
<th class="col-md-1"><span class="unreachable label">UNREACHABLE</span></th>
</tr>
</thead>
</table>
@ -176,24 +141,11 @@
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-8 col-md-offset-2">
<h3>
<strong>Plays</strong>
<span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/plays.html" %}"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="pficon pficon-info"></span> Browsing tips</h3>
</div>
<div class="panel-body">
<ul>
<li>All table columns are sortable</li>
<li>Use the search box to find a specific play based on it's name</li>
<li>To see your playbook file, click the playbook file path in the playbook report list</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
{% if play_count -%}
<table class="table table-striped table-bordered table-hover table-condensed" id="plays_{{ playbook.id }}">
<thead>
@ -201,7 +153,7 @@
<th><span class="pull-left">Play</span></th>
<th class="col-md-2">Start</th>
<th class="col-md-2">End</th>
<th class="col-md-2">Duration</th>
<th class="col-md-1">Duration</th>
</tr>
</thead>
</table>
@ -222,24 +174,13 @@
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-8 col-md-offset-2">
<h3>
<strong>Files</strong>
<span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/files.html" %}"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="pficon pficon-info"></span> Browsing tips</h3>
</div>
<div class="panel-body">
<ul>
<li>Click on any file to see it's contents</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
{% if file_count -%}
<div id="files_{{ playbook.id }}"></div>
<div id="files_{{ playbook.id }}" class="fa-border"></div>
{% else -%}
<div class="text-center">
<h2>There is no recorded file for this playbook.</h2>
@ -257,31 +198,11 @@
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-8 col-md-offset-2">
<h3>
<strong>Tasks</strong>
<span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/tasks.html" %}"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="pficon pficon-info"></span> Browsing tips</h3>
</div>
<div class="panel-body">
<ul>
<li>All table columns are sortable</li>
<li>Click on a task status (ex: 'failed') to see the detailed task result</li>
<li>Use the search box to find specific tasks based on their properties, for example:
<ul>
<li><strong>do something</strong> would only match tasks with 'do something' in their name</li>
<li><strong>localhost</strong> would only match tasks on the host 'localhost'</li>
<li><strong>include</strong> would match tasks with 'include' in their task name or as the task action
<li><strong>failed</strong> would only match tasks with the 'failed' status</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
{% if task_count -%}
<table class="table table-striped table-bordered table-hover table-condensed" id="tasks_{{ playbook.id }}">
<thead>
@ -312,23 +233,11 @@
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-8 col-md-offset-2">
<h3>
<strong>Records</strong>
<span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/records.html" %}"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="pficon pficon-info"></span> Browsing tips</h3>
</div>
<div class="panel-body">
<ul>
<li>Data recorded with the <a href="https://ara.readthedocs.io/en/latest/usage.html#ara-record" target="_blank">ara_record</a> Ansible module will be displayed here</li>
<li>Use the search box to find a specific key based on it's name or expected contents.</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
{% if record_count -%}
<table class="table table-striped table-bordered table-hover table-condensed" id="records_{{ playbook.id }}">
<thead>

6
ara/templates/report_list.html
View File

@ -4,12 +4,6 @@
<!-- Begin report list -->
<div class="col-md-custom col-md-offset-custom">
<div class="row">
<br>
<div class="alert alert-info">
<span class="pficon pficon-info"></span>
Browse your playbook reports here: Get started by expanding the "<strong>Hosts</strong>", "<strong>Plays</strong>", "<strong>Files</strong>" or "<strong>Tasks</strong>" panels below.
You can mouse over most elements to have more details about them.
</div>
<div class="list-group list-view-pf list-view-pf-view">
<!-- Begin playbook iteration -->
{% for playbook in playbooks.items -%}

4
ara/templates/tips/files.html Normal file
View File

@ -0,0 +1,4 @@
<h3>Tips: Files</h3>
<hr>
<p>This panel contains all the files involved in your playbook.</p>
<p>You can click on the files in order to view them as they were when your playbook ran.</p>

15
ara/templates/tips/hosts.html Normal file
View File

@ -0,0 +1,15 @@
<h3>Tips: Hosts</h3>
<hr>
<p>This panel contains all the hosts involved in the playbook, their tasks statistics and, if available, their host facts.</p>
<p>
If host facts have been gathered, a summary will be available if you hover the host name. For the complete list of facts, click on the host.
Note that host facts are not in real time: they are saved at the time where facts are gathered.
</p>
<p>
The search box searches through both the host name and the host fact summary, for example:
<ul>
<li><strong>localhost</strong> would match only '<i>localhost</i>' (provided by default: the Ansible inventory hostname)</li>
<li><strong>fedora</strong> would match all '<i>fedora</i>' hosts (provided by the <i>ansible_distribution</i> fact)</li>
<li><strong>192.168.1</strong> would match all hosts with an IP in the '<i>192.168.1</i>' range (provided by the <i>ansible_all_ipv4_addresses</i> fact)</li>
</ul>
</p>

4
ara/templates/tips/parameters.html Normal file
View File

@ -0,0 +1,4 @@
<h3>Tips: Parameters</h3>
<hr>
<p>This panel contains all the parameters and options passed to the ansible-playbook command.</p>
<p>You can control which parameters ARA should ignore with the <code>ARA_IGNORE_PARAMETERS</code> configuration.</p>

4
ara/templates/tips/plays.html Normal file
View File

@ -0,0 +1,4 @@
<h3>Tips: Plays</h3>
<hr>
<p>This panel contains all the plays involved in your playbook run.</p>
<p>To see your playbook file, click the playbook file path in the playbook report list.</p>

14
ara/templates/tips/records.html Normal file
View File

@ -0,0 +1,14 @@
<h3>Tips: Records</h3>
<hr>
<p>This panel contains persistent data recorded from your playbooks with the <strong>ara_record</strong> Ansible module.</p>
<p><strong>ara_record</strong> is an Ansible module bundled with ARA that allows you to record and attach any arbitrary data that is displayed here.</p>
<p>
Some examples of things that can be registered with ara_record:
<ul>
<li>The git version of your playbooks</li>
<li>The host from which your playbook ran</li>
<li>An URL to retrieve logs for the playbook</li>
<li>Important variables or debug information obtained throughout your playbook</li>
</ul>
</p>
<p>For more information on how to use <strong>ara_record</strong> (and <strong>ara_read</strong>), refer to the documentation.</p>

22
ara/templates/tips/tasks.html Normal file
View File

@ -0,0 +1,22 @@
<h3>Tips: Tasks</h3>
<hr>
<p>This panel contains all the tasks and their results on your hosts in your playbook.</p>
<p>Click on the action to view the task file in which that action is located.</p>
<p>Click on the task status in order to view the detailed results of that task.</p>
<p>
All table columns are sortable. This allows you to, for example:
<ul>
<li>Sort tasks by duration to find which tasks took the longest time</li>
<li>Sort (or reverse) the elapsed column to have the beginning of the playbook (or the end) first</li>
</ul>
</p>
<p>
The search box searches through all fields as well as task tags. This allows you to search, for example:
<ul>
<li><strong>do something</strong> would match tasks with '<i>do something</i>' in their name</li>
<li><strong>localhost</strong> would match tasks for the host '<i>localhost</i>'</li>
<li><strong>get_url</strong> would match tasks that use the '<i>get_url</i>' Ansible module</li>
<li><strong>failed</strong> would match tasks for which the status is '<i>failed</i>'</li>
<li><strong>production</strong> would match tasks that have the tag '<i>production</i>'</li>
</ul>
</p>