Skip to content

Add UI for VulnerableCode - #230

Merged
pombredanne merged 28 commits into
aboutcode-org:developfrom
sbs2001:curation_ui
Aug 26, 2020
Merged

Add UI for VulnerableCode#230
pombredanne merged 28 commits into
aboutcode-org:developfrom
sbs2001:curation_ui

Conversation

@sbs2001

@sbs2001 sbs2001 commented Jul 21, 2020

Copy link
Copy Markdown
Collaborator

This is based on the models of #219 .

Finally a UI for VulnerableCode !

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

Addresses #218

zz_comp

./
Screenshot_2020-07-27 Login

./vulnerabilities/search
Screenshot_2020-07-27 Login(1)

/vulnerabilities/search?vuln_id=CVE-2019
Screenshot_2020-07-27 Login(2)

/vulnerabilities/23
Screenshot_2020-07-27 Login(3)

./packages/search
Screenshot_2020-07-27 Login(4)

./packages/21
Screenshot_2020-07-27 Login(5)

./packages/create*
Screenshot_2020-07-27 Login(6)

vulnerabilities/create

Screenshot_2020-07-27 Login(7)

sbs2001 added 13 commits July 23, 2020 10:53
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
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>
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 pombredanne left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

sbs2001 commented Jul 23, 2020

Copy link
Copy Markdown
Collaborator Author

@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

Copy link
Copy Markdown
Member

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 pombredanne left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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).

sbs2001 added 9 commits July 31, 2020 19:20
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
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>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
@@ -0,0 +1,14 @@
about_resource: bulma.min.css

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

👍

@pombredanne

Copy link
Copy Markdown
Member

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

@sbs2001 sbs2001 changed the title Add UI for VulnerableCode [WIP]Add UI for VulnerableCode Aug 13, 2020
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
Signed-off-by: Shivam Sandbhor <shivam.sandbhor@gmail.com>
@sbs2001

sbs2001 commented Aug 14, 2020

Copy link
Copy Markdown
Collaborator Author

@pombredanne re

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

Done

Comment thread vulnerabilities/forms.py

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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I am puzzled by the repetition.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

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.

Comment thread 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"))

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

placeholder

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Ah, you mean a placeholder in the UI dropdown?

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

license: MIT

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

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>
@sbs2001 sbs2001 changed the title [WIP]Add UI for VulnerableCode Add UI for VulnerableCode Aug 21, 2020
</div>
</div>
{% endblock %}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

Comment thread vulnerabilities/views.py

from urllib.parse import urlencode

from django.core.paginator import Paginator

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Nit: sort your imports

Comment thread vulnerablecode/urls.py
from vulnerabilities.views import PackageRelatedVulnerablityDelete
from vulnerabilities.views import PackageRelatedVulnerablityCreate
from vulnerabilities.views import HomePage
from vulnerabilities.views import VulnerabilityReferenceCreate

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Niit: sort your imports

@pombredanne pombredanne left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I have just a few not pickings for your review.

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

@pombredanne pombredanne left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

All good. Merging!
Thank you ++

@pombredanne
pombredanne merged commit f5e7feb into aboutcode-org:develop Aug 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants