METRON-1675 PCAP UI - Introduce the paging capability (sardell via merrimanr) closes apache/metron#1121
Project: http://git-wip-us.apache.org/repos/asf/metron/repo Commit: http://git-wip-us.apache.org/repos/asf/metron/commit/037b50b9 Tree: http://git-wip-us.apache.org/repos/asf/metron/tree/037b50b9 Diff: http://git-wip-us.apache.org/repos/asf/metron/diff/037b50b9 Branch: refs/remotes/upstream/feature/METRON-1699-create-batch-profiler Commit: 037b50b9a829d7292db1148fc628d9231da499e1 Parents: 756ceed Author: sardell <sard...@hortonworks.com> Authored: Tue Aug 7 09:04:33 2018 -0500 Committer: rmerriman <merrim...@gmail.com> Committed: Tue Aug 7 09:04:33 2018 -0500 ---------------------------------------------------------------------- .../src/app/pcap/model/pcap-pagination.ts | 21 ++++++ .../src/app/pcap/model/pcap-status-response.ts | 23 ++++++ .../src/app/pcap/model/pcap.request.ts | 2 +- .../app/pcap/pcap-list/pcap-list.component.html | 1 + .../pcap/pcap-list/pcap-list.component.spec.ts | 11 +++ .../app/pcap/pcap-list/pcap-list.component.ts | 18 +++-- .../pcap-pagination.component.html | 19 +++++ .../pcap-pagination.component.scss | 40 ++++++++++ .../pcap-pagination.component.spec.ts | 78 ++++++++++++++++++++ .../pcap-pagination.component.ts | 41 ++++++++++ .../pcap/pcap-panel/pcap-panel.component.html | 7 +- .../pcap-panel/pcap-panel.component.spec.ts | 2 + .../app/pcap/pcap-panel/pcap-panel.component.ts | 27 +++++-- .../metron-alerts/src/app/pcap/pcap.module.ts | 10 +-- .../metron-alerts/src/app/pcap/pcap.routing.ts | 2 +- .../src/app/pcap/service/pcap.service.spec.ts | 2 +- .../src/app/pcap/service/pcap.service.ts | 10 +-- 17 files changed, 279 insertions(+), 35 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/model/pcap-pagination.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/model/pcap-pagination.ts b/metron-interface/metron-alerts/src/app/pcap/model/pcap-pagination.ts new file mode 100644 index 0000000..ae7619b --- /dev/null +++ b/metron-interface/metron-alerts/src/app/pcap/model/pcap-pagination.ts @@ -0,0 +1,21 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export class PcapPagination { + selectedPage = 1; + total: number; +} http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/model/pcap-status-response.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/model/pcap-status-response.ts b/metron-interface/metron-alerts/src/app/pcap/model/pcap-status-response.ts new file mode 100644 index 0000000..d4d9a5e --- /dev/null +++ b/metron-interface/metron-alerts/src/app/pcap/model/pcap-status-response.ts @@ -0,0 +1,23 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export class PcapStatusResponse { + jobId: string; + jobStatus: string; + percentComplete: number; + pageTotal: number; +} http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/model/pcap.request.ts ---------------------------------------------------------------------- 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 3a27714..91c2287 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 @@ -26,4 +26,4 @@ export class PcapRequest { protocol: string = ''; packetFilter: string = ''; includeReverse: boolean = false; -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.html ---------------------------------------------------------------------- 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 92dfb1d..4d74541 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 @@ -34,4 +34,5 @@ </ng-container> </tbody> </table> + <app-pcap-pagination [(pagination)]="pagination" (pageChange)="onPageChange()"></app-pcap-pagination> </div> http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts index 1ac8c70..1d0b996 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts @@ -18,6 +18,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { PcapListComponent } from './pcap-list.component'; +import { PcapPagination } from '../model/pcap-pagination'; +import { PcapPaginationComponent } from '../pcap-pagination/pcap-pagination.component'; import { FormsModule } from '../../../../node_modules/@angular/forms'; import { PdmlPacket } from '../model/pdml'; import { Component, Input } from '@angular/core'; @@ -53,6 +55,7 @@ describe('PcapListComponent', () => { FakePcapPacketLineComponent, FakePcapPacketComponent, PcapListComponent, + PcapPaginationComponent ] }) .compileComponents(); @@ -61,10 +64,18 @@ describe('PcapListComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(PcapListComponent); component = fixture.componentInstance; + component.pagination = new PcapPagination(); + component.pagination.total = 10; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should emit an event with onPageChange', () => { + const incrementSpy = spyOn(component.pageUpdate, 'emit'); + component.onPageChange(); + expect(incrementSpy).toHaveBeenCalled(); + }); }); http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.ts index fbc1aec..e340a0b 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.ts @@ -15,25 +15,29 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Component, OnInit, Input } from '@angular/core'; -import { Pdml,PdmlPacket } from '../model/pdml' +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { PdmlPacket } from '../model/pdml'; +import { PcapPagination } from '../model/pcap-pagination'; @Component({ selector: 'app-pcap-list', templateUrl: './pcap-list.component.html', styleUrls: ['./pcap-list.component.scss'] }) -export class PcapListComponent implements OnInit { +export class PcapListComponent { - @Input() packets: PdmlPacket[] + @Input() pagination: PcapPagination = new PcapPagination(); + @Input() packets: PdmlPacket[]; + @Output() pageUpdate: EventEmitter<number> = new EventEmitter(); constructor() { } - ngOnInit() { + toggle(packet) { + packet.expanded = !packet.expanded; } - toggle(packet) { - packet.expanded= !packet.expanded + onPageChange() { + this.pageUpdate.emit(this.pagination.selectedPage); } } http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.html ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.html b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.html new file mode 100644 index 0000000..c819aee --- /dev/null +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.html @@ -0,0 +1,19 @@ +<!-- + Licensed to the Apache Software + Foundation (ASF) under one or more contributor license agreements. See the + NOTICE file distributed with this work for additional information regarding + copyright ownership. The ASF licenses this file to You under the Apache License, + Version 2.0 (the "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software distributed + under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES + 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="pcap-pagination" *ngIf="pagination.total > 0"> + <button class="pcap-pagination-button fa fa-chevron-left" data-qe-id="pcap-pagination-back" (click)="onPrevious()" [disabled]="pagination.selectedPage <= 1"></button> + <span>Page {{ pagination.selectedPage }} of {{ pagination.total }}</span> + <button class="pcap-pagination-button fa fa-chevron-right" data-qe-id="pcap-pagination-next" (click)="onNext()" [disabled]="pagination.total === pagination.selectedPage"></button> +</div> http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.scss ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.scss b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.scss new file mode 100644 index 0000000..bca567c --- /dev/null +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.scss @@ -0,0 +1,40 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.disabled { + cursor: default; + opacity: 0.3; +} + +.pcap-pagination { + font-size: 14px; + text-align: center; + } + +.pcap-pagination-button { + background: transparent; + border: 0; + color: #999; + cursor: pointer; + font-size: 14px; + + &[disabled] { + cursor: default; + opacity: 0.3; + } +} http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.spec.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.spec.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.spec.ts new file mode 100644 index 0000000..d7e0113 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.spec.ts @@ -0,0 +1,78 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { PcapPagination } from '../model/pcap-pagination'; +import { PcapPaginationComponent } from './pcap-pagination.component'; + +describe('PcapPaginationComponent', () => { + let component: PcapPaginationComponent; + let fixture: ComponentFixture<PcapPaginationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PcapPaginationComponent ] + }) + .compileComponents(); + fixture = TestBed.createComponent(PcapPaginationComponent); + component = fixture.componentInstance; + component.pagination = new PcapPagination(); + component.pagination.total = 10; + fixture.detectChanges(); + })); + + beforeEach(() => { + }); + + it('should disable the back button if on the first page result', () => { + const nextButton = fixture.debugElement.query(By.css('[data-qe-id="pcap-pagination-back"]')).nativeElement; + expect(nextButton.disabled).toBe(true); + }); + + it('should disable the next button if on the last page result', () => { + component.pagination.selectedPage = 10; + fixture.detectChanges(); + const nextButton = fixture.debugElement.query(By.css('[data-qe-id="pcap-pagination-next"]')).nativeElement; + expect(nextButton.disabled).toBe(true); + }); + + it('should increment the current page by 1 with onNext()', () => { + component.onNext(); + expect(component.pagination.selectedPage).toBe(2); + }); + + it('should emit an event with onNext()', () => { + const incrementSpy = spyOn(component.pageChange, 'emit'); + component.onNext(); + expect(incrementSpy).toHaveBeenCalled(); + }); + + it('should decrement the current page by 1 with OnPrevious()', () => { + component.pagination.selectedPage += 1; + component.onPrevious(); + expect(component.pagination.selectedPage).toBe(1); + }); + + it('should emit an event with OnPrevious()', () => { + const incrementSpy = spyOn(component.pageChange, 'emit'); + component.onPrevious(); + expect(incrementSpy).toHaveBeenCalled(); + }); + +}); http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.ts b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.ts new file mode 100644 index 0000000..8a0a45c --- /dev/null +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-pagination/pcap-pagination.component.ts @@ -0,0 +1,41 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { PcapPagination } from '../model/pcap-pagination'; + +@Component({ + selector: 'app-pcap-pagination', + templateUrl: './pcap-pagination.component.html', + styleUrls: ['./pcap-pagination.component.scss'] +}) +export class PcapPaginationComponent { + + @Input() pagination = new PcapPagination(); + @Output() pageChange = new EventEmitter(); + + onPrevious() { + this.pagination.selectedPage -= 1; + this.pageChange.emit(); + } + + onNext() { + this.pagination.selectedPage += 1; + this.pageChange.emit(); + } + +} http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.html ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.html b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.html index 1fd250f..12d8df0 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.html +++ b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.html @@ -15,17 +15,14 @@ <div class="panel-header"> <app-pcap-filters [queryRunning]="queryRunning" (search)="onSearch($event)"></app-pcap-filters> </div> - <div *ngIf="queryRunning" class="progress pcap-progress-background"> - <div class="progress-bar progress-bar-animated pcap-progress" role="progressbar" attr.aria-valuenow="{{progressWidth}}" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'max-width': progressWidth + '%', 'transition-duration':'1000ms'}">{{progressWidth}}%</div> + <div class="progress-bar progress-bar-animated pcap-progress" role="progressbar" attr.aria-valuenow="{{progressWidth}}" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'max-width': progressWidth + '%', 'transition-duration':'1000ms'}">{{progressWidth}}%</div> </div> - <div *ngIf="errorMsg" class="alert alert-danger" role="alert"> {{ errorMsg }} </div> - <div class="panel-body" *ngIf="pdml"> - <app-pcap-list [packets]="pdml.packets"></app-pcap-list> + <app-pcap-list [packets]="pdml.packets" [pagination]="pagination" (pageUpdate)="changePage($event)"></app-pcap-list> </div> <a class="btn btn-primary" [attr.href]="getDownloadUrl()" *ngIf="pdml">Download PCAP</a> </div> http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts ---------------------------------------------------------------------- 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 82b29f2..6eb375e 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 @@ -21,6 +21,7 @@ import { PcapPanelComponent } from './pcap-panel.component'; import { Component, Input } from '../../../../node_modules/@angular/core'; import { PdmlPacket } from '../model/pdml'; import { PcapService } from '../service/pcap.service'; +import { PcapPagination } from '../model/pcap-pagination'; @Component({ selector: 'app-pcap-filters', @@ -36,6 +37,7 @@ class FakeFilterComponent { }) class FakePcapListComponent { @Input() packets: PdmlPacket[]; + @Input() pagination: PcapPagination; } describe('PcapPanelComponent', () => { http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts ---------------------------------------------------------------------- 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 4114e24..8e7f2f1 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 @@ -17,10 +17,12 @@ */ import { Component, Input } from '@angular/core'; -import { PcapService, PcapStatusResponse } from '../service/pcap.service'; +import { PcapService } from '../service/pcap.service'; +import { PcapStatusResponse } from '../model/pcap-status-response'; import { PcapRequest } from '../model/pcap.request'; import { Pdml } from '../model/pdml'; import { Subscription } from 'rxjs/Rx'; +import { PcapPagination } from '../model/pcap-pagination'; @Component({ selector: 'app-pcap-panel', @@ -31,18 +33,28 @@ export class PcapPanelComponent { @Input() pdml: Pdml = null; @Input() pcapRequest: PcapRequest; + @Input() resetPaginationForSearch: boolean; statusSubscription: Subscription; queryRunning: boolean = false; queryId: string; progressWidth: number = 0; - selectedPage: number = 1; + pagination: PcapPagination = new PcapPagination(); + savedPcapRequest: {}; errorMsg: string; - constructor(private pcapService: PcapService) {} + constructor(private pcapService: PcapService) { } + + changePage(page) { + this.pagination.selectedPage = page; + this.pcapService.getPackets(this.queryId, this.pagination.selectedPage).toPromise().then(pdml => { + this.pdml = pdml; + }); + } onSearch(pcapRequest) { - console.log(pcapRequest); + this.savedPcapRequest = pcapRequest; + this.pagination.selectedPage = 1; this.pdml = null; this.progressWidth = 0; this.pcapService.submitRequest(pcapRequest).subscribe((submitResponse: PcapStatusResponse) => { @@ -51,9 +63,10 @@ export class PcapPanelComponent { this.errorMsg = null; this.statusSubscription = this.pcapService.pollStatus(submitResponse.jobId).subscribe((statusResponse: PcapStatusResponse) => { if ('SUCCEEDED' === statusResponse.jobStatus) { + this.pagination.total = statusResponse.pageTotal; this.statusSubscription.unsubscribe(); this.queryRunning = false; - this.pcapService.getPackets(submitResponse.jobId, this.selectedPage).toPromise().then(pdml => { + this.pcapService.getPackets(submitResponse.jobId, this.pagination.selectedPage).toPromise().then(pdml => { this.pdml = pdml; }); } else if ('FAILED' === statusResponse.jobStatus) { @@ -72,6 +85,6 @@ export class PcapPanelComponent { } getDownloadUrl() { - return this.pcapService.getDownloadUrl(this.queryId, this.selectedPage); + return this.pcapService.getDownloadUrl(this.queryId, this.pagination.selectedPage); } -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts ---------------------------------------------------------------------- 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 ef5c6c0..8c0db02 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts @@ -16,7 +16,7 @@ * limitations under the License. */ import {NgModule} from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; @@ -29,10 +29,9 @@ 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 { PcapService } from './service/pcap.service'; -import { PcapService } from './service/pcap.service' - - @NgModule({ imports: [ routing, @@ -46,7 +45,8 @@ import { PcapService } from './service/pcap.service' PcapPacketComponent, PcapFiltersComponent, PcapPanelComponent, - PcapPacketLineComponent + PcapPacketLineComponent, + PcapPaginationComponent ], exports: [ PcapPanelComponent ], providers: [ PcapService ] http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/pcap.routing.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap.routing.ts b/metron-interface/metron-alerts/src/app/pcap/pcap.routing.ts index 25ee0ed..165a4e4 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap.routing.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap.routing.ts @@ -1,4 +1,4 @@ -/** +/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.spec.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.spec.ts b/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.spec.ts index 244a3ea..fdaa569 100644 --- a/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.spec.ts +++ b/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.spec.ts @@ -1749,4 +1749,4 @@ function pdml() { </pdml>` -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/metron/blob/037b50b9/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.ts b/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.ts index 6fd3e62..0bbcef2 100644 --- a/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.ts +++ b/metron-interface/metron-alerts/src/app/pcap/service/pcap.service.ts @@ -24,13 +24,7 @@ import 'rxjs/add/operator/map'; import {PcapRequest} from '../model/pcap.request'; import {Pdml} from '../model/pdml'; - -export class PcapStatusResponse { - jobId: string; - jobStatus: string; - percentComplete: number; - totalPages: number; -} +import { PcapStatusResponse } from '../model/pcap-status-response'; @Injectable() export class PcapService { @@ -70,4 +64,4 @@ export class PcapService { public getDownloadUrl(id: string, pageId: number) { return `/api/v1/pcap/${id}/raw?page=${pageId}`; } -} +} \ No newline at end of file