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
Expand Up @@ -36,7 +36,7 @@
}

.input {
@include font-title;
@include body-1-regular($gray-9);
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 isn't really part of this change, but noticed it in the UX for this page.

height: 34px;
line-height: 34px;
width: 420px;
Expand All @@ -47,7 +47,7 @@
border-radius: 4px;

&::placeholder {
@include font-title;
@include body-1-regular($gray-5);
line-height: 30px;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { endpointListDashboard } from './endpoint-list.dashboard';

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="vertical-flex-layout">
<ht-page-header></ht-page-header>
<ht-navigable-dashboard navLocation="${endpointListDashboard.location}"></ht-navigable-dashboard>
</div>
`
})
export class EndpointListComponent {}
Copy link
Contributor

Choose a reason for hiding this comment

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

Have we have started calling apis as endpoints in the code as well? Would that cause confusion with existing components for API like ApiDetailBreadcrumbResolver?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's a bit mixed in code. We should get it all consistent, but figured if we're adding new stuff to make it accurate. Another change that should happen is flattening the structure of pages (removing the /apis parent dir)

Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
import { ObservabilityTableCellType } from '../../../shared/components/table/observability-table-cell-type';
import { ObservabilityEntityType } from '../../../shared/graphql/model/schema/entity';

export const servicesListDashboard: DashboardDefaultConfiguration = {
location: 'SERVICE_LIST',
export const endpointListDashboard: DashboardDefaultConfiguration = {
location: 'ENDPOINT_LIST',
json: {
type: 'container-widget',
layout: {
Expand All @@ -18,7 +18,7 @@ export const servicesListDashboard: DashboardDefaultConfiguration = {
children: [
{
type: 'table-widget',
id: 'services-list.table',
id: 'endpoint-list.table',
mode: TableMode.Flat,
style: TableStyle.FullPage,
searchAttribute: 'name',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { PageHeaderModule } from '@hypertrace/components';
import { NavigableDashboardModule } from '@hypertrace/distributed-tracing';
import { ObservabilityDashboardModule } from '../../../shared/dashboard/observability-dashboard.module';
import { EndpointListComponent } from './endpoint-list.component';
import { endpointListDashboard } from './endpoint-list.dashboard';

@NgModule({
imports: [
ObservabilityDashboardModule,
PageHeaderModule,
NavigableDashboardModule.withDefaultDashboards(endpointListDashboard)
],
declarations: [EndpointListComponent]
})
export class EndpointListModule {}
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { servicesListDashboard } from './services-list.dashboard';
import { serviceListDashboard } from './service-list.dashboard';

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="vertical-flex-layout">
<ht-page-header></ht-page-header>
<ht-navigable-dashboard navLocation="${servicesListDashboard.location}"></ht-navigable-dashboard>
<ht-navigable-dashboard navLocation="${serviceListDashboard.location}"></ht-navigable-dashboard>
</div>
`
})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { CoreTableCellRendererType, TableSortDirection } from '@hypertrace/components';
import { DashboardDefaultConfiguration, TracingTableCellType } from '@hypertrace/distributed-tracing';
import { ObservabilityTableCellType } from '../../../shared/components/table/observability-table-cell-type';

export const serviceListDashboard: DashboardDefaultConfiguration = {
location: 'SERVICE_LIST',
json: {
type: 'table-widget',
id: 'service-list.table',
searchAttribute: 'name',
columns: [
{
type: 'table-widget-column',
title: 'Name',
display: ObservabilityTableCellType.Entity,
width: '30%',
value: {
type: 'entity-specification'
}
},
{
type: 'table-widget-column',
title: 'p99 Latency',
display: TracingTableCellType.Metric,
value: {
type: 'metric-aggregation',
metric: 'duration',
aggregation: 'p99'
},
sort: TableSortDirection.Descending
},
{
type: 'table-widget-column',
title: 'Avg Latency',
display: TracingTableCellType.Metric,
value: {
type: 'metric-aggregation',
metric: 'duration',
aggregation: 'avg'
}
},
{
type: 'table-widget-column',
title: 'Errors/s',
display: CoreTableCellRendererType.Number,
value: {
type: 'metric-aggregation',
metric: 'errorCount',
aggregation: 'avgrate_sec'
}
},
{
type: 'table-widget-column',
title: 'Errors',
display: CoreTableCellRendererType.Number,
value: {
type: 'metric-aggregation',
metric: 'errorCount',
aggregation: 'sum'
}
},
{
type: 'table-widget-column',
title: 'Calls/s',
display: CoreTableCellRendererType.Number,
value: {
type: 'metric-aggregation',
metric: 'numCalls',
aggregation: 'avgrate_sec'
}
},
{
type: 'table-widget-column',
title: 'Calls',
display: CoreTableCellRendererType.Number,
value: {
type: 'metric-aggregation',
metric: 'numCalls',
aggregation: 'sum'
}
}
],
data: {
type: 'entity-table-data-source',
entity: 'SERVICE'
}
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { PageHeaderModule } from '@hypertrace/components';
import { NavigableDashboardModule } from '@hypertrace/distributed-tracing';
import { ObservabilityDashboardModule } from '../../../shared/dashboard/observability-dashboard.module';
import { ServiceListComponent } from './service-list.component';
import { servicesListDashboard } from './services-list.dashboard';
import { serviceListDashboard } from './service-list.dashboard';

@NgModule({
imports: [
ObservabilityDashboardModule,
PageHeaderModule,
NavigableDashboardModule.withDefaultDashboards(servicesListDashboard)
NavigableDashboardModule.withDefaultDashboards(serviceListDashboard)
],
declarations: [ServiceListComponent]
})
Expand Down
7 changes: 5 additions & 2 deletions projects/observability/src/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,12 @@ export * from './shared/components/donut/donut';
// Pages
export * from './pages/apis/backends/backend-list.module';
export * from './pages/apis/backends/backend-list.component';
export * from './pages/apis/endpoints/endpoint-list.component';
export * from './pages/apis/endpoints/endpoint-list.dashboard';
export * from './pages/apis/endpoints/endpoint-list.module';
export * from './pages/apis/services/service-list.component';
export * from './pages/apis/services/services-list.dashboard';
export * from './pages/apis/services/service-list.dashboard';
export * from './pages/apis/services/service-list.module';
export * from './pages/apis/topology/application-flow.component';
export * from './pages/apis/topology/application-flow.module';

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

export * from './pages/apis/services/service-list.module';
export * from './pages/apis/service-detail/service-detail.module';
export * from './pages/apis/service-detail/service-detail.component';
export * from './pages/apis/service-detail/service-detail.service';
Expand Down
6 changes: 4 additions & 2 deletions src/app/entity-metadata.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ export const entityMetadata: EntityMetadataMap = new Map([
{
entityType: ObservabilityEntityType.Api,
icon: ObservabilityIconType.Api,
detailPath: (id: string, sourceRoute?: string) => [sourceRoute ?? '', 'endpoint', id],
sourceRoutes: ['services']
detailPath: (id: string, sourceRoute?: string) => [sourceRoute ?? 'endpoints', 'endpoint', id],
sourceRoutes: ['services'],
listPath: ['endpoints'],
typeDisplayName: 'Endpoint'
}
],
[
Expand Down
28 changes: 28 additions & 0 deletions src/app/routes/endpoints/endpoint-routing.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TraceRoute } from '@hypertrace/common';
import {
ApiDetailBreadcrumbResolver,
ApiDetailService,
EndpointListComponent,
EndpointListModule
} from '@hypertrace/observability';

const ROUTE_CONFIG: TraceRoute[] = [
{
path: '',
component: EndpointListComponent
},
{
path: `endpoint/:${ApiDetailService.API_ID_PARAM_NAME}`,
resolve: {
breadcrumb: ApiDetailBreadcrumbResolver
},
loadChildren: () => import('../api-detail/api-detail-routing.module').then(module => module.ApiDetailRoutingModule)
}
];

@NgModule({
imports: [RouterModule.forChild(ROUTE_CONFIG), EndpointListModule]
})
export class EndpointRoutingModule {}
13 changes: 8 additions & 5 deletions src/app/routes/root-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { PreloadAllModules, RouterModule } from '@angular/router';
import { IconType } from '@hypertrace/assets-library';
import { ExternalUrlNavigator, TraceRoute } from '@hypertrace/common';
import { NotFoundComponent, NotFoundModule } from '@hypertrace/components';
import { ApiDetailBreadcrumbResolver, ApiDetailService, ObservabilityIconType } from '@hypertrace/observability';
import { ObservabilityIconType } from '@hypertrace/observability';
import { ApplicationFrameComponent } from '../application-frame/application-frame.component';

const ROUTE_CONFIG: TraceRoute[] = [
Expand Down Expand Up @@ -65,12 +65,15 @@ const ROUTE_CONFIG: TraceRoute[] = [
import('./services/services-routing.module').then(module => module.ServicesRoutingModule)
},
{
path: `endpoint/:${ApiDetailService.API_ID_PARAM_NAME}`,
resolve: {
breadcrumb: ApiDetailBreadcrumbResolver
path: 'endpoints',
data: {
breadcrumb: {
icon: ObservabilityIconType.Api,
label: 'Endpoints'
}
},
loadChildren: () =>
import('./api-detail/api-detail-routing.module').then(module => module.ApiDetailRoutingModule)
import('./endpoints/endpoint-routing.module').then(module => module.EndpointRoutingModule)
},
{
path: 'trace',
Expand Down
6 changes: 6 additions & 0 deletions src/app/shared/navigation/navigation.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ export class NavigationComponent {
type: NavItemType.Link,
label: 'API Endpoints',
icon: ObservabilityIconType.Api,
matchPaths: ['endpoints']
},
{
type: NavItemType.Link,
label: 'Services',
icon: ObservabilityIconType.Service,
matchPaths: ['services']
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/environments/environment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

export const environment = {
production: false,
graphqlUri: 'http://localhost:2020/graphql'
graphqlUri: 'http://localhost:23431/graphql'
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this a new port?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it should be 2020 only right?

Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yeah my bad. this is the HT graphql port (23431) but usually devs are running against a full cluster which puts everything behind 2020.

};

/*
Expand Down