From df3b19b9ccc16f7fb74090da5bf612256a193038 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 31 Aug 2021 12:53:54 +0530 Subject: [PATCH 01/12] fix: trace drilldown to search --- .../api-trace-detail.page.component.ts | 34 ++++++++++++++----- .../api-trace-detail.page.module.ts | 4 ++- .../trace-detail.page.component.ts | 31 ++++++++++++----- .../trace-detail/trace-detail.page.module.ts | 4 ++- 4 files changed, 53 insertions(+), 20 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts index 632ddfa27..200ac6dc8 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts @@ -1,9 +1,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationService, SubscriptionLifecycle } from '@hypertrace/common'; -import { ButtonRole, ButtonStyle, IconSize } from '@hypertrace/components'; +import { NavigationParams, NavigationService, SubscriptionLifecycle } from '@hypertrace/common'; +import { ButtonRole, ButtonStyle, FilterOperator, IconSize } from '@hypertrace/components'; import { Observable } from 'rxjs'; import { LogEvent } from '../../shared/dashboard/widgets/waterfall/waterfall/waterfall-chart'; +import { ExplorerService } from '../explorer/explorer-service'; +import { ScopeQueryParam } from '../explorer/explorer.component'; import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.service'; @Component({ @@ -31,12 +33,19 @@ import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.servi icon="${IconType.Time}" [value]="traceDetails.timeString" > - + + + + + +
@@ -73,7 +82,8 @@ export class ApiTraceDetailPageComponent { public constructor( protected readonly navigationService: NavigationService, - private readonly apiTraceDetailService: ApiTraceDetailService + private readonly apiTraceDetailService: ApiTraceDetailService, + private readonly explorerService: ExplorerService ) { this.traceDetails$ = this.apiTraceDetailService.fetchTraceDetails(); this.logEvents$ = this.apiTraceDetailService.fetchLogEvents(); @@ -86,4 +96,10 @@ export class ApiTraceDetailPageComponent { public navigateToFullTrace(traceId: string, startTime: string): void { this.navigationService.navigateWithinApp(['/trace', traceId, { startTime: startTime }]); } + + public getExploreNavigationParams(traceId: string): Observable { + return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ + { field: 'traceId', operator: FilterOperator.Equals, value: traceId } + ]); + } } diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts index 04fa251ce..f1ddec0b5 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts @@ -9,7 +9,8 @@ import { LabelModule, LoadAsyncModule, NavigableTabModule, - SummaryValueModule + SummaryValueModule, + LinkModule } from '@hypertrace/components'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; @@ -53,6 +54,7 @@ const ROUTE_CONFIG: HtRoute[] = [ LoadAsyncModule, FormattingModule, ButtonModule, + LinkModule, CopyShareableLinkToClipboardModule, NavigableTabModule, LogEventsTableModule, diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts index 0cfae196b..9196b92d9 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts @@ -1,9 +1,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationService, SubscriptionLifecycle } from '@hypertrace/common'; -import { IconSize } from '@hypertrace/components'; +import { NavigationParams, NavigationService, SubscriptionLifecycle } from '@hypertrace/common'; +import { FilterOperator, IconSize } from '@hypertrace/components'; import { Observable } from 'rxjs'; import { LogEvent } from '../../shared/dashboard/widgets/waterfall/waterfall/waterfall-chart'; +import { ExplorerService } from '../explorer/explorer-service'; +import { ScopeQueryParam } from '../explorer/explorer.component'; import { TraceDetails, TraceDetailService } from './trace-detail.service'; @Component({ styleUrls: ['./trace-detail.page.component.scss'], @@ -30,12 +32,16 @@ import { TraceDetails, TraceDetailService } from './trace-detail.service'; icon="${IconType.Time}" [value]="traceDetails.timeString" > - + + + + +
@@ -72,7 +78,8 @@ export class TraceDetailPageComponent { public constructor( private readonly navigationService: NavigationService, - private readonly traceDetailService: TraceDetailService + private readonly traceDetailService: TraceDetailService, + private readonly explorerService: ExplorerService ) { this.traceDetails$ = this.traceDetailService.fetchTraceDetails(); this.exportSpans$ = this.traceDetailService.fetchExportSpans(); @@ -82,4 +89,10 @@ export class TraceDetailPageComponent { public onClickBack(): void { this.navigationService.navigateBack(); } + + public getExploreNavigationParams(traceId: string): Observable { + return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ + { field: 'traceId', operator: FilterOperator.Equals, value: traceId } + ]); + } } diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts index 75ab4b044..0c04bc4c8 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts @@ -10,7 +10,8 @@ import { LoadAsyncModule, NavigableTabModule, SummaryValueModule, - TooltipModule + TooltipModule, + LinkModule } from '@hypertrace/components'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; @@ -51,6 +52,7 @@ const ROUTE_CONFIG: HtRoute[] = [ TracingDashboardModule, IconModule, SummaryValueModule, + LinkModule, TooltipModule, LoadAsyncModule, FormattingModule, From b9719c46fdb2bc408bcd8bb14f74d931378615f8 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 31 Aug 2021 15:15:43 +0530 Subject: [PATCH 02/12] fix: lint errors --- .../pages/api-trace-detail/api-trace-detail.page.module.ts | 4 ++-- .../src/pages/trace-detail/trace-detail.page.module.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts index f1ddec0b5..f2b5e10cd 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts @@ -7,10 +7,10 @@ import { CopyShareableLinkToClipboardModule, IconModule, LabelModule, + LinkModule, LoadAsyncModule, NavigableTabModule, - SummaryValueModule, - LinkModule + SummaryValueModule } from '@hypertrace/components'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts index 0c04bc4c8..e856e5c4b 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts @@ -7,11 +7,11 @@ import { DownloadJsonModule, IconModule, LabelModule, + LinkModule, LoadAsyncModule, NavigableTabModule, SummaryValueModule, - TooltipModule, - LinkModule + TooltipModule } from '@hypertrace/components'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; From 68a4ea61f9d0ec9e119bdcf4f3eb5a1d7dd65c4a Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 31 Aug 2021 17:57:40 +0530 Subject: [PATCH 03/12] fix: span drilldown --- .../waterfall-widget-renderer.component.ts | 31 ++++++++++++++----- .../waterfall/waterfall-widget.module.ts | 2 ++ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts index f8f7ed219..47b1c5e92 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts @@ -8,12 +8,14 @@ import { ViewChild } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; -import { ButtonStyle, OverlayService, SheetRef, SheetSize } from '@hypertrace/components'; +import { NavigationParams } from '@hypertrace/common'; +import { ButtonStyle, FilterOperator, OverlayService, SheetRef, SheetSize } from '@hypertrace/components'; import { WidgetRenderer } from '@hypertrace/dashboards'; import { Renderer } from '@hypertrace/hyperdash'; import { RendererApi, RENDERER_API } from '@hypertrace/hyperdash-angular'; import { isEmpty } from 'lodash-es'; import { Observable } from 'rxjs'; +import { ExplorerService, ScopeQueryParam } from '../../../../public-api'; import { SpanDetailLayoutStyle } from '../../../components/span-detail/span-detail-layout-style'; import { SpanDetailTab } from '../../../components/span-detail/span-detail-tab'; import { WaterfallWidgetModel } from './waterfall-widget.model'; @@ -67,12 +69,18 @@ import { MarkerSelection, WaterfallChartComponent } from './waterfall/waterfall- [activeTabLabel]="this.activeTabLabel" (closed)="this.closeSheet()" > - + + + + + @@ -94,7 +102,8 @@ export class WaterfallWidgetRendererComponent public constructor( @Inject(RENDERER_API) api: RendererApi, changeDetector: ChangeDetectorRef, - private readonly overlayService: OverlayService + private readonly overlayService: OverlayService, + private readonly explorerService: ExplorerService ) { super(api, changeDetector); } @@ -141,4 +150,10 @@ export class WaterfallWidgetRendererComponent protected fetchData(): Observable { return this.model.getData(); } + + public getExploreNavigationParams(spanId: string): Observable { + return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.Spans, [ + { field: 'id', operator: FilterOperator.Equals, value: spanId } + ]); + } } diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts index 1d0d60b7c..bf218b3df 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts @@ -4,6 +4,7 @@ import { ButtonModule, IconModule, LabelModule, + LinkModule, LoadAsyncModule, OverlayModule, SummaryValueModule, @@ -25,6 +26,7 @@ import { WaterfallChartModule } from './waterfall/waterfall-chart.module'; }), CommonModule, LabelModule, + LinkModule, SpanDetailModule, OverlayModule, TooltipModule, From 660e6fc75e188b4648f8e1f0f5db7c70a327979b Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Wed, 1 Sep 2021 16:25:03 +0530 Subject: [PATCH 04/12] fix: import issues fixed --- .../widgets/waterfall/waterfall-widget-renderer.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts index 47b1c5e92..f651736a7 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts @@ -15,7 +15,8 @@ import { Renderer } from '@hypertrace/hyperdash'; import { RendererApi, RENDERER_API } from '@hypertrace/hyperdash-angular'; import { isEmpty } from 'lodash-es'; import { Observable } from 'rxjs'; -import { ExplorerService, ScopeQueryParam } from '../../../../public-api'; +import { ExplorerService } from '../../../../pages/explorer/explorer-service'; +import { ScopeQueryParam } from '../../../../pages/explorer/explorer.component'; import { SpanDetailLayoutStyle } from '../../../components/span-detail/span-detail-layout-style'; import { SpanDetailTab } from '../../../components/span-detail/span-detail-tab'; import { WaterfallWidgetModel } from './waterfall-widget.model'; From d00cf46ee8402912074a787d3d812af69a89c3df Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Thu, 2 Sep 2021 09:33:21 +0530 Subject: [PATCH 05/12] feat: search span id from waterfall chart --- .../waterfall-widget-renderer.component.scss | 9 ++++++ ...aterfall-widget-renderer.component.test.ts | 13 +++++++-- .../waterfall-widget-renderer.component.ts | 29 +++++++++---------- .../waterfall/waterfall-widget.module.ts | 6 ++-- 4 files changed, 37 insertions(+), 20 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss index d973deb75..52399cde2 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss @@ -50,4 +50,13 @@ .span-detail { height: 100%; width: 100%; + + .filter-link { + visibility: hidden; + margin-left: 12px; + } + + &:hover .filter-link { + visibility: visible; + } } diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.test.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.test.ts index d90bd2fe0..2516dfc29 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.test.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.test.ts @@ -1,8 +1,11 @@ +import { MemoizeModule } from '@hypertrace/common'; import { LoadAsyncModule, OverlayService } from '@hypertrace/components'; import { mockDashboardWidgetProviders } from '@hypertrace/dashboards/testing'; import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; import { of } from 'rxjs'; +import { ExplorerService } from '../../../../pages/explorer/explorer-service'; +import { ExploreFilterLinkComponent } from '../../../components/explore-filter-link/explore-filter-link.component'; import { WaterfallWidgetRendererComponent } from './waterfall-widget-renderer.component'; import { WaterfallChartComponent } from './waterfall/waterfall-chart.component'; @@ -14,9 +17,13 @@ describe('Waterfall widget renderer component', () => { const createComponent = createComponentFactory({ component: WaterfallWidgetRendererComponent, shallow: true, - imports: [LoadAsyncModule], - providers: [...mockDashboardWidgetProviders(mockModel), mockProvider(OverlayService)], - declarations: [MockComponent(WaterfallChartComponent)] + imports: [LoadAsyncModule, MemoizeModule], + providers: [ + ...mockDashboardWidgetProviders(mockModel), + mockProvider(OverlayService), + mockProvider(ExplorerService) + ], + declarations: [MockComponent(WaterfallChartComponent), MockComponent(ExploreFilterLinkComponent)] }); test('renders the widget', () => { diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts index f651736a7..2ad6f10a7 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts @@ -70,18 +70,18 @@ import { MarkerSelection, WaterfallChartComponent } from './waterfall/waterfall- [activeTabLabel]="this.activeTabLabel" (closed)="this.closeSheet()" > - - - - - + + @@ -152,9 +152,8 @@ export class WaterfallWidgetRendererComponent return this.model.getData(); } - public getExploreNavigationParams(spanId: string): Observable { - return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.Spans, [ - { field: 'id', operator: FilterOperator.Equals, value: spanId } + public getExploreNavigationParams = (selectedData: WaterfallData | undefined): Observable => + this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.Spans, [ + { field: 'id', operator: FilterOperator.Equals, value: selectedData!.id } ]); - } } diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts index bf218b3df..e65030f19 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget.module.ts @@ -1,10 +1,10 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { MemoizeModule } from '@hypertrace/common'; import { ButtonModule, IconModule, LabelModule, - LinkModule, LoadAsyncModule, OverlayModule, SummaryValueModule, @@ -12,6 +12,7 @@ import { TooltipModule } from '@hypertrace/components'; import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; +import { ExploreFilterLinkModule } from '../../../components/explore-filter-link/explore-filter-link.module'; import { SpanDetailModule } from '../../../components/span-detail/span-detail.module'; import { WaterfallWidgetRendererComponent } from './waterfall-widget-renderer.component'; import { WaterfallWidgetModel } from './waterfall-widget.model'; @@ -25,8 +26,9 @@ import { WaterfallChartModule } from './waterfall/waterfall-chart.module'; renderers: [WaterfallWidgetRendererComponent] }), CommonModule, + ExploreFilterLinkModule, LabelModule, - LinkModule, + MemoizeModule, SpanDetailModule, OverlayModule, TooltipModule, From 36d78142c3cec244aa8365ae83a5382b35c10689 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Thu, 2 Sep 2021 15:18:39 +0530 Subject: [PATCH 06/12] feat: search trace id --- .../api-trace-detail.page.component.ts | 29 +++++++++--------- .../api-trace-detail.page.module.ts | 7 +++-- .../trace-detail.page.component.ts | 30 ++++++++++--------- .../trace-detail/trace-detail.page.module.ts | 5 +++- 4 files changed, 38 insertions(+), 33 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts index 200ac6dc8..d7ed1299c 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts @@ -34,18 +34,18 @@ import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.servi [value]="traceDetails.timeString" > - - - - - + +
@@ -97,9 +97,8 @@ export class ApiTraceDetailPageComponent { this.navigationService.navigateWithinApp(['/trace', traceId, { startTime: startTime }]); } - public getExploreNavigationParams(traceId: string): Observable { - return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ - { field: 'traceId', operator: FilterOperator.Equals, value: traceId } + public getExplorerNavigationParams = (traceDetails: ApiTraceDetails | undefined): Observable => + this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ + { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails!.traceId } ]); - } } diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts index f2b5e10cd..c5e845da2 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts @@ -1,17 +1,17 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { FormattingModule, HtRoute } from '@hypertrace/common'; +import { FormattingModule, HtRoute, MemoizeModule } from '@hypertrace/common'; import { ButtonModule, CopyShareableLinkToClipboardModule, IconModule, LabelModule, - LinkModule, LoadAsyncModule, NavigableTabModule, SummaryValueModule } from '@hypertrace/components'; +import { ExploreFilterLinkModule } from '../../shared/components/explore-filter-link/explore-filter-link.module'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; import { ObservabilityDashboardModule } from '../../shared/dashboard/observability-dashboard.module'; @@ -52,9 +52,10 @@ const ROUTE_CONFIG: HtRoute[] = [ IconModule, SummaryValueModule, LoadAsyncModule, + MemoizeModule, FormattingModule, ButtonModule, - LinkModule, + ExploreFilterLinkModule, CopyShareableLinkToClipboardModule, NavigableTabModule, LogEventsTableModule, diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts index 9196b92d9..99af732af 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts @@ -4,6 +4,7 @@ import { NavigationParams, NavigationService, SubscriptionLifecycle } from '@hyp import { FilterOperator, IconSize } from '@hypertrace/components'; import { Observable } from 'rxjs'; import { LogEvent } from '../../shared/dashboard/widgets/waterfall/waterfall/waterfall-chart'; +import { ApiTraceDetails } from '../api-trace-detail/api-trace-detail.service'; import { ExplorerService } from '../explorer/explorer-service'; import { ScopeQueryParam } from '../explorer/explorer.component'; import { TraceDetails, TraceDetailService } from './trace-detail.service'; @@ -32,16 +33,18 @@ import { TraceDetails, TraceDetailService } from './trace-detail.service'; icon="${IconType.Time}" [value]="traceDetails.timeString" > - - - - - + + +
@@ -90,9 +93,8 @@ export class TraceDetailPageComponent { this.navigationService.navigateBack(); } - public getExploreNavigationParams(traceId: string): Observable { - return this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ - { field: 'traceId', operator: FilterOperator.Equals, value: traceId } + public getExplorerNavigationParams = (traceDetails: ApiTraceDetails | undefined): Observable => + this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ + { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails!.id } ]); - } } diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts index e856e5c4b..2519eaecd 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { FormattingModule, HtRoute } from '@hypertrace/common'; +import { FormattingModule, HtRoute, MemoizeModule } from '@hypertrace/common'; import { CopyShareableLinkToClipboardModule, DownloadJsonModule, @@ -13,6 +13,7 @@ import { SummaryValueModule, TooltipModule } from '@hypertrace/components'; +import { ExploreFilterLinkModule } from '../../shared/components/explore-filter-link/explore-filter-link.module'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; import { TracingDashboardModule } from '../../shared/dashboard/tracing-dashboard.module'; @@ -48,11 +49,13 @@ const ROUTE_CONFIG: HtRoute[] = [ imports: [ RouterModule.forChild(ROUTE_CONFIG), CommonModule, + ExploreFilterLinkModule, LabelModule, TracingDashboardModule, IconModule, SummaryValueModule, LinkModule, + MemoizeModule, TooltipModule, LoadAsyncModule, FormattingModule, From 51d9b3b48699d6e0deddd438100000d4c9b4fee3 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Thu, 2 Sep 2021 15:40:58 +0530 Subject: [PATCH 07/12] fix: style clean up --- .../waterfall/waterfall-widget-renderer.component.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss index 52399cde2..d973deb75 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss @@ -50,13 +50,4 @@ .span-detail { height: 100%; width: 100%; - - .filter-link { - visibility: hidden; - margin-left: 12px; - } - - &:hover .filter-link { - visibility: visible; - } } From fa4ceb6faf268635041510b4f8746d5b7109cdac Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Fri, 17 Sep 2021 10:18:18 +0530 Subject: [PATCH 08/12] fix: trace, span search explorer - clean up --- .../pages/api-trace-detail/api-trace-detail.page.component.ts | 2 +- .../src/pages/trace-detail/trace-detail.page.component.ts | 2 +- .../src/pages/trace-detail/trace-detail.page.module.ts | 2 -- .../widgets/waterfall/waterfall-widget-renderer.component.ts | 2 +- 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts index d7ed1299c..53028361e 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts @@ -97,7 +97,7 @@ export class ApiTraceDetailPageComponent { this.navigationService.navigateWithinApp(['/trace', traceId, { startTime: startTime }]); } - public getExplorerNavigationParams = (traceDetails: ApiTraceDetails | undefined): Observable => + public getExplorerNavigationParams = (traceDetails: ApiTraceDetails): Observable => this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails!.traceId } ]); diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts index 99af732af..15f439454 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts @@ -93,7 +93,7 @@ export class TraceDetailPageComponent { this.navigationService.navigateBack(); } - public getExplorerNavigationParams = (traceDetails: ApiTraceDetails | undefined): Observable => + public getExplorerNavigationParams = (traceDetails: ApiTraceDetails): Observable => this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails!.id } ]); diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts index 2519eaecd..6d03e54a3 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.module.ts @@ -7,7 +7,6 @@ import { DownloadJsonModule, IconModule, LabelModule, - LinkModule, LoadAsyncModule, NavigableTabModule, SummaryValueModule, @@ -54,7 +53,6 @@ const ROUTE_CONFIG: HtRoute[] = [ TracingDashboardModule, IconModule, SummaryValueModule, - LinkModule, MemoizeModule, TooltipModule, LoadAsyncModule, diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts index 2ad6f10a7..192d9a8b1 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts @@ -73,7 +73,7 @@ import { MarkerSelection, WaterfallChartComponent } from './waterfall/waterfall- Date: Tue, 21 Sep 2021 12:02:32 +0530 Subject: [PATCH 09/12] fix: added test cases for span and trace search --- .../api-trace-detail.page.component.test.ts | 59 +++++++++++++++++++ .../trace-detail.page.component.test.ts | 51 ++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts create mode 100644 projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts new file mode 100644 index 000000000..d505ebb8b --- /dev/null +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts @@ -0,0 +1,59 @@ +import { fakeAsync, tick } from '@angular/core/testing'; +import { MemoizeModule, NavigationService } from '@hypertrace/common'; +import { LoadAsyncModule } from '@hypertrace/components'; +import { createComponentFactory, mockProvider } from '@ngneat/spectator'; +import { MockComponent } from 'ng-mocks'; +import { of } from 'rxjs'; +import { ExploreFilterLinkComponent } from '../../shared/components/explore-filter-link/explore-filter-link.component'; +import { ExplorerService } from '../explorer/explorer-service'; +import { ApiTraceDetailPageComponent } from './api-trace-detail.page.component'; +import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.service'; +describe('Api Trace Details Page Component', () => { + const mockTraceDetails: ApiTraceDetails = { + id: 'test-id', + traceId: 'test-123', + type: 'trace-type', + timeString: 'test-time-string', + titleString: 'test-title', + startTime: 'test-start-time' + }; + + const createComponent = createComponentFactory({ + component: ApiTraceDetailPageComponent, + shallow: true, + providers: [ + mockProvider(NavigationService), + mockProvider(ExplorerService, { + buildNavParamsWithFilters: jest.fn().mockReturnValue(of('traceId_eq_test-123')) + }) + ], + imports: [LoadAsyncModule, MemoizeModule], + componentProviders: [ + mockProvider(ApiTraceDetailService, { + fetchTraceDetails: jest.fn().mockReturnValue(of(mockTraceDetails)) + }) + ], + declarations: [MockComponent(ExploreFilterLinkComponent)] + }); + + test('should render content correctly', fakeAsync(() => { + const spectator = createComponent(); + + spectator.click('.label'); + tick(); + expect(spectator.inject(NavigationService).navigateBack).toHaveBeenCalled(); + + spectator.click('.full-trace-button'); + tick(); + expect(spectator.inject(NavigationService).navigateWithinApp).toHaveBeenCalledWith([ + '/trace', + mockTraceDetails.traceId, + { startTime: mockTraceDetails.startTime } + ]); + })); + + test('should render explorer link component', fakeAsync(() => { + const spectator = createComponent(); + expect(spectator.query(ExploreFilterLinkComponent)?.paramsOrUrl).toBe('traceId_eq_test-123'); + })); +}); diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts new file mode 100644 index 000000000..7f6bd2ee6 --- /dev/null +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts @@ -0,0 +1,51 @@ +import { fakeAsync, tick } from '@angular/core/testing'; +import { MemoizeModule, NavigationService } from '@hypertrace/common'; +import { LoadAsyncModule } from '@hypertrace/components'; +import { createComponentFactory, mockProvider } from '@ngneat/spectator'; +import { MockComponent } from 'ng-mocks'; +import { of } from 'rxjs'; +import { ExploreFilterLinkComponent } from '../../shared/components/explore-filter-link/explore-filter-link.component'; +import { ExplorerService } from '../explorer/explorer-service'; +import { TraceDetailPageComponent } from './trace-detail.page.component'; +import { TraceDetails, TraceDetailService } from './trace-detail.service'; +describe('Trace Details Page Component', () => { + const mockTraceDetails: TraceDetails = { + id: 'test-id', + entrySpanId: 'test-123', + type: 'trace-type', + timeString: 'test-time-string', + titleString: 'test-title', + startTime: 'test-start-time' + }; + + const createComponent = createComponentFactory({ + component: TraceDetailPageComponent, + shallow: true, + providers: [ + mockProvider(NavigationService), + mockProvider(ExplorerService, { + buildNavParamsWithFilters: jest.fn().mockReturnValue(of('traceId_eq_test-123')) + }) + ], + imports: [LoadAsyncModule, MemoizeModule], + componentProviders: [ + mockProvider(TraceDetailService, { + fetchTraceDetails: jest.fn().mockReturnValue(of(mockTraceDetails)) + }) + ], + declarations: [MockComponent(ExploreFilterLinkComponent)] + }); + + test('should render content correctly', fakeAsync(() => { + const spectator = createComponent(); + + spectator.click('.label'); + tick(); + expect(spectator.inject(NavigationService).navigateBack).toHaveBeenCalled(); + })); + + test('should render explorer link component', fakeAsync(() => { + const spectator = createComponent(); + expect(spectator.query(ExploreFilterLinkComponent)?.paramsOrUrl).toBe('traceId_eq_test-123'); + })); +}); From 3030d2b54b4d2888026790aa2164a6d713ff0c3e Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 21 Sep 2021 12:24:08 +0530 Subject: [PATCH 10/12] fix: fixed lint errors --- .../pages/api-trace-detail/api-trace-detail.page.component.ts | 2 +- .../src/pages/trace-detail/trace-detail.page.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts index 53028361e..b191e0f24 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts @@ -99,6 +99,6 @@ export class ApiTraceDetailPageComponent { public getExplorerNavigationParams = (traceDetails: ApiTraceDetails): Observable => this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ - { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails!.traceId } + { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails.traceId } ]); } diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts index 15f439454..75692e224 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts @@ -95,6 +95,6 @@ export class TraceDetailPageComponent { public getExplorerNavigationParams = (traceDetails: ApiTraceDetails): Observable => this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [ - { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails!.id } + { field: 'traceId', operator: FilterOperator.Equals, value: traceDetails.id } ]); } From 97af32720fbdbdf82476a44a49909256bca057ca Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 21 Sep 2021 12:30:49 +0530 Subject: [PATCH 11/12] fix: import error --- .../api-trace-detail/api-trace-detail.page.component.test.ts | 2 +- .../src/pages/trace-detail/trace-detail.page.component.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts index d505ebb8b..bf0e7efce 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.test.ts @@ -1,7 +1,7 @@ import { fakeAsync, tick } from '@angular/core/testing'; import { MemoizeModule, NavigationService } from '@hypertrace/common'; import { LoadAsyncModule } from '@hypertrace/components'; -import { createComponentFactory, mockProvider } from '@ngneat/spectator'; +import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; import { of } from 'rxjs'; import { ExploreFilterLinkComponent } from '../../shared/components/explore-filter-link/explore-filter-link.component'; diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts index 7f6bd2ee6..3a327e170 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.test.ts @@ -1,7 +1,7 @@ import { fakeAsync, tick } from '@angular/core/testing'; import { MemoizeModule, NavigationService } from '@hypertrace/common'; import { LoadAsyncModule } from '@hypertrace/components'; -import { createComponentFactory, mockProvider } from '@ngneat/spectator'; +import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; import { of } from 'rxjs'; import { ExploreFilterLinkComponent } from '../../shared/components/explore-filter-link/explore-filter-link.component'; From 58c5efdf4af37a0b659f01618b5b77c126b0390b Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Fri, 24 Sep 2021 12:04:15 +0530 Subject: [PATCH 12/12] fix: trace, span search - ui clean up --- .../api-trace-detail.page.component.scss | 7 +++- .../api-trace-detail.page.component.ts | 32 +++++++++--------- .../api-trace-detail.page.module.ts | 4 ++- .../trace-detail.page.component.scss | 7 +++- .../trace-detail.page.component.ts | 33 ++++++++++--------- .../waterfall-widget-renderer.component.scss | 9 +++++ .../waterfall-widget-renderer.component.ts | 15 +++++---- 7 files changed, 68 insertions(+), 39 deletions(-) diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.scss b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.scss index 9a4ce3371..c46054164 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.scss +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.scss @@ -35,6 +35,11 @@ display: flex; align-items: center; + .filterable-summary-value { + display: flex; + align-items: center; + } + .separation { flex: 1 1 auto; } @@ -45,7 +50,7 @@ } .summary-value { - margin-right: 24px; + margin-right: 8px; } .tabs { diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts index b191e0f24..66a824b0a 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.component.ts @@ -34,18 +34,20 @@ import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.servi [value]="traceDetails.timeString" > - +
- + + +
@@ -59,17 +61,17 @@ import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.servi (click)="this.navigateToFullTrace(traceDetails.traceId, traceDetails.startTime)" > - - - Sequence - - Logs - - + + Sequence + + Logs + + -
- +
+ +
` diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts index c5e845da2..2ff4d093a 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts @@ -9,7 +9,8 @@ import { LabelModule, LoadAsyncModule, NavigableTabModule, - SummaryValueModule + SummaryValueModule, + TooltipModule } from '@hypertrace/components'; import { ExploreFilterLinkModule } from '../../shared/components/explore-filter-link/explore-filter-link.module'; import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module'; @@ -55,6 +56,7 @@ const ROUTE_CONFIG: HtRoute[] = [ MemoizeModule, FormattingModule, ButtonModule, + TooltipModule, ExploreFilterLinkModule, CopyShareableLinkToClipboardModule, NavigableTabModule, diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.scss b/projects/observability/src/pages/trace-detail/trace-detail.page.component.scss index 491d2f9b1..764563b83 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.scss +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.scss @@ -37,13 +37,18 @@ height: 18px; align-items: center; + .filterable-summary-value { + display: flex; + align-items: center; + } + .separation { flex: 1 1 auto; } } .summary-value { - margin-right: 24px; + margin-right: 8px; } .tabs { diff --git a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts index 75692e224..322e70bf1 100644 --- a/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts +++ b/projects/observability/src/pages/trace-detail/trace-detail.page.component.ts @@ -33,18 +33,21 @@ import { TraceDetails, TraceDetailService } from './trace-detail.service'; icon="${IconType.Time}" [value]="traceDetails.timeString" > - + +
- + + +
@@ -57,17 +60,17 @@ import { TraceDetails, TraceDetailService } from './trace-detail.service'; htTooltip="Download Trace as Json" > - - - Sequence - - Logs - - + + Sequence + + Logs + + -
- +
+ +
` diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss index d973deb75..fff5d5199 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.scss @@ -50,4 +50,13 @@ .span-detail { height: 100%; width: 100%; + + .summary-value { + margin-right: 8px; + } + + .filterable-summary-value { + display: flex; + align-items: center; + } } diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts index 192d9a8b1..da903557c 100644 --- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.ts @@ -70,18 +70,21 @@ import { MarkerSelection, WaterfallChartComponent } from './waterfall/waterfall- [activeTabLabel]="this.activeTabLabel" (closed)="this.closeSheet()" > - +
- + + +