rework the vulnerability data popover

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

Author: tdruez

component_catalog/templates/component_catalog/includes/vulnerability_info_popover.html

@@ -0,0 +1,34 @@
+<div>
+  {% if vulnerability.aliases %}
+    <div class='mb-2'>
+      <strong>Aliases</strong>
+      <div>
+        {% for alias in vulnerability.aliases %}
+          <div>
+            {% if alias|slice:':3' == 'CVE' %}
+              <a href='https://nvd.nist.gov/vuln/detail/{{ alias }}' target='_blank'>{{ alias }}</a>
+            {% elif alias|slice:':4' == 'GHSA' %}
+              <a href='https://github.com/advisories/{{ alias }}' target='_blank'>{{ alias }}</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 }}</a>
+            {% else %}
+              {{ alias }}
+            {% endif %}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+  {% if vulnerability.summary %}
+    <div class='mb-2'>
+      <strong>Summary</strong>
+      <div>{{ vulnerability.summary|linebreaksbr }}</div>
+    </div>
+  {% endif %}
+  {% if vulnerability.exploitability %}
+    <div class='mb-1'><strong>Exploitability:</strong> {{ vulnerability.get_exploitability_display }}</div>
+  {% endif %}
+  {% if vulnerability.risk_score %}
+    <div><strong>Risk:</strong> {{ vulnerability.risk_score }}</div>
+  {% endif %}
+</div>

dejacode/static/css/dejacode_bootstrap.css

@@ -1075,3 +1075,7 @@ select.bootstrap-select-filter {
     position: absolute;
     z-index: 1;
 }
+.popover.wide-popover {
+  --bs-popover-max-width: 420px;
+  max-width: 420px;
+}

product_portfolio/templates/product_portfolio/tabs/tab_packages_vulnerabilities.html

@@ -48,8 +48,8 @@
                 {% else %}
                   {{ vulnerability.advisory_id }}
                 {% endif %}
-                {% if vulnerability.summary %}
-                  <span class="float-end" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-html="true" data-bs-content="{{ vulnerability.summary|linebreaksbr }}">
+                {% if vulnerability.summary or vulnerability.aliases or vulnerability.exploitability or vulnerability.risk_score %}
+                  <span class="float-end" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-html="true" data-bs-custom-class="wide-popover" data-bs-content="{% include 'component_catalog/includes/vulnerability_info_popover.html' with vulnerability=vulnerability only %}">
                     <i class="fa-solid fa-circle-info text-muted"></i>
                   </span>
                 {% endif %}
@@ -68,11 +68,6 @@
                   </span>
                 {% endif %}
               </div>
-              {% if vulnerability.aliases %}
-                <div class="mt-2">
-                  {% include 'component_catalog/includes/vulnerability_aliases.html' with aliases=vulnerability.aliases only %}
-                </div>
-              {% endif %}
             </td>
             {% if has_triage_rulesets %}
             <td>