From 29e846da99f8dceb995cb3216b425412b2ceb9bb Mon Sep 17 00:00:00 2001
From: aiooss-anssi <alexandre.iooss@ssi.gouv.fr>
Date: Fri, 31 May 2024 15:47:38 +0200
Subject: [PATCH] flowdisplay: add title to sections

---
 webapp/static/js/flowdisplay.js    |  4 ++--
 webapp/templates/index.html.jinja2 | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/webapp/static/js/flowdisplay.js b/webapp/static/js/flowdisplay.js
index aed49e8..e3e61d1 100644
--- a/webapp/static/js/flowdisplay.js
+++ b/webapp/static/js/flowdisplay.js
@@ -142,7 +142,7 @@ class FlowDisplay {
 
     // Flow card
     document.getElementById('display-flow').classList.remove('d-none')
-    document.querySelector('#display-flow > header > span').textContent = `${flow.flow.proto} flow, ${flow.flow.src_ipport} ➔ ${flow.flow.dest_ipport}`
+    document.querySelector('#display-flow > header > h1').textContent = `${flow.flow.proto} flow, ${flow.flow.src_ipport} ➔ ${flow.flow.dest_ipport}`
     document.querySelector('#display-flow > header > a').href = flow.flow.pcap_filename
     document.querySelector('#display-flow > header > a').classList.toggle('d-none', !flow.flow.pcap_filename)
     const flowBody = document.querySelector('#display-flow > pre')
@@ -182,7 +182,7 @@ class FlowDisplay {
     if (appProto && appProto !== 'failed' && flow[appProto] !== undefined) {
       document.getElementById('display-app').classList.remove('d-none')
       document.querySelector('#display-app > header > a').classList.toggle('d-none', appProto !== 'http')
-      document.querySelector('#display-app > header > span > span').textContent = appProto.toUpperCase()
+      document.querySelector('#display-app > header > h1 > a > span').textContent = appProto.toUpperCase()
       const body = document.querySelector('#display-app > div > pre')
       body.textContent = ''
       if (appProto === 'http' || appProto === 'http2') {
diff --git a/webapp/templates/index.html.jinja2 b/webapp/templates/index.html.jinja2
index 4cb19c6..e0a5cd4 100644
--- a/webapp/templates/index.html.jinja2
+++ b/webapp/templates/index.html.jinja2
@@ -123,22 +123,22 @@
       <div>
         <section class="card m-3 bg-body shadow font-monospace d-none border-secondary" id="display-flow">
           <header class="card-header d-flex justify-content-between">
-            <span></span>
+            <h1 class="h6 lh-base mb-0"></h1>
             <a class="text-nowrap" href="#" download>Download pcap</a>
           </header>
           <pre class="card-body mb-0"></pre>
         </section>
-        <section id="display-alerts"></section>
+        <div id="display-alerts"></div>
         <section class="card m-3 bg-body shadow font-monospace d-none border-success" id="display-app">
           <header class="card-header d-flex justify-content-between">
-            <span>
+            <h1 class="h6 lh-base mb-0">
               <a class="text-reset text-decoration-none" data-bs-toggle="collapse" href="#display-app-collapse" role="button" aria-expanded="true" aria-controls="display-app-collapse">
                 <svg class="bi me-2" width="16" height="16">
                   <use xlink:href="#chevron-down" />
                 </svg>
+                <span></span>
               </a>
-              <span></span>
-            </span>
+            </h1>
             <a class="text-nowrap" href="#" target="_blank">Generate script</a>
           </header>
           <div class="collapse show" id="display-app-collapse">
@@ -148,18 +148,18 @@
         </section>
         <section class="card m-3 bg-body shadow font-monospace d-none border-primary" id="display-raw">
           <header class="card-header d-flex justify-content-between">
-            <span>
+            <h1 class="h6 lh-base mb-0">
               <a class="text-reset text-decoration-none" data-bs-toggle="collapse" href="#display-raw-collapse" role="button" aria-expanded="true" aria-controls="display-raw-collapse">
                 <svg class="bi me-2" width="16" height="16">
                   <use xlink:href="#chevron-down" />
                 </svg>
+                Raw data
               </a>
-              <span>Raw data</span>
-              <nav class="nav nav-pills d-inline-flex" role="tablist">
+              <span class="nav nav-pills d-inline-flex" role="tablist">
                 <button class="nav-link py-0 active" id="display-raw-utf8-tab" data-bs-toggle="pill" data-bs-target="#display-raw-utf8" type="button" role="tab" aria-controls="display-raw-utf8" aria-selected="true">UTF-8</button>
                 <button class="nav-link py-0" id="display-raw-hex-tab" data-bs-toggle="pill" data-bs-target="#display-raw-hex" type="button" role="tab" aria-controls="display-raw-hex" aria-selected="false">Hex</button>
-              </nav>
-            </span>
+              </span>
+            </h1>
             <a class="text-nowrap" id="display-raw-replay" href="#" target="_blank">Generate script</a>
           </header>
           <div class="tab-content collapse show" id="display-raw-collapse">