diff --git a/gcp/appengine/frontend3/src/base.html b/gcp/appengine/frontend3/src/base.html index 13158e83499..b755455c96e 100644 --- a/gcp/appengine/frontend3/src/base.html +++ b/gcp/appengine/frontend3/src/base.html @@ -4,6 +4,7 @@ + OSV diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss index ea56e1cb493..773853837f4 100644 --- a/gcp/appengine/frontend3/src/styles.scss +++ b/gcp/appengine/frontend3/src/styles.scss @@ -212,9 +212,20 @@ mwc-icon-button.mdc-data-table__sort-icon-button { .vuln-table-container { // The vulnerability list should be full-width but not overflow the page bounds. - overflow-x: scroll; + overflow-x: auto; width: 100%; + // Override MDC table styling. + border-width: 0; + .mdc-data-table__header-cell { + border-bottom-color: $osv-text-color; + border-bottom-style: solid; + font-family: $osv-heading-font-family; + } + .mdc-data-table__cell { + border-bottom-style: dashed; + } + // Apply table display etc. .vuln-table { display: table; @@ -326,3 +337,27 @@ dl.vulnerability-details, border-bottom: 1px dashed #fff; } } + +/** Home page */ + +.home-page { + .title { + font-size: 60px; + line-height: 70px; + } + + .explainer { + font-size: 20px; + } + + .google-backed::after { + display: inline; + content: 'google'; + font-family: 'Google Material Icons'; + } + + .usage-examples .heading { + font-size: 60px; + text-align: center; + } +} diff --git a/gcp/appengine/frontend3/src/templates/home.html b/gcp/appengine/frontend3/src/templates/home.html index 6acfcb433ea..c3ccda1bf88 100644 --- a/gcp/appengine/frontend3/src/templates/home.html +++ b/gcp/appengine/frontend3/src/templates/home.html @@ -4,10 +4,10 @@ {% block content %}
-
+

A complete picture of vulnerabilities in your open source dependencies.

-

+

An ongoing project backed by Google.

@@ -16,6 +16,14 @@

A complete picture of vulnerabilities in your open source depe maintenance across major open source ecosystems.

+ +
+
+

Use the API

+ ...
diff --git a/gcp/appengine/frontend3/src/templates/list.html b/gcp/appengine/frontend3/src/templates/list.html index 9a08ab91133..7a742707506 100644 --- a/gcp/appengine/frontend3/src/templates/list.html +++ b/gcp/appengine/frontend3/src/templates/list.html @@ -60,6 +60,8 @@

Vulnerability Library

{{ table_header_cell('affected-versions', 'Affected versions') }} {{ table_header_cell('ecosystem', 'Ecosystem') }} {{ table_header_cell('last-modified', 'Last modified') }} + {{ table_header_cell('fixed', 'Fix') }} + {{ table_header_cell('severity', 'Severity') }}
@@ -70,19 +72,25 @@

Vulnerability Library

{{ vulnerability.id }} - {% for package in vulnerability.packages %} - {{ package }} + {% for affected in vulnerability.affected %} + {{ affected.package.ecosystem }}/{{ affected.package.name }} {% endfor %} {{ vulnerability.summary }} - {% for version in vulnerability.versions %} - {{ version }} + {% for version in vulnerability.affected | map(attribute='versions', default=[]) | sum(start=[]) %} + {{ version }} + {% else %} + See details. {% endfor %} + + {{ vulnerability.modified }} + +
{% endfor %} diff --git a/gcp/appengine/frontend_handlers.py b/gcp/appengine/frontend_handlers.py index 884c2e12573..f805d4b2837 100644 --- a/gcp/appengine/frontend_handlers.py +++ b/gcp/appengine/frontend_handlers.py @@ -92,15 +92,6 @@ def list(): ecosystem = request.args.get('ecosystem') results = osv_query(query, page, False, ecosystem) - vulnerabilities = [] - for item in results['items']: - vulnerabilities.append({ - "id": item['id'], - "summary": item['summary'] if 'summary' in item else '', - "packages": item['affected'][0]['package']['ecosystem'], - "versions": item['affected'][0]['versions'] - }) - # Fetch ecosystems by default. As an optimization, skip when rendering page fragments. ecosystems = osv_get_ecosystems( ) if not request.headers.get('Turbo-Frame') else None @@ -111,7 +102,7 @@ def list(): query=query, selected_ecosystem=ecosystem, ecosystems=ecosystems, - vulnerabilities=vulnerabilities) + vulnerabilities=results['items']) @blueprint.route('/v2/vulnerability/')