display filter labels and fix colors

Signed-off-by: tdruez <tdruez@aboutcode.org>

Author: tdruez

dejacode/static/css/dejacode_bootstrap.css

@@ -94,6 +94,10 @@ table.text-break thead {
 }
 .bg-warning-orange {
   background-color: var(--bs-orange);
+  color: #000;
+}
+.text-warning-orange {
+  color: var(--bs-orange) !important;
 }
 .spinner-border-md {
   --bs-spinner-width: 1.5rem;

product_portfolio/filters.py

@@ -130,6 +130,23 @@ class Meta:
         ]
 
 
+class HasComplianceIssueFilter(django_filters.BooleanFilter):
+    """Filter objects that have a compliance alert (warning or error) on their usage policy."""
+
+    def __init__(self, *args, **kwargs):
+        kwargs.setdefault("label", _("Compliance issues"))
+        kwargs.setdefault("field_name", "compliance_alert")
+        super().__init__(*args, **kwargs)
+
+    def filter(self, qs, value):
+        if value is None:
+            return qs
+        lookup = {f"{self.field_name}__in": ["warning", "error"]}
+        if value:
+            return qs.filter(**lookup)
+        return qs.exclude(**lookup)
+
+
 class BaseProductRelationFilterSet(DataspacedFilterSet):
     field_name_prefix = None
     dropdown_fields = [
@@ -149,6 +166,7 @@ class BaseProductRelationFilterSet(DataspacedFilterSet):
     )
     is_modified = BooleanChoiceFilter()
     object_type = django_filters.CharFilter(
+        label="Item type",
         method="filter_object_type",
         widget=DropDownWidget(
             anchor="#inventory",
@@ -178,6 +196,14 @@ class BaseProductRelationFilterSet(DataspacedFilterSet):
         to_field_name="key",
         queryset=License.objects.only("key", "short_name", "dataspace__id"),
     )
+    has_licenses = HasValueFilter(
+        label=_("Has licenses"),
+        field_name="license_expression",
+    )
+    license_compliance_issues = HasComplianceIssueFilter(
+        label="License compliance issues",
+        field_name="licenses__usage_policy__compliance_alert",
+    )
 
     @staticmethod
     def filter_object_type(queryset, name, value):
@@ -244,6 +270,9 @@ class ProductComponentFilterSet(BaseProductRelationFilterSet):
             anchor="#inventory", right_align=True, link_content='<i class="fas fa-bug"></i>'
         ),
     )
+    compliance_issues = HasComplianceIssueFilter(
+        field_name="component__usage_policy__compliance_alert",
+    )
 
     class Meta:
         model = ProductComponent
@@ -256,23 +285,6 @@ class Meta:
         ]
 
 
-class HasComplianceIssueFilter(django_filters.BooleanFilter):
-    """Filter objects that have a compliance alert (warning or error) on their usage policy."""
-
-    def __init__(self, *args, **kwargs):
-        kwargs.setdefault("label", _("Compliance issues"))
-        kwargs.setdefault("field_name", "compliance_alert")
-        super().__init__(*args, **kwargs)
-
-    def filter(self, qs, value):
-        if value is None:
-            return qs
-        lookup = {f"{self.field_name}__in": ["warning", "error"]}
-        if value:
-            return qs.filter(**lookup)
-        return qs.exclude(**lookup)
-
-
 class ProductPackageFilterSet(BaseProductRelationFilterSet):
     field_name_prefix = "package"
     dropdown_fields = [
@@ -331,18 +343,9 @@ class ProductPackageFilterSet(BaseProductRelationFilterSet):
             ("unknown", _("Reachability not known")),
         ),
     )
-    has_licenses = HasValueFilter(
-        label=_("Has licenses"),
-        field_name="license_expression",
-    )
     compliance_issues = HasComplianceIssueFilter(
-        label="Package compliance issues",
         field_name="package__usage_policy__compliance_alert",
     )
-    license_compliance_issues = HasComplianceIssueFilter(
-        label="License compliance issues",
-        field_name="licenses__usage_policy__compliance_alert",
-    )
 
     class Meta:
         model = ProductPackage
@@ -356,9 +359,6 @@ class Meta:
             "vulnerability_analyses__justification",
             "is_reachable",
             "exploitability",
-            "has_licenses",
-            "compliance_issues",
-            "license_compliance_issues",
         ]
 
     def __init__(self, *args, **kwargs):

product_portfolio/templates/product_portfolio/compliance/compliance_panels.html

@@ -78,7 +78,7 @@ <h3 class="fs-6 fw-medium mb-0">{% trans "Security compliance" %}</h3>
         {% elif max_vulnerability_severity == "critical" %}
           <span class="badge text-bg-danger">{% trans "Critical" %}</span>
         {% elif max_vulnerability_severity == "high" %}
-          <span class="badge" style="background-color: var(--bs-orange); color: #fff;">{% trans "High" %}</span>
+          <span class="badge bg-warning-orange">{% trans "High" %}</span>
         {% elif max_vulnerability_severity == "medium" %}
           <span class="badge text-bg-warning">{% trans "Medium" %}</span>
         {% else %}
@@ -114,7 +114,7 @@ <h3 class="fs-6 fw-medium mb-0">{% trans "Security compliance" %}</h3>
             {% if vulnerability.risk_score_label == "critical" %}
               <span class="badge text-bg-danger">{% trans "Critical" %}</span>
             {% elif vulnerability.risk_score_label == "high" %}
-              <span class="badge" style="background-color: var(--bs-orange); color: #fff;">{% trans "High" %}</span>
+              <span class="badge bg-warning-orange">{% trans "High" %}</span>
             {% elif vulnerability.risk_score_label == "medium" %}
               <span class="badge text-bg-warning">{% trans "Medium" %}</span>
             {% elif vulnerability.risk_score_label == "low" %}

product_portfolio/templates/product_portfolio/compliance/metric_cards.html

@@ -18,7 +18,7 @@
   <div class="col-6 col-md-3">
     <div class="bg-body-secondary rounded-3 p-3">
       <div class="small text-body-secondary mb-1">{% trans "License compliance" %}</div>
-      <div class="fs-4 fw-medium lh-sm {% if license_compliance_pct == 100 %}text-success{% elif license_compliance_pct >= 90 %}text-warning{% else %}text-danger{% endif %}">
+      <div class="fs-4 fw-medium lh-sm {% if license_compliance_pct == 100 %}text-success{% elif license_compliance_pct >= 90 %}text-warning-orange{% else %}text-danger{% endif %}">
         {{ license_compliance_pct }}%
       </div>
       <div class="text-body-tertiary fs-xs mt-1">
@@ -35,7 +35,7 @@
   <div class="col-6 col-md-3">
     <div class="bg-body-secondary rounded-3 p-3">
       <div class="small text-body-secondary mb-1">{% trans "License coverage" %}</div>
-      <div class="fs-4 fw-medium lh-sm {% if license_coverage_pct == 100 %}text-success{% elif license_coverage_pct >= 90 %}text-warning{% else %}text-danger{% endif %}">
+      <div class="fs-4 fw-medium lh-sm {% if license_coverage_pct == 100 %}text-success{% elif license_coverage_pct >= 90 %}text-warning-orange{% else %}text-danger{% endif %}">
         {{ license_coverage_pct }}%
       </div>
       <div class="text-body-tertiary fs-xs mt-1">
@@ -66,7 +66,7 @@
           {% trans "of" %} {{ vulnerability_count }} {% trans "above threshold of" %} {{ risk_threshold_number }}
         </div>
       {% else %}
-        <div class="fs-4 fw-medium lh-sm {% if max_vulnerability_severity == 'critical' %}text-danger{% elif max_vulnerability_severity == 'high' or max_vulnerability_severity == 'medium' %}text-warning{% else %}text-info{% endif %}">
+        <div class="fs-4 fw-medium lh-sm {% if max_vulnerability_severity == 'critical' %}text-danger{% elif max_vulnerability_severity == 'high' %}text-warning-orange{% elif max_vulnerability_severity == 'medium' %}text-warning{% else %}text-info{% endif %}">
           {{ vulnerability_count }}
         </div>
         <div class="text-body-tertiary fs-xs mt-1">