diagnostics: Refactor module results template

- For reuse elsewhere

plinth/modules/diagnostics/templates/diagnostics_module.html

@@ -25,28 +25,9 @@
 <h3>Module: {{ module_name }}</h3>
 
 {% if results %}
-<div class="row">
-  <div class="col-sm-3">
-    <table class="table table-bordered table-striped">
-      <thead>
-        <tr>
-          <th>Test</th>
-          <th>Result</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for test, result in results %}
-        <tr>
-          <td>{{ test }}</td>
-          <td>{{ result }}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</div>
+  {% include "diagnostics_results.html" with results=results %}
 {% else %}
-<p>This module does not support diagnostics</p>
+  <p>This module does not support diagnostics</p>
 {% endif %}
 
 {% endblock %}

plinth/modules/diagnostics/templates/diagnostics_results.html

@@ -0,0 +1,50 @@
+{% comment %}
+#
+# This file is part of Plinth.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+{% endcomment %}
+
+<div class="row">
+  <div class="col-sm-5">
+    <table class="table table-bordered table-striped diagnostics-results">
+      <thead>
+        <tr>
+          <th class="diagnostic-test">Test</th>
+          <th class="diagnostics-result">Result</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for test, result in results %}
+        <tr>
+          <td>{{ test }}</td>
+          <td>
+            {% if result == 'passed' %}
+              <span class="label label-success">{{ result }}</span>
+            {% elif result == 'failed' %}
+              <span class="label label-danger">{{ result }}</span>
+            {% elif result == 'error' %}
+              <span class="label label-warning">{{ result }}</span>
+              {{ result }}
+            {% else %}
+              {{ result }}
+            {% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>

static/themes/default/css/plinth.css

@@ -42,3 +42,7 @@ body {
 .no-js .nav .dropdown .caret {
     display: none;
 }
+
+.diagnostics-results .diagnostics-result {
+    width: 60px;
+}