feat(report.component): implement overall risk sort

Implemented vulnerability sorting by overall risk severity. Fixed table header issue on report causing bold text. feat #482
softrams · Dec 11, 2020 · e31c76c · e31c76c
1 parent 680767d
commit e31c76c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/frontend/src/app/report/report.component.html b/frontend/src/app/report/report.component.html
@@ -82,8 +82,8 @@ <h3 class="text-center">Summary of Findings</h3>
         </thead>
         <tbody *ngFor="let vuln of report.vulns">
           <tr>
-            <th>{{ vuln?.id }}</th>
-            <th>{{ vuln?.name }}</th>
+            <td>{{ vuln?.id }}</td>
+            <td>{{ vuln?.name }}</td>
             <td>{{ vuln?.risk }}</td>
             <td>{{ vuln?.status }}</td>
           </tr>

diff --git a/frontend/src/app/report/report.component.ts b/frontend/src/app/report/report.component.ts
@@ -33,12 +33,14 @@ export class ReportComponent implements OnInit {
     }
     this.activatedRoute.data.subscribe(({ report }) => {
       this.report = report;
+      this.sortRisk(this.report.vulns);
       this.numOfDays = Math.floor(
         (Date.parse(this.report.assessment.endDate) -
           Date.parse(this.report.assessment.startDate)) /
           86400000
       );
-      this.pluralDays = (this.numOfDays > 1 || this.numOfDays === 0) ? 'days' : 'day';
+      this.pluralDays =
+        this.numOfDays > 1 || this.numOfDays === 0 ? 'days' : 'day';
       this.buildPieChart(report.vulns);
       this.buildRadarChart(report.vulns);
       for (const vuln of report.vulns) {
@@ -62,14 +64,34 @@ export class ReportComponent implements OnInit {
     });
   }
 
+  sortRisk(vulns: Vulnerability[]) {
+    // https://stackoverflow.com/a/14872766
+    const ordering = {},
+      sortOrder = ['Critical', 'High', 'Medium', 'Low', 'Informational'];
+    for (let i = 0; i < sortOrder.length; i++) {
+      ordering[sortOrder[i]] = i;
+    }
+    vulns.sort((a, b) => {
+      return (
+        ordering[a.risk] - ordering[b.risk] || a.name.localeCompare(b.risk)
+      );
+    });
+  }
+
   buildPieChart(vulns: Vulnerability[]) {
     const infoVulns = vulns.filter((x) => x.risk === 'Informational').length;
     const lowVulns = vulns.filter((x) => x.risk === 'Low').length;
     const mediumVulns = vulns.filter((x) => x.risk === 'Medium').length;
     const highVulns = vulns.filter((x) => x.risk === 'High').length;
     const criticalVulns = vulns.filter((x) => x.risk === 'Critical').length;
     this.pieData = {
-      labels: [`Informational (${infoVulns})`, `Low (${lowVulns})`, `Medium (${mediumVulns})`, `High (${highVulns})`, `Critical (${criticalVulns})`],
+      labels: [
+        `Informational (${infoVulns})`,
+        `Low (${lowVulns})`,
+        `Medium (${mediumVulns})`,
+        `High (${highVulns})`,
+        `Critical (${criticalVulns})`,
+      ],
       datasets: [
         {
           data: [infoVulns, lowVulns, mediumVulns, highVulns, criticalVulns],