[ambari] branch trunk updated: [AMBARI-24441] [Log Search UI] The graphs are not always resized on window resize event. (#2051)

[to...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

tobiasistvan pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git


The following commit(s) were added to refs/heads/trunk by this push:
     new 04b738e  [AMBARI-24441] [Log Search UI] The graphs are not always resized on window resize event. (#2051)
04b738e is described below

commit 04b738ed019a26a5295340a3e4ebbe5ba2be9c81
Author: Istvan Tobias <to...@gmail.com>
AuthorDate: Tue Aug 14 16:22:49 2018 +0200

    [AMBARI-24441] [Log Search UI] The graphs are not always resized on window resize event. (#2051)
---
 .../classes/components/graph/graph.component.ts    | 30 ++++++-------
 .../log-message/log-message.component.ts           | 50 +++++++++++++++++-----
 .../logs-container/logs-container.component.ts     |  7 +--
 3 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts
index 9ac317c..7a0729a 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts
@@ -23,7 +23,7 @@ import * as d3 from 'd3';
 import * as d3sc from 'd3-scale-chromatic';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/throttleTime';
+import 'rxjs/add/operator/debounceTime';
 import {
 GraphPositionOptions, GraphMarginOptions, GraphTooltipInfo, LegendItem, GraphEventData, GraphEmittedEvent
 } from '@app/classes/graph';
@@ -52,10 +52,10 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
   width: number;
 
   @Input()
-  height: number = 150;
+  height = 150;
 
   @Input()
-  tickPadding: number = 10;
+  tickPadding = 10;
 
   @Input()
   colors: HomogeneousObject<string> = {};
@@ -68,42 +68,42 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
    * @type {boolean}
    */
   @Input()
-  isTimeGraph: boolean = false;
+  isTimeGraph = false;
 
   /**
    * Indicates whether X axis direction is right to left
    * @type {boolean}
    */
   @Input()
-  reverseXRange: boolean = false;
+  reverseXRange = false;
 
   /**
    * Indicates whether Y axis direction is top to bottom
    * @type {boolean}
    */
   @Input()
-  reverseYRange: boolean = false;
+  reverseYRange = false;
 
   /**
    * Indicates whether X axis ticks with fractional values should be displayed on chart (if any)
    * @type {boolean}
    */
   @Input()
-  allowFractionalXTicks: boolean = true;
+  allowFractionalXTicks = true;
 
   /**
    * Indicates whether Y axis ticks with fractional values should be displayed on chart (if any)
    * @type {boolean}
    */
   @Input()
-  allowFractionalYTicks: boolean = true;
+  allowFractionalYTicks = true;
 
   /**
    * Indicated whether Y values equal to 0 should be skipped in tooltip
    * @type {boolean}
    */
   @Input()
-  skipZeroValuesInTooltip: boolean = true;
+  skipZeroValuesInTooltip = true;
 
   /**
    * Indicates whether X axis event should be emitted with formatted string values that are displayed
@@ -111,7 +111,7 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
    * @type {boolean}
    */
   @Input()
-  emitFormattedXTick: boolean = false;
+  emitFormattedXTick = false;
 
   /**
    * Indicates whether Y axis event should be emitted with formatted string values that are displayed
@@ -119,7 +119,7 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
    * @type {boolean}
    */
   @Input()
-  emitFormattedYTick: boolean = false;
+  emitFormattedYTick = false;
 
   @Output()
   xTickContextMenu: EventEmitter<GraphEmittedEvent<MouseEvent>> = new EventEmitter();
@@ -135,9 +135,9 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
   })
   tooltipRef: ElementRef;
 
-  private readonly xAxisClassName: string = 'axis-x';
+  private readonly xAxisClassName = 'axis-x';
 
-  private readonly yAxisClassName: string = 'axis-y';
+  private readonly yAxisClassName = 'axis-y';
 
   protected utils: UtilsService;
 
@@ -179,7 +179,7 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
    * It should be true when the tooltip is out from the window.
    * @type {boolean}
    */
-  private tooltipOnTheLeft: boolean = false;
+  private tooltipOnTheLeft = false;
 
   protected subscriptions: Subscription[] = [];
 
@@ -196,7 +196,7 @@ export class GraphComponent implements AfterViewInit, OnChanges, OnInit, OnDestr
 
   ngOnInit() {
     this.subscriptions.push(
-      Observable.fromEvent(window, 'resize').throttleTime(100).subscribe(this.onWindowResize)
+      Observable.fromEvent(window, 'resize').debounceTime(100).subscribe(this.onWindowResize)
     );
     this.setLegendItems();
   }
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/log-message/log-message.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/log-message/log-message.component.ts
index 2e04758..ac4fb31 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/log-message/log-message.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/log-message/log-message.component.ts
@@ -14,7 +14,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component, Input, AfterViewInit, ElementRef, ViewChild, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef} from '@angular/core';
+import {
+  Component,
+  Input,
+  AfterViewInit,
+  ElementRef,
+  ViewChild,
+  OnChanges,
+  OnInit,
+  OnDestroy,
+  SimpleChanges,
+  HostListener,
+  ChangeDetectorRef
+} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Subscription} from 'rxjs/Subscription';
+import 'rxjs/add/operator/debounceTime';
 
 /**
  * This is a simple UI component to display the log message. The goal is to be able to show one line and be collapsile
@@ -26,7 +41,7 @@ import {Component, Input, AfterViewInit, ElementRef, ViewChild, OnChanges, Simpl
   templateUrl: './log-message.component.html',
   styleUrls: ['./log-message.component.less']
 })
-export class LogMessageComponent implements AfterViewInit, OnChanges {
+export class LogMessageComponent implements AfterViewInit, OnChanges, OnInit, OnDestroy {
 
   /**
    * This is the element reference to the message log container element. So that we can calculate if the caret should be
@@ -40,7 +55,7 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
    * @type {boolean}
    */
   @Input()
-  isOpen: boolean = false;
+  isOpen = false;
 
   /**
    * This is a helper property to handle the changes on the parent component. The goal of this input is to be able to
@@ -61,7 +76,7 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
    * the content container element. Handled by the @checkAddCaret method
    * @type {boolean}
    */
-  private addCaret: boolean = false;
+  private addCaret = false;
 
   /**
    * This is a regexp tester to check if the log message is multiline text or single line. Doing by checking the new
@@ -79,7 +94,13 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
     return this.multiLineTestRegexp.test(this.message);
   }
 
-  constructor(private cdRef:ChangeDetectorRef) {}
+  /**
+   * The array to collect all the subscriptions created by the instance in order to unsubscribe when the component
+   * destroyed
+   */
+  protected subscriptions: Subscription[] = [];
+
+  constructor(private cdRef: ChangeDetectorRef) {}
 
   /**
    * This change handler's goal is to check if we should add the caret or not. Mainly it is because currently we have
@@ -93,6 +114,16 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
     }
   }
 
+  ngOnInit() {
+    this.subscriptions.push(
+      Observable.fromEvent(window, 'resize').debounceTime(100).subscribe(this.onWindowResize)
+    );
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
+  }
+
   /**
    * The goal is to perform a initial caret display check when the component has been initialized.
    */
@@ -105,17 +136,16 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
    * caret corresponding the new size of the content container element.
    * Using the arrow function will keep the instance scope.
    */
-  @HostListener('window:resize', ['$event'])
   onWindowResize = (): void => {
     this.checkAddCaret();
-  };
+  }
 
   /**
    * The goal is to perform a height check on the content container element. It is based on the comparison of the
    * scrollHeight and the clientHeight.
    */
   checkAddCaret = (): void =>  {
-    let el = this.content.nativeElement;
+    const el = this.content.nativeElement;
     this.addCaret = this.isMultiLineMessage || (el.scrollHeight > el.clientHeight) || (el.scrollWidth > el.clientWidth);
     this.cdRef.detectChanges();
   };
@@ -125,7 +155,7 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
    * component element css classes will follow its state.
    * @param ev {MouseEvent}
    */
-  onCaretClick(ev:MouseEvent) {
+  onCaretClick(ev: MouseEvent) {
     ev.preventDefault();
     this.toggleOpen();
   }
@@ -134,7 +164,7 @@ export class LogMessageComponent implements AfterViewInit, OnChanges {
    * This is a simple property toggle method of the @isOpen property.
    * The goal is to separate this logic from the event handling and give a way to call it from anywhere.
    */
-  toggleOpen():void {
+  toggleOpen(): void {
     this.isOpen = !this.isOpen;
   }
 
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
index 4bd8812..1f4eba8 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
@@ -20,9 +20,6 @@ import {Component, OnInit, ElementRef, ViewChild, HostListener, Input, OnDestroy
 import {FormGroup} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/skipWhile';
-import 'rxjs/add/operator/skip';
-import 'rxjs/add/operator/throttleTime';
 import {LogsContainerService} from '@app/services/logs-container.service';
 import {ServiceLogsHistogramDataService} from '@app/services/storage/service-logs-histogram-data.service';
 import {AuditLogsGraphDataService} from '@app/services/storage/audit-logs-graph-data.service';
@@ -50,7 +47,7 @@ import {LogsStateService} from '@app/services/storage/logs-state.service';
 })
 export class LogsContainerComponent implements OnInit, OnDestroy {
 
-  private isFilterPanelFixedPostioned: boolean = false;
+  private isFilterPanelFixedPostioned = false;
 
   tabs: Observable<LogTypeTab[]> = this.tabsStorage.getAll().map((tabs: LogTypeTab[]) => {
     return tabs.map((tab: LogTypeTab) => {
@@ -159,7 +156,7 @@ export class LogsContainerComponent implements OnInit, OnDestroy {
 
     // set the position of the filter panel depending on the scroll height: so it is fixed when it would be out from the screen
     this.subscriptions.push(
-      Observable.fromEvent(window, 'scroll').subscribe(this.setFixedPositionValue)
+      Observable.fromEvent(window, 'scroll').debounceTime(10).subscribe(this.setFixedPositionValue)
     );
 
   }