Page level time range

projects/assets-library/assets/styles/_interaction.scss

@@ -99,3 +99,11 @@
     cursor: not-allowed;
   }
 }
+
+@mixin time-range-button-background {
+  background-color: white;
+
+  &:hover {
+    background-color: $gray-1;
+  }
+}

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.service';
 
 // Validators
 export * from './utilities/validators';

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

@@ -28,6 +28,6 @@ export class FixedTimeRange implements TimeRange {
 
   public isCustom(): boolean {
     // Right now all RelativeTimeRanges are NOT custom; all FixedTimeRanges are
-    return false;
+    return true;
   }
 }

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

@@ -0,0 +1,63 @@
+import {
+  FixedTimeRange,
+  NavigationService,
+  PageTimeRangeService,
+  RelativeTimeRange,
+  TimeDuration,
+  TimeRange,
+  TimeRangeService,
+  TimeUnit
+} from '@hypertrace/common';
+import { runFakeRxjs } from '@hypertrace/test-utils';
+import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest';
+
+describe('Page time range service', () => {
+  const serviceFactory = createServiceFactory({
+    service: PageTimeRangeService,
+    providers: [mockProvider(NavigationService)]
+  });
+
+  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.setPageTimeRange('foo', timeRange)
+      }).subscribe(update => update());
+
+      expectObservable(spectator.service.getPageTimeRange('foo')).toBe('da', {
+        d: undefined,
+        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.setPageTimeRange('bar', timeRange)
+      }).subscribe(update => update());
+
+      expectObservable(spectator.service.getPageTimeRange('bar')).toBe('db', {
+        d: undefined,
+        b: timeRange
+      });
+    });
+  });
+});

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

@@ -0,0 +1,60 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { isNil } from 'lodash-es';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, map, share, takeUntil } from 'rxjs/operators';
+import { PreferenceService, StorageType } from '../preference/preference.service';
+import { TimeRange } from './time-range';
+import { TimeRangeService } from './time-range.service';
+
+@Injectable({ providedIn: 'root' })
+export class PageTimeRangeService implements OnDestroy {
+  // TODO change to local ??
+  private static readonly STORAGE_TYPE: StorageType = StorageType.Session;
+  private static readonly TIME_RANGE_PREFERENCE_KEY: string = 'page-time-range';
+  private readonly destroyed$: Subject<void> = new Subject();
+
+  private readonly pageTimeRanges$: BehaviorSubject<PageTimeRangeMap> = new BehaviorSubject<PageTimeRangeMap>({});
+  private readonly storedTimeRanges$: Observable<PageTimeRangeMap> = this.preferenceService
+    .get<PageTimeRangeMap>(PageTimeRangeService.TIME_RANGE_PREFERENCE_KEY, {}, PageTimeRangeService.STORAGE_TYPE)
+    .pipe(takeUntil(this.destroyed$));
+
+  public constructor(
+    private readonly preferenceService: PreferenceService,
+    private readonly timeRangeService: TimeRangeService
+  ) {
+    this.storedTimeRanges$.subscribe(values => {
+      this.pageTimeRanges$.next(values);
+    });
+  }
+
+  public getPageTimeRange(path: string): Observable<TimeRange | undefined> {
+    return this.storedTimeRanges$.pipe(
+      distinctUntilChanged((prev, curr) => prev[path] === curr[path]),
+      map(timeRanges =>
+        !isNil(timeRanges[path]) ? this.timeRangeService.timeRangeFromUrlString(timeRanges[path]) : undefined
+      ),
+      share()
+    );
+  }
+
+  public setPageTimeRange(path: string, value: TimeRange): void {
+    const pageTimeMap: PageTimeRangeMap = this.pageTimeRanges$.getValue();
+
+    const newMap: PageTimeRangeMap = { ...pageTimeMap, [path]: value.toUrlString() };
+
+    this.preferenceService.set(
+      PageTimeRangeService.TIME_RANGE_PREFERENCE_KEY,
+      newMap,
+      PageTimeRangeService.STORAGE_TYPE
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}
+
+interface PageTimeRangeMap {
+  [path: string]: string;
+}

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

@@ -11,8 +11,8 @@ export class RelativeTimeRange implements TimeRange {
   }
 
   public isCustom(): boolean {
-    // Right now all RelativeTimeRanges are NOT custom; all FixedTimeRanges are
-    return true;
+    // Right now all RelativeTimeRanges ARE custom; all FixedTimeRanges are NOT
+    return false;
   }
 
   public toUrlString(): string {

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

@@ -1,4 +1,5 @@
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { RelativeTimeRange, TimeDuration, TimeUnit } from '@hypertrace/common';
 import { runFakeRxjs } from '@hypertrace/test-utils';
 import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest';
 import { NEVER, Observable, of } from 'rxjs';
@@ -18,9 +19,10 @@ describe('Time range service', () => {
             map(
               initialTrString =>
                 // tslint:disable-next-line: no-object-literal-type-assertion
-                ({
-                  queryParamMap: of(convertToParamMap({ time: initialTrString }))
-                } as ActivatedRoute)
+                (({
+                  queryParamMap: of(convertToParamMap({ time: initialTrString })),
+                  snapshot: { data: { defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)) } }
+                } as unknown) as ActivatedRoute)
             )
           );
         }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { isEmpty } from 'lodash-es';
-import { EMPTY, ReplaySubject } from 'rxjs';
-import { catchError, defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
+import { combineLatest, EMPTY, ReplaySubject } from 'rxjs';
+import { catchError, defaultIfEmpty, map, switchMap } from 'rxjs/operators';
 import { NavigationService, QueryParamObject } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
 import { FixedTimeRange } from './fixed-time-range';
@@ -64,14 +64,23 @@ export class TimeRangeService {
   }
 
   private initializeTimeRange(): void {
-    this.navigationService.navigation$
+    combineLatest([
+      this.navigationService.navigation$,
+      this.navigationService.navigation$.pipe(switchMap(activatedRoute => activatedRoute.queryParamMap))
+    ])
       .pipe(
-        take(1), // Wait for first navigation
-        switchMap(activatedRoute => activatedRoute.queryParamMap), // Get the params from it
-        take(1), // Only the first set of params
-        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)),
+        map(([activeRoute, paramMap]) => {
+          const defaultPageTimeRange = activeRoute.snapshot.data?.defaultTimeRange;
+          const timeRangeString = paramMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM);
+
+          if (typeof timeRangeString === 'string' && !isEmpty(timeRangeString)) {
+            return this.timeRangeFromUrlString(timeRangeString);
+          }
+          if (defaultPageTimeRange) {
+            return defaultPageTimeRange;
+          }
+          throw Error();
+        }),
         catchError(() => EMPTY),
         defaultIfEmpty(this.defaultTimeRange)
       )
@@ -80,7 +89,7 @@ export class TimeRangeService {
       });
   }
 
-  private timeRangeFromUrlString(timeRangeFromUrl: string): TimeRange {
+  public timeRangeFromUrlString(timeRangeFromUrl: string): TimeRange {
     const duration = this.timeDurationService.durationFromString(timeRangeFromUrl);
     if (duration) {
       return new RelativeTimeRange(duration);

projects/components/src/header/header-content/header-content-primary.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[htHeaderContentPrimary]'
+})
+export class HeaderContentPrimaryDirective {
+  public constructor(public templateRef: TemplateRef<unknown>) {}
+}

projects/components/src/header/header-content/header-content-secondary.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[htHeaderContentSecondary]'
+})
+export class HeaderContentSecondaryDirective {
+  public constructor(public templateRef: TemplateRef<unknown>) {}
+}

projects/components/src/header/header-content/header-content.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { HeaderContentPrimaryDirective } from './header-content-primary.directive';
+import { HeaderContentSecondaryDirective } from './header-content-secondary.directive';
+
+@NgModule({
+  declarations: [HeaderContentPrimaryDirective, HeaderContentSecondaryDirective],
+  exports: [HeaderContentPrimaryDirective, HeaderContentSecondaryDirective],
+  imports: [CommonModule],
+  providers: []
+})
+export class HeaderContentModule {}

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

@@ -9,40 +9,50 @@
   .column-alignment {
     display: flex;
     flex-direction: column;
-  }
 
-  .row-alignment {
-    display: flex;
-    justify-content: space-between;
-  }
+    .primary-content {
+      display: flex;
+      justify-content: space-between;
 
-  &.bottom-border {
-    padding-bottom: 16px;
-    border-bottom: 1px solid $color-border;
-  }
+      .breadcrumb-container {
+        align-items: center;
+        margin-right: auto;
 
-  .breadcrumb-container {
-    align-items: center;
+        .breadcrumb-separator {
+          padding: 0 20px;
+        }
 
-    .breadcrumb-separator {
-      padding: 0 20px;
-    }
+        .title {
+          @include font-subtitle-medium($gray-7);
+          display: flex;
+          align-items: center;
 
-    .title {
-      @include font-subtitle-medium($gray-7);
-      display: flex;
-      align-items: center;
+          .icon {
+            padding-right: 12px;
+          }
 
-      .icon {
-        padding-right: 12px;
+          .beta {
+            margin-left: 12px;
+          }
+        }
       }
 
-      .beta {
-        margin-left: 12px;
+      .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;
   }