Repository: metron Updated Branches: refs/heads/master 8b2f297fb -> 91c410fd2
METRON-1760 Kill PCAP job should prompt for confirmation (ruffle via nickwallen) closes apache/metron#1199 Project: http://git-wip-us.apache.org/repos/asf/metron/repo Commit: http://git-wip-us.apache.org/repos/asf/metron/commit/91c410fd Tree: http://git-wip-us.apache.org/repos/asf/metron/tree/91c410fd Diff: http://git-wip-us.apache.org/repos/asf/metron/diff/91c410fd Branch: refs/heads/master Commit: 91c410fd2016d8776aba650b41239c971b706d01 Parents: 8b2f297 Author: ruffle <ftamas.m...@gmail.com> Authored: Tue Sep 18 11:11:44 2018 -0400 Committer: nickallen <nickal...@apache.org> Committed: Tue Sep 18 11:11:44 2018 -0400 ---------------------------------------------------------------------- .../metron-alerts/package-lock.json | 14 +++ metron-interface/metron-alerts/package.json | 1 + .../pcap/pcap-panel/pcap-panel.component.html | 17 +++- .../pcap-panel/pcap-panel.component.spec.ts | 36 +++++++- .../app/pcap/pcap-panel/pcap-panel.component.ts | 1 + .../metron-alerts/src/app/pcap/pcap.module.ts | 4 +- .../metron-alerts/src/confirm-popover.scss | 95 ++++++++++++++++++++ metron-interface/metron-alerts/src/styles.scss | 1 + 8 files changed, 166 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/metron-interface/metron-alerts/package-lock.json ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/package-lock.json b/metron-interface/metron-alerts/package-lock.json index 7d25b51..f927ffe 100644 --- a/metron-interface/metron-alerts/package-lock.json +++ b/metron-interface/metron-alerts/package-lock.json @@ -5808,6 +5808,15 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "angular-confirmation-popover": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/angular-confirmation-popover/-/angular-confirmation-popover-4.2.0.tgz", + "integrity": "sha512-ItCPzV52user93NRk9rF4Rp8NpawBWJdkNf8+6lH//f5i/N5HY0Aq5Hcch3xk19h9P48k0WZnfwOQL181xe4MQ==", + "requires": { + "positioning": "^1.3.1", + "tslib": "^1.9.0" + } + }, "ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -14148,6 +14157,11 @@ } } }, + "positioning": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/positioning/-/positioning-1.4.0.tgz", + "integrity": "sha512-LbN+mgAXtcDdN46xMJ3yZwjndqqYJODaO5qKmU+MVMu5tL3K2dlm1Qha/zh1k2JAFym5HDaZpnPfO4gr91VTRw==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/metron-interface/metron-alerts/package.json ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/package.json b/metron-interface/metron-alerts/package.json index 2133b74..14172fd 100644 --- a/metron-interface/metron-alerts/package.json +++ b/metron-interface/metron-alerts/package.json @@ -26,6 +26,7 @@ "@types/jquery": "^3.3.4", "ace-builds": "^1.2.6", "ajv": "^6.5.1", + "angular-confirmation-popover": "^4.2.0", "bootstrap": "4.0.0-alpha.6", "core-js": "^2.4.1", "font-awesome": "^4.7.0", http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/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 6b18a5f..37e21ee 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 @@ -19,7 +19,22 @@ <div 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]="{'width': progressWidth + '%'}">{{progressWidth}}%</div> </div> - <button data-qe-id="pcap-cancel-query-button" class="pcap-cancel-query-button btn btn-primary btn-sm" (click)="cancelQuery()" [disabled]="!queryId"></button> + <button + mwlConfirmationPopover + [popoverMessage]="cancelConfirmMessage" + placement="left" + (confirm)="cancelQuery()" + cancelText="No" + confirmText="Yes" + confirmButtonType="danger" + appendToBody="true" + popoverClass="pcap-cancel-query-confirm-popover confirm-popover" + + data-qe-id="pcap-cancel-query-button" + class="pcap-cancel-query-button btn btn-primary btn-sm" + [disabled]="!queryId" + > + </button> </div> <div *ngIf="errorMsg" class="alert alert-danger" role="alert" data-qe-id="error"> {{ errorMsg }} http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/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 aa9b799..29bd649 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 @@ -27,6 +27,7 @@ import { By } from '../../../../node_modules/@angular/platform-browser'; import { PcapRequest } from '../model/pcap.request'; import { of, defer } from 'rxjs'; import { RestError } from '../../model/rest-error'; +import { ConfirmationPopoverModule } from 'angular-confirmation-popover'; @Component({ selector: 'app-pcap-filters', @@ -66,6 +67,9 @@ describe('PcapPanelComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ + imports: [ + ConfirmationPopoverModule.forRoot(), + ], declarations: [ FakeFilterComponent, FakePcapListComponent, @@ -346,7 +350,7 @@ describe('PcapPanelComponent', () => { expect(fixture.debugElement.query(By.css('[data-qe-id="pcap-cancel-query-button"]'))).toBeDefined(); }); - it('should hide the progress bar if the user clicks on the cancel button', fakeAsync(() => { + it('should hide the progress bar if the user clicks on the cancel button and confirms', fakeAsync(() => { component.queryRunning = true; component.queryId = '42'; fixture.detectChanges(); @@ -356,6 +360,12 @@ describe('PcapPanelComponent', () => { const cancelBtnEl = cancelBtn.nativeElement; cancelBtnEl.click(); + fixture.detectChanges(); + + const confirmButton = fixture.debugElement.query(By.css('.pcap-cancel-query-confirm-popover .btn-danger')); + const confirmButtonEl = confirmButton.nativeElement; + + confirmButtonEl.click(); tick(); fixture.detectChanges(); @@ -377,6 +387,12 @@ describe('PcapPanelComponent', () => { const cancelBtnEl = cancelBtn.nativeElement; cancelBtnEl.click(); + fixture.detectChanges(); + + const confirmButton = fixture.debugElement.query(By.css('.pcap-cancel-query-confirm-popover .btn-danger')); + const confirmButtonEl = confirmButton.nativeElement; + + confirmButtonEl.click(); tick(); fixture.detectChanges(); @@ -399,6 +415,12 @@ describe('PcapPanelComponent', () => { const cancelBtnEl = cancelBtn.nativeElement; cancelBtnEl.click(); + fixture.detectChanges(); + + const confirmButton = fixture.debugElement.query(By.css('.pcap-cancel-query-confirm-popover .btn-danger')); + const confirmButtonEl = confirmButton.nativeElement; + + confirmButtonEl.click(); tick(); fixture.detectChanges(); @@ -438,6 +460,12 @@ describe('PcapPanelComponent', () => { const cancelBtnEl = cancelBtn.nativeElement; cancelBtnEl.click(); + fixture.detectChanges(); + + const confirmButton = fixture.debugElement.query(By.css('.pcap-cancel-query-confirm-popover .btn-danger')); + const confirmButtonEl = confirmButton.nativeElement; + + confirmButtonEl.click(); tick(); fixture.detectChanges(); @@ -457,6 +485,12 @@ describe('PcapPanelComponent', () => { const cancelBtnEl = cancelBtn.nativeElement; cancelBtnEl.click(); + fixture.detectChanges(); + + const confirmButton = fixture.debugElement.query(By.css('.pcap-cancel-query-confirm-popover .btn-danger')); + const confirmButtonEl = confirmButton.nativeElement; + + confirmButtonEl.click(); tick(); fixture.detectChanges(); http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/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 5f262e9..8e4c375 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 @@ -46,6 +46,7 @@ export class PcapPanelComponent implements OnInit, OnDestroy { pagination: PcapPagination = new PcapPagination(); savedPcapRequest: {}; errorMsg: string; + cancelConfirmMessage = 'Are you sure want to cancel the running query?'; constructor(private pcapService: PcapService) { } http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/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 a789a8a..be61438 100644 --- a/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts +++ b/metron-interface/metron-alerts/src/app/pcap/pcap.module.ts @@ -29,6 +29,7 @@ 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 { ConfirmationPopoverModule } from 'angular-confirmation-popover'; @NgModule({ imports: [ @@ -37,7 +38,8 @@ import { PcapService } from './service/pcap.service'; FormsModule, HttpClientModule, ReactiveFormsModule, - DatePickerModule + DatePickerModule, + ConfirmationPopoverModule.forRoot() ], declarations: [ PcapListComponent, http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/metron-interface/metron-alerts/src/confirm-popover.scss ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/confirm-popover.scss b/metron-interface/metron-alerts/src/confirm-popover.scss new file mode 100644 index 0000000..2c05270 --- /dev/null +++ b/metron-interface/metron-alerts/src/confirm-popover.scss @@ -0,0 +1,95 @@ +/** + * 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. + */ +$popover-button-color-confirm: #006EA0; +$popover-button-border-color-confirm: $popover-button-color-confirm; + +$popover-button-color-cancel: #333333; +$popover-button-border-color-cancel: #0F6F9E; + +$popover-background-color: #0C3B43; +$popover-border-color: #1B596C; + +.confirm-popover { + background-color: $popover-background-color; + border: 1px solid $popover-border-color; + color: #999999; + + & .btn { + font-size: 14px; + cursor: pointer; + } + + & .btn-default { + background-color: $popover-button-color-cancel; + border-color: $popover-button-border-color-cancel; + color: #32ABDF; + + &:hover { + background-color: #004b6d; + } + } + + & .btn-danger { + background-color: $popover-button-color-confirm; + border-color: $popover-button-border-color-confirm; + color: white; + + &:hover { + background-color: #004b6d; + border-color: #004b6d; + } + } + + + &.popover-top { + &::before { + border-top-color: $popover-border-color; + } + &::after { + border-top-color: $popover-background-color; + bottom: -9px; + } + } + &.popover-right { + &::before { + border-right-color: $popover-border-color; + } + &::after { + border-right-color: $popover-background-color; + left: -9px; + } + } + &.popover-bottom { + &::before { + border-bottom-color: $popover-border-color; + } + &::after { + border-bottom-color: $popover-background-color; + top: -9px; + } + } + &.popover-left { + &::before { + border-left-color: $popover-border-color; + } + &::after { + border-left-color: $popover-background-color; + right: -9px; + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/metron/blob/91c410fd/metron-interface/metron-alerts/src/styles.scss ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/styles.scss b/metron-interface/metron-alerts/src/styles.scss index 687ad14..614d539 100644 --- a/metron-interface/metron-alerts/src/styles.scss +++ b/metron-interface/metron-alerts/src/styles.scss @@ -22,6 +22,7 @@ @import "metron-dialog.scss"; @import "../node_modules/pikaday-time/scss/pikaday.scss"; @import "hexagon"; +@import "confirm-popover.scss"; body, button {