Skip to content

Commit 25fd8b7

Browse files
pombredannepombredanne
committed
Streamline UI views, forms and templates #798
- Use buitin ListView with standard pagination - More counts and empty logic displays to templates - Use includes for search boxes and common JS scripts - Remove search by type. Instead allow using a partial purl with a type - Format templates to avoid very long lines - Expand package search to work with all purl attributes including non parsing purls. Use case insensitive contains lookup otherwise. - Expand vulnerability search to use case insensitive contains lookup over vcid, aliases, reference ids and summary - Prefer "VulnerableCode" over "VCIO" Reference: #798 Signed-off-by: Philippe Ombredanne <[email protected]>
1 parent 24724ff commit 25fd8b7

File tree

12 files changed

+631
-1011
lines changed

12 files changed

+631
-1011
lines changed

‎vulnerabilities/forms.py‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@ def get_known_package_types():
2323

2424
class PackageForm(forms.Form):
2525

26-
type = forms.ChoiceField(choices=get_known_package_types)
27-
name = forms.CharField(
26+
package_name = forms.CharField(
2827
required=False, widget=forms.TextInput(attrs={"placeholder": "Package name or purl"})
2928
)
3029

3130

3231
class VulnerabilityForm(forms.Form):
3332

34-
vuln_id = forms.CharField(
33+
vulnerability_id = forms.CharField(
3534
required=False,
36-
widget=forms.TextInput(attrs={"placeholder": "Vulnerability ID or CVE/GHSA"}),
35+
widget=forms.TextInput(
36+
attrs={"placeholder": "Vulnerability id or alias such as CVE or GHSA"}
37+
),
3738
)

‎vulnerabilities/templates/index.html‎

Lines changed: 7 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -2,160 +2,17 @@
22
{% load widget_tweaks %}
33

44
{% block title %}
5-
VCIO Home
5+
VulnerableCode Home
66
{% endblock %}
77

88
{% block content %}
9-
10-
{% include 'navbar.html' %}
11-
12-
<section class="section pt-0">
13-
<div class="columns">
14-
<div class="column is-size-4 has-text-weight-bold">
15-
Welcome to VulnerableCode<span class="nexb-orange">.</span>io.
16-
</div>
17-
</div>
18-
<article class='panel is-info'>
19-
<div class='panel-heading py-2 is-size-6'>
20-
Search for vulnerable packages
21-
<div class="dropdown is-hoverable has-text-weight-normal">
22-
<div class="dropdown-trigger">
23-
<i class="fa fa-question-circle ml-2"></i>
24-
</div>
25-
<div class="dropdown-menu dropdown-instructions-width" id="dropdown-menu4" role="menu">
26-
<div class="dropdown-content dropdown-instructions-box-shadow">
27-
<div class="dropdown-item">
28-
<div>
29-
<div>Search for currently known vulnerabilities for a <a href="https://github.com/package-url/purl-spec" target="_blank">Package-URL</a> (aka <span class="inline-code">purl</span>) or a package <span class="inline-code">name</span>.</div>
30-
<ul>
31-
<li>
32-
Search by package <span class="inline-code">name</span> -- type the <span class="inline-code">name</span> in the search box and, if relevant to your search, select the package <span class="inline-code">type</span> from the dropdown.
33-
</li>
34-
<li>
35-
Search by <span class="inline-code">purl</span> -- type the <span class="inline-code">purl</span> in the search box. <span class="is-italic">(The <span class="inline-code">type</span> dropdown does not apply to a <span class="inline-code">purl</span> search.)</span>
36-
</li>
37-
</ul>
38-
</div>
39-
</div>
40-
</div>
41-
</div>
42-
</div>
43-
</div>
44-
<div class="panel-block">
45-
<div class="pb-3 width-100-pct">
46-
<form action="{% url 'package_search' %}" method="get" name="pkg_form" onsubmit="return validatePkgForm()">
47-
<div class="field has-addons mt-3">
48-
<div class="control">
49-
<div class="select">
50-
{{ package_form.type }}
51-
</div>
52-
</div>
53-
<div class="control width-100-pct">
54-
{{ package_form.name|add_class:"input" }}
55-
</div>
56-
<div class="control">
57-
<button class="button is-link" type="submit" id="submit_pkg" name="template" value="index">
58-
Search
59-
</button>
60-
</div>
61-
</div>
62-
</form>
63-
<div>
64-
{% if package_search %}
65-
<div class="notification search-alert">
66-
<button class=" delete"></button>
67-
{{ package_search }}
68-
</div>
69-
{% endif %}
70-
</div>
71-
</div>
72-
</div>
73-
</article>
74-
75-
<div class="pt-5"></div>
76-
77-
<article class='panel is-info'>
78-
<div class='panel-heading py-2 is-size-6'>
79-
Search for vulnerabilities
80-
<div class="dropdown is-hoverable has-text-weight-normal">
81-
<div class="dropdown-trigger">
82-
<i class="fa fa-question-circle ml-2"></i>
83-
</div>
84-
<div class="dropdown-menu dropdown-instructions-width" id="dropdown-menu4" role="menu">
85-
<div class="dropdown-content dropdown-instructions-box-shadow">
86-
<div class="dropdown-item">
87-
<div>Search for comprehensive information for a <span class="inline-code">VULCOID</span> (VulnerableCode Database ID). <span class="is-italic">(Only the first of these methods requires that the input be all uppercase.)</span>
88-
<ul>
89-
<li>
90-
Search for a specific <span class="inline-code">VULCOID</span> (e.g., "VULCOID-1").
91-
</li>
92-
<li>
93-
Search for all <span class="inline-code">VULCOID</span>s that are associated with a specific <span class="inline-code">CVE</span> (e.g., "CVE-2009-3898") or <span class="inline-code">GHSA</span> (e.g., "GHSA-2qrg-x229-3v8q").
94-
</li>
95-
<li>
96-
Search for "CVE" or "GHSA" -- this will return all <span class="inline-code">VULCOID</span>s that are associated with one or more <span class="inline-code">CVE</span>s or <span class="inline-code">GHSA</span>s, respectively.
97-
</li>
98-
</ul>
99-
</div>
100-
</div>
101-
</div>
102-
</div>
103-
</div>
104-
</div>
105-
<div class="panel-block">
106-
<div class="pb-3 width-100-pct">
107-
<form action="{% url 'vulnerability_search' %}" method="get" name="vulnerability_form" onsubmit="return validateVulnForm()">
108-
<div class="field has-addons mt-3">
109-
<div class="control width-100-pct">
110-
{% render_field vulnerability_form.vuln_id class="input" %}
111-
</div>
112-
<div class="control">
113-
<button class="button is-link" type="submit" id="submit_vuln">
114-
Search
115-
</button>
116-
</div>
117-
</div>
118-
</form>
119-
<div>
120-
{% if vuln_search %}
121-
<div class="notification search-alert">
122-
<button class=" delete"></button>
123-
{{ vuln_search }}
124-
</div>
125-
{% endif %}
126-
</div>
127-
</div>
128-
</div>
129-
</article>
130-
</section>
131-
9+
{% include "navbar.html" %}
10+
<section class="section pt-0">
11+
{% include "package_search_box.html" %}
12+
{% include "vulnerability_search_box.html" %}
13+
</section>
13214
{% endblock %}
13315

13416
{% block scripts %}
135-
<script>
136-
document.addEventListener('DOMContentLoaded', () => {
137-
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
138-
const $notification = $delete.parentNode;
139-
140-
$delete.addEventListener('click', () => {
141-
$notification.parentNode.removeChild($notification);
142-
});
143-
});
144-
});
145-
146-
function validatePkgForm() {
147-
var x = document.forms["pkg_form"]["name"].value;
148-
if (x.trim().length == "") {
149-
return false;
150-
}
151-
}
152-
153-
function validateVulnForm() {
154-
var x = document.forms["vulnerability_form"]["vuln_id"].value;
155-
if (x.trim().length == "") {
156-
return false;
157-
}
158-
}
159-
160-
</script>
17+
{% include "validate_form_scripts.html" %}
16118
{% endblock %}

‎vulnerabilities/templates/navbar.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,21 @@
2626
<div class="dropdown-menu navbar-hover-div" role="menu">
2727
<div class="dropdown-content">
2828
<div class="dropdown-item about-hover-div">
29-
A free and open vulnerabilities database and the packages they impact. And the tools to aggregate and correlate these vulnerabilities.
29+
A free and open vulnerabilities database and the packages they impact.
30+
And the tools to aggregate and correlate these vulnerabilities.
3031
<ul>
3132
<li>
32-
Sponsored by NLnet <a href="https://nlnet.nl/project/vulnerabilitydatabase/">https://nlnet.nl/project/vulnerabilitydatabase/</a> for <a href="https://www.aboutcode.org/">https://www.aboutcode.org/</a>
33+
Sponsored by NLnet <a href="https://nlnet.nl/project/vulnerabilitydatabase/">
34+
https://nlnet.nl/project/vulnerabilitydatabase/</a> for
35+
<a href="https://www.aboutcode.org/">https://www.aboutcode.org/</a>
3336
</li>
3437
<li>
35-
Chat at <a href="https://gitter.im/aboutcode-org/vulnerablecode">https://gitter.im/aboutcode-org/vulnerablecode</a>
38+
Chat at <a href="https://gitter.im/aboutcode-org/vulnerablecode">
39+
https://gitter.im/aboutcode-org/vulnerablecode</a>
3640
</li>
3741
<li>
38-
Docs at <a href=https://vulnerablecode.readthedocs.org/>https://vulnerablecode.readthedocs.org/</a>
42+
Docs at <a href=https://vulnerablecode.readthedocs.org/>
43+
https://vulnerablecode.readthedocs.org/</a>
3944
</li>
4045
</ul>
4146
</div>

‎vulnerabilities/templates/package_details.html‎

Lines changed: 9 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,17 @@
1-
{% extends 'base.html' %}
1+
{% extends "base.html" %}
22
{% load humanize %}
33
{% load widget_tweaks %}
44

55
{% block title %}
6-
VCIO Package Details
6+
VulnerableCode Package Details
77
{% endblock %}
88

99
{% block content %}
1010

11-
{% include 'navbar.html' %}
11+
{% include "navbar.html" %}
1212

1313
<section class="section pt-0">
14-
<article class='panel is-info'>
15-
<div class='panel-heading py-2 is-size-6'>
16-
Search for vulnerable packages
17-
<div class="dropdown is-hoverable has-text-weight-normal">
18-
<div class="dropdown-trigger">
19-
<i class="fa fa-question-circle ml-2"></i>
20-
</div>
21-
<div class="dropdown-menu dropdown-instructions-width" id="dropdown-menu4" role="menu">
22-
<div class="dropdown-content dropdown-instructions-box-shadow">
23-
<div class="dropdown-item">
24-
<div>
25-
<div>Search for currently known vulnerabilities for a <a href="https://github.com/package-url/purl-spec" target="_blank">Package-URL</a> (aka <span class="inline-code">purl</span>) or a package <span class="inline-code">name</span>.</div>
26-
<ul>
27-
<li>
28-
Search by package <span class="inline-code">name</span> -- type the <span class="inline-code">name</span> in the search box and, if relevant to your search, select the package <span class="inline-code">type</span> from the dropdown.
29-
</li>
30-
<li>
31-
Search by <span class="inline-code">purl</span> -- type the <span class="inline-code">purl</span> in the search box. <span class="is-italic">(The <span class="inline-code">type</span> dropdown does not apply to a <span class="inline-code">purl</span> search.)</span>
32-
</li>
33-
</ul>
34-
</div>
35-
</div>
36-
</div>
37-
</div>
38-
</div>
39-
</div>
40-
<div class="panel-block">
41-
<div class="pb-3 width-100-pct">
42-
<form action="{% url 'package_search' %}" method="get" name="pkg_form" onsubmit="return validatePkgForm()">
43-
<div class="field has-addons mt-3">
44-
<div class="control">
45-
<div class="select">
46-
{{ package_form.type }}
47-
</div>
48-
</div>
49-
<div class="control width-100-pct">
50-
{{ package_form.name|add_class:"input" }}
51-
</div>
52-
<div class="control">
53-
<button class="button is-link" type="submit" id="submit_pkg" name="template" value="package_details">
54-
Search
55-
</button>
56-
</div>
57-
</div>
58-
</form>
59-
<div>
60-
{% if package_search %}
61-
<div class="notification search-alert">
62-
<button class=" delete"></button>
63-
{{ package_search }}
64-
</div>
65-
{% endif %}
66-
</div>
67-
</div>
68-
</div>
69-
</article>
14+
{% include "package_search_box.html"%}
7015
</section>
7116

7217
{% if package %}
@@ -126,7 +71,7 @@
12671
{% for vuln in impacted_vuln %}
12772
<tr>
12873
<td>
129-
<a href="{% url 'vulnerability_view' vuln.pk %}?vuln_id={{ vuln.vulnerability_id }}" target="_self">{{ vuln.vulnerability_id }}</a>
74+
<a href="{% url 'vulnerability_view' vuln.pk %}?vulnerability_id={{ vuln.vulnerability_id }}" target="_self">{{ vuln.vulnerability_id }}</a>
13075
</td>
13176
<td>
13277
{{ vuln.summary }}
@@ -147,7 +92,7 @@
14792
{% else %}
14893
<tr>
14994
<td colspan="3">
150-
This package is not affected by any vulnerabilities.
95+
This package is not affected by known vulnerabilities.
15196
</td>
15297
</tr>
15398
{% endif %}
@@ -178,7 +123,7 @@
178123
{% for vuln in resolved_vuln %}
179124
<tr>
180125
<td>
181-
<a href="{% url 'vulnerability_view' vuln.pk %}?vuln_id={{ vuln.vulnerability_id }}" target="_self">{{ vuln.vulnerability_id }}</a>
126+
<a href="{% url 'vulnerability_view' vuln.pk %}?vulnerability_id={{ vuln.vulnerability_id }}" target="_self">{{ vuln.vulnerability_id }}</a>
182127
</td>
183128
<td>
184129
{{ vuln.summary }}
@@ -213,23 +158,5 @@
213158
{% endblock %}
214159

215160
{% block scripts %}
216-
<script>
217-
document.addEventListener('DOMContentLoaded', () => {
218-
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
219-
const $notification = $delete.parentNode;
220-
221-
$delete.addEventListener('click', () => {
222-
$notification.parentNode.removeChild($notification);
223-
});
224-
});
225-
});
226-
227-
function validatePkgForm() {
228-
var x = document.forms["pkg_form"]["name"].value;
229-
if (x.trim().length == "") {
230-
return false;
231-
}
232-
}
233-
</script>
234-
235-
{% endblock %}
161+
{% include "validate_form_scripts.html" %}
162+
{% endblock %}

0 commit comments

Comments
 (0)