From b5b4f2d9b741efba4619f414e3f68229cf3575c5 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Wed, 10 Apr 2019 16:23:34 +0200 Subject: [PATCH 1/4] [details-loading] adding loader to alerts detail pane --- .../alert-details/alert-details.component.html | 10 ++++++++-- .../alert-details/alert-details.component.ts | 9 ++++++++- metron-interface/metron-alerts/src/slider.scss | 14 ++++++++++++++ 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html index c4bcc88bb5..b872ddd175 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html @@ -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. --> -
-
+
+ +
+ +
Loading...
+
+ +
    diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts index f5c55faccd..1b40de6d04 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts @@ -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'; @@ -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() { diff --git a/metron-interface/metron-alerts/src/slider.scss b/metron-interface/metron-alerts/src/slider.scss index ccb139fd73..c7c9a59b66 100644 --- a/metron-interface/metron-alerts/src/slider.scss +++ b/metron-interface/metron-alerts/src/slider.scss @@ -26,7 +26,17 @@ $dialog-4x-width: 1340px; .metron-slider-pane-details { +<<<<<<< HEAD position: fixed; +======= + display: inline-block; + float: right; + word-wrap: break-word; + height: 100%; + min-height: 100%; + position: absolute; + +>>>>>>> [details-loading] adding loader to alerts detail pane top: 0; right: 0; height: 100%; @@ -34,6 +44,10 @@ $dialog-4x-width: 1340px; z-index: 9; background: $edit-child-background; +<<<<<<< HEAD +======= + border-left: 1px solid $edit-background-border; +>>>>>>> [details-loading] adding loader to alerts detail pane .close-button { From 3e1d21fe9ab939f2595435109e397f42121df861 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Wed, 10 Apr 2019 11:23:07 +0200 Subject: [PATCH 2/4] [table-config] fixing detail pane scrolling --- .../src/app/alerts/alert-details/alert-details.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html index b872ddd175..42a5c834b4 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html @@ -18,7 +18,7 @@
    Loading...
-
+
    From 64adafe79264463570bbb59bde9f051c96c872d8 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 11 Apr 2019 15:26:03 +0200 Subject: [PATCH 3/4] [details-loading] aligning tests to changes --- .../alert-details.component.html | 2 +- .../alert-details.component.spec.ts | 63 +++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html index 42a5c834b4..9f68a90f6f 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html @@ -13,7 +13,7 @@ -->
    -
    +
    Loading...
    diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.spec.ts b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.spec.ts index 78005174db..63c22e3c65 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.spec.ts @@ -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; @@ -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'; @@ -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), From 200a1879654936d29f06703ebaf6b27ee5d26487 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Tue, 23 Apr 2019 14:08:31 +0200 Subject: [PATCH 4/4] [details-loading] fine tunning css, fixing comments --- .../alert-details.component.html | 21 +++++++++---------- .../alert-details.component.scss | 11 +++++----- .../metron-alerts/src/slider.scss | 13 ------------ 3 files changed, 16 insertions(+), 29 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html index 9f68a90f6f..c013a70fa7 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html @@ -45,15 +45,15 @@
-
-
+
+
-
-
+
+
{{ getScore(alertSource) }}
-
+
{{ (alertSource.name && alertSource.name.length > 0)? alertSource.name : alertId | centerEllipses:20 }}
@@ -63,12 +63,12 @@
-
+
-
- +
+
@@ -88,7 +88,7 @@
-
+
Alert {{ i + 1 }} of {{ alertSources.length }}
    @@ -100,12 +100,11 @@
-
+
Comments ({{alertCommentsWrapper.length}})
-
>>>>>> [details-loading] adding loader to alerts detail pane top: 0; right: 0; height: 100%; @@ -44,10 +34,7 @@ $dialog-4x-width: 1340px; z-index: 9; background: $edit-child-background; -<<<<<<< HEAD -======= border-left: 1px solid $edit-background-border; ->>>>>>> [details-loading] adding loader to alerts detail pane .close-button {
Status ESCALATE