Page level time range

projects/assets-library/src/icons/icon-library.module.ts

@@ -25,6 +25,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.ArrowUpLeft, url: `${iconsRootPath}/arrow-up-left.svg` },
         { key: IconType.ArrowUpRight, url: `${iconsRootPath}/arrow-up-right.svg` },
         { key: IconType.Calls, url: `${iconsRootPath}/calls.svg` },
+        { key: IconType.Calendar, url: `${iconsRootPath}/calendar-dates.svg` },
         { key: IconType.CheckCircle, url: `${iconsRootPath}/check-circle.svg` },
         { key: IconType.CheckCircleFill, url: `${iconsRootPath}/check-circle-fill.svg` },
         { key: IconType.ChevronDown, url: `${iconsRootPath}/chevron-down.svg` },

projects/assets-library/src/icons/icon-type.ts

@@ -15,6 +15,7 @@ export const enum IconType {
   ArrowUpLeft = 'svg:arrow-up-left',
   ArrowUpRight = 'svg:arrow-up-right',
   Calls = 'svg:calls',
+  Calendar = 'svg:calendar-dates',
   Cancel = 'cancel',
   CheckCircle = 'svg:check-circle',
   CheckCircleFill = 'svg:check-circle-fill',

projects/common/src/constants/application-constants.ts

@@ -1,3 +1,7 @@
 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'
+}

projects/common/src/navigation/ht-route-data.ts

@@ -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;
 }

projects/common/src/public-api.ts

@@ -120,6 +120,7 @@ export * from './time/time-range.service';
 export * from './time/time-range.type';
 export * from './time/time-unit.type';
 export * from './time/time';
+export * from './time/page-time-range-preference.service';
 
 // Validators
 export * from './utilities/validators';

projects/common/src/time/page-time-range-preference-service.test.ts

@@ -0,0 +1,85 @@
+import {
+  FeatureState,
+  FeatureStateResolver,
+  FixedTimeRange,
+  NavigationService,
+  RelativeTimeRange,
+  TimeDuration,
+  TimeRange,
+  TimeRangeService,
+  TimeUnit
+} from '@hypertrace/common';
+import { runFakeRxjs } from '@hypertrace/test-utils';
+import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest';
+import { of } from 'rxjs';
+import { map } from 'rxjs/operators';
+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, {
+        getCurrentActivatedRoute: jest
+          .fn()
+          .mockReturnValue({ snapshot: { data: { defaultTimeRange: defaultPageTimeRange } } })
+      }),
+      mockProvider(FeatureStateResolver, {
+        getFeatureState: jest.fn().mockReturnValue(of(FeatureState.Enabled))
+      })
+    ]
+  });
+
+  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());
+
+      const recordedTimeRanges$ = spectator.service
+        .getTimeRangePreferenceForPage('foo')
+        .pipe(map(timeRangeResolver => timeRangeResolver()));
+
+      expectObservable(recordedTimeRanges$).toBe('da', {
+        d: defaultPageTimeRange,
+        a: timeRange
+      });
+    });
+  });
+
+  test('Setting relative time range emits corresponding time range from preferences', () => {
+    runFakeRxjs(({ expectObservable, cold }) => {
+      const 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());
+
+      const recordedTimeRanges$ = spectator.service
+        .getTimeRangePreferenceForPage('bar')
+        .pipe(map(timeRangeResolver => timeRangeResolver()));
+
+      expectObservable(recordedTimeRanges$).toBe('db', {
+        d: defaultPageTimeRange,
+        b: timeRange
+      });
+    });
+  });
+});

projects/common/src/time/page-time-range-preference.service.ts

@@ -0,0 +1,96 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+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 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<TimeRangeResolver> {
+    return combineLatest([
+      this.pageTimeRangeStringDictionary$,
+      this.featureStateResolver.getFeatureState(ApplicationFeature.PageTimeRange)
+    ]).pipe(
+      map(([pageTimeRangeStringDictionary, featureState]) => {
+        if (featureState === FeatureState.Enabled) {
+          if (isNil(pageTimeRangeStringDictionary[rootLevelPath])) {
+            return () => this.getDefaultTimeRangeForCurrentRoute();
+          }
+
+          return () => this.timeRangeService.timeRangeFromUrlString(pageTimeRangeStringDictionary[rootLevelPath]);
+        }
+
+        // When FF is disabled
+        return () => this.getGlobalDefaultTimeRange();
+      })
+    );
+  }
+
+  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));
+  }
+
+  public getDefaultTimeRangeForCurrentRoute(): TimeRange {
+    const currentRoute: ActivatedRoute = this.navigationService.getCurrentActivatedRoute();
+    // Right side for when FF is enabled but 'defaultTimeRange' is not set on AR data
+
+    return currentRoute.snapshot.data?.defaultTimeRange ?? this.getGlobalDefaultTimeRange();
+  }
+
+  public getGlobalDefaultTimeRange(): TimeRange {
+    return new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour));
+  }
+}
+
+interface PageTimeRangeStringDictionary {
+  [path: string]: string;
+}
+export type TimeRangeResolver = () => TimeRange;

projects/common/src/time/time-range.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
-import { isEmpty } from 'lodash-es';
+import { isEmpty, isNil } from 'lodash-es';
 import { EMPTY, ReplaySubject } from 'rxjs';
-import { catchError, defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
+import { catchError, filter, map, switchMap, take } from 'rxjs/operators';
 import { NavigationService, QueryParamObject } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
 import { FixedTimeRange } from './fixed-time-range';
@@ -17,7 +17,6 @@ import { TimeUnit } from './time-unit.type';
 export class TimeRangeService {
   private static readonly TIME_RANGE_QUERY_PARAM: string = 'time';
 
-  private readonly defaultTimeRange: TimeRange = new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour));
   private readonly timeRangeSubject$: ReplaySubject<TimeRange> = new ReplaySubject(1);
   private currentTimeRange?: TimeRange;
 
@@ -72,15 +71,14 @@ export class TimeRangeService {
         map(paramMap => paramMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM)), // Extract the time range value from it
         filter((timeRangeString): timeRangeString is string => !isEmpty(timeRangeString)), // Only valid time ranges
         map(timeRangeString => this.timeRangeFromUrlString(timeRangeString)),
-        catchError(() => EMPTY),
-        defaultIfEmpty(this.defaultTimeRange)
+        catchError(() => EMPTY)
       )
       .subscribe(timeRange => {
         this.setTimeRange(timeRange);
       });
   }
 
-  private timeRangeFromUrlString(timeRangeFromUrl: string): TimeRange {
+  public timeRangeFromUrlString(timeRangeFromUrl: string): TimeRange {
     const duration = this.timeDurationService.durationFromString(timeRangeFromUrl);
     if (duration) {
       return new RelativeTimeRange(duration);
@@ -103,6 +101,12 @@ export class TimeRangeService {
     return this;
   }
 
+  public setDefaultTimeRange(timeRange: TimeRange): void {
+    if (!this.currentTimeRange) {
+      this.setTimeRange(timeRange);
+    }
+  }
+
   public static toRelativeTimeRange(value: number, unit: TimeUnit): RelativeTimeRange {
     return new RelativeTimeRange(new TimeDuration(value, unit));
   }
@@ -118,4 +122,8 @@ export class TimeRangeService {
       [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()
     };
   }
+
+  public isInitialized(): boolean {
+    return !isNil(this.currentTimeRange);
+  }
 }

projects/components/src/header/application/application-header.component.ts

@@ -1,5 +1,13 @@
 import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
-import { GLOBAL_HEADER_HEIGHT, NavigationService } from '@hypertrace/common';
+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>
-        <div class="time-range" *ngIf="this.showTimeRange">
-          <ht-time-range></ht-time-range>
-        </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 navigationService: NavigationService,
+    private readonly featureStateResolver: FeatureStateResolver
+  ) {
+    this.pageLevelTimeRangeDisabled$ = this.featureStateResolver
+      .getFeatureState(ApplicationFeature.PageTimeRange)
+      .pipe(map(featureState => featureState === FeatureState.Disabled));
+  }
 
   public onLogoClick(): void {
     this.navigationService.navigateWithinApp(['']); // Empty route so we go to default screen

projects/components/src/header/page/page-header.component.scss

@@ -5,7 +5,6 @@
   margin: 24px 24px 0;
   display: flex;
   flex-direction: column;
-
   .column-alignment {
     display: flex;
     flex-direction: column;
@@ -16,12 +15,14 @@
     justify-content: space-between;
   }
 
-  &.bottom-border {
-    padding-bottom: 16px;
-    border-bottom: 1px solid $color-border;
+  .primary-row {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
   }
 
   .breadcrumb-container {
+    margin-right: auto;
     align-items: center;
 
     .breadcrumb-separator {
@@ -43,6 +44,20 @@
     }
   }
 
+  .time-range {
+    margin-left: 10px;
+  }
+
+  .row-alignment {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &.bottom-border {
+    padding-bottom: 16px;
+    border-bottom: 1px solid $color-border;
+  }
+
   .tabs {
     padding-top: 16px;
   }