feat: block results report HTMX

machshev · machshev · commit e4522bdca05b · 2025-12-19T15:37:23.000Z
Reduce the block report to an HTML fragment that is loaded with the
wrapper using AJAX requests. Update the summary report links to use a
bootstrap button class (which is nicer than the blue URLs anyway?), and
use HTMX to replace the `#report-content` div with the block report.

The `hx-push-url="true"` is important to make sure the back button on
the browser works as expected.

Signed-off-by: James McCorrie &lt;james.mccorrie@lowrisc.org&gt;
diff --git a/src/dvsim/templates/reports/block_report.html b/src/dvsim/templates/reports/block_report.html
@@ -4,52 +4,12 @@
 # SPDX-License-Identifier: Apache-2.0
 
 -->
-
 {% set block = results.block %}
 {% set tool = results.tool %}
 {% set timestamp = results.timestamp %}
 {% set stages = results.stages %}
 {% set coverage = results.coverage %}
 {% set failed_jobs = results.failed_jobs %}
-
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ block.name }} Simulation Results</title>
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-          rel="stylesheet"
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-          crossorigin="anonymous">
-    <style>
-        td.c0  { color: #ffffff; background-color: #EF5757; }
-        td.c1  { color: #ffffff; background-color: #EF6D57; }
-        td.c2  { color: #000000; background-color: #EF8357; }
-        td.c3  { color: #000000; background-color: #EF9957; }
-        td.c4  { color: #000000; background-color: #EFAF57; }
-        td.c5  { color: #000000; background-color: #EFC557; }
-        td.c6  { color: #000000; background-color: #EFDB57; }
-        td.c7  { color: #000000; background-color: #ECEF57; }
-        td.c8  { color: #000000; background-color: #D6EF57; }
-        td.c9  { color: #000000; background-color: #C0EF57; }
-        td.c10 { color: #000000; background-color: #57EF57; }
-    </style>
-</head>
-<body>
-
-<nav class="navbar navbar-expand-lg bg-body-tertiary">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="#">Nightly Reports</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</nav>
-
 <div class="container-md">
     <div class="row">
         <div class="col">
@@ -262,9 +222,3 @@ <h3>Error Messages</h3>
         </div>
     </div>
 </div>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
-</body>
-</html>
diff --git a/src/dvsim/templates/reports/summary_report.html b/src/dvsim/templates/reports/summary_report.html
@@ -92,10 +92,12 @@ <h2>Simulation Results: {{ top.name }}</h2>
                     {% for block_name in summary.flow_results.keys()|sort %}
                         {% set flow = summary.flow_results[block_name] %}
                         <tr>
-                            <td>
-                                <a href="{{ block_name }}.html">
+                            <td class="btn"
+                                hx-get="{{ block_name }}.html"
+                                hx-trigger="click"
+                                hx-push-url="true"
+                                hx-target="#report-content">
                                     {{ block_name | upper }}
-                                </a>
                             </td>
                             <td>{{ flow.passed }}</td>
                             <td>{{ flow.total }}</td>
