Skip to content

Commit 3af4fb6

Browse files
aaron-steinfeldaaron-steinfeld
authored
fix: restore service list as flat list (#521)
* fix: restore service list as flat list * chore: update search style
1 parent 16e2732 commit 3af4fb6

File tree

13 files changed

+178
-19
lines changed

13 files changed

+178
-19
lines changed

‎projects/components/src/search-box/search-box.component.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
.input {
39-
@include font-title;
39+
@include body-1-regular($gray-9);
4040
height: 34px;
4141
line-height: 34px;
4242
width: 420px;
@@ -47,7 +47,7 @@
4747
border-radius: 4px;
4848

4949
&::placeholder {
50-
@include font-title;
50+
@include body-1-regular($gray-5);
5151
line-height: 30px;
5252
}
5353

‎projects/observability/src/pages/apis/endpoints/endpoint-list.component.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { endpointListDashboard } from './endpoint-list.dashboard';
3+
4+
@Component({
5+
changeDetection: ChangeDetectionStrategy.OnPush,
6+
template: `
7+
<div class="vertical-flex-layout">
8+
<ht-page-header></ht-page-header>
9+
<ht-navigable-dashboard navLocation="${endpointListDashboard.location}"></ht-navigable-dashboard>
10+
</div>
11+
`
12+
})
13+
export class EndpointListComponent {}

‎projects/observability/src/pages/apis/services/services-list.dashboard.ts renamed to ‎projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
import { ObservabilityTableCellType } from '../../../shared/components/table/observability-table-cell-type';
88
import { ObservabilityEntityType } from '../../../shared/graphql/model/schema/entity';
99

10-
export const servicesListDashboard: DashboardDefaultConfiguration = {
11-
location: 'SERVICE_LIST',
10+
export const endpointListDashboard: DashboardDefaultConfiguration = {
11+
location: 'ENDPOINT_LIST',
1212
json: {
1313
type: 'container-widget',
1414
layout: {
@@ -18,7 +18,7 @@ export const servicesListDashboard: DashboardDefaultConfiguration = {
1818
children: [
1919
{
2020
type: 'table-widget',
21-
id: 'services-list.table',
21+
id: 'endpoint-list.table',
2222
mode: TableMode.Flat,
2323
style: TableStyle.FullPage,
2424
searchAttribute: 'name',

‎projects/observability/src/pages/apis/endpoints/endpoint-list.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { PageHeaderModule } from '@hypertrace/components';
3+
import { NavigableDashboardModule } from '@hypertrace/distributed-tracing';
4+
import { ObservabilityDashboardModule } from '../../../shared/dashboard/observability-dashboard.module';
5+
import { EndpointListComponent } from './endpoint-list.component';
6+
import { endpointListDashboard } from './endpoint-list.dashboard';
7+
8+
@NgModule({
9+
imports: [
10+
ObservabilityDashboardModule,
11+
PageHeaderModule,
12+
NavigableDashboardModule.withDefaultDashboards(endpointListDashboard)
13+
],
14+
declarations: [EndpointListComponent]
15+
})
16+
export class EndpointListModule {}

‎projects/observability/src/pages/apis/services/service-list.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { servicesListDashboard } from './services-list.dashboard';
2+
import { serviceListDashboard } from './service-list.dashboard';
33

44
@Component({
55
changeDetection: ChangeDetectionStrategy.OnPush,
66
template: `
77
<div class="vertical-flex-layout">
88
<ht-page-header></ht-page-header>
9-
<ht-navigable-dashboard navLocation="${servicesListDashboard.location}"></ht-navigable-dashboard>
9+
<ht-navigable-dashboard navLocation="${serviceListDashboard.location}"></ht-navigable-dashboard>
1010
</div>
1111
`
1212
})

‎projects/observability/src/pages/apis/services/service-list.dashboard.ts

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { CoreTableCellRendererType, TableSortDirection } from '@hypertrace/components';
2+
import { DashboardDefaultConfiguration, TracingTableCellType } from '@hypertrace/distributed-tracing';
3+
import { ObservabilityTableCellType } from '../../../shared/components/table/observability-table-cell-type';
4+
5+
export const serviceListDashboard: DashboardDefaultConfiguration = {
6+
location: 'SERVICE_LIST',
7+
json: {
8+
type: 'table-widget',
9+
id: 'service-list.table',
10+
searchAttribute: 'name',
11+
columns: [
12+
{
13+
type: 'table-widget-column',
14+
title: 'Name',
15+
display: ObservabilityTableCellType.Entity,
16+
width: '30%',
17+
value: {
18+
type: 'entity-specification'
19+
}
20+
},
21+
{
22+
type: 'table-widget-column',
23+
title: 'p99 Latency',
24+
display: TracingTableCellType.Metric,
25+
value: {
26+
type: 'metric-aggregation',
27+
metric: 'duration',
28+
aggregation: 'p99'
29+
},
30+
sort: TableSortDirection.Descending
31+
},
32+
{
33+
type: 'table-widget-column',
34+
title: 'Avg Latency',
35+
display: TracingTableCellType.Metric,
36+
value: {
37+
type: 'metric-aggregation',
38+
metric: 'duration',
39+
aggregation: 'avg'
40+
}
41+
},
42+
{
43+
type: 'table-widget-column',
44+
title: 'Errors/s',
45+
display: CoreTableCellRendererType.Number,
46+
value: {
47+
type: 'metric-aggregation',
48+
metric: 'errorCount',
49+
aggregation: 'avgrate_sec'
50+
}
51+
},
52+
{
53+
type: 'table-widget-column',
54+
title: 'Errors',
55+
display: CoreTableCellRendererType.Number,
56+
value: {
57+
type: 'metric-aggregation',
58+
metric: 'errorCount',
59+
aggregation: 'sum'
60+
}
61+
},
62+
{
63+
type: 'table-widget-column',
64+
title: 'Calls/s',
65+
display: CoreTableCellRendererType.Number,
66+
value: {
67+
type: 'metric-aggregation',
68+
metric: 'numCalls',
69+
aggregation: 'avgrate_sec'
70+
}
71+
},
72+
{
73+
type: 'table-widget-column',
74+
title: 'Calls',
75+
display: CoreTableCellRendererType.Number,
76+
value: {
77+
type: 'metric-aggregation',
78+
metric: 'numCalls',
79+
aggregation: 'sum'
80+
}
81+
}
82+
],
83+
data: {
84+
type: 'entity-table-data-source',
85+
entity: 'SERVICE'
86+
}
87+
}
88+
};

‎projects/observability/src/pages/apis/services/service-list.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { PageHeaderModule } from '@hypertrace/components';
33
import { NavigableDashboardModule } from '@hypertrace/distributed-tracing';
44
import { ObservabilityDashboardModule } from '../../../shared/dashboard/observability-dashboard.module';
55
import { ServiceListComponent } from './service-list.component';
6-
import { servicesListDashboard } from './services-list.dashboard';
6+
import { serviceListDashboard } from './service-list.dashboard';
77

88
@NgModule({
99
imports: [
1010
ObservabilityDashboardModule,
1111
PageHeaderModule,
12-
NavigableDashboardModule.withDefaultDashboards(servicesListDashboard)
12+
NavigableDashboardModule.withDefaultDashboards(serviceListDashboard)
1313
],
1414
declarations: [ServiceListComponent]
1515
})

‎projects/observability/src/public-api.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,12 @@ export * from './shared/components/donut/donut';
6767
// Pages
6868
export * from './pages/apis/backends/backend-list.module';
6969
export * from './pages/apis/backends/backend-list.component';
70+
export * from './pages/apis/endpoints/endpoint-list.component';
71+
export * from './pages/apis/endpoints/endpoint-list.dashboard';
72+
export * from './pages/apis/endpoints/endpoint-list.module';
7073
export * from './pages/apis/services/service-list.component';
71-
export * from './pages/apis/services/services-list.dashboard';
74+
export * from './pages/apis/services/service-list.dashboard';
75+
export * from './pages/apis/services/service-list.module';
7276
export * from './pages/apis/topology/application-flow.component';
7377
export * from './pages/apis/topology/application-flow.module';
7478

@@ -82,7 +86,6 @@ export * from './pages/apis/api-detail/traces/api-trace-list.component';
8286
export * from './pages/apis/api-detail/traces/api-trace-list.dashboard';
8387
export * from './pages/api-trace-detail/api-trace-detail.page.component';
8488

85-
export * from './pages/apis/services/service-list.module';
8689
export * from './pages/apis/service-detail/service-detail.module';
8790
export * from './pages/apis/service-detail/service-detail.component';
8891
export * from './pages/apis/service-detail/service-detail.service';

‎src/app/entity-metadata.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ export const entityMetadata: EntityMetadataMap = new Map([
66
{
77
entityType: ObservabilityEntityType.Api,
88
icon: ObservabilityIconType.Api,
9-
detailPath: (id: string, sourceRoute?: string) => [sourceRoute ?? '', 'endpoint', id],
10-
sourceRoutes: ['services']
9+
detailPath: (id: string, sourceRoute?: string) => [sourceRoute ?? 'endpoints', 'endpoint', id],
10+
sourceRoutes: ['services'],
11+
listPath: ['endpoints'],
12+
typeDisplayName: 'Endpoint'
1113
}
1214
],
1315
[

‎src/app/routes/endpoints/endpoint-routing.module.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
import { TraceRoute } from '@hypertrace/common';
4+
import {
5+
ApiDetailBreadcrumbResolver,
6+
ApiDetailService,
7+
EndpointListComponent,
8+
EndpointListModule
9+
} from '@hypertrace/observability';
10+
11+
const ROUTE_CONFIG: TraceRoute[] = [
12+
{
13+
path: '',
14+
component: EndpointListComponent
15+
},
16+
{
17+
path: `endpoint/:${ApiDetailService.API_ID_PARAM_NAME}`,
18+
resolve: {
19+
breadcrumb: ApiDetailBreadcrumbResolver
20+
},
21+
loadChildren: () => import('../api-detail/api-detail-routing.module').then(module => module.ApiDetailRoutingModule)
22+
}
23+
];
24+
25+
@NgModule({
26+
imports: [RouterModule.forChild(ROUTE_CONFIG), EndpointListModule]
27+
})
28+
export class EndpointRoutingModule {}

‎src/app/routes/root-routing.module.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { PreloadAllModules, RouterModule } from '@angular/router';
33
import { IconType } from '@hypertrace/assets-library';
44
import { ExternalUrlNavigator, TraceRoute } from '@hypertrace/common';
55
import { NotFoundComponent, NotFoundModule } from '@hypertrace/components';
6-
import { ApiDetailBreadcrumbResolver, ApiDetailService, ObservabilityIconType } from '@hypertrace/observability';
6+
import { ObservabilityIconType } from '@hypertrace/observability';
77
import { ApplicationFrameComponent } from '../application-frame/application-frame.component';
88

99
const ROUTE_CONFIG: TraceRoute[] = [
@@ -65,12 +65,15 @@ const ROUTE_CONFIG: TraceRoute[] = [
6565
import('./services/services-routing.module').then(module => module.ServicesRoutingModule)
6666
},
6767
{
68-
path: `endpoint/:${ApiDetailService.API_ID_PARAM_NAME}`,
69-
resolve: {
70-
breadcrumb: ApiDetailBreadcrumbResolver
68+
path: 'endpoints',
69+
data: {
70+
breadcrumb: {
71+
icon: ObservabilityIconType.Api,
72+
label: 'Endpoints'
73+
}
7174
},
7275
loadChildren: () =>
73-
import('./api-detail/api-detail-routing.module').then(module => module.ApiDetailRoutingModule)
76+
import('./endpoints/endpoint-routing.module').then(module => module.EndpointRoutingModule)
7477
},
7578
{
7679
path: 'trace',

‎src/app/shared/navigation/navigation.component.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,12 @@ export class NavigationComponent {
4848
type: NavItemType.Link,
4949
label: 'API Endpoints',
5050
icon: ObservabilityIconType.Api,
51+
matchPaths: ['endpoints']
52+
},
53+
{
54+
type: NavItemType.Link,
55+
label: 'Services',
56+
icon: ObservabilityIconType.Service,
5157
matchPaths: ['services']
5258
},
5359
{

‎src/environments/environment.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
export const environment = {
77
production: false,
8-
graphqlUri: 'http://localhost:2020/graphql'
8+
graphqlUri: 'http://localhost:23431/graphql'
99
};
1010

1111
/*

0 commit comments

Comments
 (0)