feat: context menu navigation handler added

Author: jyothishjose6190

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

@@ -22,11 +22,6 @@ class TestComponent {
 }
 
 describe('Sheet Overlay component', () => {
-  const menu: ContextMenu = {
-    name: 'Explore',
-    icon: IconType.ArrowUpRight
-  };
-
   const selectedData: CartesianSelectedData<unknown> = {
     timeRange: TimeRangeService.toFixedTimeRange(
       new Date('2021-11-02T05:33:19.288Z'),
@@ -119,7 +114,17 @@ describe('Sheet Overlay component', () => {
 
     spectator.component.selectionData = selectedData;
 
-    spectator.component.menuSelectHandler(menu);
+    const menu: ContextMenu = {
+      name: 'Explore',
+      icon: IconType.ArrowUpRight,
+      onClick: () => {
+        spectator
+          .inject(CartesainExplorerNavigationService)
+          .navigateToExplorer(selectedData.timeRange.startTime, selectedData.timeRange.endTime);
+      }
+    };
+
+    menu.onClick();
 
     expect(spectator.inject(CartesainExplorerNavigationService).navigateToExplorer).toHaveBeenCalled();
   });

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

@@ -13,12 +13,7 @@ import { CartesainExplorerNavigationService } from '../cartesian-explorer-naviga
     <div class="context-menu-container">
       <div *ngFor="let menu of menus">
         <div class="context-menu">
-          <ht-button
-            [label]="menu.name"
-            [icon]="menu.icon"
-            [display]="display"
-            (click)="menuSelectHandler(menu)"
-          ></ht-button>
+          <ht-button [label]="menu.name" [icon]="menu.icon" [display]="display" (click)="menu.onClick()"></ht-button>
         </div>
 
         <ht-divider></ht-divider>
@@ -30,11 +25,13 @@ export class CartesianExplorerContextMenuComponent<TData> {
   public menus?: ContextMenu[] = [
     {
       name: 'Set Time Range',
-      icon: IconType.Alarm
+      icon: IconType.Alarm,
+      onClick: () => this.setTimeRangeHandler()
     },
     {
       name: 'Explore',
-      icon: IconType.ArrowUpRight
+      icon: IconType.ArrowUpRight,
+      onClick: () => this.explorerNavigationHandler()
     }
   ];
 
@@ -49,19 +46,20 @@ export class CartesianExplorerContextMenuComponent<TData> {
     this.selectionData = data;
   }
 
-  public menuSelectHandler = (_menu: ContextMenu): void => {
-    this.timeRangeService.setFixedRange(this.selectionData.timeRange.startTime, this.selectionData.timeRange.endTime);
+  public readonly explorerNavigationHandler = () => {
+    this.cartesainExplorerNavigationService.navigateToExplorer(
+      this.selectionData.timeRange.startTime,
+      this.selectionData.timeRange.endTime
+    );
+  };
 
-    if (_menu.name === 'Explore') {
-      this.cartesainExplorerNavigationService.navigateToExplorer(
-        this.selectionData.timeRange.startTime,
-        this.selectionData.timeRange.endTime
-      );
-    }
+  public readonly setTimeRangeHandler = () => {
+    this.timeRangeService.setFixedRange(this.selectionData.timeRange.startTime, this.selectionData.timeRange.endTime);
   };
 }
 
 export interface ContextMenu {
   name: string;
   icon: string;
+  onClick(): void;
 }

projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/interactions/cartesian-explorer-navigation.service.ts

@@ -11,6 +11,7 @@ export class CartesainExplorerNavigationService {
   ) {}
 
   public navigateToExplorer(start: Date, end: Date): void {
+    this.timeRangeService.setFixedRange(start, end);
     const params = this.timeRangeService.toQueryParams(start, end);
 
     this.navigationService.navigate({