From 4b20f8036316a58b61a3eea85afea53cb054bd66 Mon Sep 17 00:00:00 2001
From: Oliver Chang <ochang@google.com>
Date: Wed, 6 Apr 2022 12:11:47 +1000
Subject: [PATCH] V2: Vulnerability details page fixes.

- Various wrapping fixes to make this render better on mobile.
- Make tab bar collapse on mobile, and when the package list is too
  long.
- Render events properly.
- Add links to schema documentation.
- Work around spicy-sections bug.
---
 gcp/appengine/frontend3/src/styles.scss       | 68 +++++++++++++++--
 .../src/templates/vulnerability.html          | 76 ++++++++++++++-----
 gcp/appengine/frontend_handlers.py            | 53 +++++++++++++
 3 files changed, 171 insertions(+), 26 deletions(-)

diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss
index 2f8a9f830bb..c338378f272 100644
--- a/gcp/appengine/frontend3/src/styles.scss
+++ b/gcp/appengine/frontend3/src/styles.scss
@@ -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,
@@ -382,6 +390,7 @@ dl.vulnerability-details,
 
   pre {
     white-space: pre-wrap;
+    overflow: auto;
   }
 
   .links {
@@ -389,11 +398,28 @@ dl.vulnerability-details,
     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 {
@@ -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;
 
diff --git a/gcp/appengine/frontend3/src/templates/vulnerability.html b/gcp/appengine/frontend3/src/templates/vulnerability.html
index 8b4ec3f99d0..7c7724d06b1 100644
--- a/gcp/appengine/frontend3/src/templates/vulnerability.html
+++ b/gcp/appengine/frontend3/src/templates/vulnerability.html
@@ -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">
@@ -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>
diff --git a/gcp/appengine/frontend_handlers.py b/gcp/appengine/frontend_handlers.py
index ebfb3821801..d2af98c4cd9 100644
--- a/gcp/appengine/frontend_handlers.py
+++ b/gcp/appengine/frontend_handlers.py
@@ -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)