This is an automated email from the ASF dual-hosted git repository. sardell pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/metron.git
The following commit(s) were added to refs/heads/master by this push: new 506c18c METRON-2085 [UI] Alerts UI Details Pane: naming meta alerts is broken (ruffle1986 via sardell) closes apache/metron#1388 506c18c is described below commit 506c18cb5abe3a8ec1d660af9350382e085c6e15 Author: ruffle1986 <ftamas.m...@gmail.com> AuthorDate: Fri May 17 09:54:51 2019 +0200 METRON-2085 [UI] Alerts UI Details Pane: naming meta alerts is broken (ruffle1986 via sardell) closes apache/metron#1388 --- .../alert-details/alert-details.component.html | 27 ++++++++++++++---- .../alert-details/alert-details.component.scss | 6 ++++ .../alert-details/alert-details.component.ts | 32 +++++++++++++++++++--- .../metron-alerts/src/app/model/alert-source.ts | 1 + 4 files changed, 57 insertions(+), 9 deletions(-) diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html index c013a70..4c8431a 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.html @@ -56,15 +56,32 @@ <div class="px-0"> <span [ngClass]="{'editable-text': alertSources.length > 1}" *ngIf="!showEditor" (click)="toggleNameEditor()"> {{ (alertSource.name && alertSource.name.length > 0)? alertSource.name : alertId | centerEllipses:20 }} </span> <div class="input-group" *ngIf="showEditor"> - <input type="text" class="form-control" [(ngModel)]="alertName"> - <span class="input-group-addon" [ngClass]="{'disabled': alertName.length === 0}" (click)="saveName()" ><i class="fa fa-check" aria-hidden="true"></i></span> - <span class="input-group-addon" (click)="toggleNameEditor()"><i class="fa fa-times" aria-hidden="true"></i></span> + <input + #metaAlertNameInput + type="text" + class="form-control" + [value]="alertSource.name" + [(ngModel)]="alertName" + (keyup)="onSaveNameInputKeyPress($event)" + > + <span + class="input-group-addon" + [ngClass]="{ disabled: isSaveNameButtonDisabled() }" + (click)="saveName()" + > + <i class="fa fa-check" aria-hidden="true"></i> + </span> + <span class="input-group-addon" (click)="onSaveNameInputCancel()"> + <i class="fa fa-times" aria-hidden="true"></i> + </span> </div> </div> </div> </div> - <div class="col-md-2 pr-3"> - <i class="fa fa-times pull-right close-button" aria-hidden="true" (click)="goBack()"></i> + <div class="close-button-wrapper"> + <div class="col-md-2 pr-3"> + <i class="fa fa-times pull-right close-button" aria-hidden="true" (click)="goBack()"></i> + </div> </div> </div> <div class="px-3 py-4 actions"> diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.scss b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.scss index 43bdcd6..ff6ff4a 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.scss +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.scss @@ -192,3 +192,9 @@ textarea { } } } + +.close-button-wrapper { + position: absolute; + top: 10px; + right: 20px; +} \ No newline at end of file diff --git a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts index 1b40de6..c5bb3ba 100644 --- a/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts +++ b/metron-interface/metron-alerts/src/app/alerts/alert-details/alert-details.component.ts @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, ViewChild, ElementRef} from '@angular/core'; import {ActivatedRoute, Router, NavigationStart} from '@angular/router'; import * as moment from 'moment/moment'; import {Subscription} from 'rxjs'; @@ -29,7 +29,7 @@ import {PatchRequest} from '../../model/patch-request'; import {Patch} from '../../model/patch'; import {AlertComment} from './alert-comment'; import {AuthenticationService} from '../../service/authentication.service'; -import {CommentAddRemoveRequest} from "../../model/comment-add-remove-request"; +import {CommentAddRemoveRequest} from '../../model/comment-add-remove-request'; import {META_ALERTS_SENSOR_TYPE} from '../../utils/constants'; import {GlobalConfigService} from '../../service/global-config.service'; import { DialogService } from 'app/service/dialog.service'; @@ -77,6 +77,7 @@ export class AlertDetailsComponent implements OnInit { globalConfig: {} = {}; globalConfigService: GlobalConfigService; configSubscription: Subscription; + @ViewChild('metaAlertNameInput') metaAlertNameInput: ElementRef; constructor(private router: Router, private activatedRoute: ActivatedRoute, @@ -109,6 +110,7 @@ export class AlertDetailsComponent implements OnInit { } setAlert(alertSource) { + this.alertName = alertSource.name; this.alertSource = alertSource; this.alertSources = (alertSource.metron_alert && alertSource.metron_alert.length > 0) ? alertSource.metron_alert : [alertSource]; this.selectedAlertState = this.getAlertState(alertSource['alert_status']); @@ -188,13 +190,17 @@ export class AlertDetailsComponent implements OnInit { toggleNameEditor() { if (this.alertSources.length > 1) { - this.alertName = ''; this.showEditor = !this.showEditor; } + setTimeout(() => { + if (this.showEditor && this.metaAlertNameInput) { + this.metaAlertNameInput.nativeElement.focus(); + } + }, 100); } saveName() { - if (this.alertName.length > 0) { + if (!this.isSaveNameButtonDisabled()) { let patchRequest = new PatchRequest(); patchRequest.guid = this.alertId; patchRequest.sensorType = 'metaalert'; @@ -254,4 +260,22 @@ export class AlertDetailsComponent implements OnInit { confirmedSubscription.unsubscribe(); }); } + + isSaveNameButtonDisabled() { + return !this.alertName || this.alertName.length === 0; + } + + onSaveNameInputKeyPress(e: KeyboardEvent) { + if (e.code === 'Enter') { + this.saveName(); + } else if (e.code === 'Escape') { + this.alertName = this.alertSource.name; + this.toggleNameEditor(); + } + } + + onSaveNameInputCancel() { + this.alertName = this.alertSource.name; + this.toggleNameEditor(); + } } diff --git a/metron-interface/metron-alerts/src/app/model/alert-source.ts b/metron-interface/metron-alerts/src/app/model/alert-source.ts index 3330960..9cf1dd3 100644 --- a/metron-interface/metron-alerts/src/app/model/alert-source.ts +++ b/metron-interface/metron-alerts/src/app/model/alert-source.ts @@ -18,6 +18,7 @@ import {AlertComment} from '../alerts/alert-details/alert-comment'; export class AlertSource { + name: string; msg: string; sig_rev: number; ip_dst_port: number;