Page level time range #1441
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,8 @@ | ||
| import { InjectionToken } from '@angular/core'; | ||
|
|
||
| export const GLOBAL_HEADER_HEIGHT = new InjectionToken<string>('Global Header Height'); | ||
|
|
||
| export const enum ApplicationFeature { | ||
| PageTimeRange = 'ui.page-time-range', | ||
| NavigationRedesign = 'ui.navigation-version-2' | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| import { Observable } from 'rxjs'; | ||
| import { TimeRange } from '../time/time-range'; | ||
| import { Breadcrumb } from './breadcrumb'; | ||
|
|
||
| export interface HtRouteData { | ||
| breadcrumb?: Breadcrumb | Observable<Breadcrumb>; | ||
| features?: string[]; | ||
| title?: string; | ||
| defaultTimeRange?: TimeRange; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { | ||
| FixedTimeRange, | ||
| NavigationService, | ||
| RelativeTimeRange, | ||
| TimeDuration, | ||
| TimeRange, | ||
| TimeRangeService, | ||
| TimeUnit | ||
| } from '@hypertrace/common'; | ||
| import { runFakeRxjs } from '@hypertrace/test-utils'; | ||
| import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest'; | ||
| import { PageTimeRangePreferenceService } from './page-time-range-preference.service'; | ||
|
|
||
| describe('Page time range preference service', () => { | ||
| const defaultPageTimeRange = new RelativeTimeRange(new TimeDuration(2, TimeUnit.Hour)); | ||
| const serviceFactory = createServiceFactory({ | ||
| service: PageTimeRangePreferenceService, | ||
| providers: [ | ||
| mockProvider(NavigationService, { | ||
| getRouteConfig: jest.fn().mockReturnValue({ data: { defaultTimeRange: defaultPageTimeRange } }) | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| test('Setting fixed time range emits corresponding time range from preferences', () => { | ||
| runFakeRxjs(({ expectObservable, cold }) => { | ||
| const timeRange: TimeRange = new FixedTimeRange(new Date(1573255100253), new Date(1573255111159)); | ||
| const spectator = serviceFactory({ | ||
| providers: [ | ||
| mockProvider(TimeRangeService, { | ||
| timeRangeFromUrlString: jest.fn().mockReturnValue(timeRange) | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| cold('-a|', { | ||
| a: () => spectator.service.setTimeRangePreferenceForPage('foo', timeRange) | ||
| }).subscribe(update => update()); | ||
|
|
||
| expectObservable(spectator.service.getTimeRangePreferenceForPage('foo')).toBe('da', { | ||
| d: defaultPageTimeRange, | ||
| a: timeRange | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| test('Setting relative time range emits corresponding time range from preferences', () => { | ||
| runFakeRxjs(({ expectObservable, cold }) => { | ||
| const timeRange: TimeRange = new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)); | ||
| const spectator = serviceFactory({ | ||
| providers: [ | ||
| mockProvider(TimeRangeService, { | ||
| timeRangeFromUrlString: jest.fn().mockReturnValue(timeRange) | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| cold('-b|', { | ||
| b: () => spectator.service.setTimeRangePreferenceForPage('bar', timeRange) | ||
| }).subscribe(update => update()); | ||
|
|
||
| expectObservable(spectator.service.getTimeRangePreferenceForPage('bar')).toBe('db', { | ||
| d: defaultPageTimeRange, | ||
| b: timeRange | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { isNil } from 'lodash-es'; | ||
| import { combineLatest, Observable } from 'rxjs'; | ||
| import { map, shareReplay, take } from 'rxjs/operators'; | ||
| import { ApplicationFeature } from '../constants/application-constants'; | ||
| import { FeatureStateResolver } from '../feature/state/feature-state.resolver'; | ||
| import { FeatureState } from '../feature/state/feature.state'; | ||
| import { NavigationService } from '../navigation/navigation.service'; | ||
| import { PreferenceService, StorageType } from '../preference/preference.service'; | ||
| import { RelativeTimeRange } from './relative-time-range'; | ||
| import { TimeDuration } from './time-duration'; | ||
| import { TimeRange } from './time-range'; | ||
| import { TimeRangeService } from './time-range.service'; | ||
| import { TimeUnit } from './time-unit.type'; | ||
|
|
||
| @Injectable({ providedIn: 'root' }) | ||
| export class PageTimeRangePreferenceService { | ||
| private static readonly STORAGE_TYPE: StorageType = StorageType.Local; | ||
| private static readonly TIME_RANGE_PREFERENCE_KEY: string = 'page-time-range'; | ||
|
|
||
| private readonly globalDefaultTimeRange: TimeRange = new RelativeTimeRange(new TimeDuration(30, TimeUnit.Minute)); | ||
|
|
||
| private readonly pageTimeRangeStringDictionary$: Observable<PageTimeRangeStringDictionary>; | ||
|
|
||
| public constructor( | ||
| private readonly preferenceService: PreferenceService, | ||
| private readonly timeRangeService: TimeRangeService, | ||
| private readonly navigationService: NavigationService, | ||
| private readonly featureStateResolver: FeatureStateResolver | ||
| ) { | ||
| this.pageTimeRangeStringDictionary$ = this.buildPageTimeRangeObservable(); | ||
| } | ||
|
|
||
| public getTimeRangePreferenceForPage(rootLevelPath: string): Observable<TimeRange> { | ||
| return combineLatest([ | ||
| this.pageTimeRangeStringDictionary$, | ||
| this.featureStateResolver.getCombinedFeatureState([ | ||
| ApplicationFeature.PageTimeRange, | ||
| ApplicationFeature.NavigationRedesign | ||
|
||
| ]) | ||
| ]).pipe( | ||
| map(([pageTimeRangeStringDictionary, featureState]) => { | ||
| if (featureState === FeatureState.Enabled) { | ||
| if (isNil(pageTimeRangeStringDictionary[rootLevelPath])) { | ||
| // Right side for when FFs are enabled but page path doesn't have 'defaultTimeRange' set on AR data | ||
| return this.getDefaultPageTimeRange() ?? this.globalDefaultTimeRange; | ||
Christian862 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| return this.timeRangeService.timeRangeFromUrlString(pageTimeRangeStringDictionary[rootLevelPath]); | ||
| } | ||
|
|
||
| // When FFs are disabled | ||
| return this.globalDefaultTimeRange; | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| public setTimeRangePreferenceForPage(rootLevelPath: string, value: TimeRange): void { | ||
| this.pageTimeRangeStringDictionary$.pipe(take(1)).subscribe(currentPageTimeRangeDictionary => { | ||
| this.setPreferenceServicePageTimeRange(currentPageTimeRangeDictionary, rootLevelPath, value); | ||
| }); | ||
| } | ||
|
|
||
| private setPreferenceServicePageTimeRange( | ||
| currentTimeRangeDictionary: PageTimeRangeStringDictionary, | ||
| rootLevelPath: string, | ||
| timeRange: TimeRange | ||
| ): void { | ||
| this.preferenceService.set( | ||
| PageTimeRangePreferenceService.TIME_RANGE_PREFERENCE_KEY, | ||
| { ...currentTimeRangeDictionary, [rootLevelPath]: timeRange.toUrlString() }, | ||
| PageTimeRangePreferenceService.STORAGE_TYPE | ||
| ); | ||
| } | ||
|
|
||
| private buildPageTimeRangeObservable(): Observable<PageTimeRangeStringDictionary> { | ||
| return this.preferenceService | ||
| .get<PageTimeRangeStringDictionary>( | ||
| PageTimeRangePreferenceService.TIME_RANGE_PREFERENCE_KEY, | ||
| {}, | ||
| PageTimeRangePreferenceService.STORAGE_TYPE | ||
| ) | ||
| .pipe(shareReplay(1)); | ||
| } | ||
|
|
||
| private getDefaultPageTimeRange(): TimeRange | undefined { | ||
| return this.navigationService.getCurrentActivatedRoute().snapshot.data?.defaultTimeRange; | ||
|
||
| } | ||
| } | ||
|
|
||
| interface PageTimeRangeStringDictionary { | ||
| [path: string]: string; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,13 @@ | ||
| import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core'; | ||
| import { | ||
| ApplicationFeature, | ||
| FeatureState, | ||
| FeatureStateResolver, | ||
| GLOBAL_HEADER_HEIGHT, | ||
| NavigationService | ||
| } from '@hypertrace/common'; | ||
| import { Observable } from 'rxjs'; | ||
| import { map } from 'rxjs/operators'; | ||
|
|
||
| @Component({ | ||
| selector: 'ht-application-header', | ||
|
|
@@ -15,9 +23,11 @@ import { GLOBAL_HEADER_HEIGHT, NavigationService } from '@hypertrace/common'; | |
| <div class="left-side-content"> | ||
| <ng-content select="[left]"></ng-content> | ||
| </div> | ||
| <ng-container *ngIf="this.showTimeRange"> | ||
| <div class="time-range" *ngIf="this.pageLevelTimeRangeDisabled$ | async"> | ||
| <ht-time-range></ht-time-range> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| <div class="right-side-content"> | ||
| <ng-content></ng-content> | ||
|
|
@@ -30,10 +40,17 @@ export class ApplicationHeaderComponent { | |
| @Input() | ||
| public showTimeRange: boolean = true; | ||
|
|
||
| public pageLevelTimeRangeDisabled$: Observable<boolean>; | ||
|
|
||
| public constructor( | ||
| @Inject(GLOBAL_HEADER_HEIGHT) public readonly height: string, | ||
| private readonly navigationService: NavigationService, | ||
| private readonly featureStateResolver: FeatureStateResolver | ||
| ) { | ||
| this.pageLevelTimeRangeDisabled$ = this.featureStateResolver | ||
|
Contributor
Author
There was a problem hiding this comment. Inverted FF logic here so that two time ranges are not shown on screen at once. Time range is hidden here when FF is Enabled and shown when disabled.
Contributor
There was a problem hiding this comment. We should move the invertFF logic to ht. @aaron-steinfeld |
||
| .getFeatureState(ApplicationFeature.PageTimeRange) | ||
| .pipe(map(featureState => featureState === FeatureState.Disabled)); | ||
| } | ||
|
|
||
| public onLogoClick(): void { | ||
| this.navigationService.navigateWithinApp(['']); // Empty route so we go to default screen | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.