Significant webapp UI/UX improvements/refactor

This patch has a broad impact and generally improves the UI, making
it more consistent and easier to browse.

Major changes:
- Removed deprecated host list summary view, code was unreachable/dead
- Removed detailed play view, made redundant with other improvements
- Removed detailed task view, made redundant with other improvements
- Removed detailed ara_record data view, made redundant with other
  improvements

- Playbook list pages:
  - Re-ordered columns and added playbook duration

- Playbook summary page:
  - Added an icon to display if facts are available for a host
    and provide a link if so
  - Added a file table to display the list of files as well as
    give access to the recorded playbook file
  - Merged the file and line columns in the task list
  - Re-ordered some columns in the task list
  - Got rid of the details column (replaced by link on the name)

- Playbook details page:
  - Added an icon to display if facts are availvable for a host
    and provide a link if so
  - Added a file table to display the list of files as well as
    give access to the recorded playbook file
  - Added a play table to make display consistent with playbook
    summary page
  - Merged the file and line columns in the task list
  - Re-ordered columns in the task list

Other changes:
- Fix how we detect that no recorded data is available to display
- Filtering by host will now highlight the line for the host being
  filtered
- Filtering by play will now highlight the line for the play being
  filtered
- Some page headers have been improved and brought in line with the
  rest.
- Added a link back to the playbook summary page in most headers.
- Added an "alt text" on the filter icon next to the file path in
  the task list
- Columns in all tables were given pre-defined width where
  appropriate to make the display more consistent
- Link to documentation and source code in the navbar now opens to
  another tab.
- Stop trying to obssessively size html divs for every device
  on the planet, simplify things for now.
- Re-enable some host-related tests and fix identified edge cases

Change-Id: I7af2ddb3dd0c90b7afe2435467c214b514369fba
This commit is contained in:
David Moreau-Simard
2016-11-30 12:14:29 -05:00
parent 6f2f16ee24
commit c132530ae6
22 changed files with 427 additions and 612 deletions

View File

@@ -8,19 +8,20 @@
<h2><a href="https://github.com/openstack/ara">ARA</a> records <a href="https://www.ansible.com/">Ansible</a> Playbook runs seemlessly to make them easier to visualize, understand and troubleshoot.</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-10 col-md-offset-1">
<div class="col-md-10 col-md-offset-1">
<h2><strong>Latest playbook runs</strong></h2>
<table class="list table table-striped table-bordered table-hover table-condensed">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Playbook</th>
<th>Executed</th>
<th>Hosts</th>
<th><span class="ok label status-label">OK</span></th>
<th><span class="changed label status-label">CHANGED</span></th>
<th><span class="failed label status-label">FAILED</span></th>
<th><span class="skipped label status-label">SKIPPED</span></th>
<th><span class="unreachable label status-label">UNREACHABLE</span></th>
<th class="col-md-1">Hosts</th>
<th class="date col-md-2">Date</th>
<th class="date col-md-1">Duration</th>
<th class="col-md-1"><span class="ok label status-label">OK</span></th>
<th class="col-md-1"><span class="changed label status-label">CHANGED</span></th>
<th class="col-md-1"><span class="failed label status-label">FAILED</span></th>
<th class="col-md-1"><span class="skipped label status-label">SKIPPED</span></th>
<th class="col-md-1"><span class="unreachable label status-label">UNREACHABLE</span></th>
</tr>
</thead>
<tbody>
@@ -28,8 +29,9 @@
<tr>
<td>{{ macros.make_link('playbook.show_playbook', playbook.path|pathtruncate,
playbook=playbook.id) }}</td>
<td>{{ playbook.time_start |datefmt }}</td>
<td>{{ playbook.hosts|list|length }}</td>
<td>{{ playbook.time_start |datefmt }}</td>
<td>{{ playbook.duration |timefmt }}</td>
<td>{{ stats[playbook.id].ok }}</td>
<td>{{ stats[playbook.id].changed }}</td>
<td>{{ stats[playbook.id].failed }}</td>