syz-cluster/dashboard: add a dynamic modal window

For now, use it to display the raw patch series content. Later it will be used to display the details about findings and builds.
google · Jan 27, 2025 · d7b4978 · d7b4978
1 parent 83bb17d
commit d7b4978
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/syz-cluster/dashboard/static/bootstrap.bundle.min.js b/syz-cluster/dashboard/static/bootstrap.bundle.min.js
diff --git a/syz-cluster/dashboard/static/jquery-3.7.1.min.js b/syz-cluster/dashboard/static/jquery-3.7.1.min.js
diff --git a/syz-cluster/dashboard/templates/base.html b/syz-cluster/dashboard/templates/base.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="/static/bootstrap.min.css">
+    <script src="/static/jquery-3.7.1.min.js"></script>
+    <script src="/static/bootstrap.bundle.min.js"></script>
     <title>syz-cluster</title>
   </head>
   <body>

diff --git a/syz-cluster/dashboard/templates/series.html b/syz-cluster/dashboard/templates/series.html
@@ -1,4 +1,40 @@
 {{define "content"}}
+    <!-- Modal -->
+    <div class="modal fade" tabindex="-1" id="contentModal" role="dialog" aria-labelledby="contentModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="contentModalLabel">Content</h5>&nbsp;
+            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <!-- will be set dynamically -->
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      $(document).ready(function() {
+          $('a.modal-link-raw').click(function(event) {
+              event.preventDefault();
+              var body = $('#contentModal .modal-body')
+              var url = $(this).attr('href');
+              body.html("")
+              body.load(url, function(response, status, xhr){
+                  if (status == "success") {
+                      body.html("<pre>" + response + "</pre>")
+                  }
+                  $('#contentModal').modal('show');
+              });
+          })
+      });
+    </script>
+
     <div class="container">
         <h2>Patch Series</h2>
         <table class="table table-bordered table-sm">
@@ -35,7 +71,7 @@ <h3>Patches ({{.TotalPatches}})</h3>
                 {{range .Patches}}
                 <tr>
                     <td><a href="{{.Link}}">{{.Title}}</a></td>
-                    <td><a href="/patches/{{.ID}}">[Body]</a></td>
+                    <td><a href="/patches/{{.ID}}" class="modal-link-raw">[Body]</a></td>
                 </tr>
                 {{end}}
            </tbody>