From 9fa1e18aa3f5c5befbb1d587d4fa4e5be9b59498 Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@riseup.net>
Date: Sun, 6 Jul 2025 00:10:15 +0530
Subject: [PATCH] diagnostics: Add collapsible sections for results

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>
---
 .../templates/diagnostics_full.html           | 113 +++++++++++++-----
 1 file changed, 80 insertions(+), 33 deletions(-)

diff --git a/plinth/modules/diagnostics/templates/diagnostics_full.html b/plinth/modules/diagnostics/templates/diagnostics_full.html
index dc53e7447..d82fa2f31 100644
--- a/plinth/modules/diagnostics/templates/diagnostics_full.html
+++ b/plinth/modules/diagnostics/templates/diagnostics_full.html
@@ -32,42 +32,89 @@
 
   {% if results %}
     <h3>{% trans "Results" %}</h3>
-    {% for app_id, app_data in results.results.items %}
-      <section>
-        <div class="d-flex align-items-center justify-content-between">
-          <h4>
-            {% blocktrans trimmed with app_name=app_data.name %}
-              App: {{app_name}}
-            {% endblocktrans %}
+    <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>
 
-          {% if app_data.show_repair %}
-            <form class="form form-diagnostics-repair-button" 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>
-
-        {% 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 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>
-        {% else %}
-          <p><span class="fa fa-hourglass-o"></span></p>
-        {% endif %}
-      </section>
-    {% endfor %}
+        </div>
+      {% endfor %}
+    </div>
   {% endif %}
-
 {% endblock %}