Cartesian drilldown

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

@@ -81,4 +81,11 @@ describe('Time range service', () => {
       });
     });
   });
+
+  test('returns custom time filter', () => {
+    const spectator = buildService();
+    expect(spectator.service.toQueryParams(new Date(1642296703000), new Date(1642396703000))).toStrictEqual({
+      ['time']: new FixedTimeRange(new Date(1642296703000), new Date(1642396703000)).toUrlString()
+    });
+  });
 });

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { isEmpty } from 'lodash-es';
 import { EMPTY, ReplaySubject } from 'rxjs';
 import { catchError, defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
-import { NavigationService } from '../navigation/navigation.service';
+import { NavigationService, QueryParamObject } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
 import { FixedTimeRange } from './fixed-time-range';
 import { RelativeTimeRange } from './relative-time-range';
@@ -110,4 +110,12 @@ export class TimeRangeService {
   public static toFixedTimeRange(startTime: Date, endTime: Date): FixedTimeRange {
     return new FixedTimeRange(startTime, endTime);
   }
+
+  public toQueryParams(startTime: Date, endTime: Date): QueryParamObject {
+    const newTimeRange = new FixedTimeRange(startTime, endTime);
+
+    return {
+      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()
+    };
+  }
 }

projects/components/src/popover/popover-position-builder.ts

@@ -109,6 +109,11 @@ export class PopoverPositionBuilder {
         return globalPosition.centerHorizontally().centerVertically();
       case PopoverFixedPositionLocation.Right:
         return globalPosition.right('0').top('0');
+
+      case PopoverFixedPositionLocation.Custom:
+        return globalPosition
+          .left(`${popoverPosition.customLocation!.x}px`)
+          .top(`${popoverPosition.customLocation!.y}px`);
       case PopoverFixedPositionLocation.RightUnderHeader:
       default:
         return globalPosition.right('0').top(this.headerHeight ?? '0');

projects/components/src/popover/popover.ts

@@ -34,6 +34,10 @@ export interface PopoverRelativePosition {
 export interface PopoverFixedPosition {
   type: PopoverPositionType.Fixed;
   location: PopoverFixedPositionLocation;
+  customLocation?: {
+    x: number;
+    y: number;
+  };
 }
 
 export type PopoverPosition =
@@ -65,7 +69,8 @@ export const enum PopoverRelativePositionLocation {
 export const enum PopoverFixedPositionLocation {
   RightUnderHeader,
   Centered,
-  Right
+  Right,
+  Custom
 }
 
 export const POPOVER_DATA = new InjectionToken<unknown>('POPOVER_DATA');

projects/observability/src/pages/apis/api-detail/metrics/api-metrics.dashboard.ts

@@ -276,7 +276,10 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'container-widget',
@@ -336,7 +339,11 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                       type: 'entity-error-percentage-timeseries-data-source'
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               },
               {
                 type: 'cartesian-widget',
@@ -375,7 +382,11 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               }
             ]
           }
@@ -410,7 +421,11 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
               }
             }
           }
-        ]
+        ],
+        'selection-handler': {
+          type: 'cartesian-explorer-selection-handler',
+          'show-context-menu': true
+        }
       }
     ]
   }

projects/observability/src/pages/apis/api-detail/overview/api-overview.dashboard.ts

@@ -295,7 +295,10 @@ export const apiOverviewDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'cartesian-widget',
@@ -389,7 +392,10 @@ export const apiOverviewDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'cartesian-widget',
@@ -483,7 +489,10 @@ export const apiOverviewDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           }
         ]
       },

projects/observability/src/pages/apis/backend-detail/metrics/backend-metrics.dashboard.ts

@@ -260,7 +260,10 @@ export const backendMetricsDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'container-widget',
@@ -320,7 +323,11 @@ export const backendMetricsDashboard: DashboardDefaultConfiguration = {
                       type: 'entity-error-percentage-timeseries-data-source'
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               },
               {
                 type: 'cartesian-widget',
@@ -343,7 +350,11 @@ export const backendMetricsDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               }
             ]
           }
@@ -378,7 +389,11 @@ export const backendMetricsDashboard: DashboardDefaultConfiguration = {
               }
             }
           }
-        ]
+        ],
+        'selection-handler': {
+          type: 'cartesian-explorer-selection-handler',
+          'show-context-menu': true
+        }
       }
     ]
   }

projects/observability/src/pages/apis/backend-detail/overview/backend-overview.component.ts

@@ -287,7 +287,10 @@ export class BackendOverviewComponent {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'cartesian-widget',
@@ -365,7 +368,10 @@ export class BackendOverviewComponent {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'cartesian-widget',
@@ -443,7 +449,10 @@ export class BackendOverviewComponent {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           }
         ]
       },

projects/observability/src/pages/apis/service-detail/metrics/service-metrics.dashboard.ts

@@ -276,7 +276,10 @@ export const serviceMetricsDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'container-widget',
@@ -336,7 +339,11 @@ export const serviceMetricsDashboard: DashboardDefaultConfiguration = {
                       type: 'entity-error-percentage-timeseries-data-source'
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               },
               {
                 type: 'cartesian-widget',
@@ -375,7 +382,11 @@ export const serviceMetricsDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               }
             ]
           }
@@ -410,7 +421,11 @@ export const serviceMetricsDashboard: DashboardDefaultConfiguration = {
               }
             }
           }
-        ]
+        ],
+        'selection-handler': {
+          type: 'cartesian-explorer-selection-handler',
+          'show-context-menu': true
+        }
       }
     ]
   }

projects/observability/src/pages/apis/service-detail/overview/service-overview.dashboard.ts

@@ -339,7 +339,11 @@ export const serviceOverviewDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               },
               {
                 type: 'cartesian-widget',
@@ -433,7 +437,11 @@ export const serviceOverviewDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               },
               {
                 type: 'cartesian-widget',
@@ -527,7 +535,11 @@ export const serviceOverviewDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               }
             ]
           },

projects/observability/src/pages/explorer/explorer-dashboard-builder.test.ts

@@ -41,7 +41,11 @@ describe('Explorer dashboard builder', () => {
             type: 'cartesian-widget',
             'selectable-interval': false,
             'series-from-data': true,
-            'legend-position': LegendPosition.Bottom
+            'legend-position': LegendPosition.Bottom,
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler',
+              'show-context-menu': false
+            }
           },
           onReady: expect.any(Function)
         }

projects/observability/src/pages/explorer/explorer-dashboard-builder.ts

@@ -62,7 +62,11 @@ export class ExplorerDashboardBuilder {
         type: 'cartesian-widget',
         'selectable-interval': false,
         'series-from-data': true,
-        'legend-position': LegendPosition.Bottom
+        'legend-position': LegendPosition.Bottom,
+        'selection-handler': {
+          type: 'cartesian-explorer-selection-handler',
+          'show-context-menu': false
+        }
       },
       onReady: dashboard => {
         dashboard.createAndSetRootDataFromModelClass(ExplorerVisualizationCartesianDataSourceModel);

projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts

@@ -1,6 +1,7 @@
 import { Renderer2 } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { DomElementMeasurerService, selector } from '@hypertrace/common';
+import { PopoverService } from '@hypertrace/components';
 import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
 import { LegendPosition } from '../legend/legend.component';
 import { ChartTooltipBuilderService } from '../utils/chart-tooltip/chart-tooltip-builder.service';
@@ -29,7 +30,8 @@ describe('Cartesian Chart component', () => {
         }),
         getComputedTextLength: () => 0
       }),
-      mockProvider(Renderer2)
+      mockProvider(Renderer2),
+      mockProvider(PopoverService)
     ]
   });