Skip to content

Commit b922c8f

Browse files
pombredannepombredanne
authored
Merge pull request #894 from nexB/798-refine-ui-improved
Improve UI
2 parents bf17aa4 + 87ebbf4 commit b922c8f

16 files changed

+852
-1274
lines changed

‎vulnerabilities/forms.py‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,37 +10,29 @@
1010
from django import forms
1111

1212
from vulnerabilities.models import Package
13-
from vulnerabilities.models import PackageRelatedVulnerability
14-
from vulnerabilities.models import Vulnerability
1513

1614

17-
def get_package_types():
15+
def get_known_package_types():
16+
"""
17+
Return a list of known package types.
18+
"""
1819
pkg_types = [(i.type, i.type) for i in Package.objects.distinct("type").all()]
1920
pkg_types.append((None, "Any type"))
2021
return pkg_types
2122

2223

23-
def get_package_namespaces():
24-
pkg_namespaces = [
25-
(i.namespace, i.namespace)
26-
for i in Package.objects.distinct("namespace").all()
27-
if i.namespace
28-
]
29-
pkg_namespaces.append((None, "package namespace"))
30-
return pkg_namespaces
31-
32-
3324
class PackageForm(forms.Form):
3425

35-
type = forms.ChoiceField(choices=get_package_types)
36-
name = forms.CharField(
26+
package_name = forms.CharField(
3727
required=False, widget=forms.TextInput(attrs={"placeholder": "Package name or purl"})
3828
)
3929

4030

41-
class CVEForm(forms.Form):
31+
class VulnerabilityForm(forms.Form):
4232

43-
vuln_id = forms.CharField(
33+
vulnerability_id = forms.CharField(
4434
required=False,
45-
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+
),
4638
)

‎vulnerabilities/models.py‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
import hashlib
1111
import json
1212
import logging
13-
import uuid
1413

1514
from django.conf import settings
1615
from django.core.exceptions import ValidationError
@@ -59,6 +58,11 @@ class Vulnerability(models.Model):
5958
through="PackageRelatedVulnerability",
6059
)
6160

61+
@property
62+
def severities(self):
63+
for reference in self.references.all():
64+
yield from VulnerabilitySeverity.objects.filter(reference=reference.id)
65+
6266
def save(self, *args, **kwargs):
6367
super().save(*args, **kwargs)
6468
if not self.vulnerability_id:
@@ -113,10 +117,6 @@ class VulnerabilityReference(models.Model):
113117
blank=True,
114118
)
115119

116-
@property
117-
def severities(self):
118-
return VulnerabilitySeverity.objects.filter(reference=self.id)
119-
120120
class Meta:
121121
unique_together = (
122122
"url",

‎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="vuln_form" onsubmit="return validateVulnForm()">
108-
<div class="field has-addons mt-3">
109-
<div class="control width-100-pct">
110-
{% render_field vuln_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["vuln_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>

0 commit comments

Comments
 (0)