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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user