Skip to content

Commit 2a3489f

Browse files
elmilan06elmilan06
committed
feat: implement timeline visualization for compliance evaluations
1 parent b31b8c6 commit 2a3489f

51 files changed

Lines changed: 336 additions & 794 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

frontend/src/app/compliance/compliance-evaluations-view/compliance-evaluations-view.component.html renamed to frontend/src/app/compliance/compliance-evaluation-history-view/compliance-evaluation-history-view.component.html

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<!--<ng-container *ngIf="evaluations">
2-
<div class="container-fluid p-3">
3-
<div echarts
4-
[options]="chartOption"
5-
class="timeline-chart"
6-
(chartInit)="onChartInit($event)">
7-
</div>
8-
</div>
9-
</ng-container>-->
10-
111
<div class="control-summary-card m-3 bg-light" *ngIf="currentEvaluation && !loading">
122
<div class="control-summary-header" >
133
<div style="display: flex; align-items: center; gap: 8px;">
@@ -38,7 +28,6 @@ <h6 class="d-flex align-items-center text-blue-800 font-weight-light">
3828
<label class="text-blue-800 font-weight-light">Solution:</label>
3929
<i class="font-size-sm text-dark" [ngClass]="!showSolution ? 'icon-arrow-right32' : 'icon-arrow-down32'"></i>
4030
</div>
41-
4231
<p *ngIf="showSolution">
4332
{{ currentEvaluation.controlSolution }}
4433
</p>
@@ -49,7 +38,6 @@ <h6 class="d-flex align-items-center text-blue-800 font-weight-light">
4938
<label class="text-blue-800 font-weight-light">Remediation:</label>
5039
<i class="font-size-sm text-dark" [ngClass]="!showRemediation ? 'icon-arrow-right32' : 'icon-arrow-down32'"></i>
5140
</div>
52-
5341
<p *ngIf="showRemediation">
5442
{{ currentEvaluation.controlRemediation }}
5543
</p>
@@ -83,6 +71,7 @@ <h6 class="d-flex align-items-center text-blue-800 font-weight-light">
8371
<div class="h-100 w-100 d-flex justify-content-center align-items-center flex-column data-not-found">
8472
<div class="event-icon utm-icon-lg utm-icon-light"></div>
8573
<h6 class="mt-2 text-justify font-weight-light">
86-
No data found </h6>
74+
No data found
75+
</h6>
8776
</div>
8877
</div>

‎frontend/src/app/compliance/compliance-evaluation-history-view/compliance-evaluation-history-view.component.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.control-summary-card {
2+
border: 1px solid #ddd;
3+
border-radius: 10px;
4+
padding: 14px 18px;
5+
background: #fff;
6+
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
7+
display: flex;
8+
flex-direction: column;
9+
gap: 10px;
10+
}
11+
12+
.control-summary-header {
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
}
17+
18+
.control-status {
19+
padding: 3px 8px;
20+
border-radius: 4px;
21+
font-size: 12px;
22+
font-weight: 600;
23+
}
24+
25+
.control-status.COMPLIANT {
26+
background: #e6f7e6;
27+
color: #2e7d32;
28+
}
29+
30+
.control-status.NON_COMPLIANT {
31+
background: #fdecea;
32+
color: #c62828;
33+
}
34+
35+
.control-status.NOT_EVALUATED {
36+
background: #e9e9e9;
37+
}
38+
39+
.data-not-found {
40+
color: rgba(0, 75, 139, 0.30) !important;
41+
min-height: 100vh
42+
}

‎frontend/src/app/compliance/compliance-evaluation-history-view/compliance-evaluation-history-view.component.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import {Component, OnDestroy, OnInit} from '@angular/core';
2+
import {Subject} from 'rxjs';
3+
import {filter, takeUntil} from 'rxjs/operators';
4+
import {ComplianceStatusExtendedEnum} from '../shared/enums/compliance-status.enum';
5+
import {ComplianceStrategyEnum} from '../shared/enums/compliance-strategy.enum';
6+
import {CpControlConfigService} from '../shared/services/cp-control-config.service';
7+
import {ComplianceControlEvaluationHistoryType} from '../shared/type/compliance-control-evaluation-history.type';
8+
import {ComplianceControlLatestEvaluationType} from '../shared/type/compliance-control-latest-evaluation.type';
9+
10+
@Component({
11+
selector: 'app-compliance-evaluation-history-view',
12+
templateUrl: './compliance-evaluation-history-view.component.html',
13+
styleUrls: ['./compliance-evaluation-history-view.component.scss']
14+
})
15+
export class ComplianceEvaluationHistoryViewComponent implements OnInit, OnDestroy {
16+
controlId: number;
17+
currentEvaluation: ComplianceControlLatestEvaluationType;
18+
evaluationsHistory: ComplianceControlEvaluationHistoryType[];
19+
loading = false;
20+
showDetails = false;
21+
showRemediation = false;
22+
showSolution = false;
23+
selectedEvaluation: ComplianceControlEvaluationHistoryType;
24+
destroy$: Subject<void> = new Subject<void>();
25+
26+
ComplianceStatusExtendedEnum = ComplianceStatusExtendedEnum;
27+
ComplianceStrategyEnum = ComplianceStrategyEnum;
28+
29+
constructor(private cpControlConfigService: CpControlConfigService) {
30+
}
31+
32+
ngOnInit() {
33+
this.loading = true;
34+
this.cpControlConfigService.onLoadControl$
35+
.pipe(takeUntil(this.destroy$),
36+
filter(params => !!params),
37+
).subscribe(params => {
38+
this.currentEvaluation = params.template;
39+
if (this.currentEvaluation) {
40+
this.loadReport(params);
41+
}
42+
43+
});
44+
}
45+
46+
loadReport(params: any) {
47+
this.showDetails = false;
48+
this.controlId = params.template && params.template.id ? params.template.id : null;
49+
this.getEvaluations();
50+
}
51+
52+
getEvaluations() {
53+
if (this.controlId) {
54+
this.loading = true;
55+
this.cpControlConfigService.evaluationsByControl(this.controlId)
56+
.subscribe(response => {
57+
this.evaluationsHistory = response.body.evaluations;
58+
this.loading = false;
59+
});
60+
}
61+
}
62+
63+
ngOnDestroy() {
64+
this.destroy$.next();
65+
this.destroy$.complete();
66+
}
67+
68+
showEvaluationDetails(evaluation: ComplianceControlEvaluationHistoryType) {
69+
this.showDetails = true;
70+
this.selectedEvaluation = evaluation;
71+
}
72+
}

frontend/src/app/compliance/compliance-query-evaluations-view/components/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.css renamed to frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,3 @@
1717
.border-left-neutral {
1818
border-left: 5px solid #e9e9e9 !important;
1919
}
20-
21-
button {
22-
white-space: nowrap;
23-
}

frontend/src/app/compliance/compliance-query-evaluations-view/components/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.html renamed to frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,5 @@
4343
<app-utm-json-detail-view [rowDocument]="query.evidence" *ngIf="query.evidence"></app-utm-json-detail-view>
4444
<span class="font-size-base" *ngIf="!query.evidence">The query returned no results.</span>
4545
</div>
46-
4746
</div>
4847
</div>

frontend/src/app/compliance/compliance-query-evaluations-view/components/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.ts renamed to frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluation-detail/compliance-query-evaluation-detail.component.ts

File renamed without changes.

frontend/src/app/compliance/compliance-query-evaluations-view/compliance-query-evaluations-view.component.html renamed to frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluations-view.component.html

File renamed without changes.

frontend/src/app/compliance/compliance-query-evaluations-view/compliance-query-evaluations-view.component.scss renamed to frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluations-view.component.scss

File renamed without changes.

‎frontend/src/app/compliance/compliance-evaluation-history-view/compliance-query-evaluations-view/compliance-query-evaluations-view.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component, Input} from '@angular/core';
2+
import {ComplianceStatusExtendedEnum} from '../../shared/enums/compliance-status.enum';
3+
import {ComplianceControlEvaluationHistoryType} from '../../shared/type/compliance-control-evaluation-history.type';
4+
import {ComplianceQueryEvaluationType} from '../../shared/type/compliance-query-evaluation.type';
5+
6+
@Component({
7+
selector: 'app-compliance-query-evaluations-view',
8+
templateUrl: './compliance-query-evaluations-view.component.html',
9+
styleUrls: ['./compliance-query-evaluations-view.component.scss']
10+
})
11+
export class ComplianceQueryEvaluationsViewComponent {
12+
@Input() evaluation: ComplianceControlEvaluationHistoryType;
13+
queryDetail: ComplianceQueryEvaluationType;
14+
15+
ComplianceStatusExtendedEnum = ComplianceStatusExtendedEnum;
16+
}

‎frontend/src/app/compliance/compliance-evaluations-view/compliance-evaluations-view.component.scss‎

Lines changed: 0 additions & 205 deletions
This file was deleted.

0 commit comments

Comments
 (0)