Skip to content
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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/jest';
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');
}));
});
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -31,12 +33,19 @@ import { ApiTraceDetails, ApiTraceDetailService } from './api-trace-detail.servi
icon="${IconType.Time}"
[value]="traceDetails.timeString"
></ht-summary-value>
<ht-summary-value
class="summary-value"
icon="${IconType.TraceId}"
label="Trace ID"
[value]="traceDetails.traceId"
></ht-summary-value>

<ht-explore-filter-link
class="filter-link"
[paramsOrUrl]="getExplorerNavigationParams | htMemoize: traceDetails | async"
htTooltip="See traces in Explorer"
>
<ht-summary-value
class="summary-value"
icon="${IconType.TraceId}"
label="Trace ID"
[value]="traceDetails.traceId"
></ht-summary-value>
</ht-explore-filter-link>

<div class="separation"></div>

Expand Down Expand Up @@ -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();
Expand All @@ -86,4 +96,9 @@ export class ApiTraceDetailPageComponent {
public navigateToFullTrace(traceId: string, startTime: string): void {
this.navigationService.navigateWithinApp(['/trace', traceId, { startTime: startTime }]);
}

public getExplorerNavigationParams = (traceDetails: ApiTraceDetails): Observable<NavigationParams> =>
this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [
{ field: 'traceId', operator: FilterOperator.Equals, value: traceDetails.traceId }
]);
}
Original file line number Diff line number Diff line change
@@ -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 {
ButtonModule,
CopyShareableLinkToClipboardModule,
Expand All @@ -11,6 +11,7 @@ import {
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';
Expand Down Expand Up @@ -51,8 +52,10 @@ const ROUTE_CONFIG: HtRoute[] = [
IconModule,
SummaryValueModule,
LoadAsyncModule,
MemoizeModule,
FormattingModule,
ButtonModule,
ExploreFilterLinkModule,
CopyShareableLinkToClipboardModule,
NavigableTabModule,
LogEventsTableModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -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/jest';
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');
}));
});
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
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 { 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';
@Component({
styleUrls: ['./trace-detail.page.component.scss'],
Expand All @@ -30,12 +33,18 @@ import { TraceDetails, TraceDetailService } from './trace-detail.service';
icon="${IconType.Time}"
[value]="traceDetails.timeString"
></ht-summary-value>
<ht-summary-value
class="summary-value"
icon="${IconType.TraceId}"
label="Trace ID"
[value]="traceDetails.id"
></ht-summary-value>
<ht-explore-filter-link
class="filter-link"
[paramsOrUrl]="getExplorerNavigationParams | htMemoize: traceDetails | async"
htTooltip="See traces in Explorer"
>
<ht-summary-value
class="summary-value"
icon="${IconType.TraceId}"
label="Trace ID"
[value]="traceDetails.id"
></ht-summary-value>
</ht-explore-filter-link>

<div class="separation"></div>

Expand Down Expand Up @@ -72,7 +81,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();
Expand All @@ -82,4 +92,9 @@ export class TraceDetailPageComponent {
public onClickBack(): void {
this.navigationService.navigateBack();
}

public getExplorerNavigationParams = (traceDetails: ApiTraceDetails): Observable<NavigationParams> =>
this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.EndpointTraces, [
{ field: 'traceId', operator: FilterOperator.Equals, value: traceDetails.id }
]);
}
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -12,6 +12,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';
Expand Down Expand Up @@ -47,10 +48,12 @@ const ROUTE_CONFIG: HtRoute[] = [
imports: [
RouterModule.forChild(ROUTE_CONFIG),
CommonModule,
ExploreFilterLinkModule,
LabelModule,
TracingDashboardModule,
IconModule,
SummaryValueModule,
MemoizeModule,
TooltipModule,
LoadAsyncModule,
FormattingModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -14,9 +17,13 @@ describe('Waterfall widget renderer component', () => {
const createComponent = createComponentFactory<WaterfallWidgetRendererComponent>({
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)]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add some tests for this? (and in the other components)

});

test('renders the widget', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,15 @@ 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 } 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';
Expand Down Expand Up @@ -67,12 +70,18 @@ import { MarkerSelection, WaterfallChartComponent } from './waterfall/waterfall-
[activeTabLabel]="this.activeTabLabel"
(closed)="this.closeSheet()"
>
<ht-summary-value
data-sensitive-pii
icon="${IconType.SpanId}"
label="Span ID"
[value]="this.selectedData!.id"
></ht-summary-value>
<ht-explore-filter-link
class="filter-link"
[paramsOrUrl]="getExploreNavigationParams | htMemoize: this.selectedData | async"
htTooltip="See spans in Explorer"
>
<ht-summary-value
data-sensitive-pii
icon="${IconType.SpanId}"
label="Span ID"
[value]="this.selectedData!.id"
></ht-summary-value>
</ht-explore-filter-link>
</ht-span-detail>
</div>
</ng-template>
Expand All @@ -94,7 +103,8 @@ export class WaterfallWidgetRendererComponent
public constructor(
@Inject(RENDERER_API) api: RendererApi<WaterfallWidgetModel>,
changeDetector: ChangeDetectorRef,
private readonly overlayService: OverlayService
private readonly overlayService: OverlayService,
private readonly explorerService: ExplorerService
) {
super(api, changeDetector);
}
Expand Down Expand Up @@ -141,4 +151,9 @@ export class WaterfallWidgetRendererComponent
protected fetchData(): Observable<WaterfallData[]> {
return this.model.getData();
}

public getExploreNavigationParams = (selectedData: WaterfallData | undefined): Observable<NavigationParams> =>
this.explorerService.buildNavParamsWithFilters(ScopeQueryParam.Spans, [
{ field: 'id', operator: FilterOperator.Equals, value: selectedData!.id }
]);
}
Loading