Add UI for VulnerableCode #230

sbs2001 · 2020-07-21T10:17:50Z

This is based on the models of #219 .

Finally a UI for VulnerableCode !

Uses CSS framework Bulma . Vanilla JS. Fully featured CRUD.

Addresses #218

./

./vulnerabilities/search

/vulnerabilities/search?vuln_id=CVE-2019

/vulnerabilities/23

./packages/search

./packages/21

./packages/create*

vulnerabilities/create

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

The views are now based on PackageRelatedVulnerablity model. Apart from that out of need, the properties vulnerable_to and resolved_to are added to Vulnerability and Package models. Style changes include centering the search bars. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Use bulma's minified version. Remove inline css to a separate stylesheet custom.css . Delete Unused js. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

This is done because when running migrations, the function which made db queries was being run hence failing the CI. By passing the function itself instead, this issue is fixed Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne

Thanks!
that's gorgeous... for the third-party that are included such as bulma.min.css and similar, can you add the license files and ABOUT files too? See how it is done in the scancode-toolkit/thirdparty

sbs2001 · 2020-07-23T12:25:55Z

@pombredanne Thanks for the kind words.

About licenses the bulma.min.css already came with the header.
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma

Also this uses jquery and selectize which are fetched via CDN, is that ideal ? Or should we locally host these ?

pombredanne · 2020-07-23T12:33:47Z

Also this uses jquery and selectize which are fetched via CDN, is that ideal ? Or should we locally host these ?

Ideally we want to avoid any dependency on a CDN and be self-contained.

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne

Thanks for the de-CDN'ization!
Tell me if you want a quick session on how to document the third-party code (CSS and JS).

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

In the packagerelatedvulnerability_create.html a subtitle with a hyperlink is added to hint the user to create a vulnerability if the desired vulnerability is not found Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Upon updating, previously user would get a blank screen. This is fixed. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Add margins and paddings. Get rid of Remove button. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne · 2020-08-11T12:38:03Z

vulnerabilities/static/css/bulma.min.css.ABOUT

@@ -0,0 +1,14 @@
+about_resource: bulma.min.css


pombredanne · 2020-08-11T12:39:08Z

Looking good! can you also included the non-minified JS and CSS? Minified JS is like a binary of sorts.

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

sbs2001 · 2020-08-14T05:54:38Z

@pombredanne re

can you also included the non-minified JS and CSS? Minified JS is like a binary of sorts.

Done

pombredanne · 2020-08-15T19:36:25Z

vulnerabilities/forms.py

+
+def get_package_namespaces():
+    pkg_namespaces = [
+        (i.namespace, i.namespace)


I am puzzled by the repetition.

https://docs.djangoproject.com/en/3.1/ref/forms/fields/#django.forms.ChoiceField.choices

Example: For the tuple ("x","1") the user will be able to select "1" in the frontend which will be interpreted as "x" in the backend.

In this case I want the user to select namespace for what it is in the frontend as well as backend. This whole thing is done because I want to use ChoiceField instead of CharField which is provided by the ModelForm.

pombredanne · 2020-08-15T19:37:20Z

vulnerabilities/forms.py

+
+def get_package_types():
+    pkg_types = [(i.type, i.type) for i in Package.objects.distinct("type").all()]
+    pkg_types.append((None, "package type"))


What is "package type" about? I am also puzzled by the repetition (a bit of docstring would help I guess?

package type is just another choice , which roughly translates into the user not caring about the pkg type of results obtained

I am still not clear at all why you need that?

placeholder

Ah, you mean a placeholder in the UI dropdown?

pombredanne · 2020-08-15T19:41:31Z

vulnerabilities/static/css/font-awesome.css.ABOUT

+author: Dave Gandy
+notes: This is the minified version of Font Awesome.
+
+license: MIT


All our licenses are ScanCode keys and are lowercase (e.g. case does not matter and is always normalized to lower).
Also based on the .LICENSE below it looks like the license may be rather: mit AND ofl-1.1 AND cc-by-4.0 and we would also need the text of each of these too.

According to https://github.com/FortAwesome/Font-Awesome/tree/v4.7.0#license I'm pretty sure we won't need AND .

Using scancode keys now .

The purpose of selectize was to allow users to select vulnerability and relate it to some package. Selectize allowed users to get some autocomplete and filtering while they searched for the vulnerability. We were already planing to replace selectize js since it is not maintained. Other similar libraries are also not maintained as well(select2). Users don't need autocomplete for vulnerabilities since they would alreay know the CVE id,hence it doesnt add much value as far as UX is considered. A simple text input is used instead. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne · 2020-08-24T13:09:44Z

vulnerabilities/templates/packagerelatedvulnerability_create.html

+  </div>
+</div>
+{% endblock %}
+


Not sure you need all these empty lines, do you?

pombredanne · 2020-08-24T13:10:16Z

vulnerabilities/views.py

+
+from urllib.parse import urlencode
+
+from django.core.paginator import Paginator


Nit: sort your imports

pombredanne · 2020-08-24T13:11:43Z

vulnerablecode/urls.py

+from vulnerabilities.views import PackageRelatedVulnerablityDelete
+from vulnerabilities.views import PackageRelatedVulnerablityCreate
+from vulnerabilities.views import HomePage
+from vulnerabilities.views import VulnerabilityReferenceCreate


Niit: sort your imports

pombredanne

I have just a few not pickings for your review.

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne

All good. Merging!
Thank you ++

sbs2001 added 13 commits July 23, 2020 10:53

Add bulma CSS framework

6dbeabd

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Implement Views

0b4e8fb

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Add view for adding references for vulnerabilities

6df8c1f

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Organize templates

9c71ff1

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Organise views

14d1fc7

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

WIP

4e0f741

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Update requirements

e3d421b

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Get selectize working instead of long dropdowns

ef90285

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Manage static assets.

8e03a2e

Use bulma's minified version. Remove inline css to a separate stylesheet custom.css . Delete Unused js. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Remove unused templates

776af5c

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Format code to follow code style guidelines

7b8835a

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

Pass function instead function call in forms

38d90a0

This is done because when running migrations, the function which made db queries was being run hence failing the CI. By passing the function itself instead, this issue is fixed Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

sbs2001 force-pushed the curation_ui branch from f5b8d77 to 38d90a0 Compare July 23, 2020 05:24

pombredanne requested changes Jul 23, 2020

View reviewed changes

Don't use CDN, self host instead

b99675d

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

sbs2001 force-pushed the curation_ui branch from 053f4f6 to b99675d Compare July 26, 2020 15:00

pombredanne reviewed Jul 27, 2020

View reviewed changes

sbs2001 added 9 commits July 31, 2020 19:20

Change title of the templates

fda98d2

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

🔨 Squash views for impacted and resolved into one view

a18d452

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

👌 Use subtitle o hint creation of vulnerability

0a1d007

In the packagerelatedvulnerability_create.html a subtitle with a hyperlink is added to hint the user to create a vulnerability if the desired vulnerability is not found Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

🐛 Fix get_success_url method of PackageUpdate view

2a0b6d1

Upon updating, previously user would get a blank screen. This is fixed. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

🎨 Make aesthetic changes.

3983119

Add margins and paddings. Get rid of Remove button. Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

🐛 Avoid giving user the opportunity to create conflicting relations

38905e0

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

📄 Add metadata for lib_oval.py

d8afc73

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

📄 Add license metadata for bulma

4340264

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

📄 Add LICENSE and ABOUT files for third parties

c09bbdd

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne reviewed Aug 11, 2020

View reviewed changes

vulnerabilities/static/css/bulma.min.css.ABOUT Outdated

@@ -0,0 +1,14 @@

about_resource: bulma.min.css

Copy link

Collaborator

pombredanne Aug 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

sbs2001 changed the title ~~Add UI for VulnerableCode~~ [WIP]Add UI for VulnerableCode Aug 13, 2020

sbs2001 added 3 commits August 13, 2020 21:45

✨ Add pagination to vulnerability search

d6897b8

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

✨ Add pagination to package search

2443fc1

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

📝 Use normal static assests instead of minified versions

5d3ee7f

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne reviewed Aug 15, 2020

View reviewed changes

sbs2001 force-pushed the curation_ui branch from 4f38d1a to 82456d3 Compare August 17, 2020 05:53

sbs2001 force-pushed the curation_ui branch from 82456d3 to c735c35 Compare August 17, 2020 05:56

sbs2001 changed the title ~~[WIP]Add UI for VulnerableCode~~ Add UI for VulnerableCode Aug 21, 2020

pombredanne reviewed Aug 24, 2020

View reviewed changes

pombredanne approved these changes Aug 24, 2020

View reviewed changes

➕ Update requirements.txt and make code style changes

1caad95

Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>

pombredanne approved these changes Aug 26, 2020

View reviewed changes

pombredanne merged commit f5e7feb into aboutcode-org:develop Aug 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add UI for VulnerableCode #230

Add UI for VulnerableCode #230

sbs2001 commented Jul 21, 2020 •

edited

Loading

pombredanne left a comment

sbs2001 commented Jul 23, 2020

pombredanne commented Jul 23, 2020

pombredanne left a comment

pombredanne Aug 11, 2020

pombredanne commented Aug 11, 2020

sbs2001 commented Aug 14, 2020

pombredanne Aug 15, 2020

sbs2001 Aug 16, 2020

pombredanne Aug 15, 2020

sbs2001 Aug 17, 2020

pombredanne Aug 24, 2020

sbs2001 Aug 24, 2020

pombredanne Aug 26, 2020

pombredanne Aug 15, 2020

sbs2001 Aug 21, 2020

pombredanne Aug 24, 2020

pombredanne Aug 24, 2020

pombredanne Aug 24, 2020

pombredanne left a comment

pombredanne left a comment


		from urllib.parse import urlencode

		from django.core.paginator import Paginator

Add UI for VulnerableCode #230

Add UI for VulnerableCode #230

Conversation

sbs2001 commented Jul 21, 2020 • edited Loading

pombredanne left a comment

Choose a reason for hiding this comment

sbs2001 commented Jul 23, 2020

pombredanne commented Jul 23, 2020

pombredanne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pombredanne commented Aug 11, 2020

sbs2001 commented Aug 14, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pombredanne left a comment

Choose a reason for hiding this comment

pombredanne left a comment

Choose a reason for hiding this comment

sbs2001 commented Jul 21, 2020 •

edited

Loading