Skip to content

Commit 110ca6f

Browse files
mjabascal10mjabascal10
committed
feat(alert-detail): enhance alert detail component with improved layout and event handling
Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>
1 parent eed2d4c commit 110ca6f

File tree

4 files changed

+191
-164
lines changed

4 files changed

+191
-164
lines changed

‎frontend/src/app/data-management/alert-management/alert-full-detail/alert-full-detail.component.html‎

Lines changed: 155 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -15,151 +15,153 @@
1515
</button>
1616
</div>
1717

18-
<div class="d-flex justify-content-center align-items-start w-100 m-0 d-print-block">
19-
<div class="compliance-front-page">
20-
<div *ngIf="account" class="prepared print-front-align">
21-
<h6 class="font-weight-semibold text-uppercase">Prepared by</h6>
22-
<h5 class="mt-1">{{account.email}}</h5>
23-
<div class="line-large"></div>
24-
</div>
18+
<div class="d-flex flex-column h-100 overflow-auto">
19+
20+
<div class="d-flex justify-content-center align-items-start w-100 m-0 d-print-block">
21+
<div class="compliance-front-page">
22+
<div *ngIf="account" class="prepared print-front-align">
23+
<h6 class="font-weight-semibold text-uppercase">Prepared by</h6>
24+
<h5 class="mt-1">{{account.email}}</h5>
25+
<div class="line-large"></div>
26+
</div>
2527

26-
<div *ngIf="account && alert" class="report-name print-front-align">
27-
<h3 class="">{{getAlertName()}}</h3>
28-
<div class="line"></div>
29-
<h5 class="mt-5 ">Generated on {{date | date:'short':'UTC'}}</h5>
28+
<div *ngIf="account && alert" class="report-name print-front-align">
29+
<h3 class="">{{getAlertName()}}</h3>
30+
<div class="line"></div>
31+
<h5 class="mt-5 ">Generated on {{date | date:'short':'UTC'}}</h5>
32+
</div>
33+
<img [src]="sanitizer.bypassSecurityTrustUrl(cover)"
34+
*ngIf="cover;else loadImage"
35+
class="img-front-page"
36+
alt="Login" data-loading="lazy">
37+
<ng-template #loadImage>
38+
<i class="icon-image4" style="font-size: 100px;opacity: 0.1"></i>
39+
</ng-template>
3040
</div>
31-
<img [src]="sanitizer.bypassSecurityTrustUrl(cover)"
32-
*ngIf="cover;else loadImage"
33-
class="img-front-page"
34-
alt="Login" data-loading="lazy">
35-
<ng-template #loadImage>
36-
<i class="icon-image4" style="font-size: 100px;opacity: 0.1"></i>
37-
</ng-template>
3841
</div>
39-
</div>
4042

41-
<div class="d-flex justify-content-center align-items-start w-100 m-0">
42-
<div [ngClass]="{'card':!printFormat}" class="body-front-page ">
43-
<div *ngIf="alert" [ngClass]="{'p-2':!printFormat}">
44-
<div class="w-100">
45-
<app-alert-description [alert]="alert"></app-alert-description>
46-
<app-alert-severity-description [alert]="alert"></app-alert-severity-description>
47-
<app-alert-category *ngIf="alert" [alert]="alert"></app-alert-category>
48-
<app-alert-proposed-solution [alert]="alert"
49-
class="w-100">
50-
</app-alert-proposed-solution>
51-
52-
<div *ngIf="reference.length>0" class="w-100 mt-2 d-flex flex-column">
53-
<span class="font-weight-semibold">{{reference.length > 1 ? 'References' : 'Reference'}}:</span>
54-
<a *ngFor="let ref of reference, let index=index;" [href]="ref" class="font-weight-light text-blue-800"
55-
target="_blank">{{(index + 1) + '. ' + ref}}</a>
56-
</div>
43+
<div class="d-flex justify-content-center align-items-start w-100 m-0">
44+
<div [ngClass]="{'card':!printFormat}" class="body-front-page ">
45+
<div *ngIf="alert" [ngClass]="{'p-2':!printFormat}">
46+
<div class="w-100">
47+
<app-alert-description [alert]="alert"></app-alert-description>
48+
<app-alert-severity-description [alert]="alert"></app-alert-severity-description>
49+
<app-alert-category *ngIf="alert" [alert]="alert"></app-alert-category>
50+
<app-alert-proposed-solution [alert]="alert"
51+
class="w-100">
52+
</app-alert-proposed-solution>
5753

58-
<div class="utm-box mt-4 p-3 border-1 border-blue-800 position-relative flex-grow-1">
54+
<div *ngIf="reference.length>0" class="w-100 mt-2 d-flex flex-column">
55+
<span class="font-weight-semibold">{{reference.length > 1 ? 'References' : 'Reference'}}:</span>
56+
<a *ngFor="let ref of reference, let index=index;" [href]="ref" class="font-weight-light text-blue-800"
57+
target="_blank">{{(index + 1) + '. ' + ref}}</a>
58+
</div>
59+
60+
<div class="utm-box mt-4 p-3 border-1 border-blue-800 position-relative flex-grow-1">
5961
<span class="p-1 utm-box-label">
6062
Detail
6163
</span>
62-
<div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
63-
<span class="text-blue-800 font-weight-light has-minimum-width">Rule:</span>&nbsp;
64-
<app-data-field-render [data]="alert" [field]="getFieldByName(ALERT_NAME)"></app-data-field-render>
65-
</div>
66-
<div class="alert-details w-100 d-flex justify-content-start mb-2">
67-
<span class="text-blue-800 font-weight-light has-minimum-width">ID:</span>&nbsp;
68-
<app-data-field-render [data]="alert" [field]="getFieldByName(CASE_ID_FIELD)"></app-data-field-render>
69-
<span (click)="navigateToEvents()" *ngIf="countRelatedEvents>0 && printFormat" class="text-blue-800 cursor-pointer ml-2">
64+
<div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
65+
<span class="text-blue-800 font-weight-light has-minimum-width">Rule:</span>&nbsp;
66+
<app-data-field-render [data]="alert" [field]="getFieldByName(ALERT_NAME)"></app-data-field-render>
67+
</div>
68+
<div class="alert-details w-100 d-flex justify-content-start mb-2">
69+
<span class="text-blue-800 font-weight-light has-minimum-width">ID:</span>&nbsp;
70+
<app-data-field-render [data]="alert" [field]="getFieldByName(CASE_ID_FIELD)"></app-data-field-render>
71+
<span (click)="navigateToEvents()" *ngIf="countRelatedEvents>0 && printFormat" class="text-blue-800 cursor-pointer ml-2">
7072
(view <strong>{{countRelatedEvents < 100 ? countRelatedEvents : ' last 100 ' }}</strong> {{countRelatedEvents > 1 ? 'logs' : 'log'}}
71-
related)
73+
related)
7274
</span>
75+
</div>
76+
<div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
77+
<span class="text-blue-800 font-weight-light has-minimum-width">Status:</span>&nbsp;
78+
<app-alert-status
79+
[alert]="alert"
80+
[dataType]="dataType"
81+
[showDrop]="false"
82+
[statusField]="STATUS_FIELD">
83+
</app-alert-status>
84+
85+
</div>
86+
<div class="w-100 alert-status-change">
87+
<app-alert-view-last-change [action]="alertActionEnum.STATUS"
88+
[alert]="alert"></app-alert-view-last-change>
89+
</div>
90+
91+
<div class="alert-details w-100 d-flex justify-content-start align-items-start mb-2 mt-2">
92+
<span class="text-blue-800 font-weight-light has-minimum-width">Severity:</span>&nbsp;
93+
<app-data-field-render [data]="alert" [field]="getFieldByName(SEVERITY_FIELD)"></app-data-field-render>
94+
</div>
95+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
96+
<span class="text-blue-800 font-weight-light has-minimum-width">Comment:</span>&nbsp;
97+
<app-alert-apply-note [alert]="alert"
98+
[showNote]="true"></app-alert-apply-note>
99+
</div>
100+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
101+
<span class="text-blue-800 font-weight-light has-minimum-width">Tags:</span>&nbsp;
102+
<app-alert-tags-apply
103+
[alert]="alert"
104+
[tags]="tags"
105+
[showTagsLabel]="false"></app-alert-tags-apply>
106+
</div>
107+
<div *ngIf="isIgnoredAlert()" class="alert-details w-100 d-flex justify-content-start mb-2">
108+
<span class="text-blue-800 font-weight-light has-minimum-width">Observation:</span>&nbsp;
109+
<app-data-field-render [data]="alert" [field]="getFieldByName(OBSERVATION_FIELD)"></app-data-field-render>
110+
</div>
111+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
112+
<span class="text-blue-800 font-weight-light has-minimum-width">Category:</span>&nbsp;
113+
<app-data-field-render [data]="alert" [field]="getFieldByName(CATEGORY_FIELD)"></app-data-field-render>
114+
</div>
115+
<!-- <div class="alert-details w-100 d-flex justify-content-start mb-2 ">-->
116+
<!-- <span class="text-blue-800 font-weight-light has-minimum-width">Method:</span>&nbsp;-->
117+
<!-- <app-data-field-render [field]="getFieldByName(METHOD_FIELD)" [data]="alert"></app-data-field-render>-->
118+
<!-- </div>-->
119+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
120+
<span class="text-blue-800 font-weight-light has-minimum-width">Sensor:</span>&nbsp;
121+
<app-data-field-render [data]="alert" [field]="getFieldByName(SENSOR_FIELD)"></app-data-field-render>
122+
</div>
123+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
124+
<span class="text-blue-800 font-weight-light has-minimum-width">Protocol:</span>&nbsp;
125+
<app-data-field-render [data]="alert" [field]="getFieldByName(PROTOCOL_FIELD)"></app-data-field-render>
126+
</div>
127+
<div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2 ">
128+
<span class="text-blue-800 font-weight-light has-minimum-width">Date:</span>&nbsp;
129+
<app-data-field-render [data]="alert" [field]="getFieldByName(TIMESTAMP_FIELD)"></app-data-field-render>
130+
</div>
131+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
132+
<span class="text-blue-800 font-weight-light has-minimum-width">Generated by:</span>&nbsp;
133+
<app-data-field-render [data]="alert" [field]="getFieldByName(GENERATED_BY_FIELD)"></app-data-field-render>
134+
</div>
135+
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
136+
<span class="text-blue-800 font-weight-light has-minimum-width">Tactic :</span>&nbsp;
137+
<app-data-field-render [data]="alert" [field]="getFieldByName(ALERT_TACTIC_FIELD)"></app-data-field-render>
138+
</div>
139+
<div class="alert-details w-100 d-flex justify-content-start mb-2 align-items-start">
140+
<span class="text-blue-800 font-weight-light has-minimum-width">Last change:</span>&nbsp;
141+
<app-alert-view-last-change [action]="null"
142+
[alert]="alert"
143+
class=""></app-alert-view-last-change>
144+
</div>
145+
146+
</div>
147+
148+
<div class="d-flex w-100 justify-content-between mb-3">
149+
<app-alert-host-detail [alert]="alert" type="source" class="w-45"></app-alert-host-detail>
150+
<app-alert-host-detail [alert]="alert" type="destination" class="w-45"></app-alert-host-detail>
73151
</div>
74-
<div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
75-
<span class="text-blue-800 font-weight-light has-minimum-width">Status:</span>&nbsp;
76-
<app-alert-status
77-
[alert]="alert"
78-
[dataType]="dataType"
79-
[showDrop]="false"
80-
[statusField]="STATUS_FIELD">
81-
</app-alert-status>
82-
83-
</div>
84-
<div class="w-100 alert-status-change">
85-
<app-alert-view-last-change [action]="alertActionEnum.STATUS"
86-
[alert]="alert"></app-alert-view-last-change>
87-
</div>
88-
89-
<div class="alert-details w-100 d-flex justify-content-start align-items-start mb-2 mt-2">
90-
<span class="text-blue-800 font-weight-light has-minimum-width">Severity:</span>&nbsp;
91-
<app-data-field-render [data]="alert" [field]="getFieldByName(SEVERITY_FIELD)"></app-data-field-render>
92-
</div>
93-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
94-
<span class="text-blue-800 font-weight-light has-minimum-width">Comment:</span>&nbsp;
95-
<app-alert-apply-note [alert]="alert"
96-
[showNote]="true"></app-alert-apply-note>
97-
</div>
98-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
99-
<span class="text-blue-800 font-weight-light has-minimum-width">Tags:</span>&nbsp;
100-
<app-alert-tags-apply
101-
[alert]="alert"
102-
[tags]="tags"
103-
[showTagsLabel]="false"></app-alert-tags-apply>
104-
</div>
105-
<div *ngIf="isIgnoredAlert()" class="alert-details w-100 d-flex justify-content-start mb-2">
106-
<span class="text-blue-800 font-weight-light has-minimum-width">Observation:</span>&nbsp;
107-
<app-data-field-render [data]="alert" [field]="getFieldByName(OBSERVATION_FIELD)"></app-data-field-render>
108-
</div>
109-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
110-
<span class="text-blue-800 font-weight-light has-minimum-width">Category:</span>&nbsp;
111-
<app-data-field-render [data]="alert" [field]="getFieldByName(CATEGORY_FIELD)"></app-data-field-render>
112-
</div>
113-
<!-- <div class="alert-details w-100 d-flex justify-content-start mb-2 ">-->
114-
<!-- <span class="text-blue-800 font-weight-light has-minimum-width">Method:</span>&nbsp;-->
115-
<!-- <app-data-field-render [field]="getFieldByName(METHOD_FIELD)" [data]="alert"></app-data-field-render>-->
116-
<!-- </div>-->
117-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
118-
<span class="text-blue-800 font-weight-light has-minimum-width">Sensor:</span>&nbsp;
119-
<app-data-field-render [data]="alert" [field]="getFieldByName(SENSOR_FIELD)"></app-data-field-render>
120-
</div>
121-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
122-
<span class="text-blue-800 font-weight-light has-minimum-width">Protocol:</span>&nbsp;
123-
<app-data-field-render [data]="alert" [field]="getFieldByName(PROTOCOL_FIELD)"></app-data-field-render>
124-
</div>
125-
<div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2 ">
126-
<span class="text-blue-800 font-weight-light has-minimum-width">Date:</span>&nbsp;
127-
<app-data-field-render [data]="alert" [field]="getFieldByName(TIMESTAMP_FIELD)"></app-data-field-render>
128-
</div>
129-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
130-
<span class="text-blue-800 font-weight-light has-minimum-width">Generated by:</span>&nbsp;
131-
<app-data-field-render [data]="alert" [field]="getFieldByName(GENERATED_BY_FIELD)"></app-data-field-render>
132-
</div>
133-
<div class="alert-details w-100 d-flex justify-content-start mb-2 ">
134-
<span class="text-blue-800 font-weight-light has-minimum-width">Tactic :</span>&nbsp;
135-
<app-data-field-render [data]="alert" [field]="getFieldByName(ALERT_TACTIC_FIELD)"></app-data-field-render>
136-
</div>
137-
<div class="alert-details w-100 d-flex justify-content-start mb-2 align-items-start">
138-
<span class="text-blue-800 font-weight-light has-minimum-width">Last change:</span>&nbsp;
139-
<app-alert-view-last-change [action]="null"
140-
[alert]="alert"
141-
class=""></app-alert-view-last-change>
142-
</div>
143-
144-
</div>
145-
146-
<div class="d-flex w-100 justify-content-between mb-3">
147-
<app-alert-host-detail [alert]="alert" type="source" class="w-45"></app-alert-host-detail>
148-
<app-alert-host-detail [alert]="alert" type="destination" class="w-45"></app-alert-host-detail>
149152
</div>
150-
</div>
151153

152154

153155

154-
<div class="mt-3" *ngIf="isIncident()">
156+
<div class="mt-3" *ngIf="isIncident()">
155157

156-
<app-alert-incident-detail [alert]="alert"></app-alert-incident-detail>
157-
</div>
158+
<app-alert-incident-detail [alert]="alert"></app-alert-incident-detail>
159+
</div>
158160

159-
<div class="w-100 mt-3" *ngIf="relatedTagsRules">
160-
<h5 class="card-title mb-2 mt-4">Tags</h5>
161-
<app-alert-rule-tag-related [tagsId]="relatedTagsRules"></app-alert-rule-tag-related>
162-
</div>
161+
<div class="w-100 mt-3" *ngIf="relatedTagsRules">
162+
<h5 class="card-title mb-2 mt-4">Tags</h5>
163+
<app-alert-rule-tag-related [tagsId]="relatedTagsRules"></app-alert-rule-tag-related>
164+
</div>
163165

164166
<div *ngIf="countRelatedEvents>0" class="w-100 mt-3 page-break">
165167
<h5 class="card-title mb-2 mt-4">Last log</h5>
@@ -179,36 +181,38 @@ <h5 class="card-title mb-2 mt-4">Last log</h5>
179181

180182

181183

182-
<div class="w-100 page-break" *ngIf="rows && rows.length>0">
183-
<h5 class="card-title mb-2 mt-4">Related events</h5>
184-
<div class="border-bottom-1 border-grey-100 pb-2" *ngFor="let row of rows">
185-
<app-analyzer-table-view [rowDocument]="row" [showControl]=" false"></app-analyzer-table-view>
184+
<div class="w-100 page-break" *ngIf="rows && rows.length>0">
185+
<h5 class="card-title mb-2 mt-4">Related events</h5>
186+
<div class="border-bottom-1 border-grey-100 pb-2" *ngFor="let row of rows">
187+
<app-analyzer-table-view [rowDocument]="row" [showControl]=" false"></app-analyzer-table-view>
188+
</div>
186189
</div>
187-
</div>
188190

189191

190-
<div class="w-100 mt-3 page-break" *ngIf="showMap()">
191-
<h5 class="card-title mb-2 mt-4">Map</h5>
192-
<app-alert-map-location [alert]="alert"></app-alert-map-location>
193-
</div>
194-
<div class="w-100 mt-3 page-break">
195-
<h5 class="card-title mb-2 mt-4">Alert History</h5>
196-
<app-alert-history [alert]="alert"></app-alert-history>
192+
<div class="w-100 mt-3 page-break" *ngIf="showMap()">
193+
<h5 class="card-title mb-2 mt-4">Map</h5>
194+
<app-alert-map-location [alert]="alert"></app-alert-map-location>
195+
</div>
196+
<div class="w-100 mt-3 page-break">
197+
<h5 class="card-title mb-2 mt-4">Alert History</h5>
198+
<app-alert-history [alert]="alert"></app-alert-history>
199+
</div>
197200
</div>
198-
</div>
199201

200-
<div *ngIf="noAlertFound" class="d-flex justify-content-center
202+
<div *ngIf="noAlertFound" class="d-flex justify-content-center
201203
align-items-center w-100 h-100 alert-not-found flex-column">
202-
<i class="icon-warning"></i>
203-
<h6 class="mt-2">Something ware happen, contact with support team</h6>
204-
</div>
204+
<i class="icon-warning"></i>
205+
<h6 class="mt-2">Something ware happen, contact with support team</h6>
206+
</div>
205207

206-
<div *ngIf="loadingAlert"
207-
class="d-flex justify-content-center align-items-center w-100 h-100">
208-
<app-utm-spinner [height]="'110px'" [loading]="loadingAlert" [width]="'110px'"
209-
label="Loading alert"
210-
style="width: 100%;margin-top: 15%">
211-
</app-utm-spinner>
208+
<div *ngIf="loadingAlert"
209+
class="d-flex justify-content-center align-items-center w-100 h-100">
210+
<app-utm-spinner [height]="'110px'" [loading]="loadingAlert" [width]="'110px'"
211+
label="Loading alert"
212+
style="width: 100%;margin-top: 15%">
213+
</app-utm-spinner>
214+
</div>
212215
</div>
213216
</div>
217+
214218
</div>

‎frontend/src/app/data-management/alert-management/alert-full-detail/alert-full-detail.component.scss‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
flex: 1 1 auto;
5+
min-height: 0;
6+
height: 100%;
7+
}
8+
9+
110
.print-logo-img {
211
img {
312
width: 40px;
@@ -59,12 +68,23 @@ a {
5968
width: 1100px !important;
6069
}
6170

62-
//.w-1000 {
63-
// min-width: 1100px !important;
64-
// width: 1100px !important;
65-
// padding: 0 15px;
66-
//}
6771

6872
@media print {
69-
.page-break { page-break-inside: avoid; page-break-before: always; }
73+
:host {
74+
height: auto !important;
75+
min-height: auto !important;
76+
}
77+
78+
.overflow-auto {
79+
overflow: visible !important;
80+
}
81+
82+
.h-100 {
83+
height: auto !important;
84+
}
85+
86+
.d-flex {
87+
display: block !important;
88+
}
7089
}
90+

0 commit comments

Comments
 (0)