diff --git a/scancodeio/static/tree-views/expand-collapse.svg b/scancodeio/static/tree-views/expand-collapse.svg new file mode 100644 index 000000000..f34809c99 --- /dev/null +++ b/scancodeio/static/tree-views/expand-collapse.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/scancodeio/static/tree-views/tree.css b/scancodeio/static/tree-views/tree.css new file mode 100644 index 000000000..b14023615 --- /dev/null +++ b/scancodeio/static/tree-views/tree.css @@ -0,0 +1,75 @@ +.tree{ + --spacing : 1.5rem; + --radius : 10px; +} + +.tree li{ + display : block; + position : relative; + padding-left : calc(2 * var(--spacing) - var(--radius) - 2px); +} + +.tree ul{ + margin-left : calc(var(--radius) - var(--spacing)); + padding-left : 0; +} + +.tree ul li{ + border-left : 2px solid #ddd; +} + +.tree ul li:last-child{ + border-color : transparent; +} + +.tree ul li::before{ + content : ''; + display : block; + position : absolute; + top : calc(var(--spacing) / -2); + left : -2px; + width : calc(var(--spacing) + 2px); + height : calc(var(--spacing) + 1px); + border : solid #ddd; + border-width : 0 0 2px 2px; +} + +.tree summary{ + display : block; + cursor : pointer; +} + +.tree summary::marker, +.tree summary::-webkit-details-marker{ + display : none; +} + +.tree summary:focus{ + outline : none; +} + +.tree summary:focus-visible{ + outline : 1px dotted #000; +} + +.tree li::after, +.tree summary::before{ + content : ''; + display : block; + position : absolute; + top : calc(var(--spacing) / 2 - var(--radius)); + left : calc(var(--spacing) - var(--radius) - 1px); + width : calc(2 * var(--radius)); + height : calc(2 * var(--radius)); + border-radius : 50%; + background : #ddd; +} + +.tree summary::before{ + z-index : 1; + background : #696 url('expand-collapse.svg') 0 0; +} + +.tree details[open] > summary::before{ + background-position : calc(-2 * var(--radius)) 0; +} diff --git a/scancodeio/static/tree-views/tree.css.ABOUT b/scancodeio/static/tree-views/tree.css.ABOUT new file mode 100644 index 000000000..13316e526 --- /dev/null +++ b/scancodeio/static/tree-views/tree.css.ABOUT @@ -0,0 +1,10 @@ +about_resource: tree.css +name: css-tree-views +homepage_url: https://iamkate.com/code/tree-views/ +description: A tree view (collapsible list) can be created using only html and css, without + the need for JavaScript. Accessibility software will see the tree view as lists nested inside + disclosure widgets, and the standard keyboard interaction is supported automatically. +license_expression: cc0-1.0 +licenses: + - key: cc0-1.0 + name: cc0-1.0 diff --git a/scancodeio/static/tree-views/tree.css.NOTICE b/scancodeio/static/tree-views/tree.css.NOTICE new file mode 100644 index 000000000..319755b97 --- /dev/null +++ b/scancodeio/static/tree-views/tree.css.NOTICE @@ -0,0 +1,29 @@ +Free content on iamkate.com +The web was still young when I first went online in 1998. It felt like a utopian dream of free culture and free knowledge. Anyone could contribute, and within weeks I had learnt html and created my first site, hosted in the 10mb of webspace my isp included as standard. + +I’ve watched as the dream has become a nightmare of surveillance and monetisation. Companies such as Google and Facebook offer their services for free to the public because their real products are their advertising networks powered by the personal data of their visitors. + +The only concern of these companies and their shareholders is to maximise their income from advertising, regardless of the costs to society. They use dubious schemes to avoid paying tax. They encourage addiction and risk the mental health of their visitors. They threaten democratic institutions. + +I have little influence over the wider web, but I can control my small part of it, creating a haven that remains true to the original dream. This page describes my approach to copyright, my promise to protect the privacy of my visitors, and my commitment to transparency. + +Copyright +Copyright limits creativity and holds back progress by restricting our rights to build upon the works of others. Copyleft licences attempt to use copyright against itself, but “the master’s tools will never dismantle the master’s house”, as Audre Lorde remarked in a different context. + +All content on my site is released under the terms of the Creative Commons CC0 1.0 Universal Legal Code. This means I have waived all copyright and related rights to the extent possible under law, with the intention of dedicating the content to the public domain. You can use and adapt it without attribution. + +Privacy +Every site is hosted on a server, which is usually operated by a third party due to the expertise needed to manage servers securely. Most sites are accessed indirectly through the servers of a content delivery network, which protects the original server from attacks that could disable the site. + +My site is hosted on Cloudflare Pages. Cloudflare is both the host and the content delivery network, avoiding the need to trust two separate third parties. Cloudflare have a strong commitment to privacy and data protection, and frequently write about developing systems to protect visitor privacy. + +Almost every site today includes code that tracks visitors for statistical and advertising purposes. Often the site owner includes code with the deliberate aim of tracking their visitors, but sometimes they just want to include a feature provided by a third party, and that provider includes their own tracking code. + +My site doesn’t include any tracking code, and doesn’t load any code from third parties. It doesn’t have a cookie banner because it doesn’t use cookies. Instead of an invasive analytics system, Cloudflare Web Analytics gives me the most important statistics without tracking individual visitors. + +Transparency +You probably don’t know me, and shouldn’t have to trust me. Instead, you should be able to check security and privacy claims for yourself. Unfortunately most sites today use a process called code minification, which makes them faster but also makes it harder for other people to understand their code. + +The Mozilla Observatory report for my site confirms the presence of various security and privacy features, resulting in a perfect A+ rating. One of these features, the content security policy, prevents browsers from loading code and other resources from third parties. + +My site doesn’t need to use code minification in order to load quickly due to its simple design, efficient implementation, and absence of resources loaded from third parties. As a result, other software developers can easily understand how the layout, styling, and interactive features are created. diff --git a/scanpipe/templates/scanpipe/project_dependency_tree.html b/scanpipe/templates/scanpipe/project_dependency_tree.html index ff368c05e..808dd1c78 100644 --- a/scanpipe/templates/scanpipe/project_dependency_tree.html +++ b/scanpipe/templates/scanpipe/project_dependency_tree.html @@ -1,7 +1,22 @@ {% extends "scanpipe/base.html" %} +{% load static %} {% block title %}ScanCode.io: {{ project.name }} - Dependency tree{% endblock %} +{% block extrahead %} + + +{% endblock %} + {% block content %}
{% include 'scanpipe/includes/navbar_header.html' %} @@ -13,64 +28,63 @@
- {% if recursion_error %} -
-
- The dependency tree cannot be rendered as it contains circular references. - {{ message|linebreaksbr }} -
-
- {% endif %} -
+
+ {% if recursion_error %} +
+
+ The dependency tree cannot be rendered as it contains circular references. + {{ message|linebreaksbr }} +
+
+ {% endif %} + +
+ + +
+ + +
{% endblock %} {% block scripts %} - - - {{ dependency_tree|json_script:"dependency_tree" }} - {{ row_count|json_script:"row_count" }} - {{ max_depth|json_script:"max_depth" }} - + collapseAllButton.addEventListener('click', collapseAllDetails); + expendAllButton.addEventListener('click', expendAllDetails); + {% endblock %} \ No newline at end of file diff --git a/scanpipe/templates/scanpipe/tree/children.html b/scanpipe/templates/scanpipe/tree/children.html new file mode 100644 index 000000000..e6aa6553e --- /dev/null +++ b/scanpipe/templates/scanpipe/tree/children.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/scanpipe/templates/scanpipe/tree/node.html b/scanpipe/templates/scanpipe/tree/node.html new file mode 100644 index 000000000..e42f671b7 --- /dev/null +++ b/scanpipe/templates/scanpipe/tree/node.html @@ -0,0 +1,23 @@ +{% if node.name %} + {{ node.name }} +{% else %} + Missing data +{% endif %} + + + {% if node.url %} + + + + {% endif %} + {% if node.compliance_alert == "warning" or node.compliance_alert == "error" %} + + + + {% endif %} + {% if node.is_vulnerable %} + + + + {% endif %} + \ No newline at end of file diff --git a/scanpipe/views.py b/scanpipe/views.py index 8c18ffe5b..e4f4fff58 100644 --- a/scanpipe/views.py +++ b/scanpipe/views.py @@ -2316,7 +2316,12 @@ def get_dependency_tree(self, project): return project_tree def get_node(self, package): - node = {"name": str(package)} + node = { + "name": str(package), + "url": package.get_absolute_url(), + "compliance_alert": package.compliance_alert, + "is_vulnerable": package.is_vulnerable, + } # Resolved dependencies children = [ self.get_node(child_package) @@ -2325,7 +2330,12 @@ def get_node(self, package): unresolved_dependencies = package.declared_dependencies.unresolved() for dependency in unresolved_dependencies: - children.append({"name": dependency.package_url}) + children.append( + { + "name": dependency.package_url, + "is_vulnerable": dependency.is_vulnerable, + } + ) if children: node["children"] = children