You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by rl...@apache.org on 2017/11/27 20:24:39 UTC
[29/49] ambari git commit: AMBARI-22503 Log Search UI: refine time
range picker. (ababiichuk)
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/branch-feature-AMBARI-20859
Commit: bce0bd8f9424828d0d43ad5e427dff7259496e64
Parents: 5d421b7
Author: ababiichuk <ab...@hortonworks.com>
Authored: Wed Nov 22 19:54:00 2017 +0200
Committer: ababiichuk <ab...@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",