mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-03-11 09:04:54 +00:00
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>
121 lines
4.9 KiB
HTML
121 lines
4.9 KiB
HTML
{% extends 'base.html' %}
|
|
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{% load i18n %}
|
|
|
|
{% block content %}
|
|
|
|
{% if not is_task_running %}
|
|
<div class="btn-toolbar">
|
|
<form class="form form-diagnostics-full" method="post"
|
|
action="{% url 'diagnostics:full' %}">
|
|
{% csrf_token %}
|
|
|
|
<input type="submit" class="btn btn-primary"
|
|
value="{% trans "Re-run Diagnostics" %}"/>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<p>{% trans "Diagnostics test is currently running" %}</p>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active
|
|
w-{{ results.progress_percentage }}"
|
|
role="progressbar" aria-valuemin="0" aria-valuemax="100"
|
|
aria-valuenow="{{ results.progress_percentage }}">
|
|
{{ results.progress_percentage }}%
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
{% if results %}
|
|
<h3>{% trans "Results" %}</h3>
|
|
<div class="accordion" id="diagnostics-results">
|
|
{% for app_id, app_data in results.results.items %}
|
|
<div class="accordion-item">
|
|
<h4 class="accordion-header" id="#heading-{{ app_id }}">
|
|
<button class="accordion-button collapsed" type="button"
|
|
data-bs-toggle="collapse"
|
|
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>
|
|
|
|
<div class="accordion-collapse collapse" id="collapse-{{ app_id }}"
|
|
aria-labelledby="heading-{{ app_id }}"
|
|
data-bs-parent="#diagnostics-results">
|
|
<div class="accordion-body">
|
|
{% if app_data.diagnosis %}
|
|
{% include "diagnostics_results.html" with results=app_data.diagnosis %}
|
|
{% elif app_data.exception %}
|
|
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
|
<div class="me-2">
|
|
<span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
|
|
<span class="visually-hidden">{% trans "Caution:" %}</span>
|
|
</div>
|
|
<div>
|
|
{{ app_data.exception }}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center">
|
|
<span class="fa fa-hourglass-o me-2"></span>
|
|
{% trans "Running..." %}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|