feat: [five-c] Compliance dashboards extended

component_catalog/templates/component_catalog/includes/hierarchy_instance_box.html

@@ -32,7 +32,7 @@
           {% include 'component_catalog/includes/vulnerability_icon_link.html' with url=instance.get_absolute_url count=relation.vulnerability_count %}
         {% endif %}
         {% if relation.package_id and relation.package.declared_dependencies.all %}
-          <a class="btn badge text-bg-primary rounded-pill ms-1"
+          <a class="btn badge bg-primary-subtle text-primary-emphasis rounded-pill ms-1"
              href="{{ product.get_absolute_url }}?dependencies-for_package__uuid={{ relation.package.uuid }}#dependencies" data-bs-toggle="tooltip" title="Dependencies" aria-label="Dependencies">
             {{ relation.package.declared_dependencies.all|length }}<i class="fa-solid fa-share-nodes ms-1"></i>
           </a>

dejacode/static/css/dejacode_bootstrap.css

@@ -141,6 +141,9 @@ table.text-break thead {
   background-color: var(--bs-djc-blue-bg);
   height: 54px;
 }
+.nav {
+  --bs-nav-link-padding-x: 0.75rem;
+}
 .navbar-nav .active>.nav-link,
 .navbar-nav .show>.nav-link
 .navbar-nav .nav-link.active,
@@ -470,6 +473,11 @@ table.vulnerabilities-table .column-summary {
   font-size: 0.75rem;
 }
 
+/* -- Licenses tab -- */
+#tab_licenses .column-usage_policy {
+  min-width: 175px;
+}
+
 /* -- Package Details -- */
 textarea.licenseexpressionwidget {
   height: 62px;
@@ -700,7 +708,17 @@ td.sub-header {
 .tab-content .table thead tr th {
   font-size: 0.875rem;
 }
-th a.sort i {width: auto;}
+th a.sort i {
+  width: auto;
+}
+tr.row-alert-danger > td:first-child {
+  box-shadow: inset 4px 0 0 var(--bs-danger);
+  padding-left: 1rem;
+}
+tr.row-alert-warning > td:first-child {
+  box-shadow: inset 4px 0 0 var(--bs-warning);
+  padding-left: 1rem;
+}
 
 /* -- Better looks for the popover fake links -- */
 .tag_popover,

dejacode/static/js/dejacode_main.js

@@ -239,6 +239,43 @@ function setupDismissibleAlerts() {
   });
 }
 
+function setupScrollToTargets() {
+  // Scroll to an in-page section when an element with data-scroll-to is clicked.
+  // The offset accounts for the sticky header via the body's padding-top.
+  document.addEventListener('click', (event) => {
+    const trigger = event.target.closest('[data-scroll-to]');
+    if (!trigger) return;
+    const target = document.getElementById(trigger.dataset.scrollTo);
+    if (!target) return;
+    const offset = parseFloat(getComputedStyle(document.body).paddingTop) || 0;
+    const top = target.getBoundingClientRect().top + window.scrollY - offset;
+    window.scrollTo({ top, behavior: 'smooth' });
+  });
+}
+
+function setupPaginationKeys() {
+  // Arrow key navigation for the page's own pagination. Pagination living inside
+  // a .tab-content is excluded: arrow keys there belong to the tab's own logic.
+  // Disabled links render as <span> (no href), so querying <a> skips them.
+  const isPageLevel = (link) => link && !link.closest('.tab-content');
+  const previousLink = [...document.querySelectorAll('a.page-link[aria-label="Previous"]')].find(isPageLevel);
+  const nextLink = [...document.querySelectorAll('a.page-link[aria-label="Next"]')].find(isPageLevel);
+  if (!previousLink && !nextLink) return;
+
+  const anyInputHasFocus = () => document.querySelector('input:focus, textarea:focus') !== null;
+
+  document.addEventListener('keydown', (event) => {
+    if (anyInputHasFocus()) return;
+    if (event.key === 'ArrowLeft' && previousLink) {
+      event.preventDefault();
+      window.location.href = previousLink.href;
+    } else if (event.key === 'ArrowRight' && nextLink) {
+      event.preventDefault();
+      window.location.href = nextLink.href;
+    }
+  });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   NEXB = {};
   NEXB.client_data = JSON.parse(document.getElementById("client_data").textContent);
@@ -277,4 +314,6 @@ document.addEventListener('DOMContentLoaded', () => {
   setupThemeSwitcher();
   setupPlatformHints();
   setupDismissibleAlerts();
+  setupScrollToTargets();
+  setupPaginationKeys();
 });

dje/templates/dataspace_home.html

@@ -78,7 +78,7 @@ <h2 class="card-header fw-bold px-2 h6">{{ card.title }}</h2>
                 {% if forloop.first %}
                   <ul class="mb-1 ps-3">
                 {% endif %}
-                <li>{{ obj }}</li>
+                <li class="mb-1">{{ obj }}</li>
                 {% if forloop.last %}
                   </ul>
                 {% endif %}

dje/templates/hierarchy_base.js.html

@@ -43,10 +43,13 @@
     // Draw if the hierarchy tab is active
     if (isTabActive(tabId)) jsPlumbHierarchy.setSuspendDrawing(false, true);
 
-    document.querySelector('button[data-bs-target="#tab_hierarchy"]').addEventListener('shown.bs.tab', function (e) {
-      // Second argument instructs jsPlumb to perform a full repaint.
-      jsPlumbHierarchy.setSuspendDrawing(false, true);
-    });
+    const hierarchyTab = document.querySelector('button[data-bs-target="#tab_hierarchy"]');
+    if (hierarchyTab) {
+      hierarchyTab.addEventListener('shown.bs.tab', function (e) {
+        // Second argument instructs jsPlumb to perform a full repaint.
+        jsPlumbHierarchy.setSuspendDrawing(false, true);
+      });
+    }
 
     // Repaint on resizing the browser window if the related tab is active
     window.addEventListener('resize', function(){

dje/templates/object_details_base.html

@@ -75,7 +75,7 @@ <h1 class="header-title text-break">
   {% endblock %}
 
   <nav role="navigation">
-    <ul class="nav nav-tabs container px-3" id="details_tab" role="tablist">
+    <ul class="nav nav-tabs container px-1" id="details_tab" role="tablist">
       {% for tab_name, tab_context in tabsets.items %}
         <li class="nav-item" role="presentation"{% if tab_context.tooltip %} data-bs-toggle="tooltip" title="{{ tab_context.tooltip }}"{% endif %}>
           <button class="nav-link{% if forloop.first %} active{% endif %}" id="tab_{{ tab_name|slugify }}-tab" data-bs-toggle="tab" data-bs-target="#tab_{{ tab_name|slugify }}" type="button" role="tab" aria-controls="tab_{{ tab_name|slugify }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"{% if tab_context.disabled %} disabled="disabled"{% endif %}>

dje/templates/object_list_base.html

@@ -96,30 +96,6 @@
             $('.h-link').tooltip({placement: 'bottom', title: 'Hierarchy view', container: 'body'});
             $('.r-link').tooltip({placement: 'bottom', title: 'Request view', container: 'body'});
 
-            /* Left and Right keys navigation */
-            {% if is_paginated %}
-              document.addEventListener("keydown", function(e) {
-                // Do not trigger the navigation if an <input> or <textarea> currently has the focus
-                var anyInputHasFocus = function() {
-                  return document.querySelector("input:focus, textarea:focus") !== null;
-                };
-
-                {% if page_obj.has_previous %}
-                  if (e.keyCode === 37 && !anyInputHasFocus()) {
-                    e.preventDefault();
-                    window.location.href = window.location.href.replace(/[\?#].*|$/, "?{{ previous_url }}");
-                  }
-                {% endif %}
-
-                {% if page_obj.has_next %}
-                  if (e.keyCode === 39 && !anyInputHasFocus()) {
-                    e.preventDefault();
-                    window.location.href = window.location.href.replace(/[\?#].*|$/, "?{{ next_url }}");
-                  }
-                {% endif %}
-              });
-            {% endif %}
-
             $('select.bootstrap-select-filter')
               .selectpicker()
               .on('changed.bs.select', function (event) {

license_library/filters.py

@@ -59,6 +59,7 @@ class LicenseFilterSet(DataspacedFilterSet):
             "category",
             "license_profile",
             "owner",
+            "usage_policy",
         ],
         empty_label="Relevance",
     )
@@ -98,6 +99,7 @@ class Meta:
             "license_profile",
             "usage_policy",
             "in_spdx_list",
+            "usage_policy__compliance_alert",
         ]
 
     def __init__(self, *args, **kwargs):

product_portfolio/models.py

@@ -431,9 +431,6 @@ def get_manage_components_url(self):
     def get_manage_packages_url(self):
         return self.get_url("manage_packages")
 
-    def get_license_summary_url(self):
-        return self.get_url("license_summary")
-
     def get_check_package_version_url(self):
         return self.get_url("check_package_version")
 

product_portfolio/templates/product_portfolio/compliance_dashboard.html → product_portfolio/templates/product_portfolio/compliance/compliance_dashboard.html

@@ -137,17 +137,17 @@ <h1 class="h3 mb-0">
             </td>
             <td class="text-end">
               {% if product.license_error_count %}
-                <span class="badge bg-danger-subtle text-danger-emphasis">
+                <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=error#licenses" class="badge bg-danger-subtle text-danger-emphasis">
                   {{ product.license_error_count }} {% trans "error" %}{{ product.license_error_count|pluralize }}
-                </span>
+                </a>
               {% endif %}
               {% if product.license_warning_count %}
-                <span class="badge bg-warning-subtle text-warning-emphasis ms-1">
+                <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=warning#licenses" class="badge bg-warning-subtle text-warning-emphasis ms-1">
                   {{ product.license_warning_count }} {% trans "warning" %}{{ product.license_warning_count|pluralize }}
-                </span>
+                </a>
               {% endif %}
               {% if not product.license_error_count and not product.license_warning_count %}
-                <span class="badge bg-success-subtle text-success-emphasis">{% trans "OK" %}</span>
+                <a href="{{ product_url }}#licenses" class="badge bg-success-subtle text-success-emphasis">{% trans "OK" %}</a>
               {% endif %}
             </td>
             <td class="text-end">
@@ -170,16 +170,16 @@ <h1 class="h3 mb-0">
                 </span>
               {% endif %}
               {% if product.critical_count %}
-                <span class="badge bg-danger-subtle text-danger-emphasis">{{ product.critical_count }} {% trans "critical" %}</span>
+                <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=critical#vulnerabilities" class="badge bg-danger-subtle text-danger-emphasis">{{ product.critical_count }} {% trans "critical" %}</a>
               {% endif %}
               {% if product.high_count %}
-                <span class="badge bg-warning-orange-subtle text-warning-orange ms-1">{{ product.high_count }} {% trans "high" %}</span>
+                <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=high#vulnerabilities" class="badge bg-warning-orange-subtle text-warning-orange ms-1">{{ product.high_count }} {% trans "high" %}</a>
               {% endif %}
               {% if product.medium_count %}
-                <span class="badge bg-warning-subtle text-warning-emphasis ms-1">{{ product.medium_count }} {% trans "medium" %}</span>
+                <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=medium#vulnerabilities" class="badge bg-warning-subtle text-warning-emphasis ms-1">{{ product.medium_count }} {% trans "medium" %}</a>
               {% endif %}
               {% if product.low_count %}
-                <span class="badge bg-info-subtle text-info-emphasis ms-1">{{ product.low_count }} {% trans "low" %}</span>
+                <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=low#vulnerabilities" class="badge bg-info-subtle text-info-emphasis ms-1">{{ product.low_count }} {% trans "low" %}</a>
               {% endif %}
               {% if not product.vulnerability_count %}
                 <span class="text-body-tertiary small">{% trans "None" %}</span>
@@ -202,5 +202,8 @@ <h1 class="h3 mb-0">
     <div class="d-flex justify-content-center">
       {% include 'pagination/object_list_pagination.html' %}
     </div>
+    <div class="text-center">
+      <strong>Tip:</strong> You can use <kbd>&larr;</kbd> and <kbd>&rarr;</kbd> keys to navigate.
+    </div>
   {% endif %}
 {% endblock %}

product_portfolio/templates/product_portfolio/compliance/compliance_panels.html

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% url product.get_absolute_url as product_url %}
 <div class="row g-4 mb-4">
   {# License panel #}
   <div class="col-lg-6">
@@ -43,9 +44,9 @@ <h3 class="fs-6 fw-medium mb-0">{% trans "License compliance" %}</h3>
           {% if license_issues_count == 0 %}
             <span class="badge bg-success-subtle text-success-emphasis">{% trans "OK" %}</span>
           {% elif license_error_count > 0 %}
-            <span class="badge bg-danger-subtle text-danger-emphasis">{% trans "Error" %}</span>
+            <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=error#licenses" class="badge bg-danger-subtle text-danger-emphasis">{% trans "Error" %}</a>
           {% else %}
-            <span class="badge bg-warning-subtle text-warning-emphasis">{% trans "Warning" %}</span>
+            <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=warning#licenses" class="badge bg-warning-subtle text-warning-emphasis">{% trans "Warning" %}</a>
           {% endif %}
         </div>
       </div>
@@ -76,9 +77,9 @@ <h3 class="fs-6 fw-medium mb-0">{% trans "License compliance" %}</h3>
               </td>
               <td class="text-end">
                 {% if license.compliance_alert == "error" %}
-                  <span class="badge bg-danger-subtle text-danger-emphasis">{% trans "Error" %}</span>
+                  <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=error#licenses" class="badge bg-danger-subtle text-danger-emphasis">{% trans "Error" %}</a>
                 {% elif license.compliance_alert == "warning" %}
-                  <span class="badge bg-warning-subtle text-warning-emphasis">{% trans "Warning" %}</span>
+                  <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=warning#licenses" class="badge bg-warning-subtle text-warning-emphasis">{% trans "Warning" %}</a>
                 {% else %}
                   <span class="badge bg-success-subtle text-success-emphasis">{% trans "OK" %}</span>
                 {% endif %}
@@ -88,10 +89,11 @@ <h3 class="fs-6 fw-medium mb-0">{% trans "License compliance" %}</h3>
         </tbody>
       </table>
       {% if remaining_license_count > 0 %}
-        <div class=" mt-2 pt-2">
-          <small class="text-body-tertiary">
-            + {{ remaining_license_count }} {% trans "other license" %}{{ remaining_license_count|pluralize }}{% if license_issues_count == 0 %}, {% trans "all within policy" %}{% endif %}
-          </small>
+        <div class="mt-2">
+          <a href="#" class="text-decoration-none small" onclick="event.preventDefault(); new bootstrap.Tab(document.querySelector('#tab_licenses-tab')).show(); window.scrollTo({ top: 0, behavior: 'smooth' });">
+            View all {{ remaining_license_count }} {% trans "other license" %}{{ remaining_license_count|pluralize }}{% if license_issues_count == 0 %}, {% trans "all within policy" %}{% endif %}
+            <i class="fas fa-arrow-right ms-1"></i>
+          </a>
         </div>
       {% endif %}
     </div>
@@ -204,7 +206,7 @@ <h3 class="fs-6 fw-medium mb-0">{% trans "Security compliance" %}</h3>
       {# View all link #}
       {% if vulnerabilities|length < vulnerability_count %}
         <div class="mt-2">
-          <a href="#vulnerabilities" class="text-decoration-none small" onclick="new bootstrap.Tab(document.querySelector('#tab_vulnerabilities-tab')).show()">
+          <a href="{{ product_url }}?vulnerabilities-bypass_risk_threshold=Yes#vulnerabilities" class="text-decoration-none small">
             {% trans "View all" %} {{ vulnerability_count }} {% trans "vulnerabilities" %}
             <i class="fas fa-arrow-right ms-1"></i>
           </a>

product_portfolio/templates/product_portfolio/compliance/compliance_watchlist_card.html

@@ -10,16 +10,17 @@ <h2 class="card-header fw-bold px-2 h6 d-flex justify-content-between align-item
   </h2>
   <div class="card-body p-2">
     {% for product in compliance_qs %}
+    {% with product_url=product.get_absolute_url %}
       <div>
         <a class="fw-semibold" href="{{ product.get_absolute_url }}#compliance">{{ product }}</a>
         <div class="row g-0 small">
           <div class="col-4 text-body-secondary">License</div>
           <div class="col-8">
             {% if product.license_error_count %}
-              <span class="badge bg-danger-subtle text-danger-emphasis">{{ product.license_error_count }} error{{ product.license_error_count|pluralize }}</span>
+              <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=error#licenses" class="badge bg-danger-subtle text-danger-emphasis">{{ product.license_error_count }} error{{ product.license_error_count|pluralize }}</a>
             {% endif %}
             {% if product.license_warning_count %}
-              <span class="badge bg-warning-subtle text-warning-emphasis{% if product.license_error_count %} ms-1{% endif %}">{{ product.license_warning_count }} warning{{ product.license_warning_count|pluralize }}</span>
+              <a href="{{ product_url }}?licenses-usage_policy__compliance_alert=warning#licenses" class="badge bg-warning-subtle text-warning-emphasis{% if product.license_error_count %} ms-1{% endif %}">{{ product.license_warning_count }} warning{{ product.license_warning_count|pluralize }}</a>
             {% endif %}
             {% if not product.license_error_count and not product.license_warning_count %}
               <span class="badge bg-success-subtle text-success-emphasis">OK</span>
@@ -30,16 +31,16 @@ <h2 class="card-header fw-bold px-2 h6 d-flex justify-content-between align-item
           <div class="col-4 text-body-secondary">Vulnerabilities</div>
           <div class="col-8">
             {% if product.critical_count %}
-              <span class="badge bg-danger-subtle text-danger-emphasis">{{ product.critical_count }} critical</span>
+              <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=critical#vulnerabilities" class="badge bg-danger-subtle text-danger-emphasis">{{ product.critical_count }} critical</a>
             {% endif %}
             {% if product.high_count %}
-              <span class="badge bg-warning-orange-subtle text-warning-orange{% if product.critical_count %} ms-1{% endif %}">{{ product.high_count }} high</span>
+              <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=high#vulnerabilities" class="badge bg-warning-orange-subtle text-warning-orange{% if product.critical_count %} ms-1{% endif %}">{{ product.high_count }} high</a>
             {% endif %}
             {% if product.medium_count %}
-              <span class="badge bg-warning-subtle text-warning-emphasis{% if product.critical_count or product.high_count %} ms-1{% endif %}">{{ product.medium_count }} medium</span>
+              <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=medium#vulnerabilities" class="badge bg-warning-subtle text-warning-emphasis{% if product.critical_count or product.high_count %} ms-1{% endif %}">{{ product.medium_count }} medium</a>
             {% endif %}
             {% if product.low_count %}
-              <span class="badge bg-info-subtle text-info-emphasis{% if product.critical_count or product.high_count or product.medium_count %} ms-1{% endif %}">{{ product.low_count }} low</span>
+              <a href="{{ product_url }}?vulnerabilities-weighted_risk_score=low#vulnerabilities" class="badge bg-info-subtle text-info-emphasis{% if product.critical_count or product.high_count or product.medium_count %} ms-1{% endif %}">{{ product.low_count }} low</a>
             {% endif %}
             {% if not product.critical_count and not product.high_count and not product.medium_count and not product.low_count %}
               <span class="text-body-tertiary">None</span>
@@ -48,6 +49,7 @@ <h2 class="card-header fw-bold px-2 h6 d-flex justify-content-between align-item
         </div>
       </div>
       {% if not forloop.last %}<hr class="my-2">{% endif %}
+    {% endwith %}
     {% empty %}
       <div class="text-center py-4">
         <i class="fa-solid fa-circle-check text-success fs-3"></i>