AMBARI-22503 Log Search UI: refine time range picker. (ababiichuk)

ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.spec.ts

@@ -18,6 +18,7 @@
 
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {StoreModule} from '@ngrx/store';
+import * as moment from 'moment-timezone';
 import {AppSettingsService, appSettings} from '@app/services/storage/app-settings.service';
 
 import {DatePickerComponent} from './date-picker.component';
@@ -42,6 +43,7 @@ describe('DatePickerComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DatePickerComponent);
     component = fixture.componentInstance;
+    component.time = moment();
     fixture.detectChanges();
   });
 

ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.ts

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-import {Component, OnInit, OnDestroy, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
+import {
+  Component, OnInit, OnChanges, OnDestroy, SimpleChanges, Input, Output, EventEmitter, ViewChild, ElementRef
+} from '@angular/core';
 import * as $ from 'jquery';
+import {Moment} from 'moment-timezone';
 import '@vendor/js/bootstrap-datetimepicker.min';
 import {AppSettingsService} from '@app/services/storage/app-settings.service';
 
@@ -25,10 +28,10 @@ import {AppSettingsService} from '@app/services/storage/app-settings.service';
   selector: 'date-picker',
   templateUrl: './date-picker.component.html'
 })
-export class DatePickerComponent implements OnInit, OnDestroy {
+export class DatePickerComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(private appSettings: AppSettingsService) {
-    appSettings.getParameter('timeZone').subscribe(value => {
+    appSettings.getParameter('timeZone').subscribe((value: string): void => {
       this.destroyDatePicker();
       this.timeZone = value;
       if (this.datePickerElement) {
@@ -37,14 +40,27 @@ export class DatePickerComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.createDatePicker();
   }
 
-  ngOnDestroy() {
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.hasOwnProperty('time') && this.datePickerElement) {
+      this.setTime(changes.time.currentValue);
+    }
+  }
+
+  ngOnDestroy(): void {
     this.destroyDatePicker();
   }
 
+  /**
+   * Value of time input field passed from parent component
+   * @type {Moment}
+   */
+  @Input()
+  time: Moment;
+
   @Output()
   timeChange: EventEmitter<number> = new EventEmitter();
 
@@ -60,6 +76,7 @@ export class DatePickerComponent implements OnInit, OnDestroy {
     this.datePickerElement.datetimepicker({
       timeZone: this.timeZone
     });
+    this.setTime(this.time);
     this.datePickerElement.on('dp.change', event => this.timeChange.emit(event.date));
   }
 
@@ -70,4 +87,12 @@ export class DatePickerComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Set value to time input field
+   * @param {Moment} time
+   */
+  private setTime(time: Moment): void {
+    this.datePickerElement.data('DateTimePicker').date(time);
+  }
+
 }

ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.html

@@ -22,8 +22,10 @@
 <div class="dropdown-menu row col-md-12">
   <div class="col-md-4" (click)="$event.stopPropagation()">
     <h4>{{'filter.timeRange' | translate}}</h4>
-    <date-picker (timeChange)="setStartTime($event)"></date-picker>
-    <date-picker (timeChange)="setEndTime($event)"></date-picker>
+    <div class="col-md-12 row text-uppercase">{{'filter.timeRange.from' | translate}}</div>
+    <date-picker class="col-md-12 row" [time]="startTime" (timeChange)="setStartTime($event)"></date-picker>
+    <div class="col-md-12 row text-uppercase">{{'filter.timeRange.to' | translate}}</div>
+    <date-picker class="col-md-12 row" [time]="endTime" (timeChange)="setEndTime($event)"></date-picker>
     <button class="btn btn-success pull-right" type="button" (click)="setCustomTimeRange()"
             [disabled]="!startTime || !endTime || startTime >= endTime">
       {{'modal.apply' | translate}}

ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.ts

@@ -18,7 +18,7 @@
 
 import {Component, forwardRef} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Moment} from 'moment';
+import {Moment} from 'moment-timezone';
 import {LogsContainerService} from '@app/services/logs-container.service';
 import {ListItem} from '@app/classes/list-item';
 import {TimeUnitListItem} from '@app/classes/filtering';
@@ -61,6 +61,8 @@ export class TimeRangePickerComponent implements ControlValueAccessor {
     if (this.onChange) {
       this.onChange(newValue);
     }
+    this.setEndTime(this.logsContainer.getEndTimeMoment(newValue));
+    this.setStartTime(this.logsContainer.getStartTimeMoment(newValue, this.endTime));
   }
 
   setStartTime(timeObject: Moment): void {
@@ -71,11 +73,11 @@ export class TimeRangePickerComponent implements ControlValueAccessor {
     this.endTime = timeObject;
   }
 
-  setTimeRange(value: any, label: string) {
+  setTimeRange(value: any, label: string): void {
     this.selection = {label, value};
   }
 
-  setCustomTimeRange() {
+  setCustomTimeRange(): void {
     this.selection = {
       label: 'filter.timeRange.custom',
       value: {
@@ -86,7 +88,7 @@ export class TimeRangePickerComponent implements ControlValueAccessor {
     };
   }
 
-  writeValue(selection: TimeUnitListItem) {
+  writeValue(selection: TimeUnitListItem): void {
     this.selection = selection;
   }
 
@@ -94,7 +96,7 @@ export class TimeRangePickerComponent implements ControlValueAccessor {
     this.onChange = callback;
   }
 
-  registerOnTouched() {
+  registerOnTouched(): void {
   }
 
 }

ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts

@@ -728,11 +728,11 @@ export class LogsContainerService {
     return Object.keys(keysObject).map((key: string): {fieldClass} => new fieldClass(key));
   }
 
-  private getStartTime = (selection: TimeUnitListItem, current: string): string => {
+  getStartTimeMoment = (selection: TimeUnitListItem, end: moment.Moment): moment.Moment | undefined => {
     let time;
     const value = selection && selection.value;
     if (value) {
-      const endTime = moment(moment(current).valueOf());
+      const endTime = end.clone();
       switch (value.type) {
         case 'LAST':
           time = endTime.subtract(value.interval, value.unit);
@@ -750,10 +750,15 @@ export class LogsContainerService {
           break;
       }
     }
-    return time ? time.toISOString() : '';
+    return time;
   };
 
-  private getEndTime = (selection: TimeUnitListItem): string => {
+  private getStartTime = (selection: TimeUnitListItem, current: string): string => {
+    const startMoment = this.getStartTimeMoment(selection, moment(moment(current).valueOf()));
+    return startMoment ? startMoment.toISOString() : '';
+  };
+
+  getEndTimeMoment = (selection: TimeUnitListItem): moment.Moment | undefined => {
     let time;
     const value = selection && selection.value;
     if (value) {
@@ -774,7 +779,12 @@ export class LogsContainerService {
           break;
       }
     }
-    return time ? time.toISOString() : '';
+    return time;
+  };
+
+  private getEndTime = (selection: TimeUnitListItem): string => {
+    const endMoment = this.getEndTimeMoment(selection);
+    return endMoment ? endMoment.toISOString() : '';
   };
 
   private getQuery(isExclude: boolean): (value: any[]) => string {

ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json

@@ -62,7 +62,9 @@
   "filter.timeRange.6hr": "Last 6 hours",
   "filter.timeRange.12hr": "Last 12 hours",
   "filter.timeRange.24hr": "Last 24 hours",
-  "filter.timeRange.custom": "Custom time range",
+  "filter.timeRange.custom": "Custom",
+  "filter.timeRange.from": "from",
+  "filter.timeRange.to": "to",
 
   "levels.fatal": "Fatal",
   "levels.error": "Error",