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

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

@@ -1,11 +1,8 @@
 import { Injectable } from '@angular/core';
 import { ParamMap } from '@angular/router';
-import { isEmpty, isNil } from 'lodash-es';
-import { EMPTY, Observable, ReplaySubject } from 'rxjs';
+import { isEmpty, isNil, omit } from 'lodash-es';
+import { concat, EMPTY, Observable, ReplaySubject } from 'rxjs';
 import { catchError, distinctUntilChanged, 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';
@@ -27,8 +24,7 @@ export class TimeRangeService {
 
   public constructor(
     private readonly navigationService: NavigationService,
-    private readonly timeDurationService: TimeDurationService,
-    private readonly featureStateResolver: FeatureStateResolver
+    private readonly timeDurationService: TimeDurationService
   ) {
     this.initializeTimeRange();
     this.navigationService.registerGlobalQueryParamKey(TimeRangeService.TIME_RANGE_QUERY_PARAM);
@@ -57,15 +53,18 @@ export class TimeRangeService {
   }
 
   public setRelativeRange(value: number, unit: TimeUnit): this {
-    return this.setTimeRange(TimeRangeService.toRelativeTimeRange(value, unit));
+    // return this.setTimeRange(TimeRangeService.toRelativeTimeRange(value, unit));
+    return this.setTimeRangeInUrl(TimeRangeService.toRelativeTimeRange(value, unit));
   }
 
   public setFixedRange(startTime: Date, endTime: Date): this {
-    return this.setTimeRange(TimeRangeService.toFixedTimeRange(startTime, endTime));
+    // return this.setTimeRange(TimeRangeService.toFixedTimeRange(startTime, endTime));
+    return this.setTimeRangeInUrl(TimeRangeService.toFixedTimeRange(startTime, endTime));
   }
 
   public refresh(): void {
-    this.setTimeRange(this.getCurrentTimeRange());
+    const currentStringTimeRange = this.getCurrentTimeRange().toUrlString();
+    this.applyTimeRangeChange(this.timeRangeFromUrlString(currentStringTimeRange));
   }
 
   private getInitialTimeRange(): Observable<TimeRange> {
@@ -82,7 +81,7 @@ export class TimeRangeService {
 
   private getPageTimeRangeChanges(): Observable<TimeRange> {
     return this.navigationService.navigation$.pipe(
-      switchMap(activeRoute => activeRoute.queryParamMap),
+      map(activeRoute => activeRoute.snapshot.queryParamMap),
       filter(queryParamMap => !isNil(queryParamMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM))),
       distinctUntilChanged((prevParamMap, currParamMap) => this.shouldNotUpdateTimeRange(prevParamMap, currParamMap)),
       map(currQueryParamMap => {
@@ -93,6 +92,21 @@ export class TimeRangeService {
     );
   }
 
+  private initializeTimeRange(): void {
+    concat(this.getInitialTimeRange(), this.getPageTimeRangeChanges()).subscribe(timeRange => {
+      if (!this.timeRangeMatchesCurrentUrl(timeRange)) {
+        this.setTimeRangeInUrl(timeRange);
+      } else {
+        this.applyTimeRangeChange(timeRange);
+
+        const queryParams = this.navigationService.getCurrentActivatedRoute().snapshot.queryParams;
+        if (TimeRangeService.REFRESH_ON_NAVIGATION in queryParams) {
+          this.navigationService.replaceQueryParametersInUrl(omit(queryParams, TimeRangeService.REFRESH_ON_NAVIGATION));
+        }
+      }
+    });
+  }
+
   private shouldNotUpdateTimeRange(prevParamMap: ParamMap, currParamMap: ParamMap): boolean {
     const refreshQueryParam = currParamMap.get(TimeRangeService.REFRESH_ON_NAVIGATION);
 
@@ -102,23 +116,6 @@ export class TimeRangeService {
     );
   }
 
-  private initializeTimeRange(): void {
-    this.featureStateResolver
-      .getFeatureState(ApplicationFeature.PageTimeRange)
-      .pipe(
-        switchMap(featureState => {
-          if (featureState === FeatureState.Enabled) {
-            return this.getPageTimeRangeChanges();
-          }
-
-          return this.getInitialTimeRange();
-        })
-      )
-      .subscribe(timeRange => {
-        this.setTimeRange(timeRange);
-      });
-  }
-
   public timeRangeFromUrlString(timeRangeFromUrl: string): TimeRange {
     const duration = this.timeDurationService.durationFromString(timeRangeFromUrl);
     if (duration) {
@@ -132,19 +129,24 @@ export class TimeRangeService {
     throw new Error(); // Caught in observable
   }
 
-  private setTimeRange(newTimeRange: TimeRange): this {
+  private applyTimeRangeChange(newTimeRange: TimeRange): this {
     this.currentTimeRange = newTimeRange;
     this.timeRangeSubject$.next(newTimeRange);
+
+    return this;
+  }
+
+  private setTimeRangeInUrl(timeRange: TimeRange): this {
     this.navigationService.addQueryParametersToUrl({
-      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()
+      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: timeRange.toUrlString()
     });
 
     return this;
   }
 
   public setDefaultTimeRange(timeRange: TimeRange): void {
     if (!this.currentTimeRange) {
-      this.setTimeRange(timeRange);
+      this.setTimeRangeInUrl(timeRange);
     }
   }
 
@@ -157,17 +159,23 @@ export class TimeRangeService {
   }
 
   public toQueryParams(timeRange: TimeRange, refreshTimeOnNavigationParam?: boolean): QueryParamObject {
-    let queryParams: QueryParamObject = {
+    const queryParams: QueryParamObject = {
       [TimeRangeService.TIME_RANGE_QUERY_PARAM]: timeRange.toUrlString()
     };
 
     if (refreshTimeOnNavigationParam) {
-      queryParams = { ...queryParams, [TimeRangeService.REFRESH_ON_NAVIGATION]: true };
+      return { ...queryParams, [TimeRangeService.REFRESH_ON_NAVIGATION]: true };
     }
 
     return queryParams;
   }
 
+  private timeRangeMatchesCurrentUrl(timeRange: TimeRange): boolean {
+    return (
+      this.navigationService.getQueryParameter(TimeRangeService.TIME_RANGE_QUERY_PARAM, '') === timeRange.toUrlString()
+    );
+  }
+
   public isInitialized(): boolean {
     return !isNil(this.currentTimeRange);
   }

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

@@ -9,7 +9,7 @@ import { NavItemLinkConfig, NavViewStyle } from '../navigation.config';
   styleUrls: ['./nav-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ht-link *ngIf="this.config" [paramsOrUrl]="buildNavigationParam | htMemoize: this.config">
+    <ht-link *ngIf="this.config" [paramsOrUrl]="this.buildNavigationParam(this.config)">
       <div
         *htIfFeature="this.config.featureState$ | async as featureState"
         class="nav-item"
@@ -57,28 +57,23 @@ export class NavItemComponent {
   @Input()
   public readonly navItemViewStyle?: NavViewStyle;
 
-  public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => {
-    let navParams: NavigationParams = {
+  public buildNavigationParam(item: NavItemLinkConfig): NavigationParams {
+    const navParams: NavigationParams = {
       navType: NavigationParamsType.InApp,
       path: item.matchPaths[0],
       relativeTo: this.activatedRoute,
       replaceCurrentHistory: item.replaceCurrentHistory
     };
 
     if (this.config.pageLevelTimeRangeIsEnabled && this.config.timeRangeResolver) {
-      const timeRange = this.config.timeRangeResolver();
-      const timeRangeQueryParam = this.timeRangeService.toQueryParams(timeRange, true);
-
-      navParams = {
+      return {
         ...navParams,
-        queryParams: {
-          ...timeRangeQueryParam
-        }
+        queryParams: this.timeRangeService.toQueryParams(this.config.timeRangeResolver(), true)
       };
     }
 
     return navParams;
-  };
+  }
 
   public constructor(
     private readonly activatedRoute: ActivatedRoute,

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

@@ -125,7 +125,7 @@ export class TimeRangeComponent {
           text$: of('Refresh'),
           role: ButtonRole.Tertiary,
           isEmphasized: false,
-          onClick: () => this.onRefresh(timeRange)
+          onClick: () => this.onRefresh()
         }),
         this.ngZone.runOutsideAngular(() =>
           // Long running timer will prevent zone from stabilizing
@@ -143,7 +143,7 @@ export class TimeRangeComponent {
               ),
               role: ButtonRole.Primary,
               isEmphasized: true,
-              onClick: () => this.onRefresh(timeRange)
+              onClick: () => this.onRefresh()
             }))
           )
         )
@@ -153,8 +153,8 @@ export class TimeRangeComponent {
     return EMPTY;
   };
 
-  private onRefresh(timeRange: RelativeTimeRange): void {
-    this.timeRangeService.setRelativeRange(timeRange.duration.value, timeRange.duration.unit);
+  private onRefresh(): void {
+    this.timeRangeService.refresh();
   }
 }
 

src/app/shared/feature-resolver/feature-resolver.service.ts

@@ -1,10 +1,15 @@
 import { Injectable } from '@angular/core';
-import { FeatureState, FeatureStateResolver } from '@hypertrace/common';
+import { ApplicationFeature, FeatureState, FeatureStateResolver } from '@hypertrace/common';
 import { Observable, of } from 'rxjs';
 
 @Injectable()
 export class FeatureResolverService extends FeatureStateResolver {
-  public getFeatureState(_: string): Observable<FeatureState> {
-    return of(FeatureState.Enabled);
+  public getFeatureState(flag: string): Observable<FeatureState> {
+    switch (flag) {
+      case ApplicationFeature.PageTimeRange:
+        return of(FeatureState.Disabled);
+      default:
+        return of(FeatureState.Enabled);
+    }
   }
 }