From 79b327fa96d6be8aea0f9bcf07f3f58ccd699581 Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:17:12 +0200 Subject: [PATCH 01/17] making date picker compatible with ReactiveFormsModule --- .../date-picker/date-picker.component.scss | 14 +++++++- .../date-picker/date-picker.component.ts | 34 ++++++++++++++++--- .../shared/date-picker/date-picker.module.ts | 3 +- 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.scss b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.scss index 813b6a5a03..f46599ab5f 100644 --- a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.scss +++ b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.scss @@ -28,4 +28,16 @@ font-family: "FontAwesome"; content: '\f073'; } -} \ No newline at end of file +} + +:host(.ng-invalid):not(form) { + border-left: none !important; +} + +:host(.ng-invalid) input { + border-left: 5px solid #a94442; /* red */ + + &:focus { + border-color: #4D4D4D; + } +} diff --git a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.ts b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.ts index d58bb5f50a..9014058d0c 100644 --- a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.ts +++ b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.ts @@ -15,21 +15,29 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { Component, OnInit, ViewChild, ElementRef, OnChanges, SimpleChanges, Input, Output, EventEmitter } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import * as moment from 'moment/moment'; -import * as Pikaday from "pikaday-time"; +import * as Pikaday from 'pikaday-time'; @Component({ selector: 'app-date-picker', templateUrl: './date-picker.component.html', + providers : [{ + provide : NG_VALUE_ACCESSOR, + useExisting: DatePickerComponent, + multi: true, + }], styleUrls: ['./date-picker.component.scss'] }) -export class DatePickerComponent implements OnInit, OnChanges { +export class DatePickerComponent implements OnInit, OnChanges, ControlValueAccessor { defaultDateStr = 'now'; picker: Pikaday; dateStr = this.defaultDateStr; + private onChange: Function; + private onTouched: Function; + @Input() date = ''; @Input() minDate = ''; @Output() dateChange = new EventEmitter(); @@ -45,7 +53,12 @@ export class DatePickerComponent implements OnInit, OnChanges { use24hour: true, onSelect: function() { _datePickerComponent.dateStr = this.getMoment().format('YYYY-MM-DD HH:mm:ss'); - setTimeout(() => _datePickerComponent.dateChange.emit(_datePickerComponent.dateStr), 0); + setTimeout(() => { + _datePickerComponent.dateChange.emit(_datePickerComponent.dateStr); + if (_datePickerComponent.onChange) { + _datePickerComponent.onChange(_datePickerComponent.dateStr); + } + }, 0); } }; this.picker = new Pikaday(pikadayConfig); @@ -62,6 +75,19 @@ export class DatePickerComponent implements OnInit, OnChanges { } } + writeValue(value) { + this.date = value; + this.setDate(); + } + + registerOnChange(fn) { + this.onChange = fn; + } + + registerOnTouched(fn) { + this.onTouched = fn; + } + setDate() { if (this.date === '') { this.dateStr = this.defaultDateStr; diff --git a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.module.ts b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.module.ts index d59d566881..e5dfd6c182 100644 --- a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.module.ts +++ b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.module.ts @@ -19,8 +19,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import {DatePickerComponent} from './date-picker.component'; -import {SharedModule} from '../shared.module'; +import { DatePickerComponent } from './date-picker.component'; @NgModule({ imports: [ From 89310c608ba1c2354aea74c946aa94c9f15b4978 Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:18:01 +0200 Subject: [PATCH 02/17] fixing tslint warnings --- .../src/app/pcap/pcap-panel/pcap-panel.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts index 7c880072c4..4a017dbb5b 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts @@ -23,7 +23,7 @@ import { PcapRequest } from '../model/pcap.request'; import { Pdml } from '../model/pdml'; import { Subscription } from 'rxjs/Rx'; import { PcapPagination } from '../model/pcap-pagination'; -import { RestError } from "../../model/rest-error"; +import { RestError } from '../../model/rest-error'; @Component({ selector: 'app-pcap-panel', @@ -40,9 +40,9 @@ export class PcapPanelComponent implements OnInit, OnDestroy { cancelSubscription: Subscription; submitSubscription: Subscription; getSubscription: Subscription; - queryRunning: boolean = false; + queryRunning = false; queryId: string; - progressWidth: number = 0; + progressWidth = 0; pagination: PcapPagination = new PcapPagination(); savedPcapRequest: {}; errorMsg: string; From cf3b1a7e802aaa803efe97b3df239f539c9d44e9 Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:27:24 +0200 Subject: [PATCH 03/17] merging udpPort handlig and tslint fixes togheter --- .../pcap-packet-line.component.spec.ts | 53 ++----------------- .../pcap-packet-line.component.ts | 22 ++++---- 2 files changed, 15 insertions(+), 60 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts index 00f081f365..d01c0cbc59 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts @@ -17,7 +17,6 @@ */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { fakePacket } from '../model/pdml.mock'; -import { fakeUdpPacket } from '../model/pdml.mock'; import { PcapPacketLineComponent } from './pcap-packet-line.component'; @@ -35,6 +34,8 @@ describe('PcapPacketLineComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(PcapPacketLineComponent); component = fixture.componentInstance; + component.packet = fakePacket; + fixture.detectChanges(); }); it('should be created', () => { @@ -42,8 +43,6 @@ describe('PcapPacketLineComponent', () => { }); it('should extract timestamp fields', () => { - component.packet = fakePacket; - fixture.detectChanges(); expect(component.ip.timestamp).toEqual({ "name": "timestamp", "pos": "0", @@ -60,8 +59,6 @@ describe('PcapPacketLineComponent', () => { }); it('should extract ipSrcAddr fields', () => { - component.packet = fakePacket; - fixture.detectChanges(); expect(component.ip.ipSrcAddr).toEqual({ "name": "ip.src", "pos": "26", @@ -77,8 +74,6 @@ describe('PcapPacketLineComponent', () => { }); it('should extract ipSrcPort fields', () => { - component.packet = fakePacket; - fixture.detectChanges(); expect(component.ip.ipSrcPort).toEqual({ "name": "tcp.srcport", "pos": "34", @@ -93,9 +88,7 @@ describe('PcapPacketLineComponent', () => { }); }); - it('should extract TCP ipDestAddr fields', () => { - component.packet = fakePacket; - fixture.detectChanges(); + it('should extract ipDestAddr fields', () => { expect(component.ip.ipDestAddr).toEqual({ "name": "ip.dst", "pos": "30", @@ -110,9 +103,7 @@ describe('PcapPacketLineComponent', () => { }); }); - it('should extract TCP ipDestPort fields', () => { - component.packet = fakePacket; - fixture.detectChanges(); + it('should extract ipDestPort fields', () => { expect(component.ip.ipDestPort).toEqual({ "name": "tcp.dstport", "pos": "36", @@ -128,8 +119,6 @@ describe('PcapPacketLineComponent', () => { }); it('should extract protocol fields', () => { - component.packet = fakePacket; - fixture.detectChanges(); expect(component.ip.protocol).toEqual({ "name": "ip.proto", "pos": "23", @@ -143,38 +132,4 @@ describe('PcapPacketLineComponent', () => { "protos": null }); }); - - it('should extract UDP ipSrcPort fields', () => { - component.packet = fakeUdpPacket; - fixture.detectChanges(); - expect(component.ip.ipSrcPort).toEqual({ - "name": "udp.srcport", - "pos": "34", - "showname": "Source port: bootpc (68)", - "size": "2", - "value": "0044", - "show": "68", - "unmaskedvalue": null, - "hide": null, - "fields": null, - "protos": null - }); - }); - - it('should extract UDP ipDestPort fields', () => { - component.packet = fakeUdpPacket; - fixture.detectChanges(); - expect(component.ip.ipDestPort).toEqual({ - "name": "udp.dstport", - "pos": "36", - "showname": "Destination port: bootps (67)", - "size": "2", - "value": "0043", - "show": "67", - "unmaskedvalue": null, - "hide": null, - "fields": null, - "protos": null - }); - }); }); diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts index b1546affc5..913aff9252 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts @@ -16,7 +16,7 @@ * limitations under the License. */ import { Component, OnInit, Input } from '@angular/core'; -import { PdmlPacket, PdmlProto, PdmlField } from '../model/pdml' +import { PdmlPacket, PdmlProto, PdmlField } from '../model/pdml'; @Component({ selector: '[app-pcap-packet-line]', @@ -37,18 +37,18 @@ export class PcapPacketLineComponent implements OnInit { constructor() { } ngOnInit() { - const genProto: PdmlProto = this.packet.protos.filter(p => p.name == "geninfo")[0]; - const ipProto: PdmlProto = this.packet.protos.filter(p => p.name == "ip")[0]; - const tcpProto: PdmlProto = this.packet.protos.filter(p => p.name == "tcp")[0]; - const udpProto: PdmlProto = this.packet.protos.filter(p => p.name == "udp")[0]; + const genProto: PdmlProto = this.packet.protos.filter(p => p.name === 'geninfo')[0]; + const ipProto: PdmlProto = this.packet.protos.filter(p => p.name === 'ip')[0]; + const tcpProto: PdmlProto = this.packet.protos.filter(p => p.name === 'tcp')[0]; + const udpProto: PdmlProto = this.packet.protos.filter(p => p.name === 'udp')[0]; this.ip = { - timestamp: PdmlProto.findField(genProto,'timestamp'), - ipSrcAddr: PdmlProto.findField(ipProto,'ip.src'), - ipSrcPort: tcpProto ? PdmlProto.findField(tcpProto,'tcp.srcport') : PdmlProto.findField(udpProto,'udp.srcport'), - ipDestAddr: PdmlProto.findField(ipProto,'ip.dst'), - ipDestPort: tcpProto ? PdmlProto.findField(tcpProto,'tcp.dstport') : PdmlProto.findField(udpProto,'udp.dstport'), - protocol: PdmlProto.findField(ipProto,'ip.proto') + timestamp: PdmlProto.findField(genProto, 'timestamp'), + ipSrcAddr: PdmlProto.findField(ipProto, 'ip.src'), + ipSrcPort: tcpProto ? PdmlProto.findField(tcpProto, 'tcp.srcport') : PdmlProto.findField(udpProto, 'udp.srcport'), + ipDestAddr: PdmlProto.findField(ipProto, 'ip.dst'), + ipDestPort: tcpProto ? PdmlProto.findField(tcpProto, 'tcp.dstport') : PdmlProto.findField(udpProto, 'udp.dstport'), + protocol: PdmlProto.findField(ipProto, 'ip.proto') }; } From 3394575f4ec110c884b0ef825bed8c5a70a47749 Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:27:46 +0200 Subject: [PATCH 04/17] adding ReactiveFormsModule --- metron-interface/metron-alerts/src/app/pcap/pcap.module.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts b/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts index 8c0db02c42..784bc93154 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts @@ -17,7 +17,7 @@ */ import {NgModule} from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { routing } from './pcap.routing'; @@ -29,7 +29,7 @@ import { PcapPacketComponent } from './pcap-packet/pcap-packet.component'; import { PcapFiltersComponent } from './pcap-filters/pcap-filters.component'; import { PcapPanelComponent } from './pcap-panel/pcap-panel.component'; import { PcapPacketLineComponent } from './pcap-packet-line/pcap-packet-line.component'; -import { PcapPaginationComponent } from './pcap-pagination/pcap-pagination.component' +import { PcapPaginationComponent } from './pcap-pagination/pcap-pagination.component'; import { PcapService } from './service/pcap.service'; @NgModule({ @@ -37,6 +37,7 @@ import { PcapService } from './service/pcap.service'; routing, CommonModule, FormsModule, + ReactiveFormsModule, HttpModule, DatePickerModule, ], From 6670581654f04f340f01cddb65022ef147eb6afd Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:28:08 +0200 Subject: [PATCH 05/17] extending pcap-panel tests --- .../pcap/pcap-panel/pcap-panel.component.spec.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts index fe4df1e569..2ebf8840b5 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts @@ -26,8 +26,8 @@ import { PcapPagination } from '../model/pcap-pagination'; import { By } from '../../../../node_modules/@angular/platform-browser'; import { PcapRequest } from '../model/pcap.request'; import { defer } from 'rxjs/observable/defer'; -import {Observable} from "rxjs/Observable"; -import {RestError} from "../../model/rest-error"; +import { Observable } from 'rxjs/Observable'; +import { RestError } from '../../model/rest-error'; @Component({ selector: 'app-pcap-filters', @@ -349,7 +349,7 @@ describe('PcapPanelComponent', () => { it('should hide the progress bar if the user clicks on the cancel button', fakeAsync(() => { component.queryRunning = true; - component.queryId = 'testid'; + component.queryId = '42'; fixture.detectChanges(); expect(fixture.debugElement.query(By.css('.pcap-progress'))).toBeDefined(); @@ -360,7 +360,7 @@ describe('PcapPanelComponent', () => { tick(); fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('.pcap-progress'))).toBeFalsy(); + expect(fixture.debugElement.query(By.css('.pcap-progress')) == null).toBe(true); })); it('should hide the progress bar if the cancellation request fails', fakeAsync(() => { @@ -370,7 +370,7 @@ describe('PcapPanelComponent', () => { ); component.queryRunning = true; - component.queryId = 'testid'; + component.queryId = '42'; fixture.detectChanges(); expect(fixture.debugElement.query(By.css('.pcap-progress'))).toBeDefined(); @@ -381,7 +381,7 @@ describe('PcapPanelComponent', () => { tick(); fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('.pcap-progress'))).toBeFalsy(); + expect(fixture.debugElement.query(By.css('.pcap-progress')) == null).toBe(true); })); it('should show an error message if the cancellation request fails', fakeAsync(() => { @@ -392,9 +392,9 @@ describe('PcapPanelComponent', () => { ); component.queryRunning = true; - component.queryId = 'testid'; + component.queryId = '42'; fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('[data-qe-id="error"]'))).toBeFalsy(); + expect(fixture.debugElement.query(By.css('[data-qe-id="error"]')) == null).toBe(true); const cancelBtn = fixture.debugElement.query(By.css('[data-qe-id="pcap-cancel-query-button"]')); const cancelBtnEl = cancelBtn.nativeElement; From e0a1b25db93f475a918c8b1b4e4b71f692c8effc Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:28:29 +0200 Subject: [PATCH 06/17] fixing result table typo --- .../src/app/pcap/pcap-list/pcap-list.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.html b/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.html index 5337935ea9..10b7be2092 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.html +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.html @@ -16,9 +16,9 @@ Timestamp - Source Addr + Source Address Source Port - Dest Addr + Dest Address Dest Port Protocol From 0b9cde57c40203bf5ee3de880085f5c28d665730 Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:34:59 +0200 Subject: [PATCH 07/17] fixing PcapRequest types --- .../src/app/pcap/model/pcap.mock.ts | 4 ++-- .../src/app/pcap/model/pcap.request.ts | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/model/pcap.mock.ts b/metron-interface/metron-alerts/src/app/pcap/model/pcap.mock.ts index bf02da8dd2..c867fe99fa 100644 --- a/metron-interface/metron-alerts/src/app/pcap/model/pcap.mock.ts +++ b/metron-interface/metron-alerts/src/app/pcap/model/pcap.mock.ts @@ -22,9 +22,9 @@ export const fakePcapRequest = { startTimeMs: 0, endTimeMs: 0, ipSrcAddr: '0.0.0.0', - ipSrcPort: 80, + ipSrcPort: '80', ipDstAddr: '0.0.0.0', - ipDstPort: 80, + ipDstPort: '80', protocol: '*', packetFilter: '*', includeReverse: false diff --git a/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts b/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts index 8afc9636f6..4ba80b1567 100644 --- a/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts +++ b/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts @@ -17,13 +17,13 @@ */ export class PcapRequest { - startTimeMs: number = 0; - endTimeMs: number = 150000000000000000; - ipSrcAddr: string = ''; - ipSrcPort: number; - ipDstAddr: string = ''; - ipDstPort: number; - protocol: string = ''; - packetFilter: string = ''; - includeReverse: boolean = false; + startTimeMs = 0; + endTimeMs = 150000000000000000; + ipSrcAddr = ''; + ipSrcPort = ''; + ipDstAddr = ''; + ipDstPort = ''; + protocol = ''; + packetFilter = ''; + includeReverse = false; } From e2a70a16ae9c9e575ee9fa328bdf912f87ab5f75 Mon Sep 17 00:00:00 2001 From: tiborm Date: Wed, 22 Aug 2018 12:38:57 +0200 Subject: [PATCH 08/17] refactroring filtering, adding date range validation and validation messages --- .../pcap-filters/pcap-filters.component.html | 55 +++--- .../pcap-filters/pcap-filters.component.scss | 13 +- .../pcap-filters.component.spec.ts | 163 +++++++----------- .../pcap-filters/pcap-filters.component.ts | 125 ++++++++++---- 4 files changed, 188 insertions(+), 168 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.html b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.html index 039307a99b..c7a4db558b 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.html +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.html @@ -11,52 +11,63 @@ OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -
+
- +
- +
- - + +
- - + +
-
- +
+ +
- - + +
-
- - -
+
+ + +
-
- - -
+
+ + +
- - + +
- +
+
+
Validation errors
+
    +
  • Selected date range is invalid. The "To" date must be later than the "From" date and the "To" date cannot be in the future.
    • +
  • Source IP address format is invalid. Use valid v4IP format, for example, 192.168.0.1
    • +
  • Source port is invalid. Port number must be within the range of 0-65535.
    • +
  • Destination IP address format is invalid. Use valid v4IP format, for example, 192.168.0.1
    • +
  • Destination port is invalid. Port number must be within the range of 0-65535.
    • +
+
diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.scss b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.scss index b33e804306..909ce02701 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.scss +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.scss @@ -19,11 +19,7 @@ @import "../../../styles.scss"; @import "../../../variables.scss"; -.ng-valid[required], .ng-valid.required { - -} - -.ng-invalid:not(form) { +.ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ } @@ -35,7 +31,6 @@ } .btn-search { - min-width: 42px; padding-left: 0; padding-right: 0; @@ -67,3 +62,9 @@ background: $icon-button-background; } } + +.pcap-search-validation-errors { + & ul { + margin: 0 + } +} diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts index 3f1ab07052..cd4214f430 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts @@ -16,22 +16,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { PcapFiltersComponent } from './pcap-filters.component'; -import { FormsModule } from '../../../../node_modules/@angular/forms'; import { Component, Input, Output, EventEmitter, DebugElement, SimpleChange } from '@angular/core'; -import { PcapRequest } from '../model/pcap.request'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -@Component({ - selector: 'app-date-picker', - template: '', -}) -class FakeDatePickerComponent { - @Input() date: string; - @Output() dateChange = new EventEmitter(); -} +import { PcapFiltersComponent } from './pcap-filters.component'; +import { DatePickerModule } from '../../shared/date-picker/date-picker.module'; +import { PcapRequest } from '../model/pcap.request'; describe('PcapFiltersComponent', () => { let component: PcapFiltersComponent; @@ -40,10 +33,11 @@ describe('PcapFiltersComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - FormsModule + FormsModule, + ReactiveFormsModule, + DatePickerModule, ], declarations: [ - FakeDatePickerComponent, PcapFiltersComponent, ] }) @@ -59,114 +53,113 @@ describe('PcapFiltersComponent', () => { }); it('From date should be bound to the component', () => { - let input = fixture.debugElement.query(By.css('#startTime')); + let input = fixture.debugElement.query(By.css('[data-qe-id="start-time"]')); const dateString = '2020-11-11 11:11:11'; - input.componentInstance.dateChange.emit(dateString); + input.componentInstance.onChange(dateString); fixture.detectChanges(); - - expect(component.startTimeStr).toBe(dateString); + expect(component.filterForm.controls.startTime.value).toBe(dateString); }); it('To date should be bound to the component', () => { - let input = fixture.debugElement.query(By.css('#endTime')); + let input = fixture.debugElement.query(By.css('[data-qe-id="end-time"]')); const dateString = '2030-11-11 11:11:11'; - input.componentInstance.dateChange.emit(dateString); + input.componentInstance.onChange(dateString); fixture.detectChanges(); - expect(component.endTimeStr).toBe(dateString); + expect(component.filterForm.controls.endTime.value).toBe(dateString); }); it('IP Source Address should be bound to the model', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="ipSrcAddr"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="ip-src-addr"]'); input.value = '192.168.0.1'; input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.model.ipSrcAddr).toBe('192.168.0.1'); + expect(component.filterForm.controls.ipSrcAddr.value).toBe('192.168.0.1'); }); it('IP Source Port should be bound to the property', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="ipSrcPort"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="ip-src-port"]'); input.value = '9345'; input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.ipSrcPort).toBe('9345'); + expect(component.filterForm.controls.ipSrcPort.value).toBe('9345'); }); it('IP Source Port should be converted to number on submit', () => { - component.ipSrcPort = '42'; + component.filterForm.patchValue({ ipSrcPort: '42' }); component.search.emit = (model: PcapRequest) => { - expect(model.ipSrcPort).toBe(42); + expect(model.ipSrcPort).toBe('42'); }; component.onSubmit(); }); it('IP Dest Address should be bound to the model', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="ipDstAddr"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="ip-dst-addr"]'); input.value = '256.0.0.7'; input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.model.ipDstAddr).toBe('256.0.0.7'); + expect(component.filterForm.controls.ipDstAddr.value).toBe('256.0.0.7'); }); it('IP Dest Port should be bound to the property', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="ipDstPort"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="ip-dst-port"]'); input.value = '8989'; input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.ipDstPort).toBe('8989'); + expect(component.filterForm.controls.ipDstPort.value).toBe('8989'); }); it('IP Dest Port should be converted to number on submit', () => { - component.ipDstPort = '42'; + component.filterForm.patchValue({ ipDstPort: '42' }); component.search.emit = (model: PcapRequest) => { - expect(model.ipDstPort).toBe(42); + expect(model.ipDstPort).toBe('42'); }; component.onSubmit(); }); it('Protocol should be bound to the model', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="protocol"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="protocol"]'); input.value = 'TCP'; input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.model.protocol).toBe('TCP'); + expect(component.filterForm.controls.protocol.value).toBe('TCP'); }); it('Include Reverse Traffic should be bound to the model', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="includeReverse"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="include-reverse"]'); input.click(); input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.model.includeReverse).toBe(true); + expect(component.filterForm.controls.includeReverse.value).toBe(true); }); it('Text filter should be bound to the model', () => { - let input: HTMLInputElement = fixture.nativeElement.querySelector('[name="protocol"]'); + let input: HTMLInputElement = fixture.nativeElement.querySelector('[data-qe-id="packet-filter"]'); input.value = 'TestStringFilter'; input.dispatchEvent(new Event('input')); fixture.detectChanges(); - expect(component.model.protocol).toBe('TestStringFilter'); + expect(component.filterForm.controls.packetFilter.value).toBe('TestStringFilter'); }); it('From date should be converted to timestamp on submit', () => { - component.startTimeStr = '2220-12-12 12:12:12'; + component.filterForm.patchValue({ startTime: '2220-12-12 12:12:12' }); component.search.emit = (model: PcapRequest) => { - expect(model.startTimeMs).toBe(new Date(component.startTimeStr).getTime()); + expect(model.startTimeMs).toBe(new Date(component.filterForm.controls.startTime.value).getTime()); }; component.onSubmit(); }); it('To date should be converted to timestamp on submit', () => { - component.endTimeStr = '2320-03-13 13:13:13'; + component.filterForm.patchValue({ endTimeStr: '2320-03-13 13:13:13' }); component.search.emit = (model: PcapRequest) => { - expect(model.endTimeMs).toBe(new Date(component.endTimeStr).getTime()); + expect(model.endTimeMs).toBe(new Date(component.filterForm.controls.endTime.value).getTime()); }; component.onSubmit(); }); @@ -179,19 +172,6 @@ describe('PcapFiltersComponent', () => { component.onSubmit(); }); - it('Port fields should be removed from request when set to empty', () => { - component.model.ipSrcPort = 44; - component.model.ipDstPort = 44; - component.ipSrcPort = ''; - component.ipDstPort = ''; - - component.search.emit = (model: PcapRequest) => { - expect(model.ipSrcPort).toBeFalsy(); - expect(model.ipDstPort).toBeFalsy(); - }; - component.onSubmit(); - }); - it('Filter should have an output called search', () => { component.search.subscribe((filterModel) => { expect(filterModel).toBeDefined(); @@ -205,68 +185,43 @@ describe('PcapFiltersComponent', () => { expect(component.search.emit).toHaveBeenCalled(); }); - it('Search event should contains the filter model', () => { - spyOn(component.search, 'emit'); - component.onSubmit(); - expect(component.search.emit).toHaveBeenCalledWith(component.model); - }); - - it('Filter model structure aka PcapRequest', () => { - expect(fixture.componentInstance.model.hasOwnProperty('startTimeMs')).toBeTruthy(); - expect(fixture.componentInstance.model.hasOwnProperty('endTimeMs')).toBeTruthy(); - expect(fixture.componentInstance.model.hasOwnProperty('ipSrcAddr')).toBeTruthy(); - expect(fixture.componentInstance.model.hasOwnProperty('ipSrcPort')).toBeFalsy(); - expect(fixture.componentInstance.model.hasOwnProperty('ipDstAddr')).toBeTruthy(); - expect(fixture.componentInstance.model.hasOwnProperty('ipDstPort')).toBeFalsy(); - expect(fixture.componentInstance.model.hasOwnProperty('protocol')).toBeTruthy(); - expect(fixture.componentInstance.model.hasOwnProperty('packetFilter')).toBeTruthy(); - expect(fixture.componentInstance.model.hasOwnProperty('includeReverse')).toBeTruthy(); - }); - it('should update request on changes', () => { + const startTimeStr = '2220-12-12 12:12:12'; + const endTimeStr = '2320-03-13 13:13:13'; - let startTimeStr = '2220-12-12 12:12:12'; - let endTimeStr = '2320-03-13 13:13:13'; - - let newModel = { - startTimeMs: new Date(startTimeStr).getTime(), - endTimeMs: new Date(endTimeStr).getTime(), - ipSrcPort: 9345, - ipDstPort: 8989 - }; - component.model.startTimeMs = new Date(startTimeStr).getTime(); - component.model.endTimeMs = new Date(endTimeStr).getTime(); + const newModel = new PcapRequest(); + newModel.startTimeMs = new Date(startTimeStr).getTime(); + newModel.endTimeMs = new Date(endTimeStr).getTime(); + newModel.ipSrcPort = '9345'; + newModel.ipDstPort = '8989'; component.ngOnChanges({ model: new SimpleChange(null, newModel, false) }); - expect(component.startTimeStr).toBe(startTimeStr); - expect(component.endTimeStr).toBe(endTimeStr); - expect(component.ipSrcPort).toBe('9345'); - expect(component.ipDstPort).toBe('8989'); + expect(component.filterForm.controls.startTime.value).toBe(startTimeStr); + expect(component.filterForm.controls.endTime.value).toBe(endTimeStr); + expect(component.filterForm.controls.ipSrcPort.value).toBe('9345'); + expect(component.filterForm.controls.ipDstPort.value).toBe('8989'); }); it('should update request on changes with missing port filters', () => { - let startTimeStr = '2220-12-12 12:12:12'; - let endTimeStr = '2320-03-13 13:13:13'; + const startTimeStr = '2220-12-12 12:12:12'; + const endTimeStr = '2320-03-13 13:13:13'; - let newModel = { - startTimeMs: new Date(startTimeStr).getTime(), - endTimeMs: new Date(endTimeStr).getTime() - }; - component.model.startTimeMs = new Date(startTimeStr).getTime(); - component.model.endTimeMs = new Date(endTimeStr).getTime(); + let newModel = new PcapRequest(); + newModel.startTimeMs = new Date(startTimeStr).getTime(); + newModel.endTimeMs = new Date(endTimeStr).getTime(); component.ngOnChanges({ model: new SimpleChange(null, newModel, false) }); - expect(component.startTimeStr).toBe(startTimeStr); - expect(component.endTimeStr).toBe(endTimeStr); - expect(component.ipSrcPort).toBe(''); - expect(component.ipDstPort).toBe(''); + expect(component.filterForm.controls.startTime.value).toBe(startTimeStr); + expect(component.filterForm.controls.endTime.value).toBe(endTimeStr); + expect(component.filterForm.controls.ipSrcPort.value).toBe(''); + expect(component.filterForm.controls.ipDstPort.value).toBe(''); }); describe('Filter validation', () => { @@ -379,7 +334,7 @@ describe('PcapFiltersComponent', () => { ]; invalidValues.forEach((value) => { - const els = getFieldWithSubmit('ip-dest-port'); + const els = getFieldWithSubmit('ip-dst-port'); expect(isFieldInvalid(els.field)).toBe(false, 'the field should be valid without ' + value); expect(isSubmitDisabled(els.submit)).toBe(false, 'the submit button should be enabled without ' + value); @@ -403,7 +358,7 @@ describe('PcapFiltersComponent', () => { ]; validValues.forEach((value) => { - const els = getFieldWithSubmit('ip-dest-port'); + const els = getFieldWithSubmit('ip-dst-port'); expect(isFieldInvalid(els.field)).toBe(false, 'the field should be valid without ' + value); expect(isSubmitDisabled(els.submit)).toBe(false, 'the submit button should be enabled without ' + value); @@ -453,7 +408,7 @@ describe('PcapFiltersComponent', () => { setFieldValue(els.field, value); - expect(isFieldInvalid(els.field)).toBe(false, 'tthe field should be valid with ' + value); + expect(isFieldInvalid(els.field)).toBe(false, 'the field should be valid with ' + value); expect(isSubmitDisabled(els.submit)).toBe(false, 'the submit button should be enabled with ' + value); tearDown(els.field); }); diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts index b23a2e2ea2..92eec7d57f 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts @@ -15,63 +15,116 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges} from '@angular/core'; +import {Component, Input, Output, EventEmitter, OnChanges, SimpleChanges} from '@angular/core'; +import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms'; + import * as moment from 'moment/moment'; import { DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; import { PcapRequest } from '../model/pcap.request'; +const DEFAULT_END_TIME = new Date(); +const DEFAULT_START_TIME = new Date().setDate(DEFAULT_END_TIME.getDate() - 5); + +function dateRangeValidator(formControl: FormControl): ValidationErrors | null { + if (!formControl.parent) { + return null; + } + + const filterForm = formControl.parent; + const startTimeMs = new Date(filterForm.controls['startTime'].value).getTime(); + const endTimeMs = new Date(filterForm.controls['endTime'].value).getTime(); + + if (startTimeMs > endTimeMs || endTimeMs > new Date().getTime()) { + return { error: 'Selected date range is invalid.' }; + } + return null; +} + +export type PcapFilterFormValue = { + startTime: string, + endTime: string, + ipSrcAddr: string, + ipDstAddr: string, + ipSrcPort: string, + ipDstPort: string, + protocol: string, + includeReverse: boolean, + packetFilter: string +}; + +function transformModelToControlValue(model: PcapRequest): PcapFilterFormValue { + const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + let endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); + if (isNaN((new Date(model.endTimeMs).getTime()))) { + endTimeStr = moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + } else { + endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); + } + + return { + startTime: startTimeStr, + endTime: endTimeStr, + ipSrcAddr: model.ipSrcAddr, + ipDstAddr: model.ipDstAddr, + ipSrcPort: model.ipSrcPort ? String(model.ipSrcPort) : '', + ipDstPort: model.ipDstPort ? String(model.ipDstPort) : '', + protocol: model.protocol, + includeReverse: model.includeReverse, + packetFilter: model.packetFilter + }; +} + +function transformControlValueToModel(control: FormGroup): PcapRequest { + const pcapRequest = new PcapRequest(); + pcapRequest.startTimeMs = new Date(control.value.startTime).getTime(); + pcapRequest.endTimeMs = new Date(control.value.endTime).getTime(); + pcapRequest.ipSrcAddr = control.value.ipSrcAddr; + pcapRequest.ipDstAddr = control.value.ipDstAddr; + pcapRequest.ipSrcPort = control.value.ipSrcPort; + pcapRequest.ipDstPort = control.value.ipDstPort; + pcapRequest.protocol = control.value.protocol; + pcapRequest.includeReverse = control.value.includeReverse; + pcapRequest.packetFilter = control.value.packetFilter; + return pcapRequest; +} + @Component({ selector: 'app-pcap-filters', templateUrl: './pcap-filters.component.html', styleUrls: ['./pcap-filters.component.scss'] }) -export class PcapFiltersComponent implements OnInit, OnChanges { +export class PcapFiltersComponent implements OnChanges { - @Input() queryRunning: boolean = true; + @Input() queryRunning = true; @Input() model: PcapRequest = new PcapRequest(); @Output() search: EventEmitter = new EventEmitter(); - startTimeStr: string; - endTimeStr: string; - ipSrcPort: string = ''; - ipDstPort: string = ''; - - constructor() { } + private validIp: RegExp = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}$/; + private validPort: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; - ngOnInit() { - const endTime = new Date(); - const startTime = new Date().setDate(endTime.getDate() - 5); - - this.startTimeStr = moment(startTime).format(DEFAULT_TIMESTAMP_FORMAT); - this.endTimeStr = moment(endTime).format(DEFAULT_TIMESTAMP_FORMAT); - } + filterForm = new FormGroup({ + startTime: new FormControl(moment(DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + endTime: new FormControl(moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + ipSrcAddr: new FormControl('', Validators.pattern(this.validIp)), + ipSrcPort: new FormControl('', Validators.pattern(this.validPort)), + ipDstAddr: new FormControl('', Validators.pattern(this.validIp)), + ipDstPort: new FormControl('', Validators.pattern(this.validPort)), + protocol: new FormControl(''), + includeReverse: new FormControl(), + packetFilter: new FormControl(''), + }); ngOnChanges(changes: SimpleChanges): void { if (changes['model']) { - this.startTimeStr = moment(changes['model'].currentValue.startTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); - this.endTimeStr = moment(changes['model'].currentValue.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); - let newIpSrcPort = changes['model'].currentValue.ipSrcPort; - this.ipSrcPort = newIpSrcPort ? newIpSrcPort.toString() : ''; - let newIpDstPort = changes['model'].currentValue.ipDstPort; - this.ipDstPort = newIpDstPort ? newIpDstPort.toString() : ''; + const newModel: PcapRequest = changes['model'].currentValue; + const controlValue = transformModelToControlValue(newModel); + this.filterForm.setValue(controlValue); } } onSubmit() { - this.model.startTimeMs = moment(this.startTimeStr, DEFAULT_TIMESTAMP_FORMAT).valueOf(); - this.model.endTimeMs = moment(this.endTimeStr, DEFAULT_TIMESTAMP_FORMAT).valueOf(); - if (this.ipSrcPort !== '') { - this.model.ipSrcPort = +this.ipSrcPort; - } else { - delete this.model.ipSrcPort; - } - if (this.ipDstPort !== '') { - this.model.ipDstPort = +this.ipDstPort; - } else { - delete this.model.ipDstPort; - } - - this.search.emit(this.model); + const pcapRequest = transformControlValueToModel(this.filterForm); + this.search.emit(pcapRequest); } } From 4ad51a4e039541c61713d30ff3ce44fd68931c4f Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 23 Aug 2018 13:11:47 +0200 Subject: [PATCH 09/17] renaming constants --- .../app/pcap/pcap-filters/pcap-filters.component.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts index 92eec7d57f..523cd07a1a 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts @@ -23,8 +23,8 @@ import { DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; import { PcapRequest } from '../model/pcap.request'; -const DEFAULT_END_TIME = new Date(); -const DEFAULT_START_TIME = new Date().setDate(DEFAULT_END_TIME.getDate() - 5); +const defaultEndTime = new Date(); +const defaultStartTime = new Date().setDate(defaultEndTime.getDate() - 5); function dateRangeValidator(formControl: FormControl): ValidationErrors | null { if (!formControl.parent) { @@ -54,10 +54,10 @@ export type PcapFilterFormValue = { }; function transformModelToControlValue(model: PcapRequest): PcapFilterFormValue { - const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : defaultStartTime).format(DEFAULT_TIMESTAMP_FORMAT); let endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); if (isNaN((new Date(model.endTimeMs).getTime()))) { - endTimeStr = moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + endTimeStr = moment(defaultEndTime).format(DEFAULT_TIMESTAMP_FORMAT); } else { endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); } @@ -104,8 +104,8 @@ export class PcapFiltersComponent implements OnChanges { private validPort: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; filterForm = new FormGroup({ - startTime: new FormControl(moment(DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), - endTime: new FormControl(moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + startTime: new FormControl(moment(defaultStartTime).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + endTime: new FormControl(moment(defaultEndTime).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), ipSrcAddr: new FormControl('', Validators.pattern(this.validIp)), ipSrcPort: new FormControl('', Validators.pattern(this.validPort)), ipDstAddr: new FormControl('', Validators.pattern(this.validIp)), From 40a98e5f9f8a1568168afd63eb4a35b7b5d4ff41 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 23 Aug 2018 13:42:37 +0200 Subject: [PATCH 10/17] refactoring out default dates and transform functions --- .../pcap-filters/pcap-filters.component.ts | 50 +++---------------- .../metron-alerts/src/app/utils/constants.ts | 3 ++ .../metron-alerts/src/app/utils/utils.ts | 47 +++++++++++++++-- 3 files changed, 52 insertions(+), 48 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts index 523cd07a1a..069a16eff0 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts @@ -19,12 +19,10 @@ import {Component, Input, Output, EventEmitter, OnChanges, SimpleChanges} from ' import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms'; import * as moment from 'moment/moment'; -import { DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; +import { DEFAULT_START_TIME, DEFAULT_END_TIME, DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; import { PcapRequest } from '../model/pcap.request'; - -const defaultEndTime = new Date(); -const defaultStartTime = new Date().setDate(defaultEndTime.getDate() - 5); +import { Utils } from '../../utils/utils'; function dateRangeValidator(formControl: FormControl): ValidationErrors | null { if (!formControl.parent) { @@ -53,42 +51,6 @@ export type PcapFilterFormValue = { packetFilter: string }; -function transformModelToControlValue(model: PcapRequest): PcapFilterFormValue { - const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : defaultStartTime).format(DEFAULT_TIMESTAMP_FORMAT); - let endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); - if (isNaN((new Date(model.endTimeMs).getTime()))) { - endTimeStr = moment(defaultEndTime).format(DEFAULT_TIMESTAMP_FORMAT); - } else { - endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); - } - - return { - startTime: startTimeStr, - endTime: endTimeStr, - ipSrcAddr: model.ipSrcAddr, - ipDstAddr: model.ipDstAddr, - ipSrcPort: model.ipSrcPort ? String(model.ipSrcPort) : '', - ipDstPort: model.ipDstPort ? String(model.ipDstPort) : '', - protocol: model.protocol, - includeReverse: model.includeReverse, - packetFilter: model.packetFilter - }; -} - -function transformControlValueToModel(control: FormGroup): PcapRequest { - const pcapRequest = new PcapRequest(); - pcapRequest.startTimeMs = new Date(control.value.startTime).getTime(); - pcapRequest.endTimeMs = new Date(control.value.endTime).getTime(); - pcapRequest.ipSrcAddr = control.value.ipSrcAddr; - pcapRequest.ipDstAddr = control.value.ipDstAddr; - pcapRequest.ipSrcPort = control.value.ipSrcPort; - pcapRequest.ipDstPort = control.value.ipDstPort; - pcapRequest.protocol = control.value.protocol; - pcapRequest.includeReverse = control.value.includeReverse; - pcapRequest.packetFilter = control.value.packetFilter; - return pcapRequest; -} - @Component({ selector: 'app-pcap-filters', templateUrl: './pcap-filters.component.html', @@ -104,8 +66,8 @@ export class PcapFiltersComponent implements OnChanges { private validPort: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; filterForm = new FormGroup({ - startTime: new FormControl(moment(defaultStartTime).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), - endTime: new FormControl(moment(defaultEndTime).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + startTime: new FormControl(moment(DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + endTime: new FormControl(moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), ipSrcAddr: new FormControl('', Validators.pattern(this.validIp)), ipSrcPort: new FormControl('', Validators.pattern(this.validPort)), ipDstAddr: new FormControl('', Validators.pattern(this.validIp)), @@ -118,13 +80,13 @@ export class PcapFiltersComponent implements OnChanges { ngOnChanges(changes: SimpleChanges): void { if (changes['model']) { const newModel: PcapRequest = changes['model'].currentValue; - const controlValue = transformModelToControlValue(newModel); + const controlValue = Utils.transformModelToControlValue(newModel); this.filterForm.setValue(controlValue); } } onSubmit() { - const pcapRequest = transformControlValueToModel(this.filterForm); + const pcapRequest = Utils.transformControlValueToModel(this.filterForm); this.search.emit(pcapRequest); } } diff --git a/metron-interface/metron-alerts/src/app/utils/constants.ts b/metron-interface/metron-alerts/src/app/utils/constants.ts index 74e887ab15..703e0f7dd8 100644 --- a/metron-interface/metron-alerts/src/app/utils/constants.ts +++ b/metron-interface/metron-alerts/src/app/utils/constants.ts @@ -37,3 +37,6 @@ export let INDEXES = environment.indices ? environment.indices.split(',') : []; export let POLLING_DEFAULT_STATE = environment.defaultPollingState; export let MAX_ALERTS_IN_META_ALERTS = 350; + +export const DEFAULT_END_TIME = new Date(); +export const DEFAULT_START_TIME = new Date().setDate(DEFAULT_END_TIME.getDate() - 5); diff --git a/metron-interface/metron-alerts/src/app/utils/utils.ts b/metron-interface/metron-alerts/src/app/utils/utils.ts index 61cc45b4e8..c4718bea8a 100644 --- a/metron-interface/metron-alerts/src/app/utils/utils.ts +++ b/metron-interface/metron-alerts/src/app/utils/utils.ts @@ -17,12 +17,15 @@ */ import * as moment from 'moment/moment'; -import {DEFAULT_TIMESTAMP_FORMAT, META_ALERTS_SENSOR_TYPE} from './constants'; -import {Alert} from '../model/alert'; -import {DateFilterValue} from '../model/date-filter-value'; -import { environment } from 'environments/environment'; +import { DEFAULT_START_TIME, DEFAULT_END_TIME, DEFAULT_TIMESTAMP_FORMAT, META_ALERTS_SENSOR_TYPE } from './constants'; +import { Alert } from '../model/alert'; +import { DateFilterValue } from '../model/date-filter-value'; +import { PcapRequest } from '../pcap/model/pcap.request'; +import { PcapFilterFormValue } from '../pcap/pcap-filters/pcap-filters.component'; +import { FormGroup } from '@angular/forms'; export class Utils { + public static escapeESField(field: string): string { return field.replace(/:/g, '\\:'); } @@ -202,4 +205,40 @@ export class Utils { return {toDate: toDate, fromDate: fromDate}; } + public static transformModelToControlValue(model: PcapRequest): PcapFilterFormValue { + const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + let endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); + if (isNaN((new Date(model.endTimeMs).getTime()))) { + endTimeStr = moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + } else { + endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); + } + + return { + startTime: startTimeStr, + endTime: endTimeStr, + ipSrcAddr: model.ipSrcAddr, + ipDstAddr: model.ipDstAddr, + ipSrcPort: model.ipSrcPort ? String(model.ipSrcPort) : '', + ipDstPort: model.ipDstPort ? String(model.ipDstPort) : '', + protocol: model.protocol, + includeReverse: model.includeReverse, + packetFilter: model.packetFilter + }; + } + + public static transformControlValueToModel(control: FormGroup): PcapRequest { + const pcapRequest = new PcapRequest(); + pcapRequest.startTimeMs = new Date(control.value.startTime).getTime(); + pcapRequest.endTimeMs = new Date(control.value.endTime).getTime(); + pcapRequest.ipSrcAddr = control.value.ipSrcAddr; + pcapRequest.ipDstAddr = control.value.ipDstAddr; + pcapRequest.ipSrcPort = control.value.ipSrcPort; + pcapRequest.ipDstPort = control.value.ipDstPort; + pcapRequest.protocol = control.value.protocol; + pcapRequest.includeReverse = control.value.includeReverse; + pcapRequest.packetFilter = control.value.packetFilter; + return pcapRequest; + } + } From 05154c0a5e08d5e2085573cf1122bfc19183337b Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 23 Aug 2018 14:14:45 +0200 Subject: [PATCH 11/17] removing timestamp defaul values --- .../metron-alerts/src/app/pcap/model/pcap.request.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts b/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts index 4ba80b1567..3e00a4b1dd 100644 --- a/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts +++ b/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts @@ -17,8 +17,8 @@ */ export class PcapRequest { - startTimeMs = 0; - endTimeMs = 150000000000000000; + startTimeMs: number; + endTimeMs: number; ipSrcAddr = ''; ipSrcPort = ''; ipDstAddr = ''; From d5ba708b6f79c1905078e9c6205b9c207dcf5787 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 23 Aug 2018 18:07:30 +0200 Subject: [PATCH 12/17] moving transform functions back to filter --- .../pcap-filters/pcap-filters.component.ts | 41 +++++++++++++++++-- .../metron-alerts/src/app/utils/utils.ts | 37 ----------------- 2 files changed, 38 insertions(+), 40 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts index 069a16eff0..ba0d80f196 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts @@ -22,7 +22,6 @@ import * as moment from 'moment/moment'; import { DEFAULT_START_TIME, DEFAULT_END_TIME, DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; import { PcapRequest } from '../model/pcap.request'; -import { Utils } from '../../utils/utils'; function dateRangeValidator(formControl: FormControl): ValidationErrors | null { if (!formControl.parent) { @@ -39,6 +38,42 @@ function dateRangeValidator(formControl: FormControl): ValidationErrors | null { return null; } +function transformPcapRequestToFormGroupValue(model: PcapRequest): PcapFilterFormValue { + const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + let endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); + if (isNaN((new Date(model.endTimeMs).getTime()))) { + endTimeStr = moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT); + } else { + endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); + } + + return { + startTime: startTimeStr, + endTime: endTimeStr, + ipSrcAddr: model.ipSrcAddr, + ipDstAddr: model.ipDstAddr, + ipSrcPort: model.ipSrcPort ? String(model.ipSrcPort) : '', + ipDstPort: model.ipDstPort ? String(model.ipDstPort) : '', + protocol: model.protocol, + includeReverse: model.includeReverse, + packetFilter: model.packetFilter + }; +} + +function transformFormGroupValueToPcapRequest(control: FormGroup): PcapRequest { + const pcapRequest = new PcapRequest(); + pcapRequest.startTimeMs = new Date(control.value.startTime).getTime(); + pcapRequest.endTimeMs = new Date(control.value.endTime).getTime(); + pcapRequest.ipSrcAddr = control.value.ipSrcAddr; + pcapRequest.ipDstAddr = control.value.ipDstAddr; + pcapRequest.ipSrcPort = control.value.ipSrcPort; + pcapRequest.ipDstPort = control.value.ipDstPort; + pcapRequest.protocol = control.value.protocol; + pcapRequest.includeReverse = control.value.includeReverse; + pcapRequest.packetFilter = control.value.packetFilter; + return pcapRequest; +} + export type PcapFilterFormValue = { startTime: string, endTime: string, @@ -80,13 +115,13 @@ export class PcapFiltersComponent implements OnChanges { ngOnChanges(changes: SimpleChanges): void { if (changes['model']) { const newModel: PcapRequest = changes['model'].currentValue; - const controlValue = Utils.transformModelToControlValue(newModel); + const controlValue = transformPcapRequestToFormGroupValue(newModel); this.filterForm.setValue(controlValue); } } onSubmit() { - const pcapRequest = Utils.transformControlValueToModel(this.filterForm); + const pcapRequest = transformFormGroupValueToPcapRequest(this.filterForm); this.search.emit(pcapRequest); } } diff --git a/metron-interface/metron-alerts/src/app/utils/utils.ts b/metron-interface/metron-alerts/src/app/utils/utils.ts index c4718bea8a..4eb098af47 100644 --- a/metron-interface/metron-alerts/src/app/utils/utils.ts +++ b/metron-interface/metron-alerts/src/app/utils/utils.ts @@ -204,41 +204,4 @@ export class Utils { return {toDate: toDate, fromDate: fromDate}; } - - public static transformModelToControlValue(model: PcapRequest): PcapFilterFormValue { - const startTimeStr = moment(model.startTimeMs > 0 ? model.startTimeMs : DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT); - let endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); - if (isNaN((new Date(model.endTimeMs).getTime()))) { - endTimeStr = moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT); - } else { - endTimeStr = moment(model.endTimeMs).format(DEFAULT_TIMESTAMP_FORMAT); - } - - return { - startTime: startTimeStr, - endTime: endTimeStr, - ipSrcAddr: model.ipSrcAddr, - ipDstAddr: model.ipDstAddr, - ipSrcPort: model.ipSrcPort ? String(model.ipSrcPort) : '', - ipDstPort: model.ipDstPort ? String(model.ipDstPort) : '', - protocol: model.protocol, - includeReverse: model.includeReverse, - packetFilter: model.packetFilter - }; - } - - public static transformControlValueToModel(control: FormGroup): PcapRequest { - const pcapRequest = new PcapRequest(); - pcapRequest.startTimeMs = new Date(control.value.startTime).getTime(); - pcapRequest.endTimeMs = new Date(control.value.endTime).getTime(); - pcapRequest.ipSrcAddr = control.value.ipSrcAddr; - pcapRequest.ipDstAddr = control.value.ipDstAddr; - pcapRequest.ipSrcPort = control.value.ipSrcPort; - pcapRequest.ipDstPort = control.value.ipDstPort; - pcapRequest.protocol = control.value.protocol; - pcapRequest.includeReverse = control.value.includeReverse; - pcapRequest.packetFilter = control.value.packetFilter; - return pcapRequest; - } - } From 1e8672d980d97b2f23f87b54906b09fa34e250b6 Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 23 Aug 2018 18:36:52 +0200 Subject: [PATCH 13/17] adding back missing tests --- .../pcap-packet-line.component.spec.ts | 50 +++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts index d01c0cbc59..e558499362 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts @@ -16,7 +16,7 @@ * limitations under the License. */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { fakePacket } from '../model/pdml.mock'; +import { fakePacket, fakeUdpPacket } from '../model/pdml.mock'; import { PcapPacketLineComponent } from './pcap-packet-line.component'; @@ -34,8 +34,6 @@ describe('PcapPacketLineComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(PcapPacketLineComponent); component = fixture.componentInstance; - component.packet = fakePacket; - fixture.detectChanges(); }); it('should be created', () => { @@ -43,6 +41,8 @@ describe('PcapPacketLineComponent', () => { }); it('should extract timestamp fields', () => { + component.packet = fakePacket; + fixture.detectChanges(); expect(component.ip.timestamp).toEqual({ "name": "timestamp", "pos": "0", @@ -59,6 +59,8 @@ describe('PcapPacketLineComponent', () => { }); it('should extract ipSrcAddr fields', () => { + component.packet = fakePacket; + fixture.detectChanges(); expect(component.ip.ipSrcAddr).toEqual({ "name": "ip.src", "pos": "26", @@ -74,6 +76,8 @@ describe('PcapPacketLineComponent', () => { }); it('should extract ipSrcPort fields', () => { + component.packet = fakePacket; + fixture.detectChanges(); expect(component.ip.ipSrcPort).toEqual({ "name": "tcp.srcport", "pos": "34", @@ -89,6 +93,8 @@ describe('PcapPacketLineComponent', () => { }); it('should extract ipDestAddr fields', () => { + component.packet = fakePacket; + fixture.detectChanges(); expect(component.ip.ipDestAddr).toEqual({ "name": "ip.dst", "pos": "30", @@ -104,6 +110,8 @@ describe('PcapPacketLineComponent', () => { }); it('should extract ipDestPort fields', () => { + component.packet = fakePacket; + fixture.detectChanges(); expect(component.ip.ipDestPort).toEqual({ "name": "tcp.dstport", "pos": "36", @@ -119,6 +127,8 @@ describe('PcapPacketLineComponent', () => { }); it('should extract protocol fields', () => { + component.packet = fakePacket; + fixture.detectChanges(); expect(component.ip.protocol).toEqual({ "name": "ip.proto", "pos": "23", @@ -132,4 +142,38 @@ describe('PcapPacketLineComponent', () => { "protos": null }); }); + + it('should extract UDP ipSrcPort fields', () => { + component.packet = fakeUdpPacket; + fixture.detectChanges(); + expect(component.ip.ipSrcPort).toEqual({ + "name": "udp.srcport", + "pos": "34", + "showname": "Source port: bootpc (68)", + "size": "2", + "value": "0044", + "show": "68", + "unmaskedvalue": null, + "hide": null, + "fields": null, + "protos": null + }); + }); + + it('should extract UDP ipDestPort fields', () => { + component.packet = fakeUdpPacket; + fixture.detectChanges(); + expect(component.ip.ipDestPort).toEqual({ + "name": "udp.dstport", + "pos": "36", + "showname": "Destination port: bootps (67)", + "size": "2", + "value": "0043", + "show": "67", + "unmaskedvalue": null, + "hide": null, + "fields": null, + "protos": null + }); + }); }); From 1c030bcb47b032ae3b6ecc96b3371447c4383d2d Mon Sep 17 00:00:00 2001 From: Tibor Meller Date: Thu, 23 Aug 2018 18:40:59 +0200 Subject: [PATCH 14/17] fixing test names --- .../pcap/pcap-packet-line/pcap-packet-line.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts index e558499362..dccfaa27ac 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts @@ -92,7 +92,7 @@ describe('PcapPacketLineComponent', () => { }); }); - it('should extract ipDestAddr fields', () => { + it('should extract TCP ipDestAddr fields', () => { component.packet = fakePacket; fixture.detectChanges(); expect(component.ip.ipDestAddr).toEqual({ @@ -109,7 +109,7 @@ describe('PcapPacketLineComponent', () => { }); }); - it('should extract ipDestPort fields', () => { + it('should extract TCP ipDestPort fields', () => { component.packet = fakePacket; fixture.detectChanges(); expect(component.ip.ipDestPort).toEqual({ From 12c94d4a940326d15d22f79b95223ed00f532dc3 Mon Sep 17 00:00:00 2001 From: ruffle1986 Date: Fri, 24 Aug 2018 12:12:45 +0200 Subject: [PATCH 15/17] fix(pcap-filters): validate start date if end date changes and vica versa. --- .../pcap-filters/pcap-filters.component.ts | 39 +++++++++++++++---- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts index ba0d80f196..292d459d00 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, Input, Output, EventEmitter, OnChanges, SimpleChanges} from '@angular/core'; +import {Component, Input, Output, EventEmitter, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms'; import * as moment from 'moment/moment'; @@ -23,17 +23,27 @@ import { DEFAULT_START_TIME, DEFAULT_END_TIME, DEFAULT_TIMESTAMP_FORMAT } from ' import { PcapRequest } from '../model/pcap.request'; -function dateRangeValidator(formControl: FormControl): ValidationErrors | null { +function validateStartDate(formControl: FormControl): ValidationErrors | null { if (!formControl.parent) { return null; } - const filterForm = formControl.parent; const startTimeMs = new Date(filterForm.controls['startTime'].value).getTime(); const endTimeMs = new Date(filterForm.controls['endTime'].value).getTime(); + if (startTimeMs > endTimeMs) { + return { error: 'Start time cannot be bigger than end date.' }; + } + return null; +} - if (startTimeMs > endTimeMs || endTimeMs > new Date().getTime()) { - return { error: 'Selected date range is invalid.' }; +function validateEndDate(formControl: FormControl): ValidationErrors | null { + if (!formControl.parent) { + return null; + } + const filterForm = formControl.parent; + const endTimeMs = new Date(filterForm.controls['endTime'].value).getTime(); + if (endTimeMs > new Date().getTime()) { + return { error: 'End time cannot be in the future.' }; } return null; } @@ -91,7 +101,7 @@ export type PcapFilterFormValue = { templateUrl: './pcap-filters.component.html', styleUrls: ['./pcap-filters.component.scss'] }) -export class PcapFiltersComponent implements OnChanges { +export class PcapFiltersComponent implements OnInit, OnChanges { @Input() queryRunning = true; @Input() model: PcapRequest = new PcapRequest(); @@ -101,8 +111,8 @@ export class PcapFiltersComponent implements OnChanges { private validPort: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; filterForm = new FormGroup({ - startTime: new FormControl(moment(DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), - endTime: new FormControl(moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT), dateRangeValidator), + startTime: new FormControl(moment(DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT), validateStartDate), + endTime: new FormControl(moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT), validateEndDate), ipSrcAddr: new FormControl('', Validators.pattern(this.validIp)), ipSrcPort: new FormControl('', Validators.pattern(this.validPort)), ipDstAddr: new FormControl('', Validators.pattern(this.validIp)), @@ -112,6 +122,19 @@ export class PcapFiltersComponent implements OnChanges { packetFilter: new FormControl(''), }); + ngOnInit() { + this.filterForm.get('startTime').valueChanges.subscribe((value) => { + this.filterForm.get('endTime').updateValueAndValidity({ + emitEvent: false + }); + }); + this.filterForm.get('endTime').valueChanges.subscribe((value) => { + this.filterForm.get('startTime').updateValueAndValidity({ + emitEvent: false + }); + }); + } + ngOnChanges(changes: SimpleChanges): void { if (changes['model']) { const newModel: PcapRequest = changes['model'].currentValue; From 1b3662e5c3f1f37507daee899ef8ae01a0c483c6 Mon Sep 17 00:00:00 2001 From: ruffle1986 Date: Fri, 24 Aug 2018 13:24:20 +0200 Subject: [PATCH 16/17] refactor: handle changes in more destricptive methods (unsubscribe in destructor) --- .../pcap-filters/pcap-filters.component.ts | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts index 292d459d00..7cc8980abb 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts @@ -15,13 +15,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, Input, Output, EventEmitter, OnChanges, OnInit, SimpleChanges} from '@angular/core'; +import {Component, Input, Output, EventEmitter, OnChanges, OnInit, OnDestroy, SimpleChanges} from '@angular/core'; import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms'; import * as moment from 'moment/moment'; import { DEFAULT_START_TIME, DEFAULT_END_TIME, DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; import { PcapRequest } from '../model/pcap.request'; +import { Observable, Subscription } from 'rxjs'; function validateStartDate(formControl: FormControl): ValidationErrors | null { if (!formControl.parent) { @@ -101,7 +102,7 @@ export type PcapFilterFormValue = { templateUrl: './pcap-filters.component.html', styleUrls: ['./pcap-filters.component.scss'] }) -export class PcapFiltersComponent implements OnInit, OnChanges { +export class PcapFiltersComponent implements OnInit, OnChanges, OnDestroy { @Input() queryRunning = true; @Input() model: PcapRequest = new PcapRequest(); @@ -110,6 +111,8 @@ export class PcapFiltersComponent implements OnInit, OnChanges { private validIp: RegExp = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}$/; private validPort: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; + private dateRangeChangeSubscription: Subscription; + filterForm = new FormGroup({ startTime: new FormControl(moment(DEFAULT_START_TIME).format(DEFAULT_TIMESTAMP_FORMAT), validateStartDate), endTime: new FormControl(moment(DEFAULT_END_TIME).format(DEFAULT_TIMESTAMP_FORMAT), validateEndDate), @@ -122,19 +125,29 @@ export class PcapFiltersComponent implements OnInit, OnChanges { packetFilter: new FormControl(''), }); - ngOnInit() { - this.filterForm.get('startTime').valueChanges.subscribe((value) => { - this.filterForm.get('endTime').updateValueAndValidity({ - emitEvent: false - }); - }); - this.filterForm.get('endTime').valueChanges.subscribe((value) => { - this.filterForm.get('startTime').updateValueAndValidity({ + subscribeToDateRangeChanges(callback: () => void): Subscription { + const startTimeChanges: Observable = this.filterForm.get('startTime').valueChanges; + const endTimeChanges: Observable = this.filterForm.get('endTime').valueChanges; + return startTimeChanges.merge(endTimeChanges).subscribe(callback); + } + + forceValidateDateRangeFields() { + [ + this.filterForm.get('startTime'), + this.filterForm.get('endTime'), + ].forEach((control: FormControl) => { + control.updateValueAndValidity({ emitEvent: false }); }); } + ngOnInit() { + this.dateRangeChangeSubscription = this.subscribeToDateRangeChanges(() => { + this.forceValidateDateRangeFields(); + }); + } + ngOnChanges(changes: SimpleChanges): void { if (changes['model']) { const newModel: PcapRequest = changes['model'].currentValue; @@ -147,4 +160,8 @@ export class PcapFiltersComponent implements OnInit, OnChanges { const pcapRequest = transformFormGroupValueToPcapRequest(this.filterForm); this.search.emit(pcapRequest); } + + ngOnDestroy() { + this.dateRangeChangeSubscription.unsubscribe(); + } } From 5e3c6769ffc6c08df6490d75ea6e8e095f91c298 Mon Sep 17 00:00:00 2001 From: ruffle1986 Date: Fri, 24 Aug 2018 14:27:30 +0200 Subject: [PATCH 17/17] add date range validation tests --- .../pcap-filters.component.spec.ts | 50 ++++++++++++++++++- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts index cd4214f430..c707451ea0 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts @@ -16,15 +16,17 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { Component, Input, Output, EventEmitter, DebugElement, SimpleChange } from '@angular/core'; +import { DebugElement, SimpleChange } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { PcapFiltersComponent } from './pcap-filters.component'; import { DatePickerModule } from '../../shared/date-picker/date-picker.module'; import { PcapRequest } from '../model/pcap.request'; +import { DEFAULT_TIMESTAMP_FORMAT } from '../../utils/constants'; +import * as moment from 'moment/moment'; describe('PcapFiltersComponent', () => { let component: PcapFiltersComponent; @@ -414,5 +416,49 @@ describe('PcapFiltersComponent', () => { }); }); + it('start date should be valid by default', () => { + expect(component.filterForm.get('startTime').valid).toBe(true); + }); + + it('start date is invalid if it is bigger than end date', () => { + // start time is bigger than end time + component.filterForm.patchValue({ + startTime: '2018-08-24 16:30:00', + endTime: '2018-08-23 16:30:00' + }); + + expect(component.filterForm.get('startTime').valid).toBe(false); + }); + + it('start date should be valid again based on the end date', () => { + // start time is bigger than end time + component.filterForm.patchValue({ + startTime: '2018-08-24 16:30:00', + endTime: '2018-08-23 16:30:00' + }); + + expect(component.filterForm.get('startTime').valid).toBe(false); + + component.filterForm.patchValue({ + endTime: '2018-08-25 16:30:00' + }); + + expect(component.filterForm.get('startTime').valid).toBe(true); + }); + + it('end date should be valid by default', () => { + expect(component.filterForm.get('endTime').valid).toBe(true); + }); + + it('end date is invalid if it is in the future', () => { + + expect(component.filterForm.get('endTime').valid).toBe(true); + + component.filterForm.patchValue({ + endTime: moment(new Date()).add(2, 'days').format(DEFAULT_TIMESTAMP_FORMAT) + }); + + expect(component.filterForm.get('endTime').valid).toBe(false); + }); }); });