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

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { isEmpty, isNil } from 'lodash-es';
 import { EMPTY, Observable, ReplaySubject } from 'rxjs';
-import { catchError, filter, map, switchMap, take } from 'rxjs/operators';
+import { catchError, filter, map, pairwise, 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';
@@ -19,6 +19,7 @@ import { TimeUnit } from './time-unit.type';
 })
 export class TimeRangeService {
   private static readonly TIME_RANGE_QUERY_PARAM: string = 'time';
+  private static readonly REFRESH_ON_NAVIGATION: string = 'refresh';
 
   private readonly timeRangeSubject$: ReplaySubject<TimeRange> = new ReplaySubject(1);
   private currentTimeRange?: TimeRange;
@@ -66,7 +67,7 @@ export class TimeRangeService {
     this.setTimeRange(this.getCurrentTimeRange());
   }
 
-  private globalTimeRangeInitConfigAndChanges(): Observable<TimeRange> {
+  private getInitialTimeRange(): Observable<TimeRange> {
     return this.navigationService.navigation$.pipe(
       take(1), // Wait for first navigation
       switchMap(activatedRoute => activatedRoute.queryParamMap), // Get the params from it
@@ -78,12 +79,22 @@ export class TimeRangeService {
     );
   }
 
-  private pageTimeRangeInitConfigAndChanges(): Observable<TimeRange> {
+  private getPageTimeRangeChanges(): Observable<TimeRange> {
     return this.navigationService.navigation$.pipe(
       switchMap(activeRoute => activeRoute.queryParamMap),
-      filter(queryParmaMap => !isNil(queryParmaMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM))),
-      map(queryParmaMap => {
-        const timeRangeQueryParamString = queryParmaMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM);
+      filter(queryParamMap => !isNil(queryParamMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM))),
+      pairwise(),
+      filter(([prevParamMap, currParamMap]) => {
+        const refreshQueryParam = currParamMap.get(TimeRangeService.REFRESH_ON_NAVIGATION);
+
+        return (
+          prevParamMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM) !==
+            currParamMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM) ||
+          (isEmpty(refreshQueryParam) ? false : JSON.parse(refreshQueryParam!))
+        );
+      }),
+      map(([, currQueryParamMap]) => {
+        const timeRangeQueryParamString = currQueryParamMap.get(TimeRangeService.TIME_RANGE_QUERY_PARAM);
 
         return this.timeRangeFromUrlString(timeRangeQueryParamString!);
       })
@@ -96,10 +107,10 @@ export class TimeRangeService {
       .pipe(
         switchMap(featureState => {
           if (featureState === FeatureState.Enabled) {
-            return this.pageTimeRangeInitConfigAndChanges();
+            return this.getPageTimeRangeChanges();
           }
 
-          return this.globalTimeRangeInitConfigAndChanges();
+          return this.getInitialTimeRange();
         })
       )
       .subscribe(timeRange => {
@@ -150,6 +161,12 @@ export class TimeRangeService {
     };
   }
 
+  public getRefreshTimeRangeQueryParam(): QueryParamObject {
+    return {
+      [TimeRangeService.REFRESH_ON_NAVIGATION]: true
+    };
+  }
+
   public isInitialized(): boolean {
     return !isNil(this.currentTimeRange);
   }

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

@@ -67,9 +67,15 @@ export class NavItemComponent {
 
     if (this.config.pageLevelTimeRangeIsEnabled && this.config.timeRangeResolver) {
       const timeRange = this.config.timeRangeResolver();
+      const timeRangeQueryParam = this.timeRangeService.toQueryParams(timeRange);
+      const timeRangeRefreshQueryParam = this.timeRangeService.getRefreshTimeRangeQueryParam();
+
       navParams = {
         ...navParams,
-        queryParams: this.timeRangeService.toQueryParams(timeRange)
+        queryParams: {
+          ...timeRangeQueryParam,
+          ...timeRangeRefreshQueryParam
+        }
       };
     }