Tweaks for v2 home and list UI

gcp/appengine/frontend3/src/base.html

@@ -4,6 +4,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Google+Material+Icons:wght@400;500;700" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Overpass+Mono&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
   <meta charset="utf-8">
   <title>OSV</title>

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;
+  }
+}

gcp/appengine/frontend3/src/templates/home.html

@@ -4,10 +4,10 @@
 {% block content %}
 <div class="mdc-layout-grid">
   <div class="mdc-layout-grid__inner home-page">
-    <div class="mdc-layout-grid__cell--span-8 hero">
+    <div class="mdc-layout-grid__cell--span-6 hero">
       <h1 class="title">A complete picture of vulnerabilities in your open source dependencies.</h1>
       <div class="explainer">
-        <p>
+        <p class="google-backed">
           An ongoing project backed by Google.
         </p>
         <p>
@@ -16,6 +16,14 @@ <h1 class="title">A complete picture of vulnerabilities in your open source depe
           maintenance across major open source ecosystems.
         </p>
       </div>
+      <div class="cta">
+        <a class="cta-primary link-button" href="{{ url_for('frontend_handlers.list') }}">Search Vulnerability Database</a>
+        <a class="cta-secondary" href="#">Learn more</a>
+      </div>
+    </div>
+    <div class="mdc-layout-grid__cell--span-12 usage-examples">
+      <h2 class="heading">Use the API</h2>
+      ...
     </div>
   </div>
 </div>

gcp/appengine/frontend3/src/templates/list.html

@@ -60,6 +60,8 @@ <h1 class="title">Vulnerability Library</h1>
         {{ 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') }}
       </div>
     </div>
     <div role="rowgroup" class="vuln-table-rows mdc-data-table__content">
@@ -70,19 +72,25 @@ <h1 class="title">Vulnerability Library</h1>
             <a href="{{ url_for('frontend_handlers.vulnerability', id=vulnerability.id) }}">{{ vulnerability.id }}</a>
           </span>
           <span role="cell" class="vuln-table-cell mdc-data-table__cell">
-            {% for package in vulnerability.packages %}
-            {{ package }}
+            {% for affected in vulnerability.affected %}
+            {{ affected.package.ecosystem }}/{{ affected.package.name }}
             {% endfor %}
           </span>
           <span role="cell" class="vuln-table-cell mdc-data-table__cell">
             {{ vulnerability.summary }}
           </span>
           <span role="cell" class="vuln-table-cell mdc-data-table__cell">
-            {% for version in vulnerability.versions %}
-            {{ version }}
+            {% for version in vulnerability.affected | map(attribute='versions', default=[]) | sum(start=[]) %}
+              {{ version }}
+            {% else %}
+              See details.
             {% endfor %}
           </span>
           <span role="cell" class="vuln-table-cell mdc-data-table__cell"></span>
+          <span role="cell" class="vuln-table-cell mdc-data-table__cell">
+            {{ vulnerability.modified }}
+          </span>
+          <span role="cell" class="vuln-table-cell mdc-data-table__cell"></span>
           <span role="cell" class="vuln-table-cell mdc-data-table__cell"></span>
         </div>
         {% endfor %}

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/<id>')