Merge pull request #101 from snyk/feat/adds-support-for-critical-seve…

…rity-vulnerabilities feat: adds support for critical severity [APOLLO-91]
snyk · May 12, 2021 · ca95dfd · ca95dfd
2 parents da933ee + e430a9e
commit ca95dfd
Show file tree

Hide file tree

Showing 10 changed files with 15,425 additions and 4,200 deletions.
diff --git a/src/lib/vuln.ts b/src/lib/vuln.ts
@@ -1,7 +1,7 @@
 import * as _ from '@snyk/lodash';
 import { PatchRemediation, UpgradeRemediation, Vuln } from './types';
 
-export const severityMap = { low: 0, medium: 1, high: 2 };
+export const severityMap = { low: 0, medium: 1, high: 2, critical: 3 };
 
 function getVuln(id, vulnerabilities: any): Vuln {
   const vuln = vulnerabilities.find((v) => v.id === id);

diff --git a/tap-snapshots/test-snyk-to-html.test.ts-TAP.test.js b/tap-snapshots/test-snyk-to-html.test.ts-TAP.test.js
diff --git a/template/test-cve-report.hbs b/template/test-cve-report.hbs
@@ -455,33 +455,42 @@
   
     .card .label__text {
       vertical-align: text-top;
+      font-weight: bold;
     }
   
+    .card .label--critical {
+      background-color: #AB1A1A;
+      border-color: #AB1A1A;
+    }
     .card .label--high {
-      background-color: #B51B72;
-      border-color: #B51B72;
+      background-color: #CE5019;
+      border-color: #CE5019;
     }
   
     .card .label--medium {
-      background-color: #E29022;
-      border-color: #E29022;
+      background-color: #D68000;
+      border-color: #D68000;
     }
   
     .card .label--low {
-      background-color: #222049;
-      border-color: #222049;
+      background-color: #88879E;
+      border-color: #88879E;
     }
   
     .severity--low {
-      border-color: #222049;
+      border-color: #88879E;
     }
   
     .severity--medium {
-      border-color: #E29022;
+      border-color: #D68000;
     }
   
     .severity--high {
-      border-color: #B51B72;
+      border-color: #CE5019;
+    }
+
+    .severity--critical {
+      border-color: #AB1A1A;
     }
   
     .card--vuln {
@@ -651,8 +660,8 @@
                 <div class="divTableRow">
                   <div class="divTableCell" 
                      style="text-align: center;
-                     {{#if_eq metadata.severity 'high'}} color: #B51B72
-                     {{else if_eq metadata.severity 'medium'}} color: #E29022 
+                     {{#if_eq metadata.severity 'high'}} color: #CE5019
+                     {{else if_eq metadata.severity 'medium'}} color: #D68000 
                      {{else}} color: #767676
                      {{/if_eq}}">{{metadata.severity}}
                   </div>

diff --git a/template/test-report.inline-css.hbs b/template/test-report.inline-css.hbs
@@ -201,33 +201,43 @@
 
   .card .label__text {
     vertical-align: text-top;
+      font-weight: bold;
+  }
+
+  .card .label--critical {
+    background-color: #AB1A1A;
+    border-color: #AB1A1A;
   }
 
   .card .label--high {
-    background-color: #B51B72;
-    border-color: #B51B72;
+    background-color: #CE5019;
+    border-color: #CE5019;
   }
 
   .card .label--medium {
-    background-color: #E29022;
-    border-color: #E29022;
+    background-color: #D68000;
+    border-color: #D68000;
   }
 
   .card .label--low {
-    background-color: #222049;
-    border-color: #222049;
+    background-color: #88879E;
+    border-color: #88879E;
   }
 
   .severity--low {
-    border-color: #222049;
+    border-color: #88879E;
   }
 
   .severity--medium {
-    border-color: #E29022;
+    border-color: #D68000;
   }
 
   .severity--high {
-    border-color: #B51B72;
+    border-color: #CE5019;
+  }
+
+  .severity--critical {
+    border-color: #AB1A1A;
   }
 
   .card--vuln {

diff --git a/template/test-report.remediation-css.hbs b/template/test-report.remediation-css.hbs
@@ -78,7 +78,7 @@
     color: #393842;
     border: 1px solid #d3d3d9;
     border-bottom: none;
-    border-top: 3px solid #df8620;
+    border-top: 3px solid #D68000;
     border-radius: .25rem .25rem 0 0;
     display: inline-block;
     height: 44px;
@@ -161,17 +161,22 @@
     position: relative;
     top: 1px;
   }
+
+  .remediation-card__severity--critical {
+    background-color: #ab1a1a;
+    border-color: #ab1a1a;
+  }
   .remediation-card__severity--high {
-    background-color: #b31a6b;
-    border-color: #b31a6b;
+    background-color: #CE5019;
+    border-color: #CE5019;
   }
   .remediation-card__severity--medium {
-    background-color: #df8620;
-    border-color: #df8620;
+    background-color: #D68000;
+    border-color: #D68000;
   }
   .remediation-card__severity--low {
-    background-color: #595775;
-    border-color: #595775;
+    background-color: #88879E;
+    border-color: #88879E;
   }
   .remediation-card__h2 {
     color: #393842;

diff --git a/template/test-report.vuln-card.hbs b/template/test-report.vuln-card.hbs
@@ -1,4 +1,4 @@
-<div class="card card--vuln  disclosure--not-new severity--{{metadata.severity}}" >
+<div class="card card--vuln  disclosure--not-new severity--{{metadata.severity}}" data-snyk-test="{{metadata.severity}}">
     <h2 class="card__title">{{metadata.title}}</h2>
     <div class="card__section">
 

diff --git a/test/fixtures/expected-output.html b/test/fixtures/expected-output.html
@@ -209,6 +209,7 @@
 
   .card .label__text {
     vertical-align: text-top;
+      font-weight: bold;
   }
 
   .card .label--high {

diff --git a/test/fixtures/test-report-with-critical-severity-vuln.json b/test/fixtures/test-report-with-critical-severity-vuln.json
diff --git a/test/snyk-to-html.test.ts b/test/snyk-to-html.test.ts
@@ -551,7 +551,11 @@ test('should not generate report for invalid json', (t) => {
 
 test('template output displays vulns in descending order of severity ', (t) => {
   SnykToHtml.run(
-    path.join(__dirname, 'fixtures', 'multi-test-report.json'),
+    path.join(
+      __dirname,
+      'fixtures',
+      'test-report-with-critical-severity-vuln.json',
+    ),
     noRemediation,
     path.join(__dirname, '..', 'template', 'test-report.hbs'),
     summaryOnly,
@@ -560,6 +564,22 @@ test('template output displays vulns in descending order of severity ', (t) => {
       const cleanTimestamp = (rep) =>
         rep.replace(regex, '<p class="timestamp">TIMESTAMP</p>');
       const cleanedReport = cleanTimestamp(report);
+
+      // Asserting presence using CSS classname :grimace:
+      // check each severity combination
+      const orderScenarios = [
+        cleanedReport.indexOf(`data-snyk-test="critical"`) <
+          cleanedReport.indexOf(`data-snyk-test="high"`),
+        cleanedReport.indexOf(`data-snyk-test="high"`) <
+          cleanedReport.indexOf(`data-snyk-test="medium"`),
+        cleanedReport.indexOf(`data-snyk-test="medium"`) <
+          cleanedReport.indexOf(`data-snyk-test="low"`),
+      ];
+
+      orderScenarios.forEach((orderAsExpected) => {
+        t.equal(orderAsExpected, true, 'vulns appear in correct order');
+      });
+
       // compares against snapshot in tap-snapshots/test-snyk-to-html.test.ts-TAP.test.js
       // to re-generate snapshots: tap test.js --snapshot
       t.matchSnapshot(cleanedReport, 'should be expected snapshot');

diff --git a/test/vuln.test.ts b/test/vuln.test.ts
@@ -86,6 +86,11 @@ test('getSeverityScore with data length 1', async (t) => {
 test('getSeverityScore with multiple vulns', async (t) => {
   // Arrange
   const vulnerabilities = [
+    {
+      id: 'npm:adm-zip:20180415',
+      severity: 'critical',
+      title: 'Arbitrary File Write via Archive Extraction (Zip Slip)',
+    },
     {
       id: 'npm:adm-zip:20180415',
       severity: 'high',
@@ -102,7 +107,7 @@ test('getSeverityScore with multiple vulns', async (t) => {
       title: 'Arbitrary File Write via Archive Extraction (Zip Slip)',
     },
   ];
-  const expected = 6;
+  const expected = 10;
   // Act
   const result = getSeverityScore(vulnerabilities);
   // Assert