feat: set time range option added

Author: jyothishjose6190

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

@@ -112,8 +112,7 @@ export class TimeRangeService {
   }
 
   public toQueryParams(startTime: Date, endTime: Date): QueryParamObject {
-    const newTimeRange = TimeRangeService.toFixedTimeRange(startTime, endTime);
-    this.timeRangeSubject$.next(newTimeRange);
+    const newTimeRange = new FixedTimeRange(startTime, endTime);
 
     return {
       [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()

projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/interactions/cartesian-explorer-context-menu/cartesian-explorer-context-menu.component.test.ts

@@ -83,6 +83,9 @@ describe('Sheet Overlay component', () => {
     providers: [
       mockProvider(CartesainExplorerNavigationService, {
         navigateToExplorer: jest.fn()
+      }),
+      mockProvider(TimeRangeService, {
+        toQueryParams: jest.fn()
       })
     ]
   });

projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/interactions/cartesian-explorer-context-menu/cartesian-explorer-context-menu.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
+import { TimeRangeService } from '@hypertrace/common';
 import { ButtonStyle, POPOVER_DATA } from '@hypertrace/components';
 import { CartesianSelectedData } from '../../../../../../components/cartesian/chart-interactivty';
 import { CartesainExplorerNavigationService } from '../cartesian-explorer-navigation.service';
@@ -27,6 +28,10 @@ import { CartesainExplorerNavigationService } from '../cartesian-explorer-naviga
 })
 export class CartesianExplorerContextMenuComponent<TData> {
   public menus?: ContextMenu[] = [
+    {
+      name: 'Set Time Range',
+      icon: IconType.Alarm
+    },
     {
       name: 'Explore',
       icon: IconType.ArrowUpRight
@@ -38,16 +43,21 @@ export class CartesianExplorerContextMenuComponent<TData> {
 
   public constructor(
     @Inject(POPOVER_DATA) data: CartesianSelectedData<TData>,
-    private readonly cartesainExplorerNavigationService: CartesainExplorerNavigationService
+    private readonly cartesainExplorerNavigationService: CartesainExplorerNavigationService,
+    private readonly timeRangeService: TimeRangeService
   ) {
     this.selectionData = data;
   }
 
   public menuSelectHandler = (_menu: ContextMenu): void => {
-    this.cartesainExplorerNavigationService.navigateToExplorer(
-      this.selectionData.timeRange.startTime,
-      this.selectionData.timeRange.endTime
-    );
+    this.timeRangeService.setFixedRange(this.selectionData.timeRange.startTime, this.selectionData.timeRange.endTime);
+
+    if (_menu.name === 'Explore') {
+      this.cartesainExplorerNavigationService.navigateToExplorer(
+        this.selectionData.timeRange.startTime,
+        this.selectionData.timeRange.endTime
+      );
+    }
   };
 }