Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
@@ -1,41 +1,38 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SubscriptionLifecycle } from '@hypertrace/common';

import { Dashboard } from '@hypertrace/hyperdash';
import { Observable } from 'rxjs';
import { traceDetailDashboard } from '../trace-detail.dashboard';
import { TraceDetails, TraceDetailService } from './../trace-detail.service';
import { map } from 'rxjs/operators';
import { TraceDetailService } from './../trace-detail.service';
import { traceSequenceDashboard } from './trace-sequence.dashboard';

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ht-navigable-dashboard
*htLoadAsync="this.traceVariables$ as traceVariables"
class="scrollable-container"
[padding]="0"
navLocation="${traceDetailDashboard.location}"
(dashboardReady)="this.onDashboardReady($event)"
[variables]="traceVariables"
navLocation="${traceSequenceDashboard.location}"
>
</ht-navigable-dashboard>
`
})
export class TraceSequenceComponent {
public readonly traceDetails$: Observable<TraceDetails>;

public constructor(
private readonly subscriptionLifecycle: SubscriptionLifecycle,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this was one problem - subscription lifecycle should be provided in the component whenever used, since it's meant to be be tied to the component lifecycle. With out an explicit provider here, we're not cleaning this up which is why it gets undefined in it when we navigate away.

private readonly traceDetailService: TraceDetailService
) {
this.traceDetails$ = this.traceDetailService.fetchTraceDetails();
}
public readonly traceVariables$: Observable<TraceDetailVariables>;

public onDashboardReady(dashboard: Dashboard): void {
this.subscriptionLifecycle.add(
this.traceDetails$.subscribe(traceDetails => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this is just a really ugly pattern that we have a better alternative for now, although we don't use it enough

dashboard.setVariable('traceId', traceDetails.id);
dashboard.setVariable('spanId', traceDetails.entrySpanId);
dashboard.setVariable('startTime', traceDetails.startTime);
dashboard.refresh();
})
public constructor(private readonly traceDetailService: TraceDetailService) {
this.traceVariables$ = this.traceDetailService.fetchTraceDetails().pipe(
map(details => ({
traceId: details.id,
startTime: details.startTime,
spanId: details.entrySpanId
}))
);
}
}

interface TraceDetailVariables {
traceId: string;
startTime?: string | number;
spanId?: string;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { DashboardDefaultConfiguration } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';
import { DashboardDefaultConfiguration } from '../../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';

export const traceDetailDashboard: DashboardDefaultConfiguration = {
location: 'TRACE_DETAIL',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this page was moved but the dashboard wasn't - fixed

export const traceSequenceDashboard: DashboardDefaultConfiguration = {
location: 'TRACE_SEQUENCE',
json: {
type: 'container-widget',
layout: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapp
import { TracingDashboardModule } from '../../shared/dashboard/tracing-dashboard.module';
import { TraceLogsComponent } from './logs/trace-logs.component';
import { TraceSequenceComponent } from './sequence/trace-sequence.component';
import { traceDetailDashboard } from './trace-detail.dashboard';
import { traceSequenceDashboard } from './sequence/trace-sequence.dashboard';
import { TraceDetailPageComponent } from './trace-detail.page.component';

const ROUTE_CONFIG: TraceRoute[] = [
Expand Down Expand Up @@ -56,7 +56,7 @@ const ROUTE_CONFIG: TraceRoute[] = [
FormattingModule,
CopyShareableLinkToClipboardModule,
DownloadJsonModule,
NavigableDashboardModule.withDefaultDashboards(traceDetailDashboard),
NavigableDashboardModule.withDefaultDashboards(traceSequenceDashboard),
NavigableTabModule,
LogEventsTableModule
]
Expand Down
2 changes: 1 addition & 1 deletion projects/distributed-tracing/src/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export * from './shared/components/table/tracing-table-cell-type';
// Waterfall
export { WaterfallData } from './shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';
export { TraceWaterfallDataSourceModel } from './shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model';
export { traceDetailDashboard } from './pages/trace-detail/trace-detail.dashboard';
export { traceSequenceDashboard } from './pages/trace-detail/sequence/trace-sequence.dashboard';
export { TraceDetailPageComponent } from './pages/trace-detail/trace-detail.page.component';
export { LogEvent } from './shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ import {
NavigableTabModule,
SummaryValueModule
} from '@hypertrace/components';
import { LogEventsTableModule } from '@hypertrace/distributed-tracing';
import { LogEventsTableModule, NavigableDashboardModule } from '@hypertrace/distributed-tracing';
import { ObservabilityDashboardModule } from '../../shared/dashboard/observability-dashboard.module';
import { ApiTraceDetailPageComponent } from './api-trace-detail.page.component';
import { ApiTraceLogsComponent } from './logs/api-trace-logs.component';
import { ApiTraceSequenceComponent } from './sequence/api-trace-sequence.component';
import { apiTraceSequenceDashboard } from './sequence/api-trace-sequence.dashboard';

const ROUTE_CONFIG: TraceRoute[] = [
{
Expand Down Expand Up @@ -53,7 +54,8 @@ const ROUTE_CONFIG: TraceRoute[] = [
ButtonModule,
CopyShareableLinkToClipboardModule,
NavigableTabModule,
LogEventsTableModule
LogEventsTableModule,
NavigableDashboardModule.withDefaultDashboards(apiTraceSequenceDashboard)
]
})
export class ApiTraceDetailPageModule {}
Original file line number Diff line number Diff line change
@@ -1,60 +1,35 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SubscriptionLifecycle } from '@hypertrace/common';

import { Dashboard, ModelJson } from '@hypertrace/hyperdash';
import { Observable } from 'rxjs';
import { ApiTraceDetails, ApiTraceDetailService } from './../api-trace-detail.service';
import { map } from 'rxjs/operators';
import { ApiTraceDetailService } from './../api-trace-detail.service';
import { apiTraceSequenceDashboard } from './api-trace-sequence.dashboard';

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ht-application-aware-dashboard
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this is its own page with a url, so should be navigable dashboard

[json]="this.defaultJson"
<ht-navigable-dashboard
*htLoadAsync="this.traceVariables$ as traceVariables"
navLocation="${apiTraceSequenceDashboard.location}"
[padding]="0"
(dashboardReady)="this.onDashboardReady($event)"
[variables]="traceVariables"
>
</ht-application-aware-dashboard>
</ht-navigable-dashboard>
`
})
export class ApiTraceSequenceComponent {
public readonly traceDetails$: Observable<ApiTraceDetails>;

public readonly defaultJson: ModelJson = {
type: 'container-widget',
layout: {
type: 'auto-container-layout',
'enable-style': false
},
children: [
{
type: 'waterfall-widget',
title: 'Sequence Diagram',
data: {
type: 'api-trace-waterfall-data-source',
// tslint:disable-next-line: no-invalid-template-strings
'trace-id': '${traceId}',
// tslint:disable-next-line: no-invalid-template-strings
'start-time': '${startTime}'
}
}
]
};

public constructor(
private readonly subscriptionLifecycle: SubscriptionLifecycle,
private readonly apiTraceDetailService: ApiTraceDetailService
) {
this.traceDetails$ = this.apiTraceDetailService.fetchTraceDetails();
}
public readonly traceVariables$: Observable<ApiTraceDetailVariables>;

public onDashboardReady(dashboard: Dashboard): void {
this.subscriptionLifecycle.add(
this.traceDetails$.subscribe(traceDetails => {
dashboard.setVariable('traceId', traceDetails.id);
dashboard.setVariable('traceType', traceDetails.type);
dashboard.setVariable('startTime', traceDetails.startTime);
dashboard.refresh();
})
public constructor(private readonly apiTraceDetailService: ApiTraceDetailService) {
this.traceVariables$ = this.apiTraceDetailService.fetchTraceDetails().pipe(
map(details => ({
traceId: details.id,
startTime: details.startTime
}))
);
}
}

interface ApiTraceDetailVariables {
traceId: string;
startTime?: string | number;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { DashboardDefaultConfiguration } from '@hypertrace/distributed-tracing';

export const apiTraceSequenceDashboard: DashboardDefaultConfiguration = {
location: 'API_TRACE_SEQUENCE',
json: {
type: 'container-widget',
layout: {
type: 'auto-container-layout',
'enable-style': false
},
children: [
{
type: 'waterfall-widget',
title: 'Sequence Diagram',
data: {
type: 'api-trace-waterfall-data-source',
// tslint:disable-next-line: no-invalid-template-strings
'trace-id': '${traceId}',
// tslint:disable-next-line: no-invalid-template-strings
'start-time': '${startTime}'
}
}
]
}
};