Skip to content

Commit

Permalink
WIP: UI refresh and update to bootstrap 5 (milestone 7)
Browse files Browse the repository at this point in the history
More cleanups and polishing to get everything ready to merge:

- djlint template warning/error cleanups
- Moved prominent table templates to the tables partials
  • Loading branch information
dmsimard committed Aug 27, 2023
1 parent abc56a7 commit b9e8397
Show file tree
Hide file tree
Showing 19 changed files with 248 additions and 250 deletions.
8 changes: 4 additions & 4 deletions ara/ui/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="ARA Records Ansible">
<meta name="author" content="https://github.com/ansible-community/ara">
<title>ara {% block title %}{% endblock %}</title>
<title>ara {% block title %}{% endblock title %}</title>

{% static 'images/favicon.ico' as favicon_url %}
<link rel="shortcut icon" href="{% static_url favicon_url %}">
Expand All @@ -30,7 +30,7 @@
<div class="container-fluid">
<a class="navbar-brand" href="{% static_url index_url %}">
{% static 'images/logo.svg' as logo_url %}
<img src="{% static_url logo_url %}" height="45" alt="ARA Records Ansible">
<img src="{% static_url logo_url %}" width="114" height="45" alt="ARA Records Ansible">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down Expand Up @@ -91,8 +91,8 @@
<main role="main">
<div class="container-fluid">
{% block body %}
{% endblock %}
{% endblock body %}
</div>
</main>
</body>
</html>
</html>
59 changes: 29 additions & 30 deletions ara/ui/templates/distributed_index.html
Original file line number Diff line number Diff line change
@@ -1,41 +1,40 @@
{% extends "base.html" %}
{% load strip_db %}


{% block title %}| Distributed database index{% endblock %}
{% block title %}| Distributed database index{% endblock title %}
{% block body %}

<div class="alert alert-primary" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
This is ara's <a class="alert-link" href="https://ara.readthedocs.io/en/latest/distributed-sqlite-backend.html" target="_blank">distributed sqlite backend</a> index.
It does not have an API but provides links to databases where the reporting UI and API are available.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
This is ara's <a class="alert-link" href="https://ara.readthedocs.io/en/latest/distributed-sqlite-backend.html" target="_blank">distributed sqlite backend</a> index.
It does not have an API but provides links to databases where the reporting UI and API are available.
</div>

<div>
<h4>Database root: {{ distributed_sqlite_root }}</h4>
<div class="table-responsive">
<table class="table table-sm table-hover" id="distributed_table">
<thead>
<tr style="height:50px;">
<th title="Path">Path</th>
<th class="text-right" title="Path">Size</th>
<th class="text-right" title="Path">Last updated</th>
</tr>
</thead>
<tbody>
{% for database in databases %}
<tr>
<td><a href="{{ database.path | strip_db }}">{{ database.path }}</a></td>
<td class="text-right">{{ database.size }}</td>
<td class="text-right">{{ database.updated }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<h4>Database root: {{ distributed_sqlite_root }}</h4>
<div class="table-responsive">
<table class="table table-sm table-hover" id="distributed_table">
<thead>
<tr style="height:50px;">
<th title="Path">Path</th>
<th class="text-right" title="Path">Size</th>
<th class="text-right" title="Path">Last updated</th>
</tr>
</thead>
<tbody>
{% for database in databases %}
<tr>
<td><a href="{{ database.path | strip_db }}">{{ database.path }}</a></td>
<td class="text-right">{{ database.size }}</td>
<td class="text-right">{{ database.updated }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>

{% endblock %}
{% endblock body %}
17 changes: 9 additions & 8 deletions ara/ui/templates/file.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
{% load pygments_highlights %}
{% load truncatepath %}

{% block title %}| File #{{ file.id }}: {{ file.path | truncatepath:75 }}{% endblock %}
{% block title %}| File #{{ file.id }}: {{ file.path | truncatepath:75 }}{% endblock title %}
{% block body %}
<div>
{% include "partials/playbook_card.html" with playbook=file.playbook %}
</div>
<br/>
<div>

<div>
{% include "partials/playbook_card.html" with playbook=file.playbook %}
</div>
<br/>
<div>
<div class="card">
<div class="card-header bg-body-tertiary">
<h4>File: {{ file.path }}</h4>
Expand All @@ -17,7 +18,7 @@ <h4>File: {{ file.path }}</h4>
{{ file.content | format_yaml | safe }}
</div>
</div>
<br/>
</div>

<!-- Line highlighting -->
<script>
Expand Down Expand Up @@ -48,4 +49,4 @@ <h4>File: {{ file.path }}</h4>
});
</script>

{% endblock %}
{% endblock body %}
37 changes: 19 additions & 18 deletions ara/ui/templates/host.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
{% extends "base.html" %}
{% load truncatepath %}

{% block title %}| Host #{{ host.id }}: {{ results.count }} results on {{ host.name | truncatechars:50 }} for {{ host.playbook.path | truncatepath:50 }}{% endblock %}
{% block title %}| Host #{{ host.id }}: {{ results.count }} results on {{ host.name | truncatechars:50 }} for {{ host.playbook.path | truncatepath:50 }}{% endblock title %}
{% block body %}
<div>
{% include "partials/playbook_card.html" with playbook=host.playbook %}
</div>
<br/>
<div>
{% include "partials/tables/host_facts.html" %}
</div>
<br/>
<div>
{% include "partials/tables/host_results.html" %}
</div>
<br/>

<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% endblock %}
<div>
{% include "partials/playbook_card.html" with playbook=host.playbook %}
</div>
<br/>
<div>
{% include "partials/tables/host_facts.html" %}
</div>
<br/>
<div>
{% include "partials/tables/host_results.html" %}
</div>

<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>

{% endblock body %}
4 changes: 2 additions & 2 deletions ara/ui/templates/host_index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block title %}| Hosts{% if not static_generation %}: {{ current_page_results }} of {{ data.count }}{% endif %}{% endblock %}
{% block title %}| Hosts{% if not static_generation %}: {{ current_page_results }} of {{ data.count }}{% endif %}{% endblock title %}
{% block body %}

{% include "partials/search/hosts.html" %}
Expand All @@ -20,4 +20,4 @@ <h3>No results found matching your query: try <a href="{% url 'ui:host_index' %}
{% endif %}
</div>

{% endblock %}
{% endblock body %}
4 changes: 2 additions & 2 deletions ara/ui/templates/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block title %}| Playbooks{% if not static_generation %}: {{ current_page_results }} of {{ data.count }}{% endif %}{% endblock %}
{% block title %}| Playbooks{% if not static_generation %}: {{ current_page_results }} of {{ data.count }}{% endif %}{% endblock title %}
{% block body %}

{% include "partials/search/playbooks.html" %}
Expand All @@ -20,4 +20,4 @@ <h3>No results found matching your query: try <a href="{% url 'ui:index' %}">cle
{% endif %}
</div>

{% endblock %}
{% endblock body %}
21 changes: 10 additions & 11 deletions ara/ui/templates/partials/pagination.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,15 @@
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">{{ current_page_results }} of {{ data.count }}</a>
</li>
<li class="page-item disabled">
{% if data.next %}
<li class="page-item">
<a class="page-link" href="{{ data.next }}" aria-label="Go to next page"><span aria-hidden="true">&raquo;</span></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Go to next page"><span aria-hidden="true">&raquo;</span></a>
</li>
{% endif %}
{% if data.next %}
<li class="page-item">
<a class="page-link" href="{{ data.next }}" aria-label="Go to next page"><span aria-hidden="true">&raquo;</span></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Go to next page"><span aria-hidden="true">&raquo;</span></a>
</li>
{% endif %}
{% if data.last %}
<li class="page-item">
<a class="page-link" href="{{ data.last }}" aria-label="Go to last page">Last</a>
Expand All @@ -41,4 +40,4 @@
</li>
{% endif %}
</ul>
</nav>
</nav>
2 changes: 1 addition & 1 deletion ara/ui/templates/partials/playbook_card.html
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h1 class="modal-title fs-5" id="aboutModalLabel">Playbook <a href="{% static_ur
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Date</div>
{{ playbook.started | format_date}}
{{ playbook.started | format_date }}
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
Expand Down
16 changes: 7 additions & 9 deletions ara/ui/templates/partials/result_status_icon.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
{% if status == "ok" %}
<a role="button" class="btn btn-success btn-sm ara-result-status-badge" title="Task completed successfully" {% if search_url %}href="{{ search_url | add:'?status=ok#results' }}"{% endif %}>
<a role="button" class="btn btn-success btn-sm ara-result-status-badge" title="Task completed successfully" {% if search_url %}href="{{ search_url | add:'?status=ok#results' }}"{% endif %}>{{ status | upper }}</a>
{% elif status == "failed" or status == "unreachable" %}
<a role="button" class="btn btn-danger btn-sm ara-result-status-badge" title="Task failed" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>
<a role="button" class="btn btn-danger btn-sm ara-result-status-badge" title="Task failed" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>{{ status | upper }}</a>
{% elif status == "ignored" %}
<a role="button" class="btn btn-info btn-sm ara-result-status-badge" title="Task failed but was ignored" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>
<a role="button" class="btn btn-info btn-sm ara-result-status-badge" title="Task failed but was ignored" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>{{ status | upper }}</a>
{% elif status == "skipped" %}
<a role="button" class="btn btn-info btn-sm ara-result-status-badge" title="Task was skipped" {% if search_url %}href="{{ search_url | add:'?status=skipped#results' }}"{% endif %}>
<a role="button" class="btn btn-info btn-sm ara-result-status-badge" title="Task was skipped" {% if search_url %}href="{{ search_url | add:'?status=skipped#results' }}"{% endif %}>{{ status | upper }}</a>
{% elif status == "changed" %}
<a role="button" class="btn btn-warning btn-sm ara-result-status-badge" title="Task resulted in a change" {% if search_url %}href="{{ search_url | add:'?changed=true#results' }}"{% endif %}>
<a role="button" class="btn btn-warning btn-sm ara-result-status-badge" title="Task resulted in a change" {% if search_url %}href="{{ search_url | add:'?changed=true#results' }}"{% endif %}>{{ status | upper }}</a>
{% else %}
<a role="button" class="btn btn-warning btn-sm ara-result-status-badge" title="Task result is unknown" {% if search_url %}href="{{ search_url | add:'?status=unknown#results' }}"{% endif %}>
{% endif %}
{{ status | upper }}
</a>
<a role="button" class="btn btn-warning btn-sm ara-result-status-badge" title="Task result is unknown" {% if search_url %}href="{{ search_url | add:'?status=unknown#results' }}"{% endif %}>{{ status | upper }}</a>
{% endif %}
10 changes: 5 additions & 5 deletions ara/ui/templates/partials/search/hosts.html
Original file line number Diff line number Diff line change
Expand Up @@ -78,31 +78,31 @@ <h2 class="accordion-header">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ok__gt" value="0" name="ok__gt" {% if search_form.ok__gt.data %}checked{% endif %}/>
<label class="form-check-label" for="ok__gt">
{% include "partials/result_status_icon.html" with status='ok' %}
{% include "partials/result_status_icon.html" with status="ok" %}
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="changed__gt" value="0" name="changed__gt" {% if search_form.changed__gt.data %}checked{% endif %}/>
<label class="form-check-label" for="changed__gt">
{% include "partials/result_status_icon.html" with status='changed' %}
{% include "partials/result_status_icon.html" with status="changed" %}
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="failed__gt" value="0" name="failed__gt" {% if search_form.failed__gt.data %}checked{% endif %}/>
<label class="form-check-label" for="failed__gt">
{% include "partials/result_status_icon.html" with status='failed' %}
{% include "partials/result_status_icon.html" with status="failed" %}
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="unreachable__gt" value="0" name="unreachable__gt" {% if search_form.unreachable__gt.data %}checked{% endif %}/>
<label class="form-check-label" for="unreachable__gt">
{% include "partials/result_status_icon.html" with status='unreachable' %}
{% include "partials/result_status_icon.html" with status="unreachable" %}
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="skipped__gt" value="0" name="skipped__gt" {% if search_form.skipped__gt.data %}checked{% endif %}/>
<label class="form-check-label" for="skipped__gt">
{% include "partials/result_status_icon.html" with status='skipped' %}
{% include "partials/result_status_icon.html" with status="skipped" %}
</label>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ara/ui/templates/partials/tables/host_results.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<td class="bg-transparent">
<button class="btn ara-card-collapse" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_results" aria-expanded="true" aria-controls="collapse_results">
<h4>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-steps" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-bar-chart-steps" viewBox="0 0 16 16">
<path d="M.5 0a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 .5 0zM2 1.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1z"/>
</svg>
Task results: {{ host.name | truncatechars:150 }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ <h4>
{% if playbook.items.hosts %}
<table class="table table-sm table-hover">
<thead>
<tr>
<th class="report-column" title="Host results and facts (if facts were gathered)">Report</th>
<th class="long-status-column" title="Status of the tasks for each host">Status</th>
<th title="Host name">Hostname</th>
</tr>
<tr>
<th class="report-column" title="Host results and facts (if facts were gathered)">Report</th>
<th class="long-status-column" title="Status of the tasks for each host">Status</th>
<th title="Host name">Hostname</th>
</tr>
</thead>
<tbody>
{% for host in hosts %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@ <h4>
<td nowrap>
{% if not static_generation %}
{% url 'ui:file' result.task.file as file_url %}
<a href="{% url 'ui:file' result.task.file %}?#line-{{ result.task.lineno }}">{{ result.task.action }}</a>
<a href='{% url "ui:file" result.task.file %}?#line-{{ result.task.lineno }}'>{{ result.task.action }}</a>
{% else %}
{{ result.task.action }}
{% endif %}
</td>

<td>
{% if not static_generation %}
<a href="{% url 'ui:playbook' playbook.id %}?task_name={{ result.task.name }}#results">{{ result.task.name }}</a>
<a href='{% url "ui:playbook" playbook.id %}?task_name={{ result.task.name }}#results'>{{ result.task.name }}</a>
{% else %}
{{ result.task.name }}
{% endif %}
Expand All @@ -110,13 +110,12 @@ <h4>
<h2>No recorded results found.</h2>
<h3>The playbook might have been interrupted or is in progress.</h3>
{% else %}
<h3>No results found matching your query: try <a href="{% url 'ui:playbook' playbook.id %}#results">clearing search filters</a>.</h3>
<h3>No results found matching your query: try <a href='{% url "ui:playbook" playbook.id %}#results'>clearing search filters</a>.</h3>
{% endif %}
</div>
{% endif %}
</div>
</div>
</form>
</div>
</div>
<br/>
<br/>
2 changes: 1 addition & 1 deletion ara/ui/templates/partials/tables/playbooks.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h1 class="modal-title fs-5" id="aboutModalLabel">Playbook <a href="{% static_ur
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Date</div>
{{ playbook.started | format_date}}
{{ playbook.started | format_date }}
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
Expand Down
Loading

0 comments on commit b9e8397

Please sign in to comment.