Add a "Vulnerabilities" tab in package details view #600

Signed-off-by: Thomas Druez <tdruez@nexb.com>

scanpipe/templates/scanpipe/base.html

@@ -39,6 +39,7 @@
       #inputs-panel .panel-block.dropdown:hover {background-color: #f5f5f5;}
       #inputs-panel .dropdown-menu {width: 85%;}
       a.panel-block {word-break: break-all;}
+      a[target=_blank] .fa-up-right-from-square {vertical-align: text-top; font-size: 0.65rem;}
       .is-wider .dropdown-menu {min-width: 18rem;}
       .is-tooltip .dropdown-content {background-color: #363636;}
       .is-tooltip .dropdown-item {font-weight: normal; color: #fff;}

scanpipe/templates/scanpipe/includes/vulnerabilities_table.html

@@ -0,0 +1,50 @@
+<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
+  <thead>
+    <tr>
+      <th style="width: 210px;">Vulnerability</th>
+      <th>Summary</th>
+      <th style="width: 225px;">Aliases</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for vulnerability in vulnerabilities %}
+      <tr>
+        <td>
+          <a href="{{ vulnerablecode_url }}vulnerabilities/{{ vulnerability.vulnerability_id }}" target="_blank">
+            {{ vulnerability.vulnerability_id }}
+            <i class="fa-solid fa-up-right-from-square is-small"></i>
+          </a>
+        </td>
+        <td>
+          {{ vulnerability.summary }}
+        </td>
+        <td>
+          {% for alias in vulnerability.aliases %}
+            {% if alias|slice:":3" == "CVE" %}
+              <a href="https://nvd.nist.gov/vuln/detail/{{ alias }}" target="_blank">{{ alias }}
+                <i class="fa-solid fa-up-right-from-square is-small"></i>
+              </a>
+            {% elif alias|slice:":4" == "GHSA" %}
+              <a href="https://github.com/advisories/{{ alias }}" target="_blank">{{ alias }}
+                <i class="fa-solid fa-up-right-from-square is-small"></i>
+              </a>
+            {% elif alias|slice:":3" == "NPM" %}
+              <a href="https://github.com/nodejs/security-wg/blob/main/vuln/npm/{{ alias|slice:"4:" }}.json" target="_blank">{{ alias }}
+                <i class="fa-solid fa-up-right-from-square is-small"></i>
+              </a>
+            {% else %}
+              {{ alias }}
+            {% endif %}
+            <br>
+          {% endfor %}
+        </td>
+      </tr>
+    {% empty %}
+      <tr>
+        <td colspan="42">
+          {{ empty_message }}
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

scanpipe/templates/scanpipe/package_list.html

@@ -23,8 +23,8 @@
           <tr class="break-word">
             <td style="min-width: 500px;" title="{{ package.package_uid }}">
               <a href="{{ package.get_absolute_url }}">{{ package.package_url }}</a>
-              {% if package.extra_data.discovered_vulnerabilities %}
-                <a href="{{ package.get_absolute_url }}#extra_data">
+              {% if package.is_vulnerable %}
+                <a href="{{ package.get_absolute_url }}#vulnerabilities">
                   <i class="fa-solid fa-bug fa-sm has-text-danger" title="Vulnerabilities"></i>
                 </a>
               {% endif %}

scanpipe/templates/scanpipe/tabset/tab_vulnerabilities.html

@@ -0,0 +1,12 @@
+<div class="content">
+  <p class="panel-heading py-2 px-2 is-size-6 mb-0">
+    Affected by vulnerabilities
+    <span class="tag is-danger is-rounded">{{ tab_data.fields.affected_by_vulnerabilities.value|length }}</span>
+  </p>
+  {% include 'scanpipe/includes/vulnerabilities_table.html' with vulnerabilities=tab_data.fields.affected_by_vulnerabilities.value empty_message="This package is not known to be affected by vulnerabilities." %}
+  <p class="panel-heading py-2 px-2 is-size-6 mb-0 mt-5">
+    Fixing vulnerabilities
+    <span class="tag is-success is-rounded">{{ tab_data.fields.fixing_vulnerabilities.value|length }}</span>
+  </p>
+  {% include 'scanpipe/includes/vulnerabilities_table.html' with vulnerabilities=tab_data.fields.fixing_vulnerabilities.value empty_message="This package is not known to fix vulnerabilities." %}
+</div>

scanpipe/views.py

@@ -262,7 +262,8 @@ def get_field_value(self, field_name, render_func=None):
             return render_func(field_value)
 
         if isinstance(field_value, list):
-            field_value = "\n".join(field_value)
+            with suppress(TypeError):
+                field_value = "\n".join(field_value)
 
         return field_value
 
@@ -1279,7 +1280,7 @@ class CodebaseResourceDetailsView(
             "fields": [
                 {"field_name": "extra_data", "render_func": render_as_yaml},
             ],
-            "verbose_name": "Extra data",
+            "verbose_name": "Extra",
             "icon_class": "fa-solid fa-database",
         },
     }
@@ -1434,6 +1435,11 @@ class DiscoveredPackageDetailsView(
             "icon_class": "fa-solid fa-layer-group",
             "template": "scanpipe/tabset/tab_dependencies.html",
         },
+        "vulnerabilities": {
+            "fields": ["affected_by_vulnerabilities", "fixing_vulnerabilities"],
+            "icon_class": "fa-solid fa-bug",
+            "template": "scanpipe/tabset/tab_vulnerabilities.html",
+        },
         "others": {
             "fields": [
                 {"field_name": "size", "render_func": filesizeformat},
@@ -1455,11 +1461,16 @@ class DiscoveredPackageDetailsView(
             "fields": [
                 {"field_name": "extra_data", "render_func": render_as_yaml},
             ],
-            "verbose_name": "Extra data",
+            "verbose_name": "Extra",
             "icon_class": "fa-solid fa-database",
         },
     }
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["vulnerablecode_url"] = settings.VULNERABLECODE_URL
+        return context
+
 
 class DiscoveredDependencyDetailsView(
     ConditionalLoginRequired,