Skip to content

Commit

Permalink
frontend: improve rendering of CVEs with partial package information (#…
Browse files Browse the repository at this point in the history 
…1483)

- Use the repo as the package name when the package name is unavailable
- Don't render an empty anchor when the repo URL is unavailable

h/t @michaelkedar for picking up on these defects
  • Loading branch information
@andrewpollock
andrewpollock committed Jul 25, 2023
1 parent 1f1c814 commit 0f4e0c2
Showing 1 changed file with 114 additions and 124 deletions.
238 changes: 114 additions & 124 deletions gcp/appengine/frontend3/src/templates/vulnerability.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,169 +3,159 @@

{% block content -%}
<div class="vulnerability-page">
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12">
<h1 class="title">{{ vulnerability.id }}</h1>
</div>
<div class="mdc-layout-grid__cell--span-12">
<dl class="vulnerability-details">
<dt>Source</dt>
<dd><a href="{{ vulnerability.source_link }}">{{ vulnerability.source }}</a></dd>
{% if vulnerability.aliases -%}
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12">
<h1 class="title">{{ vulnerability.id }}</h1>
</div>
<div class="mdc-layout-grid__cell--span-12">
<dl class="vulnerability-details">
<dt>Source</dt>
<dd><a href="{{ vulnerability.source_link }}">{{ vulnerability.source }}</a></dd>
{% if vulnerability.aliases -%}
<dt>Aliases</dt>
<dd>
<ul class="aliases">
{% for alias in vulnerability.aliases -%}
{% for alias in vulnerability.aliases -%}
<li>
{% if alias.exists -%}
{% if alias.exists -%}
<a href="/vulnerability/{{ alias.alias_id }}">{{ alias.alias_id }}</a>
{% else -%}
{% else -%}
{{ alias.alias_id }}
{% endif -%}
{% if alias.same_alias_entries | length > 0 -%}
{% endif -%}
{% if alias.same_alias_entries | length > 0 -%}
(
{% for entry in alias.same_alias_entries -%}
<a href="/vulnerability/{{ entry }}">{{ entry }}</a>{{ ',' if not loop.last }}
<a href="/vulnerability/{{ entry }}">{{ entry }}</a>{{ ',' if not loop.last }}
{% endfor -%}
)
{% endif -%}
{% endif -%}
</li>
{% endfor -%}
{% endfor -%}
</ul>
</dd>
{% endif -%}
<dt>Published</dt>
<dd>{{ vulnerability.published }}</dd>
<dt>Modified</dt>
<dd>{{ vulnerability.modified }}</dd>
<dt>Details</dt>
<dd class="details">
{{ vulnerability.details|markdown|safe -}}
</dd>
<dt>References</dt>
<dd>
<ul class="links">
{% for reference in vulnerability.references -%}
{% endif -%}
<dt>Published</dt>
<dd>{{ vulnerability.published }}</dd>
<dt>Modified</dt>
<dd>{{ vulnerability.modified }}</dd>
<dt>Details</dt>
<dd class="details">
{{ vulnerability.details|markdown|safe -}}
</dd>
<dt>References</dt>
<dd>
<ul class="links">
{% for reference in vulnerability.references -%}
<li><a href="{{ reference['url'] }}">{{ reference['url'] }}</a></li>
{% endfor -%}
</ul>
</dd>
</dl>
{% endfor -%}
</ul>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="vulnerability-packages-container">
<h2 class="title">Affected packages</h2>
<spicy-sections
<div class="vulnerability-packages-container">
<h2 class="title">Affected packages</h2>
<spicy-sections
class="vulnerability-packages{% if vulnerability.affected|should_collapse %} force-collapse{% endif %}">
{% for affected in vulnerability.affected -%}
{% for affected in vulnerability.affected -%}
<h2 class="package-header">
<span class="vuln-ecosystem spicy-sections-workaround">{{ affected['package']['ecosystem'] or 'Git' }}</span>
<span class="vuln-title-divider spicy-sections-workaround">/</span>
{# TODO(andrewpollock): it's permissible to have more than one repo, so handle this -#}
<span class="vuln-name spicy-sections-workaround">{{ affected['package']['name'] or vulnerability.repo | strip_scheme }}</span>
<span class="vuln-name spicy-sections-workaround">{{ affected['package']['name'] or vulnerability.repo |
strip_scheme }}</span>
</h2>
<div class="mdc-layout-grid">
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">
Package Info
</h3>
<div class="mdc-layout-grid__cell--span-9">
<dl>
<dt>Package Name</dt>
<dd>{{ affected['package']['name'] or 'Unknown' }}</dd>
<dt>Repo URL</dt>
{# TODO(andrewpollock): it's permissible to have more than one repo, so handle this -#}
<dd><a href="{{ vulnerability.repo }}">{{ vulnerability.repo }}</a></dd>
</dl>
</div>
</div>
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">
Affected ranges
<a href="https://ossf.github.io/osv-schema/#examples" target="_blank"></a>
<a href="https://ossf.github.io/osv-schema/#examples" target="_blank" rel="noopener noreferrer"></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>
<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 }}"}>
{% elif event | event_type == 'Introduced' and event | event_value == '0' -%}
<div class="tooltip">
<dl>
<dt>Type</dt>
<dd>{{ range['type'] -}}</dd>
<dt>Events</dt>
<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 }}">
{% elif event | event_type == 'Introduced' and event | event_value == '0' -%}
<div class="tooltip">
{% endif -%}

{{ event | event_value -}}

{% if link -%}
</a>
{% elif event.get('introduced') == '0' -%}
<span class="tooltiptext">The exact introduced commit is unknown</span>
</div>
{% endif -%}
</div>
{% endfor -%}
</a>
{% elif event.get('introduced') == '0' -%}
<span class="tooltiptext">The exact introduced commit is unknown</span>
</div>
</dd>
</dl>
{% endfor -%}
</div>
</div>
{% if affected['versions'] -%}
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">
Affected versions
<a href="https://ossf.github.io/osv-schema/#affectedversions-field" target="_blank"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9 version-value">
{% for group, versions in (affected['versions']|group_versions).items() -%}
<spicy-sections class="versions-section">
<h2 class="version-header">{{ group }}</h2>
<div class="versions {% if not loop.last %}versions-separator{% endif %}">
{% for version in versions -%}
<div class="version">{{ version }}</div>
{% endfor -%}
{% endif -%}
</div>
</spicy-sections>
{% endfor -%}
{% endfor -%}
</div>
</dd>
</dl>
{% endfor -%}
</div>
{% endif -%}
{% 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" target="_blank"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre class="specific">{{ affected['ecosystem_specific'] | display_json }}</pre>
</div>
</div>
{% 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" target="_blank"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre class="specific">{{ affected['database_specific'] | display_json }}</pre>
</div>
{% if affected['versions'] -%}
<div class="vulnerability-package-subsection mdc-layout-grid__inner">
<h3 class="mdc-layout-grid__cell--span-3">
Affected versions
<a href="https://ossf.github.io/osv-schema/#affectedversions-field" target="_blank"
rel="noopener noreferrer"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9 version-value">
{% for group, versions in (affected['versions']|group_versions).items() -%}
<spicy-sections class="versions-section">
<h2 class="version-header">{{ group }}</h2>
<div class="versions {% if not loop.last %}versions-separator{% endif %}">
{% for version in versions -%}
<div class="version">{{ version }}</div>
{% endfor -%}
</div>
</div>
{% endif -%}
</spicy-sections>
{% endfor -%}
</div>
</div>
{% endfor -%}
{% endif -%}
{% 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" target="_blank"
rel="noopener noreferrer"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre class="specific">{{ affected['ecosystem_specific'] | display_json }}</pre>
</div>
</div>
{% 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" target="_blank"
rel="noopener noreferrer"></a>
</h3>
<div class="mdc-layout-grid__cell--span-9">
<pre class="specific">{{ affected['database_specific'] | display_json }}</pre>
</div>
</div>
{% endif -%}
</div>
{% endfor -%}
</spicy-sections>
</div>
</div>
Expand All @@ -174,4 +164,4 @@ <h3 class="mdc-layout-grid__cell--span-3">
{{ vulnerability.id }} - OSV
</template>
</turbo-stream>
{% endblock -%}
{% endblock -%}

0 comments on commit 0f4e0c2

Please sign in to comment.