diff --git a/frontend/src/app/report/report.component.html b/frontend/src/app/report/report.component.html
index 74f780ac..5ed0bced 100644
--- a/frontend/src/app/report/report.component.html
+++ b/frontend/src/app/report/report.component.html
@@ -82,8 +82,8 @@
Summary of Findings
- {{ vuln?.id }} |
- {{ vuln?.name }} |
+ {{ vuln?.id }} |
+ {{ vuln?.name }} |
{{ vuln?.risk }} |
{{ vuln?.status }} |
diff --git a/frontend/src/app/report/report.component.ts b/frontend/src/app/report/report.component.ts
index 47bc2692..df5f5a9b 100644
--- 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,6 +64,20 @@ 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;
@@ -69,7 +85,13 @@ export class ReportComponent implements OnInit {
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],