nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-13 10:30:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

diagnostics: Add collapsible sections for results

Browse Source 
Uses Bootstrap accordion class to do collapsible sections without adding any
custom CSS or JavaScript.

Closes #2479

Sunil:

- Create one accordion instead of many. Automatically collapsing previously
expanded item works.

- Fix dangling </section> close tag.

- Embrace accordion styling instead of header-like styling for headers. The
tables with results are distinguished from the header due to header
highlighting and margins around tables.

- Fix issue with multiple 'passed' badges show for single app. 'regroup'
template tag expects the dict to be already sorted by the selected property.

- Internationalize badge text in headers.

- Right align badges. Move repair button into the accordion header for better
appearance.

- Wrap the header on small screen sizes.

- Add additional necessary HTML attributes.

- Change 'Loading...' to 'Running...' more accurately specify the status.

- Show Running and Exception statuses in header.

- Use 'text-bg-' classes instead of 'bg-' for allow automatic selection of text
color.

Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
This commit is contained in:
Joseph Nuthalapati 2025-07-06 00:10:15 +05:30 committed by Sunil Mohan Adapa
parent 3798e519d4
commit 9fa1e18aa3
No known key found for this signature in database
GPG Key ID: 43EA1CFF0AA7C5F2
1 changed files with 80 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
plinth/modules/diagnostics/templates/diagnostics_full.html
View File

@ -32,42 +32,89 @@
{% if results %} {% if results %}
<h3>{% trans "Results" %}</h3> <h3>{% trans "Results" %}</h3>
{% for app_id, app_data in results.results.items %} <div class="accordion" id="diagnostics-results">
<section> {% for app_id, app_data in results.results.items %}
<div class="d-flex align-items-center justify-content-between"> <div class="accordion-item">
<h4> <h4 class="accordion-header" id="#heading-{{ app_id }}">
{% blocktrans trimmed with app_name=app_data.name %} <button class="accordion-button collapsed" type="button"
App: {{app_name}} data-bs-toggle="collapse"
{% endblocktrans %} data-bs-target="#collapse-{{ app_id }}"
aria-expanded="false"
aria-controls="collapse-{{ app_id }}">
<div class="d-flex align-items-center flex-wrap w-100">
<div class="flex-grow-1 me-1">{{ app_data.name }}</div>
{% if app_data.diagnosis %}
{% regroup app_data.diagnosis|dictsort:"result" by result as result_groups %}
{% for group in result_groups %}
{% with group.list|length as number %}
{% if group.grouper == 'passed' %}
<span class="badge text-bg-success mx-1">
{% blocktrans %}{{ number }} passed{% endblocktrans %}
</span>
{% elif group.grouper == 'failed' %}
<span class="badge text-bg-danger mx-1">
{% blocktrans %}{{ number }} failed{% endblocktrans %}
</span>
{% elif group.grouper == 'warning' %}
<span class="badge text-bg-warning mx-1">
{% blocktrans %}{{ number }} warnings{% endblocktrans %}
</span>
{% elif group.grouper == 'error' %}
<span class="badge text-bg-warning mx-1">
{% blocktrans %}{{ number }} errors{% endblocktrans %}
</span>
{% elif group.grouper == 'skipped' %}
<span class="badge text-bg-secondary mx-1">
{% blocktrans %}{{ number }} skipped{% endblocktrans %}
</span>
{% endif %}
{% endwith %}
{% endfor %}
{% elif app_data.exception %}
<span class="fa fa-exclamation-triangle mx-1" aria-hidden="true"></span>
{% else %}
<span class="fa fa-hourglass-o mx-1"></span>
{% endif %}
{% if app_data.show_repair %}
<form class="form form-diagnostics-repair-button mx-1" method="post"
action="{% url 'diagnostics:repair' app_id=app_id %}">
{% csrf_token %}
<input type="submit" class="btn btn-default"
name="repair" value="{% trans "Try to repair" %}"/>
</form>
{% endif %}
</div>
</button>
</h4> </h4>
{% if app_data.show_repair %} <div class="accordion-collapse collapse" id="collapse-{{ app_id }}"
<form class="form form-diagnostics-repair-button" method="post" aria-labelledby="heading-{{ app_id }}"
action="{% url 'diagnostics:repair' app_id=app_id %}"> data-bs-parent="#diagnostics-results">
{% csrf_token %} <div class="accordion-body">
<input type="submit" class="btn btn-default" {% if app_data.diagnosis %}
name="repair" value="{% trans "Try to repair" %}"/> {% include "diagnostics_results.html" with results=app_data.diagnosis %}
</form> {% elif app_data.exception %}
{% endif %} <div class="alert alert-danger d-flex align-items-center" role="alert">
</div> <div class="me-2">
<span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
{% if app_data.diagnosis %} <span class="visually-hidden">{% trans "Caution:" %}</span>
{% include "diagnostics_results.html" with results=app_data.diagnosis %} </div>
{% elif app_data.exception %} <div>
<div class="alert alert-danger d-flex align-items-center" role="alert"> {{ app_data.exception }}
<div class="me-2"> </div>
<span class="fa fa-exclamation-triangle" aria-hidden="true"></span> </div>
<span class="visually-hidden">{% trans "Caution:" %}</span> {% else %}
</div> <p class="text-center">
<div> <span class="fa fa-hourglass-o me-2"></span>
{{ app_data.exception }} {% trans "Running..." %}
</p>
{% endif %}
</div> </div>
</div> </div>
{% else %} </div>
<p><span class="fa fa-hourglass-o"></span></p> {% endfor %}
{% endif %} </div>
</section>
{% endfor %}
{% endif %} {% endif %}
{% endblock %} {% endblock %}