Skip to content

V2: Vulnerability details page fixes. #375

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
oliverchang merged 1 commit into from
Apr 6, 2022
Merged

V2: Vulnerability details page fixes. #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
68 changes: 61 additions & 7 deletions gcp/appengine/frontend3/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,8 +360,16 @@ mwc-icon-button.mdc-data-table__sort-icon-button {

/** Vulnerability page */

.vulnerability-page .title {
font-size: 60px;
.vulnerability-page {
.title {
font-size: $osv-heading-size;
}

@media (max-width: 500px) {
.title {
font-size: $osv-heading-size-mobile;
}
}
}

dl.vulnerability-details,
Expand All @@ -382,18 +390,36 @@ dl.vulnerability-details,

pre {
white-space: pre-wrap;
overflow: auto;
}

.links {
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
overflow-wrap: break-word;
}
}

.vulnerability-packages-container {
margin-top: 80px;
margin-top: 50px;

.title {
margin-left: 20px;
font-size: 24px;
margin-bottom: 16px;
font-weight: bold;
}

// Tab bar styling.
--const-mq-affordances:
[screen and (max-width: 500px) ] collapse |
[screen and (min-width: 501px) ] tab-bar;

.force-collapse {
--const-mq-affordances: [screen] collapse;
}
}

.vulnerability-packages {
Expand All @@ -410,10 +436,38 @@ dl.vulnerability-details,
font-size: 20px;
}

// Tab bar styling.
--const-mq-affordances:
[screen] tab-bar
;
.version-value {
font-family: $osv-heading-font-family;
}

.events {
gap: 4px;
}

.spicy-sections-workaround {
// https://github.com/tabvengers/spicy-sections/issues/64.
pointer-events: none;
}

&[affordance="collapse"] h2 {
.vuln-ecosystem {
display: inline;
font-weight: bold;
text-transform: uppercase;
}
.vuln-name {
display: inline;
font-weight: normal;
}

&[expanded] {
background: #fff;
color: $osv-accent-color;
}

width: 100%;
}

&[affordance="tab-bar"] h2 {
cursor: default;

Expand Down
76 changes: 57 additions & 19 deletions gcp/appengine/frontend3/src/templates/vulnerability.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1 class="title">{{ vulnerability.id }}</h1>
<dt>Modified</dt>
<dd>{{ vulnerability.modified }}</dd>
<dt>Details</dt>
<dd><pre>{{ vulnerability.details }}</pre></dd>
<dd><pre class="details">{{ vulnerability.details }}</pre></dd>
<dt>References</dt>
<dd>
<ul class="links">
Expand All @@ -31,48 +31,86 @@ <h1 class="title">{{ vulnerability.id }}</h1>
</div>
</div>
<div class="vulnerability-packages-container">
<spicy-sections class="vulnerability-packages">
<h2 class="title">Affected packages</h2>
<spicy-sections
class="vulnerability-packages{% if vulnerability.affected|should_collapse %} force-collapse{% endif %}">
{% for affected in vulnerability.affected %}
<h2>
<span class="vuln-ecosystem">{{ affected['package']['ecosystem'] }}</span>
<span class="vuln-title-divider">/</span>
<span class="vuln-name">{{ affected['package']['name'] }}</span>
<span class="vuln-ecosystem spicy-sections-workaround">{{ affected['package']['ecosystem'] }}</span>
<span class="vuln-title-divider spicy-sections-workaround">/</span>
<span class="vuln-name spicy-sections-workaround">{{ affected['package']['name'] }}</span>
</h2>
<div class="mdc-layout-grid">
<p class="subtitle">{{ affected['package']['name'] }}</p>
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">Affected ranges</h3>
<h3 class="mdc-layout-grid__cell--span-3">
Affected ranges
<a href="https://ossf.github.io/osv-schema/#examples"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
{% for range in affected['ranges'] %}
<dl>
<dt>Type</dt>
<dd>{{ range['type'] }}</dd>
<dt>Events</dt>
<dd>{{ range['events'] }}</dd>
<dd>
<div class="mdc-layout-grid__inner events">
{% for event in range['events'] %}
<div class="mdc-layout-grid__cell--span-3">
{{ event | event_type }}
</div>
<div class="mdc-layout-grid__cell--span-9 version-value">
{% set link = event | event_link %}
{% if link %}
<a href="{{ link }}"}>
{% endif %}

{{ event | event_value }}

{% if link %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</dd>
</dl>
{% endfor %}
</div>
</div>
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">Affected versions</h3>
<div class="mdc-layout-grid__cell--span-9">
<h3 class="mdc-layout-grid__cell--span-3">
Affected versions
<a href="https://ossf.github.io/osv-schema/#affectedversions-field"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9 version-value">
{% for version in affected['versions'] %}
{{ version }}
{% endfor %}
</div>
</div>
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">Ecosystem specific</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre>{{ affected['ecosystem_specific'] }}</pre>
{% if affected['ecosystem_specific'] %}
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">
Ecosystem specific
<a href="https://ossf.github.io/osv-schema/#affectedecosystem_specific-field"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre>{{ affected['ecosystem_specific'] }}</pre>
</div>
</div>
</div>
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">Database specific</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre>{{ affected['database_specific'] }}</pre>
{% endif %}
{% if affected['database_specific'] %}
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">
Database specific
<a href="https://ossf.github.io/osv-schema/#affectedrangesdatabase_specific-field"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre>{{ affected['database_specific'] }}</pre>
</div>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</spicy-sections>
Expand Down
53 changes: 53 additions & 0 deletions gcp/appengine/frontend_handlers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,59 @@ def vulnerability_handler():
return jsonify(osv_get_by_id(vuln_id))


@blueprint.app_template_filter('event_type')
def event_type(event):
"""Get the type from an event."""
if event.get('introduced'):
return 'Introduced'
if event.get('fixed'):
return 'Fixed'
if event.get('limit'):
return 'Limit'
if event.get('last_affected'):
return 'Last affected'

return None


@blueprint.app_template_filter('event_link')
def event_link(event):
"""Get the link from an event."""
if event.get('introduced_link'):
return event['introduced_link']
if event.get('fixed_link'):
return event['fixed_link']
if event.get('limit_link'):
return event['limit_link']
if event.get('last_affected_link'):
return event['last_affected_link']

return None


@blueprint.app_template_filter('event_value')
def event_value(event):
"""Get the value from an event."""
if event.get('introduced'):
return event['introduced']
if event.get('fixed'):
return event['fixed']
if event.get('limit'):
return event['limit']
if event.get('last_affected'):
return event['last_affected']

return None


@blueprint.app_template_filter('should_collapse')
def should_collapse(affected):
"""Whether if we should collapse the package tab bar."""
total_package_length = sum(
[len(entry.get('package', {}).get('name', '')) for entry in affected])
return total_package_length > 70 or len(affected) > 5


@blueprint.app_template_filter('log')
def logarithm(n):
return math.log(n)