Skip to content

Improve UI #335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sbs2001 merged 11 commits into from
Feb 13, 2021
Merged

Improve UI #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b30e74a
Fix whitespaces and use better colors
sbs2001 Feb 3, 2021
d11276e
Improve home page
sbs2001 Feb 5, 2021
8ff7716
Improve package search
sbs2001 Feb 5, 2021
fd813ba
Fix codestyle
sbs2001 Feb 5, 2021
e06648a
Disable community curation and add a flag to enable it
sbs2001 Feb 11, 2021
e105d4d
Fix sequencing of Vulnerable and Patched packages in search results
sbs2001 Feb 11, 2021
7c0ba20
Fix headers of all views
sbs2001 Feb 11, 2021
93faed9
Preserve query in vulnerability search and reduce redundant whitespace
sbs2001 Feb 11, 2021
a70404c
Preserve state in package search view
sbs2001 Feb 12, 2021
6a786b5
Preserve query in package search and improve views
sbs2001 Feb 12, 2021
bce1194
Format code
sbs2001 Feb 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions vulnerabilities/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

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


Expand All @@ -44,10 +44,8 @@ def get_package_namespaces():
class PackageForm(forms.Form):

type = forms.ChoiceField(choices=get_package_types)
namespace = forms.ChoiceField(choices=get_package_namespaces, required=False)
name = forms.CharField(widget=forms.TextInput(attrs={"placeholder": "package name"}))
version = forms.CharField(
widget=forms.TextInput(attrs={"placeholder": "package version"}), required=False
name = forms.CharField(
required=False, widget=forms.TextInput(attrs={"placeholder": "package name"})
)


Expand Down
57 changes: 29 additions & 28 deletions vulnerabilities/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,64 +7,65 @@
<link rel="stylesheet" href="{% static 'css/custom.css' %}"/>
<link rel="stylesheet" href="{% static 'css/font-awesome.css' %}"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body class="Site has-background-light">
<nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
<body class="Site">
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{% url 'home' %}">
Home
Home
</a>
<a class="navbar-item" href="{% url 'swagger-ui' %}">
API Docs
API Docs
</a>
{% if enable_curation %}
<div class="navbar-item has-dropdown is-hoverable">

<a class="navbar-link">
Vulnerabilities
Vulnerabilities
</a>
<div class="navbar-dropdown">
<a class ="navbar-item" href = "{% url 'vulnerability_search' %}" >
Explore
</a>
<a class ="navbar-item" href = "{% url 'vulnerability_create' %}">
Create
Explore
</a>

Copy link
Member

@pombredanne pombredanne Feb 12, 2021

Choose a reason for hiding this comment

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

That's a minor nit but you want to keep your HTML properly formatted.
Here this would mean using consistent indentation and spaing (e.g. essentially as if it were Python)

Copy link
Collaborator Author

@sbs2001 sbs2001 Feb 12, 2021

Choose a reason for hiding this comment

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

Sure thing, fixing it

<a class ="navbar-item" href = "{% url 'vulnerability_create' %}">
Create
</a>
</div>
</div>

{% else %}
<a class="navbar-item" href="{% url 'vulnerability_search' %}">
Vulnerabilities
</a>
{% endif %}

{% if enable_curation %}
<div class="navbar-item has-dropdown is-hoverable">

<a class="navbar-link">
Packages
Packages
</a>
<div class="navbar-dropdown">
<a class ="navbar-item" href = "{% url 'package_search' %}" >
Explore
</a>
<a class ="navbar-item" href = "{% url 'package_create' %}" >
Create
Explore
</a>
<a class ="navbar-item" href = "{% url 'package_create' %}" >
Create
</a>
</div>
</div>
{% else %}
<a class="navbar-item" href="{% url 'package_search' %}">
Packages
</a>
{% endif %}

</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-info">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<main class="Site-content">

<section class="section is-medium has-text-centered">
<section class="section is-small has-text-centered">
<div class="container ">
{% block title %}
{% endblock %}
Expand Down
6 changes: 3 additions & 3 deletions vulnerabilities/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ <h1 class="title">
{% endblock %}

{% block content %}
<div class = "hero is-large has-text-centered is-light">
<a class="button is-medium has-background-info-light" href="{% url 'vulnerability_search' %}"> Search Vulnerabilities</a>
<a class="button is-medium has-background-info-light" href="{% url 'package_search' %}"> Search Packages</a>
<div class = "hero is-large has-text-centered">
<a class="button is-medium has-background-light has-text-link" href="{% url 'vulnerability_search' %}"> Search Vulnerabilities</a>
<a class="button is-medium has-background-light has-text-link" href="{% url 'package_search' %}"> Search Packages</a>
</div>
{% endblock %}
31 changes: 20 additions & 11 deletions vulnerabilities/templates/package_update.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
{% load widget_tweaks %}
{% block title %}
<h1 class="title">
Curate : {{object}}
{{object}}
</h1>
{% endblock %}

{% block content %}
<div class="columns is-5 is-variable mx-6 mb-6">
<div class="column is-half has-text-centered has-background-success-light">
<form method="post" class="card has-background-success-light">
<form method="post" class="card has-background-success-light m">
<header class="card-header mb-3">
<p class="card-header-title">
Package Details
Expand All @@ -19,12 +19,14 @@ <h1 class="title">
{% for field in form %}
<div class="field px-3">
<label class="label">{{field.label}}</label>
{% render_field field class="input is-primary" %}
{% render_field field|append_attr:"readonly:readonly" class="input is-primary" %}
</div>
{% endfor %}
<button class="button is-success mb-3", type="submit">
Update
</button>
{% if enable_curation %}
<button class="button is-success mb-3", type="submit">
Update
</button>
{% endif %}
</form>
</div>

Expand All @@ -39,15 +41,17 @@ <h1 class="title">
{% for vulnerability in impacted_vuln %}
<span class="tag is-danger is-medium">
<a href="{% url 'vulnerability_view' vulnerability.pk %}" class="has-text-white">{{vulnerability}}</a>

<form method="POST" action="{% url 'impacted_package_delete' object.pk vulnerability.pk %}"">
{% csrf_token %}<button class="delete is-small" type="submit"></button>
</form>
{% if enable_curation %}
<form method="POST" action="{% url 'impacted_package_delete' object.pk vulnerability.pk %}"">
{% csrf_token %}<button class="delete is-small" type="submit"></button>
</form>
{% endif %}
</span>
{% endfor %}
</div>

<div class="field is-centered">
{% if enable_curation %}
<p class="control pb-3">
<a class="button is-success" href = "{% url 'impacted_package_create' object.pk %}">
<span>Add</span>
Expand All @@ -56,6 +60,7 @@ <h1 class="title">
</span>
</a>
</p>
{% endif %}
</div>

</div>
Expand All @@ -70,15 +75,18 @@ <h1 class="title">
{% for vulnerability in resolved_vuln %}
<span class="tag is-primary is-medium">
<a href="{% url 'vulnerability_view' vulnerability.pk %}" class="has-text-white">{{vulnerability}}</a>


{% if enable_curation %}
<form method="POST" action="{% url 'resolved_package_delete' object.pk vulnerability.pk %}">
{% csrf_token %}<button class="delete is-small" type="submit"></button>
</form>
{% endif %}
</span>
{% endfor %}
</div>

<div class="field is-centered">
{% if enable_curation %}
<p class="control pb-3">
<a class="button is-success" href= "{% url 'resolved_package_create' object.pk %}" >
<span>Add</span>
Expand All @@ -87,6 +95,7 @@ <h1 class="title">
</span>
</a>
</p>
{% endif %}
</div>
</div>
</div>
Expand Down
49 changes: 24 additions & 25 deletions vulnerabilities/templates/packages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,49 @@
{% extends 'base.html' %}
{% block title %}
<h1 class="title">
Explore/Curate Vulnerable packages
Explore Vulnerable packages
</h1>
{% endblock %}
{% block content %}
{% load widget_tweaks %}

<section class="columns has-text-centered">
<div class = "column is-three-fifths is-offset-one-fifth">
<form action="{% url 'package_search' %}" method="get">
<div class="field is-horizontal">
{% for field in form %}
{{ field|add_class:"input" }}
{% endfor %}
<button class="button is-success" , type="submit">
Search
</button>
<div class="columns">
<div class="column is-one-third is-offset-one-third">
<form action="{% url 'package_search' %}" method="get">
{% load widget_tweaks %}
<div class="field is-horizontal pd-3">
<div class="select">
{{form.type}}
</div>
{{form.name|add_class:"input"}}
<button class="button is-success", type="submit">
Search
</button>
</div>
</form>
{% if result_size %}
<p class="has-text-centered" id="result_count">{{result_size}} results</p>
{% elif result_size == 0 %}
<p class="has-text-centered" id="result_count">No results found</p>
{% endif %}
</div>
</div>

</section>
</div>

{% if packages %}

<section class="section is-medium has-text-centered">
<div class="container">
<h1 class="title">Results of your query</h1>
<h3 class="subtitle">Total Results {{ total_results }}</h3>
</div>
</section>

<section class="section has-background-dark">
<section class="section">
<div class="content is-medium">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<tr>
<th>Packages</th>
<th>Patched Vulnerabilities</th>
<th>Package URL</th>
<th>Vulnerabilities</th>
<th>Patched Vulnerabilities</th>
</tr>
{% for package in packages %}
<tr>
<td><a href="{% url 'package_view' package.pk %}">{{package}}</a></td>
<td>{{package.resolved_to.all|length}}</td>
<td>{{package.vulnerable_to.all|length}}</td>
<td>{{package.resolved_to.all|length}}</td>
</tr>
{% endfor %}
</table>
Expand Down
39 changes: 14 additions & 25 deletions vulnerabilities/templates/vulnerabilities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,37 @@ <h1 class="title">

<div class="columns">
<div class="column is-one-third is-offset-one-third">

<form action="{% url 'vulnerability_search' %}" method="get">
<form action="{% url 'vulnerability_search' %}" method="get">
{% load widget_tweaks %}
<div class="field is-horizontal">
{{form.vuln_id|add_class:"input"}}
{% render_field form.vuln_id class="input"%}
<button class="button is-success", type="submit">
Search
</button>
</div>
</form>
</div>
</form>
{% if result_size %}
<p class="has-text-centered" id="result_count">{{result_size}} results</p>
{% elif result_size == 0 %}
<p class="has-text-centered" id="result_count">No results found</p>
{% endif %}
</div>
</div>

{% if vulnerabilities %}
<section class="section is-medium has-text-centered">
<div class="container">
<h1 class="title" id="results">Results of your query "{{searched_for}}"</h1>
<h3 class="subtitle" id="results">Total {{result_size}} results</h3>
</div>
</section>

<section class="section has-background-dark">

<section class="section">
<div class="content is-large">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<tr>
<th>Vulnerabilities</th>
<th>Patched packages</th>
<th>Vulnerability ID</th>
<th>Vulnerable packages</th>
<th>Patched packages</th>
</tr>
{% for vulnerability in vulnerabilities %}
<tr>
<td><a href="{% url 'vulnerability_view' vulnerability.pk %}">{{vulnerability.cve_id}}</a></td>
<td>{{vulnerability.resolved_to.all|length}}</td>
<td>{{vulnerability.vulnerable_to.all|length}}</td>
<td>{{vulnerability.resolved_to.all|length}}</td>
</tr>
{% endfor %}
</table>
Expand All @@ -60,13 +56,6 @@ <h3 class="subtitle" id="results">Total {{result_size}} results</h3>

</section>

{% elif result_size == 0 %}
<section class="section is-medium has-text-centered">
<div class="container">
<h1 class="title" id="results">No result found for "{{searched_for}}"</h1>
</div>
</section>

{% endif %}

{% endblock %}
{% endblock %}
Loading