From face78dde37d33f505c7e5669ca7cce3cb588242 Mon Sep 17 00:00:00 2001 From: Grzegorz Siewruk Date: Thu, 21 Sep 2023 21:57:57 +0200 Subject: [PATCH 1/3] adding possibility to group vulns via branches --- CHANGELOG.md | 5 ++++ package.json | 2 +- src/app/@core/Model/Vulnerability.ts | 8 +++++ .../extra-components/details-component.ts | 27 ++++++++++++----- .../details-tables.component.ts | 29 ++++++++++++++++--- 5 files changed, 59 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8accaab..694eff3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.8.1 (2023-09-21) + +#### New Features +* Grouping vulnerabilities via branch (affect only vulnerabilities in code) + ## 1.8.0 (2023-08-08) #### New Features diff --git a/package.json b/package.json index ca3f02e..f883643 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mixeway-frontend", - "version": "1.8.0", + "version": "1.8.1", "license": "MIT", "scripts": { "ng": "ng", diff --git a/src/app/@core/Model/Vulnerability.ts b/src/app/@core/Model/Vulnerability.ts index 210a6c5..d36ae0e 100644 --- a/src/app/@core/Model/Vulnerability.ts +++ b/src/app/@core/Model/Vulnerability.ts @@ -23,6 +23,7 @@ export class Vulnerability { vulnerability: Vuln; cisRequirement: CisRequirement; project: Project; + codeProjectBranch: CodeProjectBranch; } export class VulnerabilitySource { name: string; @@ -45,3 +46,10 @@ export class CisRequirement { type: string; severity: string; } +export class CodeProjectBranch { + name: string; +} + +export class ExtendedVulnerability extends Vulnerability { + codeProjectBranches: CodeProjectBranch[]; +} diff --git a/src/app/pages/extra-components/details-component.ts b/src/app/pages/extra-components/details-component.ts index 18d0682..841caa6 100644 --- a/src/app/pages/extra-components/details-component.ts +++ b/src/app/pages/extra-components/details-component.ts @@ -17,8 +17,8 @@ interface EventItem { @Component({ template: ` - -
+ +
@@ -57,6 +57,20 @@ can be marked by Mixeway Vuln Auditor or manualy by a user, read docs to get mor
+
+
+ + + Branches in which vulnerability was found + + +
+ {{ branch?.name }} +
+ + +
+
@@ -125,16 +139,15 @@ can be marked by Mixeway Vuln Auditor or manualy by a user, read docs to get mor
-
+
Manually set the grade for given vulnerability - - -

- + + +
diff --git a/src/app/pages/show-project/details-tables/details-tables.component.ts b/src/app/pages/show-project/details-tables/details-tables.component.ts index f9b5e9e..4ac4bcc 100644 --- a/src/app/pages/show-project/details-tables/details-tables.component.ts +++ b/src/app/pages/show-project/details-tables/details-tables.component.ts @@ -10,7 +10,7 @@ import {AnalysisColorComponent} from '../../extra-components/analysis-color.comp import {Angular5Csv} from 'angular5-csv/dist/Angular5-csv'; import {ProjectConstants} from '../../../@core/constants/ProjectConstants'; import {BugComponent} from '../../extra-components/bug-component'; -import {Vulnerability} from '../../../@core/Model/Vulnerability'; +import {ExtendedVulnerability, Vulnerability} from '../../../@core/Model/Vulnerability'; import {LocalDataSource} from 'ng2-smart-table'; import {VulnerabilitySourceComponent} from '../../extra-components/vulnerability-source-component'; import {StatusComponent} from '../../extra-components/status-component'; @@ -78,7 +78,7 @@ export class DetailsTablesComponent implements OnInit { } else { location = vulnerability.location; } - const vuln = { + const vuln1 = { projectId: this._entityId, id: vulnerability.id, name: vulnerability.vulnerability ? vulnerability.vulnerability.name : vulnerability.cisRequirement.name, @@ -95,9 +95,30 @@ export class DetailsTablesComponent implements OnInit { codeBug: this.codeBugTracker, networkBug: this.networkBugTracker, codeProject: vulnerability.codeProject?.name, + codeProjectBranch: vulnerability.codeProjectBranch, }; - this.vulnerabilitiesPojo.push(vuln); - this.source = new LocalDataSource(this.vulnerabilitiesPojo); + this.vulnerabilitiesPojo.push(vuln1); + const groupedVulnerabilities: { [key: string]: ExtendedVulnerability } = {}; + + this.vulnerabilitiesPojo.forEach((vuln) => { + // Tworzenie klucza na podstawie wybranych atrybutów + const key = `${vuln.name}-${vuln.description}-${vuln.location}`; + + if (!groupedVulnerabilities[key]) { + // Jeżeli nie ma jeszcze takiego klucza, tworzymy nowy obiekt ExtendedVulnerability + const extendedVuln = new ExtendedVulnerability(); + Object.assign(extendedVuln, vuln); + extendedVuln.codeProjectBranches = [vuln.codeProjectBranch]; + groupedVulnerabilities[key] = extendedVuln; + } else { + // Jeżeli klucz już istnieje, dodajemy tylko codeProjectBranch do listy + groupedVulnerabilities[key].codeProjectBranches.push(vuln.codeProjectBranch); + } + }); + + // Konwersja do tablicy + const extendedVulnerabilities: ExtendedVulnerability[] = Object.values(groupedVulnerabilities); + this.source = new LocalDataSource(extendedVulnerabilities); } }); } From d82ebfa81b9da798852061b65329a3b20a7bc489 Mon Sep 17 00:00:00 2001 From: Grzegorz Siewruk Date: Wed, 8 Nov 2023 09:08:33 +0100 Subject: [PATCH 2/3] adjusted frontend, fixed bugs --- package.json | 2 +- src/app/@core/Model/DetailStats.ts | 6 + src/app/@core/service/ShowProjectService.ts | 9 + .../details-carts.component.html | 9 +- .../details-carts.component.scss | 13 ++ .../details-carts/details-carts.component.ts | 19 +- .../project-details.component.html | 55 +++--- .../project-details.component.spec.ts | 2 +- .../vuln-trend-pie.component.ts | 85 ++------- .../show-project/show-project.component.html | 55 +----- .../show-project/show-project.component.scss | 18 ++ .../show-project/show-project.component.ts | 9 +- .../pages/show-project/show-project.module.ts | 4 + .../status-card/status-card.component.scss | 172 ++++++++++++++++++ .../status-card/status-card.component.spec.ts | 23 +++ .../status-card/status-card.component.ts | 75 ++++++++ .../trend-chart/trend-chart.component.html | 25 +++ .../trend-chart/trend-chart.component.scss | 73 ++++++++ .../trend-chart/trend-chart.component.spec.ts | 23 +++ .../trend-chart/trend-chart.component.ts | 34 ++++ tslint.json | 2 +- 21 files changed, 553 insertions(+), 160 deletions(-) create mode 100644 src/app/@core/Model/DetailStats.ts create mode 100644 src/app/pages/show-project/status-card/status-card.component.scss create mode 100644 src/app/pages/show-project/status-card/status-card.component.spec.ts create mode 100644 src/app/pages/show-project/status-card/status-card.component.ts create mode 100644 src/app/pages/show-project/trend-chart/trend-chart.component.html create mode 100644 src/app/pages/show-project/trend-chart/trend-chart.component.scss create mode 100644 src/app/pages/show-project/trend-chart/trend-chart.component.spec.ts create mode 100644 src/app/pages/show-project/trend-chart/trend-chart.component.ts diff --git a/package.json b/package.json index f883643..aa0777f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mixeway-frontend", - "version": "1.8.1", + "version": "1.8.2", "license": "MIT", "scripts": { "ng": "ng", diff --git a/src/app/@core/Model/DetailStats.ts b/src/app/@core/Model/DetailStats.ts new file mode 100644 index 0000000..1af3f06 --- /dev/null +++ b/src/app/@core/Model/DetailStats.ts @@ -0,0 +1,6 @@ +export class DetailStats { + detectedVulnerabilities: number; + resolvedVulnerabilities: number; + avgTimeToFix: number; + resolvedCriticals: number; +} diff --git a/src/app/@core/service/ShowProjectService.ts b/src/app/@core/service/ShowProjectService.ts index 78b7172..472c5f2 100644 --- a/src/app/@core/service/ShowProjectService.ts +++ b/src/app/@core/service/ShowProjectService.ts @@ -28,6 +28,7 @@ import {IaasApiType} from '../Model/IaasApiType'; import {ProjectStats} from '../Model/ProjectStats'; import {ProjectAudit} from '../Model/ProjectAudit'; import {ProjectDetailsAudit} from '../Model/ProjectDetailsAudit'; +import {DetailStats} from '../Model/DetailStats'; @Injectable({ providedIn: 'root', @@ -507,4 +508,12 @@ export class ShowProjectService { catchError(this.errorHandl), ); } + + getDetailStats(projectid): Observable { + return this.http.get(environment.backend + '/show/project/' + projectid + '/detailstats' ) + .pipe( + retry(1), + catchError(this.errorHandl), + ); + } } diff --git a/src/app/pages/show-project/details-carts/details-carts.component.html b/src/app/pages/show-project/details-carts/details-carts.component.html index 00b8ba1..629ffec 100644 --- a/src/app/pages/show-project/details-carts/details-carts.component.html +++ b/src/app/pages/show-project/details-carts/details-carts.component.html @@ -5,7 +5,7 @@ Detected Vulnerabilities - {{details?.createdVulnerabilities}} + {{details?.detectedVulnerabilities}}
@@ -27,18 +27,19 @@ Avg. Time to Fix [days] - {{details?.averageTimeToResolve}} + {{details?.avgTimeToFix == 0 ? 'n/a' : details?.avgTimeToFix}}
- Resolved Criticals + Resolved Criticals [%] - {{details?.percentCriticalsSolved}} + {{details?.resolvedCriticals}} %
+ diff --git a/src/app/pages/show-project/details-carts/details-carts.component.scss b/src/app/pages/show-project/details-carts/details-carts.component.scss index e69de29..f4f33ba 100644 --- a/src/app/pages/show-project/details-carts/details-carts.component.scss +++ b/src/app/pages/show-project/details-carts/details-carts.component.scss @@ -0,0 +1,13 @@ + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + div{ + margin-top:0px; + padding-top:0; + } + nb-card-body { + font-size: 1.3rem; + font-weight: bold; + } +} diff --git a/src/app/pages/show-project/details-carts/details-carts.component.ts b/src/app/pages/show-project/details-carts/details-carts.component.ts index 1c10d0a..11f66d4 100644 --- a/src/app/pages/show-project/details-carts/details-carts.component.ts +++ b/src/app/pages/show-project/details-carts/details-carts.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import {ShowProjectService} from '../../../@core/service/ShowProjectService'; import {ActivatedRoute, Router} from '@angular/router'; import {ProjectDetailsAudit} from '../../../@core/Model/ProjectDetailsAudit'; +import {DetailStats} from '../../../@core/Model/DetailStats'; @Component({ selector: 'ngx-details-carts', @@ -9,7 +10,7 @@ import {ProjectDetailsAudit} from '../../../@core/Model/ProjectDetailsAudit'; styleUrls: ['./details-carts.component.scss'], }) export class DetailsCartsComponent implements OnInit { - details: ProjectDetailsAudit; + details: DetailStats; _entityId: any; constructor(private showProjectService: ShowProjectService, private _route: ActivatedRoute, @@ -21,20 +22,14 @@ export class DetailsCartsComponent implements OnInit { } ngOnInit(): void { - this.loadTrendChartData(); + this.loadDetails(); } - loadTrendChartData() { - return this.showProjectService.getProjectVulnDetailsAudit(this._entityId).subscribe(data => { + loadDetails() { + return this.showProjectService.getDetailStats(this._entityId).subscribe(data => { this.details = data; - if (Number(this.details.averageTimeToResolve) > 0) { - const originalNumber: number = Number(this.details.averageTimeToResolve); - const dividedNumber: number = originalNumber / 24; - const roundedNumber: number = parseFloat(dividedNumber.toFixed(1)); - this.details.averageTimeToResolve = roundedNumber + ''; - } else { - this.details.averageTimeToResolve = 'n/a'; - } }); } + + } diff --git a/src/app/pages/show-project/project-details/project-details.component.html b/src/app/pages/show-project/project-details/project-details.component.html index e665347..ebe5261 100644 --- a/src/app/pages/show-project/project-details/project-details.component.html +++ b/src/app/pages/show-project/project-details/project-details.component.html @@ -1,25 +1,38 @@ - - Project summary - -
-
-
-
-

Assets:

{{projectStats?.assets}}


-

Code Repos:

{{projectStats?.repos}}


-

WebApps:

{{projectStats?.webApps}}


-

Dependencies:

{{projectStats?.libs}}


-
-
-
-
Vulnerabilities detected

- {{projectStats?.vulnCrit}}   - {{projectStats?.vulnMedium}}   - {{projectStats?.vulnLow}}  

- View more info -
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
- +
+ +
+
LIGHT
+
ON
+
diff --git a/src/app/pages/show-project/project-details/project-details.component.spec.ts b/src/app/pages/show-project/project-details/project-details.component.spec.ts index 2c879bd..71a12f2 100644 --- a/src/app/pages/show-project/project-details/project-details.component.spec.ts +++ b/src/app/pages/show-project/project-details/project-details.component.spec.ts @@ -8,7 +8,7 @@ describe('ProjectDetailsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ProjectDetailsComponent ] + declarations: [ ProjectDetailsComponent ], }) .compileComponents(); }); diff --git a/src/app/pages/show-project/show-project-details-chart/vuln-trend-pie.component.ts b/src/app/pages/show-project/show-project-details-chart/vuln-trend-pie.component.ts index 2d200f1..f397306 100644 --- a/src/app/pages/show-project/show-project-details-chart/vuln-trend-pie.component.ts +++ b/src/app/pages/show-project/show-project-details-chart/vuln-trend-pie.component.ts @@ -28,6 +28,17 @@ export class VulnTrendPieComponent implements OnDestroy, OnInit, AfterViewInit, } ngOnChanges(changes: SimpleChanges) { + if (changes['severities']) { + this.drawChart(); + } + } + + ngOnInit() { + } + ngAfterViewInit() { + this.cdr.detectChanges(); + } + drawChart() { this.options = { xAxis: { type: 'category', @@ -51,78 +62,10 @@ export class VulnTrendPieComponent implements OnDestroy, OnInit, AfterViewInit, }; } - ngOnInit() { - } - ngAfterViewInit() { - } - drawChart() { - if (this.severities) { - this.themeSubscription = this.theme.getJsTheme().subscribe(config => { - const colors = config.variables; - const echarts: any = config.variables.echarts; - this.options = { - tooltip: { - trigger: 'item', - }, - legend: { - // Try 'horizontal' - orient: 'vertical', - left: 10, - top: 'center', - }, - color: [colors.successLight, colors.primaryLight, colors.warningLight, colors.dangerLight].reverse(), - series: [ - { - name: 'Access From', - type: 'pie', - radius: ['40%', '90%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 10, - borderColor: '#fff', - borderWidth: 2, - }, - label: { - show: false, - position: 'center', - }, - emphasis: { - label: { - show: true, - fontSize: 40, - fontWeight: 'bold', - }, - }, - labelLine: { - show: false, - }, - data: [ - { - 'name': 'Critic', - 'value': this.severities?.Critical, - }, - { - 'name': 'High', - 'value': this.severities?.High, - }, - { - 'name': 'Medium', - 'value': this.severities?.Medium, - }, - { - 'name': 'Low', - 'value': this.severities?.Low, - }, - ], - }, - ], - }; - }); - } - } - ngOnDestroy(): void { - this.themeSubscription.unsubscribe(); + if (this.themeSubscription) { + this.themeSubscription.unsubscribe(); + } } } diff --git a/src/app/pages/show-project/show-project.component.html b/src/app/pages/show-project/show-project.component.html index 628610b..07a2dd6 100644 --- a/src/app/pages/show-project/show-project.component.html +++ b/src/app/pages/show-project/show-project.component.html @@ -1,5 +1,5 @@
-
+

{{ risk?.projectName }}

@@ -19,11 +19,11 @@

{{ risk?.projectName }}

+ `, +}) +export class StatusCardComponent implements OnInit { + @Input() + projectStats: ProjectStats; + @Input() + projectInfo: ProjectInfo; + grade: String; + color: String; + + ngOnInit(): void { + if (this.projectInfo.risk === 0) { + this.grade = 'A+'; + this.color = 'success'; + } else if (this.projectInfo.risk < 20) { + this.grade = 'A'; + this.color = 'success'; + } else if (this.projectInfo.risk < 40) { + this.grade = 'B'; + this.color = 'warning'; + } else if (this.projectInfo.risk < 70) { + this.grade = 'C'; + this.color = 'danger'; + } else { + this.grade = 'D'; + this.color = 'danger'; + } + } +} diff --git a/src/app/pages/show-project/trend-chart/trend-chart.component.html b/src/app/pages/show-project/trend-chart/trend-chart.component.html new file mode 100644 index 0000000..1b6b490 --- /dev/null +++ b/src/app/pages/show-project/trend-chart/trend-chart.component.html @@ -0,0 +1,25 @@ +
+
+ + + + + + +
+
+ +
+ +
+

+ +
+
+ + + + +
+ +
diff --git a/src/app/pages/show-project/trend-chart/trend-chart.component.scss b/src/app/pages/show-project/trend-chart/trend-chart.component.scss new file mode 100644 index 0000000..ccdaf98 --- /dev/null +++ b/src/app/pages/show-project/trend-chart/trend-chart.component.scss @@ -0,0 +1,73 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .summary-container { + display: flex; + flex-wrap: wrap; + flex: 1; + background-color: nb-theme(background-basic-color-2); + justify-content: space-between; + padding: 1.5rem 4rem 1rem; + border: 1px solid nb-theme(border-basic-color-3); + border-left: none; + border-right: none; + } + .chart-container { + flex: 1; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + } + nb-card { + position: relative; + } + + .flip-icon { + position: absolute; + right: 0.625rem; + top: 1rem; + @include nb-rtl(right, auto); + @include nb-rtl(left, 0.625rem); + cursor: pointer; + } + + ::ng-deep .flipped { + .back-container { + .flip-icon { + transform: scaleX(-1); + } + } + + .front-container { + .flip-icon { + display: none; + } + } + } + + ngx-summary-card { + display: flex; + flex-direction: column; + flex: 1; + } + + ::ng-deep nb-card-body { + overflow: hidden; + display: flex; + } +} + +::ng-deep .ng-invalid:not(form) { + background-color: lightcoral; +} +::ng-deep .right { + float: right; +} +h3 { + text-align: center; +} +:host ::ng-deep ng2-smart-table table tr td { + font-size:0.9em; + word-break: break-all; +} diff --git a/src/app/pages/show-project/trend-chart/trend-chart.component.spec.ts b/src/app/pages/show-project/trend-chart/trend-chart.component.spec.ts new file mode 100644 index 0000000..af620fd --- /dev/null +++ b/src/app/pages/show-project/trend-chart/trend-chart.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TrendChartComponent } from './trend-chart.component'; + +describe('TrendChartComponent', () => { + let component: TrendChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TrendChartComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TrendChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/show-project/trend-chart/trend-chart.component.ts b/src/app/pages/show-project/trend-chart/trend-chart.component.ts new file mode 100644 index 0000000..865335d --- /dev/null +++ b/src/app/pages/show-project/trend-chart/trend-chart.component.ts @@ -0,0 +1,34 @@ +import {ChangeDetectorRef, Component, Input, NgZone, OnInit, ViewChild} from '@angular/core'; +import {Severities} from '../../../@core/Model/Severities'; + +@Component({ + selector: 'ngx-trend-chart', + templateUrl: './trend-chart.component.html', + styleUrls: ['./trend-chart.component.scss'], +}) +export class TrendChartComponent implements OnInit { + + @Input() showDetailsTemplate: boolean; + flipped: boolean = false; + counter: number = 0; + @Input() severities: Severities; + @ViewChild('pieChart') pieChartComponent; + constructor( private cdr: ChangeDetectorRef, private zone: NgZone) { } + + ngOnInit(): void { + } + toggleView() { + this.flipped = !this.flipped; + } + + onTabChange() { + if (this.counter !== 0) { + this.flipped = true; + this.zone.run(() => { + this.pieChartComponent.drawChart(); + this.cdr.detectChanges(); + }); + } + this.counter++; + } +} diff --git a/tslint.json b/tslint.json index 366028d..dc09625 100644 --- a/tslint.json +++ b/tslint.json @@ -39,7 +39,7 @@ "member-access": false, "no-arg": true, "no-console": [ - true, + false, "debug", "log", "time", From 2a4aab195ae83564d9a4bcf90bf456f9e142a338 Mon Sep 17 00:00:00 2001 From: Grzegorz Siewruk Date: Wed, 8 Nov 2023 09:12:59 +0100 Subject: [PATCH 3/3] removing trend from configure --- CHANGELOG.md | 9 +++++ .../show-project/show-project.component.html | 38 +------------------ .../show-project/show-project.component.ts | 1 - 3 files changed, 10 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 694eff3..a9cf2bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## 1.8.2 (2023-11-08) + +#### New Features +* Additional statistics such as average time to fix, percent of solved critical vulnerabilities +* New widgets in show-project tabs replacing bugable gauge chart + +#### Bug Fixes +* removing trend area in configuration of the project space + ## 1.8.1 (2023-09-21) #### New Features diff --git a/src/app/pages/show-project/show-project.component.html b/src/app/pages/show-project/show-project.component.html index 07a2dd6..9fc75df 100644 --- a/src/app/pages/show-project/show-project.component.html +++ b/src/app/pages/show-project/show-project.component.html @@ -32,43 +32,7 @@

{{ risk?.projectName }}