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 <[email protected]>
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;
