Update Bootstrap to 5.3.3 (#220)

smarr · Oct 1, 2024 · 6895e2f · 6895e2f
2 parents bbe0e45 + de7d98c
commit 6895e2f
Show file tree

Hide file tree

Showing 25 changed files with 599 additions and 606 deletions.
diff --git a/resources/style.css b/resources/style.css
@@ -175,7 +175,7 @@ main {
     display: none;
   }
   main {
-    max-width: 67%;
+    max-width: 67% !important;
   }
 }
 

diff --git a/src/backend/compare/html/gen-index.html b/src/backend/compare/html/gen-index.html
@@ -12,14 +12,14 @@
 <body class="compare timeline-multi">
 
 <header>
-<div class="jumbotron compare">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for {%= it.project %}</h2>
-  {% if (it.revisionFound) { %}
+{% if (it.revisionFound) { %}
   <h3>Comparing <a href="{%= it.base.repourl%}/compare/{%= it.baselineHash%}...{%= it.changeHash%}">{%= it.baselineHash6%} with {%= it.changeHash6%}</a></h3>
-  {% } else { %}
+{% } else { %}
   <h3>Comparing {%= it.baselineHash6%} with {%= it.changeHash6%}</h3>
-  {% } %}
-</div>
+{% } %}
+</div></div>
 </header>
 
 {% if (it.revisionFound) { %}

diff --git a/src/backend/compare/html/index.html b/src/backend/compare/html/index.html
@@ -18,14 +18,14 @@
 </svg>
 
 <header>
-<div class="jumbotron compare">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for {%= it.project %}</h2>
-  {% if (it.revisionFound) { %}
+{% if (it.revisionFound) { %}
   <h3>Comparing <a href="{%= it.base.repourl%}/compare/{%= it.baselineHash%}...{%= it.changeHash%}">{%= it.baselineHash6%} with {%= it.changeHash6%}</a></h3>
-  {% } else { %}
+{% } else { %}
   <h3>Comparing {%= it.baselineHash6%} with {%= it.changeHash6%}</h3>
-  {% } %}
-</div>
+{% } %}
+</div></div>
 
 {%- include('refresh-menu.html', it) %}
 </header>

diff --git a/src/backend/compare/html/refresh-menu.html b/src/backend/compare/html/refresh-menu.html
@@ -1,7 +1,7 @@
 <div class="refresh">
   <div class="flex-nowrap navbar-light">
     <button type="button" class="btn btn-outline-secondary btn-sm"
-        data-toggle="collapse" data-target="#filters" aria-controls="#filters"
+        data-bs-toggle="collapse" data-bs-target="#filters" aria-controls="#filters"
         aria-expanded="false" aria-label="Toggle Filters">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
         <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
@@ -13,8 +13,8 @@
         <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
       </svg>
     </button>
-    <button class="navbar-toggler" type="button" data-toggle="collapse"
-        data-target="nav.compare" aria-controls="nav.compare"
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+        data-bs-target="nav.compare" aria-controls="nav.compare"
         aria-expanded="false" aria-label="Toggle Outline"
         id="report-nav-toggler">
       <span class="navbar-toggler-icon"></span>

diff --git a/src/backend/compare/html/stats-row-buttons-info.html b/src/backend/compare/html/stats-row-buttons-info.html
@@ -3,17 +3,17 @@
 const b = it.benchId;
 const f = it.dataFormatters;
 %}<button type="button" class="btn btn-sm btn-cmdline btn-popover"
-  data-content="<code>{%= d.cmdline %}</code>"></button>
+  data-bs-content="<code>{%= d.cmdline %}</code>"></button>
 {%
    if (it.environments) {
 %}<button type="button" class="btn btn-sm btn-environment btn-popover"
-    data-content="{%= f.formatEnvironment(d.envId, it.environments) %}"></button>
+    data-bs-content="{%= f.formatEnvironment(d.envId, it.environments) %}"></button>
 {% }
 
    if (d.hasWarmup) {
 %}<button type="button" class="btn btn-sm btn-light btn-warmup" data-content="{%= d.runId %}"></button>
 {%
-   } 
+   }
 
    if (d.profiles) {
 %}<button type="button" class="btn btn-sm btn-profile" data-content="{%= d.runId %}"></button>

diff --git a/src/backend/main/index.html b/src/backend/main/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">ReBench</h1>
     <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
 
@@ -21,7 +21,7 @@ <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
     <a href="https://github.com/smarr/ReBench"><img src="https://img.shields.io/badge/GitHub-ReBench-success"></a>
     <a href="https://github.com/smarr/ReBenchDB"><img src="https://img.shields.io/badge/GitHub-ReBenchDB-success"></a>
     <a href="https://rebench.readthedocs.io/"><img src="https://img.shields.io/badge/Documentation-Go-informational"></a>
-  </div>
+  </div></div>
 
   <div id="projects">
     {% for (const p of it.projects) { %}

diff --git a/src/backend/project/get-exp-data.html b/src/backend/project/get-exp-data.html
@@ -9,10 +9,10 @@
 </head>
 <body class="compare">
 
-<div class="jumbotron">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
   <h2>ReBenchDB for {%= it.project %}</h2>
   <h3>Preparing Data for download of {%= it.expName %}</h3>
-</div>
+</div></div>
 
 {% if (it.preparingData) { %}
 <div class="alert alert-secondary" role="alert">

diff --git a/src/backend/project/project-data.html b/src/backend/project/project-data.html
@@ -9,12 +9,12 @@
 </head>
 <body>
 
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">{%= it.project.name %}</h1>
     {% if (it.project.description) { %}
     <h2 class="display-5">{%= it.project.description %}</h2>
     {% } %}
-  </div>
+  </div></div>
 
   <div>
     <table class="table table-sm">

diff --git a/src/backend/project/project.html b/src/backend/project/project.html
@@ -10,12 +10,12 @@
 </head>
 <body class="project-body">
 
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">{%= it.name %}</h1>
     {% if (it.description) { %}
     <h2 class="display-5">{%= it.description%}</h2>
     {% } %}
-  </div>
+  </div></div>
 
   <div id="project">
     <div class="branch-sidebar left">

diff --git a/src/backend/timeline/timeline.html b/src/backend/timeline/timeline.html
@@ -11,26 +11,26 @@
 <body class="timeline-multi timeline">
 
 <header>
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">ReBench: Timeline {%= it.project.name %}</h1>
     {% if (it.project.description) { %}
     <h2 class="display-5">{%= it.project.description %}</h2>
     {% }
        if (it.project.basebranch) { %}
     <p>Timeline is based on data for the <code>{%= it.project.basebranch %}</code> branch.</p>
     {% } %}
-  </div>
+  </div></div>
   <div class="refresh">
     <div class="flex-nowrap navbar-light">
       <button type="button" class="btn btn-outline-secondary btn-sm"
-          data-toggle="collapse" data-target="#filters" aria-controls="#filters"
+          data-bs-toggle="collapse" data-bs-target="#filters" aria-controls="#filters"
           aria-expanded="false" aria-label="Toggle Filters">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
           <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
         </svg>
       </button>
-      <button class="navbar-toggler" type="button" data-toggle="collapse"
-          data-target="nav.compare" aria-controls="nav.compare"
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="nav.compare" aria-controls="nav.compare"
           aria-expanded="false" aria-label="Toggle Outline"
           id="report-nav-toggler">
         <span class="navbar-toggler-icon"></span>
@@ -81,15 +81,14 @@ <h4><a href="#b-{%= bb.benchName %}-{%= bb.runId %}">{%= bb.benchName %}<span cl
   </div></div> <!-- closing class="row flex-nowrap" and class="container-fluid" -->
   {% } else { %}
   <main role="main">
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">No Data Available</h1>
     {% if (it.project.basebranch) { %}
       <p class="lead">There are no benchmarks available for this project.</p>
     {% } else { %}
       <p class="lead">The branch to show on the timeline has not been configured. Please ask the ReBenchDB administrator to set the branch for the timeline view.</p>
     {% } %}
-  </div>
-  </div>
+  </div></div>
   </main>
   {% } %}
 </body>

diff --git a/src/frontend/compare.ts b/src/frontend/compare.ts
@@ -79,7 +79,7 @@ function createEntry(e: string | ProfileElement, profId, counter) {
 
   if (hasTrace) {
     // eslint-disable-next-line max-len
-    entryHtml += `<a href="#${profId}-item-${counter.cnt}" data-toggle="collapse">`;
+    entryHtml += `<a href="#${profId}-item-${counter.cnt}" data-bs-toggle="collapse">`;
   } else {
     entryHtml += `<span>`;
   }

diff --git a/src/frontend/render.ts b/src/frontend/render.ts
@@ -4,7 +4,7 @@ import { renderResultsPlots } from './plots.js';
 
 export function filterCommitMessage(msg: string): string {
   const result = msg.replace(/Signed-off-by:.*?\n/g, '');
-  return result;
+  return result.trim();
 }
 
 function shortCommitId(commitId) {
@@ -33,16 +33,16 @@ export function expandMessage(event: any): void {
 }
 
 function formatCommitMessages(messages) {
-  messages = filterCommitMessage(messages);
-  const newLineIdx = messages.indexOf('\n');
+  const filteredMsg = filterCommitMessage(messages);
+  const newLineIdx = filteredMsg.indexOf('\n');
   if (newLineIdx > -1) {
-    const firstLine = messages.substring(0, newLineIdx);
+    const firstLine = filteredMsg.substring(0, newLineIdx);
     return (
-      `${firstLine} <a href="#" onclick="expandMessage(event)"` +
-      ` data-fulltext="${messages.replace('"', '\x22')}">&hellip;</a>`
+      `${firstLine} <a href="#"` +
+      ` data-fulltext="${filteredMsg.replace('"', '\x22')}">&hellip;</a>`
     );
   } else {
-    return messages;
+    return filteredMsg;
   }
 }
 
@@ -80,6 +80,7 @@ export function renderProjectDataOverview(
           <a rel="nofollow" href="/${pSlug}/data/${row.expid}.csv.gz">CSV</a>
         </td>
       </tr>`);
+    tBody.find('a').on('click', expandMessage);
   }
 
   if (!hasDesc) {
@@ -108,7 +109,7 @@ function addChangesToList(
 
     const option = `<a class="list-group-item list-group-item-action
       list-min-padding"
-      data-toggle="list" data-hash="${change.commitid}" href="">
+      data-bs-toggle="list" data-hash="${change.commitid}" href="">
         <div class="exp-date" title="Experiment Start Date">${date}</div>
         ${change.commitid.substring(0, 6)} ${change.branchortag}<br>
         <div class="change-msg">${msg}</div>
@@ -266,7 +267,7 @@ function renderBranchList(
   for (const b of branches) {
     const $link = $(`<a
           class="list-group-item list-group-item-action list-min-padding"
-          data-toggle="list" data-branch="${b}" href>${b}</a>`);
+          data-bs-toggle="list" data-branch="${b}" href>${b}</a>`);
     $branchList.append($link);
   }
 

diff --git a/src/views/header.html b/src/views/header.html
@@ -2,10 +2,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
 <link rel="stylesheet" href="/static/style.css?v={%= it.rebenchVersion %}">
diff --git a/tests/data/expected-results/compare-view/compare-versions.html b/tests/data/expected-results/compare-view/compare-versions.html
@@ -31,9 +31,9 @@ <h3 id="suite1-exe1">suite1</h3>
 <td><span class="stats-median" title="median">222b</span></td>
 <td><span class="stats-change" title="diff %">64600</span></td>
 <td><button type="button" class="btn btn-sm btn-cmdline btn-popover"
-data-content="<code>som/some-command with args</code>"></button>
+data-bs-content="<code>som/some-command with args</code>"></button>
 <button type="button" class="btn btn-sm btn-environment btn-popover"
-data-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
+data-bs-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
 <button type="button" class="btn btn-sm btn-light btn-warmup" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-profile" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-timeline" data-content='{"b":"my-benchmark","e":"exe1","s":"suite2"}'></button></td>

diff --git a/tests/data/expected-results/compare-view/stats-row-button-info.html b/tests/data/expected-results/compare-view/stats-row-button-info.html
@@ -1,7 +1,7 @@
 <button type="button" class="btn btn-sm btn-cmdline btn-popover"
-data-content="<code>som/some-command with args</code>"></button>
+data-bs-content="<code>som/some-command with args</code>"></button>
 <button type="button" class="btn btn-sm btn-environment btn-popover"
-data-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
+data-bs-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
 <button type="button" class="btn btn-sm btn-light btn-warmup" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-profile" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-timeline" data-content='{"b":"my-benchmark","e":"exe1","s":"suite2"}'></button>
diff --git a/tests/data/expected-results/compare-view/stats-row-exe.html b/tests/data/expected-results/compare-view/stats-row-exe.html
@@ -35,9 +35,9 @@
 <br><span class="stats-change" title="diff %">604600</span>
 </td>
 <td><button type="button" class="btn btn-sm btn-cmdline btn-popover"
-data-content="<code>som/some-command with args</code>"></button>
+data-bs-content="<code>som/some-command with args</code>"></button>
 <button type="button" class="btn btn-sm btn-environment btn-popover"
-data-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
+data-bs-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
 <button type="button" class="btn btn-sm btn-light btn-warmup" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-profile" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-timeline" data-content='{"b":"my-benchmark","e":"exe1","s":"suite2"}'></button></td>

diff --git a/tests/data/expected-results/compare-view/stats-row-version-one-criteria-missing.html b/tests/data/expected-results/compare-view/stats-row-version-one-criteria-missing.html
@@ -11,9 +11,9 @@
 <td><span class="stats-median" title="median">0.33</span></td>
 <td><span class="stats-change stats-total" title="diff %">54600</span></td>
 <td><button type="button" class="btn btn-sm btn-cmdline btn-popover"
-data-content="<code>som/some-command with args</code>"></button>
+data-bs-content="<code>som/some-command with args</code>"></button>
 <button type="button" class="btn btn-sm btn-environment btn-popover"
-data-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
+data-bs-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
 <button type="button" class="btn btn-sm btn-light btn-warmup" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-profile" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-timeline" data-content='{"b":"my-benchmark","e":"exe1","s":"suite2"}'></button></td>

diff --git a/tests/data/expected-results/compare-view/stats-row-version.html b/tests/data/expected-results/compare-view/stats-row-version.html
@@ -10,9 +10,9 @@
 <td><span class="stats-median" title="median">222b</span></td>
 <td><span class="stats-change" title="diff %">64600</span></td>
 <td><button type="button" class="btn btn-sm btn-cmdline btn-popover"
-data-content="<code>som/some-command with args</code>"></button>
+data-bs-content="<code>som/some-command with args</code>"></button>
 <button type="button" class="btn btn-sm btn-environment btn-popover"
-data-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
+data-bs-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
 <button type="button" class="btn btn-sm btn-light btn-warmup" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-profile" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-timeline" data-content='{"b":"my-benchmark","e":"exe1","s":"suite2"}'></button></td>

diff --git a/tests/data/expected-results/compare-view/stats-tbl.html b/tests/data/expected-results/compare-view/stats-tbl.html
@@ -26,9 +26,9 @@
 <td><span class="stats-median" title="median">222b</span></td>
 <td><span class="stats-change" title="diff %">64600</span></td>
 <td><button type="button" class="btn btn-sm btn-cmdline btn-popover"
-data-content="<code>som/some-command with args</code>"></button>
+data-bs-content="<code>som/some-command with args</code>"></button>
 <button type="button" class="btn btn-sm btn-environment btn-popover"
-data-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
+data-bs-content="MyHost | Linux | 121kb | Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz | 3GHz"></button>
 <button type="button" class="btn btn-sm btn-light btn-warmup" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-profile" data-content="1"></button>
 <button type="button" class="btn btn-sm btn-timeline" data-content='{"b":"my-benchmark","e":"exe1","s":"suite2"}'></button></td>