Add features to the dependency tree view #1145

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

Author: tdruez

scanpipe/templates/scanpipe/includes/project_list_table.html

@@ -28,6 +28,11 @@
           <a href="{% url 'project_dependencies' project.slug %}">
             {{ project.discovereddependencies_count|intcomma }}
           </a>
+          <a href="{% url 'project_dependency_tree' project.slug %}">
+            <span class="icon">
+              <i class="fa-solid fa-sitemap"></i>
+            </span>
+          </a>
         {% else %}
           <span>0</span>
         {% endif %}

scanpipe/templates/scanpipe/project_dependency_tree.html

@@ -10,6 +10,9 @@
     line-height: 1.8rem;
     --spacing : 2rem;
   }
+  .tree summary {
+    display: inline-block;
+  }
   .tree summary::before{
     background-color: rgb(72, 199, 142);
     background-image: url('{% static "tree-views/expand-collapse.svg" %}');
@@ -51,9 +54,21 @@
             <i class="fas fa-plus"></i>
           </span>
         </button>
+        <button id="showVulnerableOnlyButton" class="button is-outlined is-small">
+          <span>Show Vulnerable only</span>
+          <span class="icon is-small">
+            <i class="fa-solid fa-bug"></i>
+          </span>
+        </button>
+        <button id="showComplianceAlertOnlyButton" class="button is-outlined is-small">
+          <span>Show Compliance Alert only</span>
+          <span class="icon is-small ">
+            <i class="fa-solid fa-scale-balanced"></i>
+          </span>
+        </button>
       </div>
 
-      <ul class="tree">
+      <ul id="tree" class="tree">
         <li>
           <details open>
             <summary class="has-text-weight-semibold">
@@ -69,22 +84,74 @@
 
 {% block scripts %}
 <script>
+document.addEventListener('DOMContentLoaded', () => {
+  const treeContainer = document.getElementById('tree');
   const collapseAllButton = document.getElementById('collapseAll');
   const expendAllButton = document.getElementById('expendAll');
 
   function collapseAllDetails() {
     document.querySelectorAll('details').forEach(details => {
       details.removeAttribute('open');
     });
+    showAllListItems();
   }
 
   function expendAllDetails() {
     document.querySelectorAll('details').forEach(details => {
       details.setAttribute('open', ''); // Adding 'open' attribute to open the details
     });
+    showAllListItems();
   }
 
   collapseAllButton.addEventListener('click', collapseAllDetails);
   expendAllButton.addEventListener('click', expendAllDetails);
+
+  // Following function are use to limit the display to specific elements.
+
+  function expandAncestors(detailsElement) {
+    let parent = detailsElement.parentElement.closest('details');
+    while (parent) {
+      parent.setAttribute('open', '');
+      parent.parentElement.style.display = '';
+      parent = parent.parentElement.closest('details');
+    }
+  }
+
+  function showAllListItems() {
+    const listItems = treeContainer.querySelectorAll('li');
+    listItems.forEach(item => {
+        item.style.display = '';
+    });
+  }
+
+  function hideAllListItems() {
+    const listItems = treeContainer.querySelectorAll('li');
+    listItems.forEach(item => {
+        item.style.display = 'none';
+    });
+  }
+
+  function handleItems(attribute, value) {
+    collapseAllDetails();
+    hideAllListItems();
+
+    const items = document.querySelectorAll(`li[${attribute}="${value}"]`);
+    items.forEach(item => {
+        item.style.display = 'block';
+        expandAncestors(item);
+    });
+  }
+
+  function handleVulnerableItems() {
+    handleItems('data-is-vulnerable', 'true');
+  }
+
+  function handleComplianceAlertItems() {
+    handleItems('data-compliance-alert', 'true');
+  }
+
+  showVulnerableOnlyButton.addEventListener('click', handleVulnerableItems);
+  showComplianceAlertOnlyButton.addEventListener('click', handleComplianceAlertItems);
+});
 </script>
 {% endblock %}

scanpipe/templates/scanpipe/tree/children.html

@@ -1,6 +1,9 @@
 <ul>
   {% for node in children %}
-    <li>
+    <li
+        {% if node.is_vulnerable %} data-is-vulnerable="true"{% endif %}
+        {% if node.compliance_alert == "warning" or node.compliance_alert == "error" %} data-compliance-alert="true"{% endif %}
+    >
       {% if node.children %}
         <details class="my-1" open>
           <summary>

scanpipe/views.py

@@ -1927,6 +1927,7 @@ class DiscoveredPackageDetailsView(
                     "field_name": "other_license_expression_spdx",
                     "label": "Other license expression (SPDX)",
                 },
+                "compliance_alert",
                 "extracted_license_statement",
                 "copyright",
                 "holder",