Skip to content
This repository was archived by the owner on Aug 20, 2025. It is now read-only.

METRON-2089: [UI] Adding loading state to Alerts details view #1390

Closed
tiborm wants to merge 4 commits into from
Closed

METRON-2089: [UI] Adding loading state to Alerts details view #1390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5b4f2d
[details-loading] adding loader to alerts detail pane
tiborm Apr 10, 2019
3e1d21f
[table-config] fixing detail pane scrolling
tiborm Apr 10, 2019
64adafe
[details-loading] aligning tests to changes
tiborm Apr 11, 2019
200a187
[details-loading] fine tunning css, fixing comments
tiborm Apr 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@
OR CONDITIONS OF ANY KIND, either express or implied. See the License for
the specific language governing permissions and limitations under the License.
-->
<div class="metron-slider-pane-details load-right-to-left dialog1x" [ngClass]="{'is-meta-alert': isMetaAlert}">
<div class="container-fluid pl-0 pr-0 h-100">
<div class="metron-slider-pane-details d-flex load-right-to-left dialog1x" [ngClass]="{'is-meta-alert': isMetaAlert}">

<div data-qe-id="preloader" class="d-flex flex-column w-100 h-100 justify-content-center align-items-center" *ngIf="!alertSources.length">
<div class="spinner-border text-info" role="status"></div>
<div class="pt-2"><small>Loading...</small></div>
</div>

<div class="container-fluid pl-0 pr-0 h-100" *ngIf="alertSources.length">
<div class="h-100 d-flex">
<div class="nav-container" *ngIf="!isMetaAlert">
<ul class="nav flex-column">
Expand All @@ -39,15 +45,15 @@
</ul>
</div>
<div class="details-container">
<div class="container-fluid h-100">
<div class="row title-container">
<div class="d-flex flex-column h-100">
<div class="title-container d-flex flex-row">
<div class="col-md-10 px-0">
<div class="form-title row ml-2">
<div class="col px-0">
<div class="form-title row mx-3">
<div class="pr-3">
<span appAlertSeverity [severity]="getScore(alertSource)"> </span>
<span> {{ getScore(alertSource) }} </span>
</div>
<div class="px-0" style="width: 205px">
<div class="px-0">
<span [ngClass]="{'editable-text': alertSources.length > 1}" *ngIf="!showEditor" (click)="toggleNameEditor()"> {{ (alertSource.name && alertSource.name.length > 0)? alertSource.name : alertId | centerEllipses:20 }} </span>
<div class="input-group" *ngIf="showEditor">
<input type="text" class="form-control" [(ngModel)]="alertName">
Expand All @@ -57,12 +63,12 @@
</div>
</div>
</div>
<div class="col-md-2 px-0">
<div class="col-md-2 pr-3">
<i class="fa fa-times pull-right close-button" aria-hidden="true" (click)="goBack()"></i>
</div>
</div>
<div class="row justify-content-center py-4 actions">
<table>
<div class="px-3 py-4 actions">
<table class="w-100">
<tr>
<td class="title"> Status</td>
<td [ngClass]="{'primary': selectedAlertState === alertState.ESCALATE, 'secondary': selectedAlertState !== alertState.ESCALATE}" data-name="escalate" (click)="processEscalate()">ESCALATE</td>
Expand All @@ -82,7 +88,7 @@
</div>

<div class="tabContainer">
<div *ngIf="activeTab === tabs.DETAILS" class="ml-1 my-3 form" >
<div *ngIf="activeTab === tabs.DETAILS" class="mx-3 my-3 form" >
<ng-container *ngFor="let alert of alertSources; let i = index;" >
<div class="pb-2 alert-details-title"> Alert {{ i + 1 }} of {{ alertSources.length }}</div>
<ul>
Expand All @@ -94,12 +100,11 @@
</ng-container>
</div>

<div *ngIf="activeTab === tabs.COMMENTS" class="my-4">
<div *ngIf="activeTab === tabs.COMMENTS" class="mx-3 my-3">
<div> Comments <span *ngIf="alertCommentsWrapper.length > 0"> ({{alertCommentsWrapper.length}}) </span></div>
<textarea class="form-control" [(ngModel)]="alertCommentStr"> </textarea>
<button class="btn btn-mine_shaft_2" [disabled]="alertCommentStr.trim().length === 0" (click)="onAddComment()">ADD COMMENT</button>
<ng-container *ngFor="let alertCommentWrapper of alertCommentsWrapper; let i = index">
<hr>
<div class="comment-container" data-qe-id="comment">
<i
class="fa fa-trash-o"
Expand Down
11 changes: 6 additions & 5 deletions metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@
}

.nav-link {
padding: 15px 1em;
padding: 15px 0;
text-align: center;

&.active {
border-left: 4px solid #31ABDF;
Expand All @@ -126,7 +127,7 @@
}

.details-container {
width: 340px;
width: 100%;
}

textarea {
Expand All @@ -145,14 +146,14 @@ textarea {

.comment-container {
font-size: 14px;
padding: 10px 0px;
padding: 10px;
border-top: 1px solid #4D4D4D;

i {
right: 25px;
display: none;
cursor: pointer;
font-size: 18px;
position: absolute;
float: right;
}

.comment {
Expand Down
63 changes: 63 additions & 0 deletions metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,53 @@ import {CommentAddRemoveRequest} from "../../model/comment-add-remove-request";
import {AlertSource} from "../../model/alert-source";
import {of} from "rxjs/index";

const alertDetail = {
'enrichments:geo:ip_dst_addr:locID': '5308655',
'bro_timestamp': '1554222181.202211',
'status_code': 404,
'enrichments:geo:ip_dst_addr:location_point': '33.4589,-112.0709',
'ip_dst_port': 80,
'enrichments:geo:ip_dst_addr:dmaCode': '753',
'adapter:geoadapter:begin:ts': '1554727717061',
'enrichments:geo:ip_dst_addr:latitude': '33.4589',
'parallelenricher:enrich:end:ts': '1554727717078',
'uid': 'CBt5FP2TVetZJjaZbi',
'resp_mime_types': ['text/html'],
'trans_depth': 1,
'protocol': 'http',
'source:type': 'bro',
'adapter:threatinteladapter:end:ts': '1554727717076',
'original_string': 'HTTP | id.orig_p:49199',
'ip_dst_addr': '204.152.254.221',
'adapter:hostfromjsonlistadapter:end:ts': '1554727717069',
'host': 'runlove.us',
'adapter:geoadapter:end:ts': '1554727717069',
'ip_src_addr': '192.168.138.158',
'enrichments:geo:ip_dst_addr:longitude': '-112.0709',
'user_agent': '',
'resp_fuids': ['FeDAUx1IIW621Aw6Y8'],
'timestamp': 1554222181202,
'method': 'POST',
'parallelenricher:enrich:begin:ts': '1554727717075',
'request_body_len': 96,
'enrichments:geo:ip_dst_addr:city': 'Phoenix',
'enrichments:geo:ip_dst_addr:postalCode': '85004',
'adapter:hostfromjsonlistadapter:begin:ts': '1554727717061',
'orig_mime_types': ['text/plain'],
'uri': '/wp-content/themes/twentyfifteen/img5.php?l=8r1gf1b2t1kuq42',
'tags': [],
'parallelenricher:splitter:begin:ts': '1554727717075',
'alert_status': 'RESOLVE',
'orig_fuids': ['FTTvSE5Asee5tJr99'],
'ip_src_port': 49199,
'parallelenricher:splitter:end:ts': '1554727717075',
'adapter:threatinteladapter:begin:ts': '1554727717075',
'status_msg': 'Not Found',
'guid': 'fe9e058e-6d5a-4ba5-8b79-d8e6a2792931',
'enrichments:geo:ip_dst_addr:country': 'US',
'response_body_len': 357
};

describe('AlertDetailsComponent', () => {
let component: AlertDetailsComponent;
let fixture: ComponentFixture<AlertDetailsComponent>;
Expand Down Expand Up @@ -91,6 +138,18 @@ describe('AlertDetailsComponent', () => {
fixture.detectChanges();
});

it('should be in a loading state if no alertSources loaded', () => {
component.alertSources = [];
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[data-qe-id="preloader"]'))).toBeTruthy();
});

it('should show details if alertSources loaded', () => {
component.alertSources = [alertDetail];
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[data-qe-id="preloader"]'))).toBeFalsy();
});

it('should delete a comment.', fakeAsync(() => {
const responseMock = new AlertSource();
responseMock.guid = 'guid';
Expand All @@ -104,6 +163,10 @@ describe('AlertDetailsComponent', () => {
component.alertSource.guid = 'guid';
component.alertSourceType = 'sourceType';
const now = Date.now();

component.alertSources = [alertDetail];
fixture.detectChanges();

component.alertCommentsWrapper = [
new AlertCommentWrapper(
new AlertComment('lorem ipsum', 'user', now),
Expand Down
9 changes: 8 additions & 1 deletion metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* limitations under the License.
*/
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ActivatedRoute, Router, NavigationStart} from '@angular/router';
import * as moment from 'moment/moment';
import {Subscription} from 'rxjs';

Expand Down Expand Up @@ -87,6 +87,13 @@ export class AlertDetailsComponent implements OnInit {
private dialogService: DialogService,
globalConfigService: GlobalConfigService) {
this.globalConfigService = globalConfigService;

router.events.subscribe(event => {
if (event instanceof NavigationStart && /\/alerts-list\(dialog:details\//.test(event.url)) {
this.alertSources = [];
this.alertSource = null;
}
});
}

goBack() {
Expand Down
1 change: 1 addition & 0 deletions metron-interface/metron-alerts/src/slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ $dialog-4x-width: 1340px;
z-index: 9;

background: $edit-child-background;
border-left: 1px solid $edit-background-border;

.close-button
{
Expand Down