refactor: re-structure of page time range to be query param centric

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

@@ -7,4 +7,5 @@ export interface HtRouteData {
   features?: string[];
   title?: string;
   defaultTimeRange?: TimeRange;
+  shouldSavePageTimeRange?: boolean;
 }

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

@@ -1,5 +1,4 @@
 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';
@@ -38,7 +37,7 @@ export class PageTimeRangePreferenceService {
       map(([pageTimeRangeStringDictionary, featureState]) => {
         if (featureState === FeatureState.Enabled) {
           if (isNil(pageTimeRangeStringDictionary[rootLevelPath])) {
-            return () => this.getDefaultTimeRangeForCurrentRoute();
+            return () => this.getDefaultTimeRangeForCurrentRoute(rootLevelPath);
           }
 
           return () => this.timeRangeService.timeRangeFromUrlString(pageTimeRangeStringDictionary[rootLevelPath]);
@@ -78,11 +77,14 @@ export class PageTimeRangePreferenceService {
       .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
+  public getDefaultTimeRangeForCurrentRoute(rootLevelPath: string): TimeRange {
+    const routeConfigForPath = this.navigationService.getRouteConfig(
+      [rootLevelPath],
+      this.navigationService.rootRoute()
+    );
 
-    return currentRoute.snapshot.data?.defaultTimeRange ?? this.getGlobalDefaultTimeRange();
+    // Right side for when FF is enabled but 'defaultTimeRange' is not set on AR data
+    return routeConfigForPath?.data?.defaultTimeRange ?? this.getGlobalDefaultTimeRange();
   }
 
   public getGlobalDefaultTimeRange(): TimeRange {

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

@@ -1,7 +1,10 @@
 import { Injectable } from '@angular/core';
 import { isEmpty, isNil } from 'lodash-es';
-import { EMPTY, ReplaySubject } from 'rxjs';
+import { EMPTY, Observable, ReplaySubject } from 'rxjs';
 import { catchError, filter, map, switchMap, 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, QueryParamObject } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
 import { FixedTimeRange } from './fixed-time-range';
@@ -22,7 +25,8 @@ export class TimeRangeService {
 
   public constructor(
     private readonly navigationService: NavigationService,
-    private readonly timeDurationService: TimeDurationService
+    private readonly timeDurationService: TimeDurationService,
+    private readonly featureStateResolver: FeatureStateResolver
   ) {
     this.initializeTimeRange();
     this.navigationService.registerGlobalQueryParamKey(TimeRangeService.TIME_RANGE_QUERY_PARAM);
@@ -62,16 +66,44 @@ export class TimeRangeService {
     this.setTimeRange(this.getCurrentTimeRange());
   }
 
+  private globalTimeRangeInitialization(): Observable<TimeRange> {
+    return this.navigationService.navigation$.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)),
+      catchError(() => EMPTY)
+    );
+  }
+
+  private pageTimeRangeInitialization(): Observable<TimeRange> {
+    return this.navigationService.navigation$.pipe(
+      filter(
+        activatedRoute => !isNil(activatedRoute.snapshot.queryParamMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM))
+      ),
+      map(activeRoute => {
+        const timeRangeQueryParamString = activeRoute.snapshot.queryParamMap.get(
+          TimeRangeService.TIME_RANGE_QUERY_PARAM
+        );
+
+        return this.timeRangeFromUrlString(timeRangeQueryParamString!);
+      })
+    );
+  }
+
   private initializeTimeRange(): void {
-    this.navigationService.navigation$
+    this.featureStateResolver
+      .getFeatureState(ApplicationFeature.PageTimeRange)
       .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)),
-        catchError(() => EMPTY)
+        switchMap(featureState => {
+          if (featureState === FeatureState.Enabled) {
+            return this.pageTimeRangeInitialization();
+          }
+
+          return this.globalTimeRangeInitialization();
+        })
       )
       .subscribe(timeRange => {
         this.setTimeRange(timeRange);
@@ -115,11 +147,16 @@ export class TimeRangeService {
     return new FixedTimeRange(startTime, endTime);
   }
 
-  public toQueryParams(startTime: Date, endTime: Date): QueryParamObject {
-    const newTimeRange = new FixedTimeRange(startTime, endTime);
+  public toQueryParams(startTime: Date, endTime: Date, timeRangeIfRelative?: TimeRange): QueryParamObject {
+    if (timeRangeIfRelative && timeRangeIfRelative instanceof RelativeTimeRange) {
+      return {
+        [TimeRangeService.TIME_RANGE_QUERY_PARAM]: timeRangeIfRelative.toUrlString()
+      };
+    }
+    const newFixedTimeRange = new FixedTimeRange(startTime, endTime);
 
     return {
-      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()
+      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newFixedTimeRange.toUrlString()
     };
   }
 

projects/components/src/navigation/nav-item/nav-item.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
+import { FeatureState, NavigationParams, NavigationParamsType, TimeRangeService } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
 import { NavItemLinkConfig, NavViewStyle } from '../navigation.config';
 
@@ -57,12 +57,23 @@ export class NavItemComponent {
   @Input()
   public readonly navItemViewStyle?: NavViewStyle;
 
-  public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({
-    navType: NavigationParamsType.InApp,
-    path: item.matchPaths[0],
-    relativeTo: this.activatedRoute,
-    replaceCurrentHistory: item.replaceCurrentHistory
-  });
+  public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => {
+    const timeRange = this.config.timeRangeResolver ? this.config.timeRangeResolver() : undefined;
 
-  public constructor(private readonly activatedRoute: ActivatedRoute) {}
+    return {
+      navType: NavigationParamsType.InApp,
+      path: item.matchPaths[0],
+      relativeTo: this.activatedRoute,
+      replaceCurrentHistory: item.replaceCurrentHistory,
+      queryParams:
+        timeRange && this.config.pageLevelTimeRangeIsEnabled
+          ? this.timeRangeService.toQueryParams(timeRange.startTime, timeRange.endTime, timeRange)
+          : undefined
+    };
+  };
+
+  public constructor(
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly timeRangeService: TimeRangeService
+  ) {}
 }

projects/components/src/navigation/navigation-list.component.ts

@@ -39,7 +39,6 @@ import {
             <ng-container *ngSwitchCase="'${NavItemType.Link}'">
               <ht-nav-item
                 [navItemViewStyle]="this.navViewStyle"
-                (click)="this.navItemClick.emit(item)"
                 [config]="item"
                 [active]="item === activeItem"
                 [collapsed]="this.collapsed"
@@ -95,9 +94,6 @@ export class NavigationListComponent implements OnChanges {
   @Input()
   public readonly navViewStyle?: NavViewStyle;
 
-  @Output()
-  public readonly navItemClick: EventEmitter<NavItemLinkConfig> = new EventEmitter();
-
   @Output()
   public readonly activeItemChange: EventEmitter<NavItemLinkConfig> = new EventEmitter();
 

projects/components/src/page-time-range/page-time-range.component.ts

@@ -35,7 +35,7 @@ export class PageTimeRangeComponent {
   }
 
   public shouldSavePageTimeRange(currentRoute: ActivatedRoute): boolean {
-    return !isNil(currentRoute.snapshot.data?.defaultTimeRange);
+    return !isNil(currentRoute.snapshot.data?.shouldSavePageTimeRange);
   }
 
   public savePageTimeRange(selectedTimeRange: TimeRange, segment: UrlSegment): void {

src/app/routes/root-routing.module.ts

@@ -26,7 +26,8 @@ const ROUTE_CONFIG: HtRoute[] = [
                 icon: IconType.Dashboard,
                 label: 'Dashboard'
               },
-              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)),
+              shouldSavePageTimeRange: true
             },
             loadChildren: () => import('../home/home.module').then(module => module.HomeModule)
           },
@@ -37,7 +38,8 @@ const ROUTE_CONFIG: HtRoute[] = [
                 icon: ObservabilityIconType.ApplicationFlow,
                 label: 'Application Flow'
               },
-              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)),
+              shouldSavePageTimeRange: true
             },
             loadChildren: () =>
               import('./application-flow/application-flow-routing.module').then(
@@ -51,7 +53,8 @@ const ROUTE_CONFIG: HtRoute[] = [
                 icon: ObservabilityIconType.Backend,
                 label: 'Backends'
               },
-              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)),
+              shouldSavePageTimeRange: true
             },
             loadChildren: () =>
               import('./backends/backends-routing.module').then(module => module.BackendsRoutingModule)
@@ -63,7 +66,8 @@ const ROUTE_CONFIG: HtRoute[] = [
                 icon: ObservabilityIconType.Service,
                 label: 'Services'
               },
-              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)),
+              shouldSavePageTimeRange: true
             },
             loadChildren: () =>
               import('./services/services-routing.module').then(module => module.ServicesRoutingModule)
@@ -75,7 +79,8 @@ const ROUTE_CONFIG: HtRoute[] = [
                 icon: ObservabilityIconType.Api,
                 label: 'Endpoints'
               },
-              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)),
+              shouldSavePageTimeRange: true
             },
             loadChildren: () =>
               import('./endpoints/endpoint-routing.module').then(module => module.EndpointRoutingModule)
@@ -95,7 +100,8 @@ const ROUTE_CONFIG: HtRoute[] = [
                 icon: IconType.Search,
                 label: 'Explorer'
               },
-              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour)),
+              shouldSavePageTimeRange: true
             },
             loadChildren: () =>
               import('./explorer/explorer-routing.module').then(module => module.ExplorerRoutingModule)

src/app/shared/navigation/navigation.component.ts

@@ -24,8 +24,7 @@ import { Observable } from 'rxjs';
         *htLetAsync="this.isCollapsed$ as isCollapsed"
         [collapsed]="isCollapsed"
         (collapsedChange)="this.onViewToggle($event)"
-        (navItemClick)="this.setPageTimeRangeForSelectedNavItem($event)"
-        (activeItemChange)="this.updateDefaultTimeRangeIfUnset($event)"
+        (activeItemChange)="this.setPageTimeRangeForActiveNavItem($event)"
       ></ht-navigation-list>
     </div>
   `
@@ -101,7 +100,7 @@ export class NavigationComponent {
     this.isCollapsed$ = this.preferenceService.get(NavigationComponent.COLLAPSED_PREFERENCE, false);
   }
 
-  public setPageTimeRangeForSelectedNavItem(navItemLink: NavItemLinkConfig): void {
+  public setPageTimeRangeForActiveNavItem(navItemLink: NavItemLinkConfig): void {
     if (!isNil(navItemLink.timeRangeResolver) && navItemLink.pageLevelTimeRangeIsEnabled) {
       const timeRange = navItemLink.timeRangeResolver();
       if (timeRange instanceof FixedTimeRange) {
@@ -112,14 +111,6 @@ export class NavigationComponent {
     }
   }
 
-  public updateDefaultTimeRangeIfUnset(activeItem: NavItemLinkConfig): void {
-    // Initialize the time range service
-    // Depending on FF status, the TR will be either global or page level for the init
-    if (!this.timeRangeService.isInitialized()) {
-      this.timeRangeService.setDefaultTimeRange(activeItem.timeRangeResolver!());
-    }
-  }
-
   public onViewToggle(collapsed: boolean): void {
     this.preferenceService.set(NavigationComponent.COLLAPSED_PREFERENCE, collapsed);
   }