Repository: ambari Updated Branches: refs/heads/trunk 5d421b7ab -> bce0bd8f9
AMBARI-22503 Log Search UI: refine time range picker. (ababiichuk) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/bce0bd8f Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/bce0bd8f Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/bce0bd8f Branch: refs/heads/trunk Commit: bce0bd8f9424828d0d43ad5e427dff7259496e64 Parents: 5d421b7 Author: ababiichuk <ababiic...@hortonworks.com> Authored: Wed Nov 22 19:54:00 2017 +0200 Committer: ababiichuk <ababiic...@hortonworks.com> Committed: Thu Nov 23 00:47:34 2017 +0200 ---------------------------------------------------------------------- .../date-picker/date-picker.component.spec.ts | 2 ++ .../date-picker/date-picker.component.ts | 35 +++++++++++++++++--- .../time-range-picker.component.html | 6 ++-- .../time-range-picker.component.ts | 12 ++++--- .../src/app/services/logs-container.service.ts | 20 ++++++++--- .../src/assets/i18n/en.json | 4 ++- 6 files changed, 61 insertions(+), 18 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/bce0bd8f/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.spec.ts index e6c0bfe..dfd9711 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.spec.ts +++ b/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(); }); http://git-wip-us.apache.org/repos/asf/ambari/blob/bce0bd8f/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.ts index efb5e34..e33d71e 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/date-picker/date-picker.component.ts +++ b/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); + } + } http://git-wip-us.apache.org/repos/asf/ambari/blob/bce0bd8f/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.html index 621f995..c3f0b6a 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.html +++ b/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}} http://git-wip-us.apache.org/repos/asf/ambari/blob/bce0bd8f/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.ts index cacabc3..74a2b2d 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-range-picker/time-range-picker.component.ts +++ b/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 { } } http://git-wip-us.apache.org/repos/asf/ambari/blob/bce0bd8f/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts b/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts index 90ab9b7..a715adc 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts +++ b/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 { http://git-wip-us.apache.org/repos/asf/ambari/blob/bce0bd8f/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json b/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json index b214a4f..98b9e29 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json +++ b/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",
