Skip to content

Commit 3d7da37

Browse files
itssharmasandeepitssharmasandeep
authored
feat: log records in a new tab (#916)
1 parent 5de8ca7 commit 3d7da37

29 files changed

+764
-184
lines changed

‎projects/distributed-tracing/src/pages/trace-detail/logs/trace-logs.component.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { Observable } from 'rxjs';
3+
import { LogEventsTableViewType } from '../../../shared/components/log-events/log-events-table.component';
4+
import { LogEvent } from '../../../shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';
5+
import { TraceDetailService } from './../trace-detail.service';
6+
7+
@Component({
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
template: `
10+
<ng-container *ngIf="this.logEvents$ | async as logEvents">
11+
<ht-log-events-table
12+
[logEvents]="logEvents"
13+
logEventsTableViewType="${LogEventsTableViewType.Detailed}"
14+
></ht-log-events-table>
15+
</ng-container>
16+
`
17+
})
18+
export class TraceLogsComponent {
19+
public readonly logEvents$: Observable<LogEvent[]>;
20+
21+
public constructor(private readonly traceDetailService: TraceDetailService) {
22+
this.logEvents$ = this.traceDetailService.fetchLogEvents();
23+
}
24+
}

‎projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.component.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { Observable } from 'rxjs';
3+
import { map } from 'rxjs/operators';
4+
import { TraceDetailService } from './../trace-detail.service';
5+
import { traceSequenceDashboard } from './trace-sequence.dashboard';
6+
7+
@Component({
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
template: `
10+
<ht-navigable-dashboard
11+
*htLoadAsync="this.traceVariables$ as traceVariables"
12+
class="scrollable-container"
13+
[padding]="0"
14+
[variables]="traceVariables"
15+
navLocation="${traceSequenceDashboard.location}"
16+
>
17+
</ht-navigable-dashboard>
18+
`
19+
})
20+
export class TraceSequenceComponent {
21+
public readonly traceVariables$: Observable<TraceDetailVariables>;
22+
23+
public constructor(private readonly traceDetailService: TraceDetailService) {
24+
this.traceVariables$ = this.traceDetailService.fetchTraceDetails().pipe(
25+
map(details => ({
26+
traceId: details.id,
27+
startTime: details.startTime,
28+
spanId: details.entrySpanId
29+
}))
30+
);
31+
}
32+
}
33+
34+
interface TraceDetailVariables {
35+
traceId: string;
36+
startTime?: string | number;
37+
spanId?: string;
38+
}

‎projects/distributed-tracing/src/pages/trace-detail/trace-detail.dashboard.ts renamed to ‎projects/distributed-tracing/src/pages/trace-detail/sequence/trace-sequence.dashboard.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { DashboardDefaultConfiguration } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';
1+
import { DashboardDefaultConfiguration } from '../../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';
22

3-
export const traceDetailDashboard: DashboardDefaultConfiguration = {
4-
location: 'TRACE_DETAIL',
3+
export const traceSequenceDashboard: DashboardDefaultConfiguration = {
4+
location: 'TRACE_SEQUENCE',
55
json: {
66
type: 'container-widget',
77
layout: {

‎projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,8 @@
4545
.summary-value {
4646
margin-right: 24px;
4747
}
48+
49+
.tabs {
50+
margin-top: 16px;
51+
}
4852
}

‎projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.component.ts

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { IconType } from '@hypertrace/assets-library';
33
import { NavigationService, SubscriptionLifecycle } from '@hypertrace/common';
44
import { IconSize } from '@hypertrace/components';
5-
6-
import { Dashboard } from '@hypertrace/hyperdash';
75
import { Observable } from 'rxjs';
8-
9-
import { traceDetailDashboard } from './trace-detail.dashboard';
6+
import { LogEvent } from '../../shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';
107
import { TraceDetails, TraceDetailService } from './trace-detail.service';
118
@Component({
129
styleUrls: ['./trace-detail.page.component.scss'],
@@ -53,13 +50,16 @@ import { TraceDetails, TraceDetailService } from './trace-detail.service';
5350
</div>
5451
</div>
5552
56-
<ht-navigable-dashboard
57-
class="scrollable-container"
58-
[padding]="0"
59-
navLocation="${traceDetailDashboard.location}"
60-
(dashboardReady)="this.onDashboardReady($event)"
61-
>
62-
</ht-navigable-dashboard>
53+
<ht-navigable-tab-group class="tabs">
54+
<ht-navigable-tab path="sequence"> Sequence </ht-navigable-tab>
55+
<ng-container *ngIf="this.logEvents$ | async as logEvents">
56+
<ht-navigable-tab path="logs" [labelTag]="logEvents.length"> Logs </ht-navigable-tab>
57+
</ng-container>
58+
</ht-navigable-tab-group>
59+
60+
<div class="scrollable-container">
61+
<router-outlet></router-outlet>
62+
</div>
6363
</div>
6464
`
6565
})
@@ -68,25 +68,15 @@ export class TraceDetailPageComponent {
6868

6969
public readonly traceDetails$: Observable<TraceDetails>;
7070
public readonly exportSpans$: Observable<string>;
71+
public readonly logEvents$: Observable<LogEvent[]>;
7172

7273
public constructor(
73-
private readonly subscriptionLifecycle: SubscriptionLifecycle,
7474
private readonly navigationService: NavigationService,
7575
private readonly traceDetailService: TraceDetailService
7676
) {
7777
this.traceDetails$ = this.traceDetailService.fetchTraceDetails();
7878
this.exportSpans$ = this.traceDetailService.fetchExportSpans();
79-
}
80-
81-
public onDashboardReady(dashboard: Dashboard): void {
82-
this.subscriptionLifecycle.add(
83-
this.traceDetails$.subscribe(traceDetails => {
84-
dashboard.setVariable('traceId', traceDetails.id);
85-
dashboard.setVariable('spanId', traceDetails.entrySpanId);
86-
dashboard.setVariable('startTime', traceDetails.startTime);
87-
dashboard.refresh();
88-
})
89-
);
79+
this.logEvents$ = this.traceDetailService.fetchLogEvents();
9080
}
9181

9282
public onClickBack(): void {

‎projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,42 @@ import {
88
IconModule,
99
LabelModule,
1010
LoadAsyncModule,
11+
NavigableTabModule,
1112
SummaryValueModule,
1213
TooltipModule
1314
} from '@hypertrace/components';
15+
import { LogEventsTableModule } from '../../shared/components/log-events/log-events-table.module';
1416
import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module';
1517
import { TracingDashboardModule } from '../../shared/dashboard/tracing-dashboard.module';
16-
import { traceDetailDashboard } from './trace-detail.dashboard';
18+
import { TraceLogsComponent } from './logs/trace-logs.component';
19+
import { TraceSequenceComponent } from './sequence/trace-sequence.component';
20+
import { traceSequenceDashboard } from './sequence/trace-sequence.dashboard';
1721
import { TraceDetailPageComponent } from './trace-detail.page.component';
1822

1923
const ROUTE_CONFIG: TraceRoute[] = [
2024
{
2125
path: `:${TraceDetailPageComponent.TRACE_ID_PARAM_NAME}`,
22-
component: TraceDetailPageComponent
26+
component: TraceDetailPageComponent,
27+
children: [
28+
{
29+
path: '',
30+
redirectTo: 'sequence',
31+
pathMatch: 'full'
32+
},
33+
{
34+
path: 'sequence',
35+
component: TraceSequenceComponent
36+
},
37+
{
38+
path: 'logs',
39+
component: TraceLogsComponent
40+
}
41+
]
2342
}
2443
];
2544

2645
@NgModule({
27-
declarations: [TraceDetailPageComponent],
46+
declarations: [TraceDetailPageComponent, TraceSequenceComponent, TraceLogsComponent],
2847
imports: [
2948
RouterModule.forChild(ROUTE_CONFIG),
3049
CommonModule,
@@ -37,7 +56,9 @@ const ROUTE_CONFIG: TraceRoute[] = [
3756
FormattingModule,
3857
CopyShareableLinkToClipboardModule,
3958
DownloadJsonModule,
40-
NavigableDashboardModule.withDefaultDashboards(traceDetailDashboard)
59+
NavigableDashboardModule.withDefaultDashboards(traceSequenceDashboard),
60+
NavigableTabModule,
61+
LogEventsTableModule
4162
]
4263
})
4364
export class TraceDetailPageModule {}

0 commit comments

Comments
 (0)