Page level time range

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

@@ -78,14 +78,16 @@ export class PageTimeRangePreferenceService {
       .pipe(shareReplay(1));
   }
 
-  public getDefaultTimeRangeForCurrentRoute = (): TimeRange => {
+  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 => new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour));
+  public getGlobalDefaultTimeRange(): TimeRange {
+    return new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour));
+  }
 }
 
 interface PageTimeRangeStringDictionary {

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { NavigationService, TimeRangeService, TypedSimpleChanges } from '@hypertrace/common';
+import { NavigationService, TypedSimpleChanges } from '@hypertrace/common';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
@@ -76,28 +76,26 @@ export class NavigationListComponent implements OnChanges {
   @Output()
   public readonly navItemSelected: EventEmitter<NavItemLinkConfig> = new EventEmitter();
 
+  @Output()
+  public readonly activeItemChange: EventEmitter<NavItemLinkConfig> = new EventEmitter();
+
   public activeItem$?: Observable<NavItemLinkConfig | undefined>;
 
   public constructor(
     private readonly navigationService: NavigationService,
     private readonly activatedRoute: ActivatedRoute,
-    private readonly navListComponentService: NavigationListComponentService,
-    private readonly timeRangeService: TimeRangeService
+    private readonly navListComponentService: NavigationListComponentService
   ) {}
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.navItems) {
       this.navItems = this.navListComponentService.resolveFeaturesAndUpdateVisibilityForNavItems(this.navItems);
 
-      // Initialize the time range service
-      // Depending on FF status, the TR will be either global or page level for the init
       this.activeItem$ = this.navigationService.navigation$.pipe(
         startWith(this.navigationService.getCurrentActivatedRoute()),
         map(() => {
           const activeItem = this.findActiveItem(this.navItems);
-          if (!this.timeRangeService.isInitialized() && activeItem?.timeRangeResolver) {
-            this.timeRangeService.setDefaultTimeRange(activeItem.timeRangeResolver());
-          }
+          this.activeItemChange.emit(activeItem);
 
           return activeItem;
         })

src/app/application-frame/application-frame.component.ts

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
-import { LayoutChangeService } from '@hypertrace/common';
+import { LayoutChangeService, TimeRange, TimeRangeService } from '@hypertrace/common';
 import { IconSize } from '@hypertrace/components';
+import { Observable } from 'rxjs';
 import { UserTelemetryOrchestrationService } from '../shared/telemetry/user-telemetry-orchestration.service';
 @Component({
   selector: 'ht-application-frame',
@@ -16,14 +17,21 @@ import { UserTelemetryOrchestrationService } from '../shared/telemetry/user-tele
     </ht-application-header>
     <div class="app-body">
       <ht-navigation class="left-nav"></ht-navigation>
-      <div class="app-content">
+      <div class="app-content" *ngIf="this.timeRangeHasInit$ | async">
         <router-outlet></router-outlet>
       </div>
     </div>
   `
 })
 export class ApplicationFrameComponent implements OnInit {
-  public constructor(private readonly userTelemetryOrchestrationService: UserTelemetryOrchestrationService) {}
+  public readonly timeRangeHasInit$: Observable<TimeRange>;
+
+  public constructor(
+    private readonly userTelemetryOrchestrationService: UserTelemetryOrchestrationService,
+    private readonly timeRangeService: TimeRangeService
+  ) {
+    this.timeRangeHasInit$ = this.timeRangeService.getTimeRangeAndChanges();
+  }
 
   public ngOnInit(): void {
     this.userTelemetryOrchestrationService.initialize();

src/app/application-frame/application-frame.module.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -6,7 +7,15 @@ import { NavigationModule } from '../shared/navigation/navigation.module';
 import { ApplicationFrameComponent } from './application-frame.component';
 
 @NgModule({
-  imports: [ApplicationHeaderModule, NavigationModule, PageHeaderModule, HttpClientModule, RouterModule, IconModule],
+  imports: [
+    CommonModule,
+    ApplicationHeaderModule,
+    NavigationModule,
+    PageHeaderModule,
+    HttpClientModule,
+    RouterModule,
+    IconModule
+  ],
   declarations: [ApplicationFrameComponent],
   exports: [ApplicationFrameComponent]
 })

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { ExternalUrlNavigator, HtRoute } from '@hypertrace/common';
+import { ExternalUrlNavigator, HtRoute, RelativeTimeRange, TimeDuration, TimeUnit } from '@hypertrace/common';
 import { NotFoundComponent, NotFoundModule } from '@hypertrace/components';
 import { ObservabilityIconType } from '@hypertrace/observability';
 import { ApplicationFrameComponent } from '../application-frame/application-frame.component';
@@ -25,7 +25,8 @@ const ROUTE_CONFIG: HtRoute[] = [
               breadcrumb: {
                 icon: IconType.Dashboard,
                 label: 'Dashboard'
-              }
+              },
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
             },
             loadChildren: () => import('../home/home.module').then(module => module.HomeModule)
           },
@@ -35,7 +36,8 @@ const ROUTE_CONFIG: HtRoute[] = [
               breadcrumb: {
                 icon: ObservabilityIconType.ApplicationFlow,
                 label: 'Application Flow'
-              }
+              },
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
             },
             loadChildren: () =>
               import('./application-flow/application-flow-routing.module').then(
@@ -48,7 +50,8 @@ const ROUTE_CONFIG: HtRoute[] = [
               breadcrumb: {
                 icon: ObservabilityIconType.Backend,
                 label: 'Backends'
-              }
+              },
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
             },
             loadChildren: () =>
               import('./backends/backends-routing.module').then(module => module.BackendsRoutingModule)
@@ -59,7 +62,8 @@ const ROUTE_CONFIG: HtRoute[] = [
               breadcrumb: {
                 icon: ObservabilityIconType.Service,
                 label: 'Services'
-              }
+              },
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
             },
             loadChildren: () =>
               import('./services/services-routing.module').then(module => module.ServicesRoutingModule)
@@ -70,7 +74,8 @@ const ROUTE_CONFIG: HtRoute[] = [
               breadcrumb: {
                 icon: ObservabilityIconType.Api,
                 label: 'Endpoints'
-              }
+              },
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
             },
             loadChildren: () =>
               import('./endpoints/endpoint-routing.module').then(module => module.EndpointRoutingModule)
@@ -89,7 +94,8 @@ const ROUTE_CONFIG: HtRoute[] = [
               breadcrumb: {
                 icon: IconType.Search,
                 label: 'Explorer'
-              }
+              },
+              defaultTimeRange: new RelativeTimeRange(new TimeDuration(1, TimeUnit.Hour))
             },
             loadChildren: () =>
               import('./explorer/explorer-routing.module').then(module => module.ExplorerRoutingModule)

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

@@ -1,10 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { PreferenceService } from '@hypertrace/common';
-import { NavigationListService, NavItemConfig, NavItemType } from '@hypertrace/components';
+import { FixedTimeRange, PreferenceService, RelativeTimeRange, TimeRangeService } from '@hypertrace/common';
+import {
+  NavigationListComponentService,
+  NavigationListService,
+  NavItemConfig,
+  NavItemLinkConfig,
+  NavItemType
+} from '@hypertrace/components';
 import { ObservabilityIconType } from '@hypertrace/observability';
+import { isNil } from 'lodash-es';
 import { Observable } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
 
 @Component({
   selector: 'ht-navigation',
@@ -13,17 +21,21 @@ import { Observable } from 'rxjs';
   template: `
     <div class="navigation">
       <ht-navigation-list
-        [navItems]="this.navItems"
+        [navItems]="this.navItems$ | async"
         *htLetAsync="this.isCollapsed$ as isCollapsed"
         [collapsed]="isCollapsed"
         (collapsedChange)="this.onViewToggle($event)"
+        (navItemSelected)="this.setPageTimeRangeForSelectedNavItem($event)"
+        (activeItemChange)="this.updateDefaultTimeRangeIfUnset($event)"
       ></ht-navigation-list>
     </div>
   `
 })
 export class NavigationComponent {
   private static readonly COLLAPSED_PREFERENCE: string = 'app-navigation.collapsed';
-  public readonly navItems: NavItemConfig[];
+
+  public navItems$?: Observable<NavItemConfig[]>;
+
   public readonly isCollapsed$: Observable<boolean>;
 
   private readonly navItemDefinitions: NavItemConfig[] = [
@@ -76,14 +88,39 @@ export class NavigationComponent {
   public constructor(
     private readonly navigationListService: NavigationListService,
     private readonly preferenceService: PreferenceService,
-    private readonly activatedRoute: ActivatedRoute
+    private readonly navListComponentService: NavigationListComponentService,
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly timeRangeService: TimeRangeService
   ) {
-    this.navItems = this.navItemDefinitions.map(definition =>
+    const navItems = this.navItemDefinitions.map(definition =>
       this.navigationListService.decorateNavItem(definition, this.activatedRoute)
     );
+    // Decorate the nav items with the corresponding time ranges, depending on the FF state.
+    // The time ranges in nav items are streams that get the most recent value from page time range preference service
+    this.navItems$ = this.navListComponentService.resolveNavItemConfigTimeRanges(navItems).pipe(shareReplay());
+
     this.isCollapsed$ = this.preferenceService.get(NavigationComponent.COLLAPSED_PREFERENCE, false);
   }
 
+  public setPageTimeRangeForSelectedNavItem(navItemLink: NavItemLinkConfig): void {
+    if (!isNil(navItemLink.timeRangeResolver) && navItemLink.pageLevelTimeRangeIsEnabled) {
+      const timeRange = navItemLink.timeRangeResolver();
+      if (timeRange instanceof FixedTimeRange) {
+        this.timeRangeService.setFixedRange(timeRange.startTime, timeRange.endTime);
+      } else if (timeRange instanceof RelativeTimeRange) {
+        this.timeRangeService.setRelativeRange(timeRange.duration.value, timeRange.duration.unit);
+      }
+    }
+  }
+
+  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);
   }