Antalya 26.5 - CI Ports Bundle

.github/actions/create_workflow_report/ci_run_report.html.jinja

@@ -13,10 +13,11 @@
     :root {
       --altinity-background: #000D45;
       --altinity-accent: #189DCF;
-      --altinity-highlight: #FFC600;
+      --altinity-link-hover: #FFC600;
       --altinity-gray: #6c757d;
       --altinity-light-gray: #f8f9fa;
       --altinity-white: #ffffff;
+      --altinity-hover: color-mix(in srgb, var(--altinity-accent) 12%, var(--altinity-white));
     }
 
     /* Body and heading fonts */
@@ -45,7 +46,7 @@
 
     /* General table styling */
     table {
-      min-width: min(900px, 98vw);
+      min-width: min(900px, 100%);
       margin: 1rem 0;
       border-collapse: collapse;
       background-color: var(--altinity-white);
@@ -107,7 +108,7 @@
 
     /* Table body row styling */
     tr:hover {
-      background-color: var(--altinity-light-gray);
+      background-color: var(--altinity-hover);
     }
 
     /* Table cell styling */
@@ -123,9 +124,72 @@
     }
 
     a:hover {
-      color: var(--altinity-highlight);
+      color: var(--altinity-link-hover);
       text-decoration: underline;
     }
+
+    /* Tab navigation: wrapping strip; each button is an open-bottom tab shape */
+    .tab {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      padding: 0.4rem;
+      border-radius: 0.75rem;
+      width: fit-content;
+      max-width: 100%;
+      margin: 1.5rem 0;
+      background: var(--altinity-white);
+    }
+
+    .tab button.tablinks {
+      appearance: none;
+      box-sizing: border-box;
+      border: 1px solid var(--altinity-accent);
+      border-bottom: 0;
+      border-radius: 0.5rem 0.5rem 0 0;
+      background: var(--altinity-white);
+      padding: 0.55rem 0.95rem;
+      font: inherit;
+      cursor: pointer;
+      white-space: nowrap;
+      color: var(--altinity-background);
+      transition: background 0.12s, color 0.12s;
+    }
+
+    .tab button.tablinks:hover {
+      background: var(--altinity-hover);
+    }
+
+    .tab button.tablinks.active {
+      background: var(--altinity-hover);
+      box-shadow: inset 0 2px 0 var(--altinity-accent);
+      color: var(--altinity-accent);
+      font-weight: 600;
+    }
+
+    .tabcontent {
+      display: none;
+      padding: 0;
+      overflow-x: auto;
+      animation: fadeEffect 0.3s;
+    }
+
+    .tabcontent table {
+      min-width: 0;
+    }
+
+    .tabcontent > *:first-child {
+      margin-top: 0;
+    }
+
+    .tabcontent.active {
+      display: block;
+    }
+
+    @keyframes fadeEffect {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
   </style>
   <title>{{ title }}</title>
   <link rel="icon" type="image/svg+xml"
@@ -166,46 +230,81 @@
   {% if is_preview %}
   <p style="font-weight: bold;color: red;">This is a preview. The workflow is not yet finished.</p>
   {% endif %}
-  <h2>Table of Contents</h2>
-  <ul>
-    {%- if pr_number != 0 %}<li><a href="#new-fails-pr">New Fails in PR</a> ({{ counts.pr_new_fails }})</li>{% endif %}
-    <li><a href="#ci-jobs-status">CI Jobs Status</a> ({{ counts.jobs_status }})</li>
-    <li><a href="#checks-errors">Checks Errors</a> ({{ counts.checks_errors }})</li>
-    <li><a href="#checks-fails">Checks New Fails</a> ({{ counts.checks_new_fails }})</li>
-    <li><a href="#regression-fails">Regression New Fails</a> ({{ counts.regression_new_fails }})</li>
-    <li><a href="#docker-images-cves">Docker Images CVEs</a> ({{ counts.cves }})</li>
-    <li><a href="#checks-known-fails">Checks Known Fails</a> ({{ counts.checks_known_fails }})</li>
-  </ul>
-
-  {%- if pr_number != 0 -%}
-  <h2 id="new-fails-pr">New Fails in PR</h2>
-  <p> Compared with base sha {{ base_sha }} </p>
-  {{ new_fails_html }}
+  <div class="tab">
+    {%- if pr_number == 0 %}<button class="tablinks" onclick="openTab(event, 'prs-in-release')">PRs in Release ({{ counts.prs_in_release }})</button>{% endif %}
+    {%- if pr_number != 0 %}<button class="tablinks" onclick="openTab(event, 'new-fails-pr')">New Fails in PR ({{ counts.pr_new_fails }})</button>{% endif %}
+    <button class="tablinks" onclick="openTab(event, 'ci-jobs-status')">CI Jobs Status ({{ counts.jobs_status }})</button>
+    <button class="tablinks" onclick="openTab(event, 'checks-errors')">Checks Errors ({{ counts.checks_errors }})</button>
+    <button class="tablinks" onclick="openTab(event, 'checks-fails')">Checks New Fails ({{ counts.checks_new_fails }})</button>
+    <button class="tablinks" onclick="openTab(event, 'regression-fails')">Regression New Fails ({{ counts.regression_new_fails }})</button>
+    <button class="tablinks" onclick="openTab(event, 'docker-images-cves')">Docker Images CVEs ({{ counts.cves }})</button>
+    <button class="tablinks" onclick="openTab(event, 'checks-known-fails')">Checks Known Fails ({{ counts.checks_known_fails }})</button>
+  </div>
+
+  {%- if pr_number == 0 %}
+  <div id="prs-in-release" class="tabcontent">
+    {{ prs_in_release_html }}
+  </div>
   {%- endif %}
 
-  <h2 id="ci-jobs-status">CI Jobs Status</h2>
-  {{ ci_jobs_status_html }}
+  {%- if pr_number != 0 %}
+  <div id="new-fails-pr" class="tabcontent">
+    <p>Compared with base sha {{ base_sha }}</p>
+    {{ new_fails_html }}
+  </div>
+  {%- endif %}
+
+  <div id="ci-jobs-status" class="tabcontent">
+    {{ ci_jobs_status_html }}
+  </div>
 
-  <h2 id="checks-errors">Checks Errors</h2>
-  {{ checks_errors_html }}
+  <div id="checks-errors" class="tabcontent">
+    {{ checks_errors_html }}
+  </div>
 
-  <h2 id="checks-fails">Checks New Fails</h2>
-  {{ checks_fails_html }}
+  <div id="checks-fails" class="tabcontent">
+    {{ checks_fails_html }}
+  </div>
 
-  <h2 id="regression-fails">Regression New Fails</h2>
-  {{ regression_fails_html }}
+  <div id="regression-fails" class="tabcontent">
+    {{ regression_fails_html }}
+  </div>
 
-  <h2 id="docker-images-cves">Docker Images CVEs</h2>
-  {{ docker_images_cves_html }}
+  <div id="docker-images-cves" class="tabcontent">
+    {{ docker_images_cves_html }}
+  </div>
 
-  <h2 id="checks-known-fails">Checks Known Fails</h2>
-  <p>
-    Fail reason conventions:<br/>
-    KNOWN - Accepted fail and fix is not planned<br/>
-    INVESTIGATE - We don't know why it fails<br/>
-    NEEDSFIX - Investigation done and a fix is needed to make it pass<br/>
-  </p>
-  {{ checks_known_fails_html }}
+  <div id="checks-known-fails" class="tabcontent">
+    <p>
+      Fail reason conventions:<br/>
+      KNOWN - Accepted fail and fix is not planned<br/>
+      INVESTIGATE - We don't know why it fails<br/>
+      NEEDSFIX - Investigation done and a fix is needed to make it pass<br/>
+    </p>
+    {{ checks_known_fails_html }}
+  </div>
+
+  <script>
+    function openTab(evt, tabId) {
+      var i, tabcontent, tablinks;
+      tabcontent = document.getElementsByClassName('tabcontent');
+      for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].classList.remove('active');
+      }
+      tablinks = document.getElementsByClassName('tablinks');
+      for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].classList.remove('active');
+      }
+      document.getElementById(tabId).classList.add('active');
+      evt.currentTarget.classList.add('active');
+      if (evt.isTrusted) history.replaceState(null, '', '#' + tabId);
+    }
+    // Open the tab named in the URL hash, or fall back to CI Jobs Status
+    var hash = window.location.hash.slice(1);
+    var startTab = (hash && document.querySelector('.tab button[onclick*="' + hash + '"]'))
+      || document.querySelector('.tab button[onclick*="ci-jobs-status"]');
+    if (startTab) startTab.click();
+  </script>
 
   <script>
     document.addEventListener('click', function (e) {