You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@metron.apache.org by sa...@apache.org on 2019/10/04 14:41:56 UTC
[metron] branch master updated: METRON-2272 [UI] Performance:
Switching manual filtering on and off multiple times leads slow typing
(ruffle1986 via sardell) closes apache/metron#1524
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 03e0977 METRON-2272 [UI] Performance: Switching manual filtering on and off multiple times leads slow typing (ruffle1986 via sardell) closes apache/metron#1524
03e0977 is described below
commit 03e0977ffa0815f129fcb5a1340f6a2b2f0212c6
Author: ruffle1986 <ft...@gmail.com>
AuthorDate: Fri Oct 4 09:41:21 2019 -0500
METRON-2272 [UI] Performance: Switching manual filtering on and off multiple times leads slow typing (ruffle1986 via sardell) closes apache/metron#1524
---
.../shared/directives/alert-search.directive.ts | 118 ++++++++++++---------
1 file changed, 70 insertions(+), 48 deletions(-)
diff --git a/metron-interface/metron-alerts/src/app/shared/directives/alert-search.directive.ts b/metron-interface/metron-alerts/src/app/shared/directives/alert-search.directive.ts
index 6af5bad..aba7990 100644
--- a/metron-interface/metron-alerts/src/app/shared/directives/alert-search.directive.ts
+++ b/metron-interface/metron-alerts/src/app/shared/directives/alert-search.directive.ts
@@ -16,7 +16,18 @@
* limitations under the License.
*/
/// <reference path="../../../../node_modules/@types/ace/index.d.ts" />
-import {Directive, ElementRef, EventEmitter, AfterViewInit, Output, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {
+ Directive,
+ ElementRef,
+ EventEmitter,
+ AfterViewInit,
+ Output,
+ Input,
+ OnChanges,
+ SimpleChanges,
+ NgZone,
+ OnDestroy
+} from '@angular/core';
declare var ace: any;
let ACERange = ace.require('ace/range').Range;
@@ -25,7 +36,7 @@ let ACERange = ace.require('ace/range').Range;
selector: '[appAceEditor]'
})
-export class AlertSearchDirective implements AfterViewInit, OnChanges {
+export class AlertSearchDirective implements AfterViewInit, OnChanges, OnDestroy {
editor: AceAjax.Editor;
closeButton: any;
mouseEventTimer: number;
@@ -34,54 +45,59 @@ export class AlertSearchDirective implements AfterViewInit, OnChanges {
@Input() text = '';
@Output() textChanged = new EventEmitter();
- constructor(private elementRef: ElementRef) {
- const el = elementRef.nativeElement;
- el.classList.add('editor');
-
- ace.config.set('basePath', 'assets/ace');
-
- this.editor = ace.edit(el);
- this.editor.$blockScrolling = Infinity;
- this.editor.renderer.setShowGutter(false);
- this.editor.renderer.setShowPrintMargin(false);
- this.editor.renderer.setPadding(10);
- this.editor.setTheme('ace/theme/monokai');
- this.editor.container.style.lineHeight = '1.5';
-
- this.editor.setOptions({
- minLines: 1,
- highlightActiveLine: false,
- maxLines: Infinity,
- fontSize: '0.75em'
- });
+ constructor(
+ private elementRef: ElementRef,
+ private zone: NgZone
+ ) {
+ this.zone.runOutsideAngular(() => {
+ const el = this.elementRef.nativeElement;
+ el.classList.add('editor');
+
+ ace.config.set('basePath', 'assets/ace');
+
+ this.editor = ace.edit(el);
+ this.editor.$blockScrolling = Infinity;
+ this.editor.renderer.setShowGutter(false);
+ this.editor.renderer.setShowPrintMargin(false);
+ this.editor.renderer.setPadding(10);
+ this.editor.setTheme('ace/theme/monokai');
+ this.editor.container.style.lineHeight = '1.5';
+
+ this.editor.setOptions({
+ minLines: 1,
+ highlightActiveLine: false,
+ maxLines: Infinity,
+ fontSize: '0.75em'
+ });
- this.editor.getSession().setMode('ace/mode/lucene');
-
- // This is a hack: setScrollMargin is not available in latest ace typings but is available in ace
- let renderer: any = this.editor.renderer;
- renderer.setScrollMargin(12, 12);
-
- this.closeButton = document.createElement('i');
- this.closeButton.classList.add('fa');
- this.closeButton.classList.add('fa-times');
- this.editor.on('click', (event) => {
- if (event.domEvent.target.classList.contains('fa-times')) {
- let pos = event.getDocumentPosition();
- let strToDelete = this.getTextTillOperator(event.domEvent.target.parentElement);
-
- let endIndex = pos.column;
- let startIndex = pos.column - (strToDelete.length + 1);
- if ( startIndex < 0) {
- startIndex = 0;
- endIndex = (strToDelete.length + 1);
- }
+ this.editor.getSession().setMode('ace/mode/lucene');
+
+ // This is a hack: setScrollMargin is not available in latest ace typings but is available in ace
+ let renderer: any = this.editor.renderer;
+ renderer.setScrollMargin(12, 12);
+
+ this.closeButton = document.createElement('i');
+ this.closeButton.classList.add('fa');
+ this.closeButton.classList.add('fa-times');
+ this.editor.on('click', (event) => {
+ if (event.domEvent.target.classList.contains('fa-times')) {
+ let pos = event.getDocumentPosition();
+ let strToDelete = this.getTextTillOperator(event.domEvent.target.parentElement);
+
+ let endIndex = pos.column;
+ let startIndex = pos.column - (strToDelete.length + 1);
+ if ( startIndex < 0) {
+ startIndex = 0;
+ endIndex = (strToDelete.length + 1);
+ }
- let range = new ACERange(0, startIndex , 0, endIndex);
- this.editor.selection.addRange(range);
- this.editor.removeWordLeft();
- this.editor.renderer.showCursor();
- this.textChanged.next(this.editor.getValue());
- }
+ let range = new ACERange(0, startIndex , 0, endIndex);
+ this.editor.selection.addRange(range);
+ this.editor.removeWordLeft();
+ this.editor.renderer.showCursor();
+ this.textChanged.next(this.editor.getValue());
+ }
+ });
});
}
@@ -205,4 +221,10 @@ export class AlertSearchDirective implements AfterViewInit, OnChanges {
this.editor.focus();
}
}
+
+ ngOnDestroy() {
+ this.editor.destroy();
+ this.editor.container.remove();
+ this.editor = null;
+ }
}