From a63423be30bd1f5677da3d6c0db82647fd0d9a1c Mon Sep 17 00:00:00 2001
From: Wolfram Sang <wsa@kernel.org>
Date: Fri, 10 Nov 2023 14:58:34 +0100
Subject: [PATCH] optional_plugins/html: color test results

Similar to console output, color the result of a test accordingly.
PASSed tests are green. WARN + SKIP + CANCEL + are dark-yellowish. FAIL
+ ERROR + INTERRUPTED are RED. Add "not passed" tests to summary while
here.

Signed-off-by: Wolfram Sang <wsa@kernel.org>
---
 .../avocado_result_html/templates/results.html  | 17 ++++++++++++++---
 .../avocado_result_html/templates/style.css     | 12 ++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/optional_plugins/html/avocado_result_html/templates/results.html b/optional_plugins/html/avocado_result_html/templates/results.html
index 8110d339ee..808a2dc7ec 100644
--- a/optional_plugins/html/avocado_result_html/templates/results.html
+++ b/optional_plugins/html/avocado_result_html/templates/results.html
@@ -50,8 +50,9 @@ <h4 class="panel-title">Summary</h4>
             <tr>
               <td>Stats</td>
               <td>From {{ data.result.tests_total }} tests executed,
-                {{ data.result.passed }} passed and
-                {{ data.result.warned }} warned - success rate of
+                <span class="pass">{{ data.result.passed }} passed</span>,
+                <span class="fail">{{ data.result.failed + data.result.errors + data.result.interrupted }} did not pass</span>, and
+                <span class="warn">{{ data.result.warned }} warned</span> - success rate of
                 {{ '%.2f'|format(data.result.rate) }}% (excluding SKIP and CANCEL)</td>
             </tr>
           </table>
@@ -106,7 +107,17 @@ <h4 class="panel-title">Summary</h4>
             </div>
           </td>
           <td><div>{{ test.variant }}</div></td>
-          <td><div>{{ test.status }}</div></td>
+          <td>
+          {% if test.status == 'PASS' %}
+            <div class="pass">
+          {% elif test.status == 'WARN' or test.status == 'SKIP' or test.status == 'CANCEL' %}
+            <div class="warn">
+          {% else %}
+            <div class="fail">
+          {% endif %}
+              {{ test.status }}
+            </div>
+          </td>
           <td><div>{{ test.time }}</div></td>
           <td data-toggle="popover"
               data-container="body"
diff --git a/optional_plugins/html/avocado_result_html/templates/style.css b/optional_plugins/html/avocado_result_html/templates/style.css
index 901596cb7b..078b1f10ba 100644
--- a/optional_plugins/html/avocado_result_html/templates/style.css
+++ b/optional_plugins/html/avocado_result_html/templates/style.css
@@ -57,6 +57,18 @@
     width: 8px;
 }
 
+.pass {
+    color: green;
+}
+
+.fail {
+    color: red;
+}
+
+.warn {
+    color: darkorange;
+}
+
 /* Basic metadata for svg */
 .icon {
     width: 22px;