refactor: breadcrumb to support additional specifications

package.json

@@ -15,7 +15,7 @@
     "build:components": "ng build components",
     "build:dashboards": "ng build dashboards",
     "build:ci": "node --max_old_space_size=3584 node_modules/@angular/cli/bin/ng build --configuration production --no-progress",
-    "test": "ng test hypertrace-ui --cache",
+    "test": "ng test hypertrace-ui --cache --maxWorkers=2",
     "lint": "ng lint hypertrace-ui",
     "lint:fix": "ng lint --fix hypertrace-ui",
     "prettier:check": "prettier --check '**'",

projects/observability/src/pages/apis/api-detail/api-detail-breadcrumb.resolver.test.ts

@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { NavigationService } from '@hypertrace/common';
 import { GraphQlRequestCacheability, GraphQlRequestService } from '@hypertrace/graphql-client';
 import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
+import { EntityBreadcrumb } from './../../../shared/services/entity-breadcrumb/entity-breadcrumb.resolver';
 
 import { patchRouterNavigateForTest, runFakeRxjs } from '@hypertrace/test-utils';
 import { of } from 'rxjs';
@@ -14,7 +15,7 @@ import { ObservabilityIconType } from '../../../shared/icons/observability-icon-
 import { ApiDetailBreadcrumbResolver } from './api-detail-breadcrumb.resolver';
 
 describe('Api detail breadcrumb resolver', () => {
-  let spectator: SpectatorService<ApiDetailBreadcrumbResolver>;
+  let spectator: SpectatorService<ApiDetailBreadcrumbResolver<EntityBreadcrumb>>;
   let activatedRouteSnapshot: ActivatedRouteSnapshot;
   const buildResolver = createServiceFactory({
     service: ApiDetailBreadcrumbResolver,

projects/observability/src/pages/apis/api-detail/api-detail-breadcrumb.resolver.ts

@@ -1,101 +1,82 @@
 import { Inject, Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
-import { Breadcrumb, NavigationService, TimeRangeService } from '@hypertrace/common';
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { NavigationService, TimeRangeService } from '@hypertrace/common';
 import { BreadcrumbsService } from '@hypertrace/components';
-import { GraphQlRequestCacheability, GraphQlRequestService } from '@hypertrace/graphql-client';
+import { GraphQlRequestService } from '@hypertrace/graphql-client';
 import { Observable } from 'rxjs';
-import { map, switchMap, take } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { EntityMetadata, EntityMetadataMap, ENTITY_METADATA } from '../../../shared/constants/entity-metadata';
 import { Entity, ObservabilityEntityType } from '../../../shared/graphql/model/schema/entity';
-import { GraphQlTimeRange } from '../../../shared/graphql/model/schema/timerange/graphql-time-range';
-import { SpecificationBuilder } from '../../../shared/graphql/request/builders/specification/specification-builder';
 import {
-  EntityGraphQlQueryHandlerService,
-  ENTITY_GQL_REQUEST
-} from '../../../shared/graphql/request/handlers/entities/query/entity/entity-graphql-query-handler.service';
+  EntityBreadcrumb,
+  EntityBreadcrumbResolver
+} from '../../../shared/services/entity-breadcrumb/entity-breadcrumb.resolver';
+import { EntityIconLookupService } from './../../../shared/services/entity/entity-icon-lookup.service';
 
 @Injectable({ providedIn: 'root' })
-export class ApiDetailBreadcrumbResolver implements Resolve<Observable<Breadcrumb>> {
-  private readonly specificationBuilder: SpecificationBuilder = new SpecificationBuilder();
+export class ApiDetailBreadcrumbResolver<T extends EntityBreadcrumb> extends EntityBreadcrumbResolver<T> {
   protected readonly apiEntityMetadata: EntityMetadata | undefined;
 
   public constructor(
+    timeRangeService: TimeRangeService,
+    graphQlQueryService: GraphQlRequestService,
+    iconLookupService: EntityIconLookupService,
     private readonly navigationService: NavigationService,
-    private readonly timeRangeService: TimeRangeService,
-    private readonly graphQlQueryService: GraphQlRequestService,
     protected readonly breadcrumbService: BreadcrumbsService,
     @Inject(ENTITY_METADATA) private readonly entityMetadataMap: EntityMetadataMap
   ) {
+    super(timeRangeService, graphQlQueryService, iconLookupService);
     this.apiEntityMetadata = this.entityMetadataMap.get(ObservabilityEntityType.Api);
   }
 
-  public async resolve(activatedRouteSnapshot: ActivatedRouteSnapshot): Promise<Observable<Breadcrumb>> {
+  public async resolve(activatedRouteSnapshot: ActivatedRouteSnapshot): Promise<Observable<EntityBreadcrumb>> {
     const id = activatedRouteSnapshot.paramMap.get('id') as string;
-    const parentType = this.resolveParentType();
+    const parentEntityMetadata = this.resolveParentType();
 
     return Promise.resolve(
-      this.fetchEntity(id, parentType).pipe(
-        take(1),
+      this.fetchEntity(id, ObservabilityEntityType.Api).pipe(
+        map(apiEntity => ({
+          ...apiEntity,
+          ...this.getParentPartial(apiEntity, parentEntityMetadata)
+        })),
         switchMap(api => [
-          ...this.getParentBreadcrumbs(api, parentType),
+          ...this.getParentBreadcrumbs(api, parentEntityMetadata),
           this.createBreadcrumbForEntity(api, activatedRouteSnapshot)
         ])
       )
     );
   }
 
-  protected createBreadcrumbForEntity(
-    api: ApiBreadcrumbDetails,
-    activatedRouteSnapshot: ActivatedRouteSnapshot
-  ): Breadcrumb {
+  protected createBreadcrumbForEntity(api: Entity, activatedRouteSnapshot: ActivatedRouteSnapshot): EntityBreadcrumb {
     return {
-      label: api.name,
+      ...api,
+      label: api.name as string,
       icon: this.apiEntityMetadata?.icon,
       url: this.breadcrumbService.getPath(activatedRouteSnapshot)
     };
   }
 
-  protected getParentBreadcrumbs(api: ApiBreadcrumbDetails, parentEntityMetadata?: EntityMetadata): Breadcrumb[] {
+  protected getParentBreadcrumbs(api: EntityBreadcrumb, parentEntityMetadata?: EntityMetadata): EntityBreadcrumb[] {
     return parentEntityMetadata !== undefined
       ? [
           {
-            label: api.parentName,
+            ...api,
+            label: api.parentName as string,
             icon: parentEntityMetadata?.icon,
-            url: parentEntityMetadata?.detailPath(api.parentId)
+            url: parentEntityMetadata?.detailPath(api.parentId as string)
           },
           {
+            ...api,
             label: 'Endpoints',
             icon: this.apiEntityMetadata?.icon,
-            url: parentEntityMetadata?.apisListPath?.(api.parentId)
+            url: parentEntityMetadata?.apisListPath?.(api.parentId as string)
           }
         ]
       : [];
   }
 
-  private fetchEntity(id: string, parentEntityMetadata?: EntityMetadata): Observable<ApiBreadcrumbDetails> {
-    return this.timeRangeService.getTimeRangeAndChanges().pipe(
-      switchMap(timeRange =>
-        this.graphQlQueryService.query<EntityGraphQlQueryHandlerService, ApiBreadcrumbDetails>(
-          {
-            requestType: ENTITY_GQL_REQUEST,
-            entityType: ObservabilityEntityType.Api,
-            id: id,
-            properties: this.getAttributeKeys(parentEntityMetadata).map(attributeKey =>
-              this.specificationBuilder.attributeSpecificationForKey(attributeKey)
-            ),
-            timeRange: new GraphQlTimeRange(timeRange.startTime, timeRange.endTime)
-          },
-          { cacheability: GraphQlRequestCacheability.NotCacheable }
-        )
-      ),
-      map(apiEntity => ({
-        ...apiEntity,
-        ...this.getParentPartial(apiEntity, parentEntityMetadata)
-      }))
-    );
-  }
-
-  private getAttributeKeys(parentTypeMetadata?: EntityMetadata): string[] {
+  protected getAttributeKeys(): string[] {
+    const parentTypeMetadata = this.resolveParentType();
     const parentAttributes = parentTypeMetadata
       ? [this.getParentNameAttribute(parentTypeMetadata), this.getParentIdAttribute(parentTypeMetadata)]
       : [];
@@ -142,7 +123,7 @@ export class ApiDetailBreadcrumbResolver implements Resolve<Observable<Breadcrum
   }
 }
 
-export interface ApiBreadcrumbDetails extends Entity<ObservabilityEntityType.Api> {
+export interface ApiBreadcrumbDetails extends EntityBreadcrumb {
   name: string;
   parentName: string;
   parentId: string;

projects/observability/src/pages/apis/api-detail/api-detail.service.ts

@@ -20,6 +20,7 @@ export class ApiDetailService extends EntityDetailService<ApiEntity> {
 
 export interface ApiEntity extends Entity {
   apiType: ApiType;
+  name: string;
 }
 
 export const enum ApiType {

projects/observability/src/pages/apis/service-detail/service-detail-breadcrumb.resolver.test.ts

@@ -10,10 +10,11 @@ import { entityIdKey, entityTypeKey, ObservabilityEntityType } from '../../../sh
 import { ENTITY_GQL_REQUEST } from '../../../shared/graphql/request/handlers/entities/query/entity/entity-graphql-query-handler.service';
 import { ObservabilityIconType } from '../../../shared/icons/observability-icon-type';
 import { EntityIconLookupService } from '../../../shared/services/entity/entity-icon-lookup.service';
+import { EntityBreadcrumb } from './../../../shared/services/entity-breadcrumb/entity-breadcrumb.resolver';
 import { ServiceDetailBreadcrumbResolver } from './service-detail-breadcrumb.resolver';
 
 describe('Service detail breadcrumb resolver', () => {
-  let spectator: SpectatorService<ServiceDetailBreadcrumbResolver>;
+  let spectator: SpectatorService<ServiceDetailBreadcrumbResolver<EntityBreadcrumb>>;
   let activatedRouteSnapshot: ActivatedRouteSnapshot;
   const buildResolver = createServiceFactory({
     service: ServiceDetailBreadcrumbResolver,

projects/observability/src/pages/apis/service-detail/service-detail-breadcrumb.resolver.ts

@@ -1,60 +1,29 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
-import { Breadcrumb, TimeRangeService } from '@hypertrace/common';
-import { GraphQlRequestCacheability, GraphQlRequestService } from '@hypertrace/graphql-client';
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { TimeRangeService } from '@hypertrace/common';
+import { GraphQlRequestService } from '@hypertrace/graphql-client';
 import { Observable } from 'rxjs';
-import { map, switchMap, take } from 'rxjs/operators';
 import { ObservabilityEntityType } from '../../../shared/graphql/model/schema/entity';
-import { GraphQlTimeRange } from '../../../shared/graphql/model/schema/timerange/graphql-time-range';
-import { SpecificationBuilder } from '../../../shared/graphql/request/builders/specification/specification-builder';
 import {
-  EntityGraphQlQueryHandlerService,
-  ENTITY_GQL_REQUEST
-} from '../../../shared/graphql/request/handlers/entities/query/entity/entity-graphql-query-handler.service';
-import { EntityIconLookupService } from '../../../shared/services/entity/entity-icon-lookup.service';
-import { ServiceEntity } from './service-detail.service';
+  EntityBreadcrumb,
+  EntityBreadcrumbResolver
+} from '../../../shared/services/entity-breadcrumb/entity-breadcrumb.resolver';
+import { EntityIconLookupService } from './../../../shared/services/entity/entity-icon-lookup.service';
 
 @Injectable({ providedIn: 'root' })
-export class ServiceDetailBreadcrumbResolver implements Resolve<Observable<Breadcrumb>> {
-  private readonly specificationBuilder: SpecificationBuilder = new SpecificationBuilder();
-
+export class ServiceDetailBreadcrumbResolver<T extends EntityBreadcrumb> extends EntityBreadcrumbResolver<T> {
   public constructor(
-    private readonly timeRangeService: TimeRangeService,
-    private readonly graphQlQueryService: GraphQlRequestService,
-    protected readonly iconLookupService: EntityIconLookupService
-  ) {}
+    timeRangeService: TimeRangeService,
+    graphQlQueryService: GraphQlRequestService,
+    iconLookupService: EntityIconLookupService
+  ) {
+    super(timeRangeService, graphQlQueryService, iconLookupService);
+  }
 
-  public async resolve(activatedRouteSnapshot: ActivatedRouteSnapshot): Promise<Observable<Breadcrumb>> {
+  public async resolve(activatedRouteSnapshot: ActivatedRouteSnapshot): Promise<Observable<T>> {
     const id = activatedRouteSnapshot.paramMap.get('id');
 
-    return Promise.resolve(
-      this.fetchEntity(id as string).pipe(
-        take(1),
-        map(service => ({
-          label: service.name,
-          icon: this.iconLookupService.forEntity(service)
-        }))
-      )
-    );
-  }
-
-  protected fetchEntity(id: string): Observable<ServiceEntity> {
-    return this.timeRangeService.getTimeRangeAndChanges().pipe(
-      switchMap(timeRange =>
-        this.graphQlQueryService.query<EntityGraphQlQueryHandlerService, ServiceEntity>(
-          {
-            requestType: ENTITY_GQL_REQUEST,
-            entityType: ObservabilityEntityType.Service,
-            id: id,
-            properties: this.getAttributeKeys().map(attributeKey =>
-              this.specificationBuilder.attributeSpecificationForKey(attributeKey)
-            ),
-            timeRange: new GraphQlTimeRange(timeRange.startTime, timeRange.endTime)
-          },
-          { cacheability: GraphQlRequestCacheability.NotCacheable }
-        )
-      )
-    );
+    return Promise.resolve(this.fetchEntity(id as string, ObservabilityEntityType.Service));
   }
 
   protected getAttributeKeys(): string[] {

projects/observability/src/public-api.ts

@@ -92,6 +92,7 @@ export * from './shared/graphql/model/schema/trace';
 // Services
 export * from './pages/trace-detail/trace-detail.service';
 export * from './shared/services/log-events/log-events.service';
+export * from './shared/services/entity-breadcrumb/entity-breadcrumb.resolver';
 
 // Span Detail
 export { SpanData } from './shared/components/span-detail/span-data';

projects/observability/src/shared/services/entity-breadcrumb/entity-breadcrumb.resolver.ts

@@ -0,0 +1,66 @@
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { Breadcrumb, TimeRangeService } from '@hypertrace/common';
+import { GraphQlRequestCacheability, GraphQlRequestOptions, GraphQlRequestService } from '@hypertrace/graphql-client';
+import { Observable } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
+import { Entity } from '../../graphql/model/schema/entity';
+import { GraphQlTimeRange } from '../../graphql/model/schema/timerange/graphql-time-range';
+import { SpecificationBuilder } from '../../graphql/request/builders/specification/specification-builder';
+import { EntityGraphQlQueryHandlerService } from '../../graphql/request/handlers/entities/query/entity/entity-graphql-query-handler.service';
+import { EntityIconLookupService } from '../entity/entity-icon-lookup.service';
+import { Specification } from './../../graphql/model/schema/specifier/specification';
+import { ENTITY_GQL_REQUEST } from './../../graphql/request/handlers/entities/query/entity/entity-graphql-query-handler.service';
+
+export abstract class EntityBreadcrumbResolver<T extends EntityBreadcrumb = EntityBreadcrumb>
+  implements Resolve<Observable<EntityBreadcrumb>> {
+  private readonly specificationBuilder: SpecificationBuilder = new SpecificationBuilder();
+
+  public constructor(
+    protected readonly timeRangeService: TimeRangeService,
+    protected readonly graphQlQueryService: GraphQlRequestService,
+    protected readonly iconLookupService: EntityIconLookupService
+  ) {}
+
+  public abstract resolve(route: ActivatedRouteSnapshot): Promise<Observable<EntityBreadcrumb>>;
+
+  protected abstract getAttributeKeys(): string[];
+
+  protected getAdditionalSpecifications(): Specification[] {
+    return [];
+  }
+
+  protected getRequestOptions(): GraphQlRequestOptions | undefined {
+    return { cacheability: GraphQlRequestCacheability.Cacheable };
+  }
+
+  protected fetchEntity(id: string, entityType: string): Observable<T> {
+    return this.timeRangeService.getTimeRangeAndChanges().pipe(
+      switchMap(timeRange =>
+        this.graphQlQueryService.query<EntityGraphQlQueryHandlerService, T>(
+          {
+            requestType: ENTITY_GQL_REQUEST,
+            entityType: entityType,
+            id: id,
+            properties: [...this.getAttributeSpecification(), ...this.getAdditionalSpecifications()],
+            timeRange: new GraphQlTimeRange(timeRange.startTime, timeRange.endTime)
+          },
+          this.getRequestOptions()
+        )
+      ),
+      map(entity => ({
+        ...entity,
+        label: entity.name as string,
+        icon: this.iconLookupService.forEntity(entity)
+      })),
+      take(1)
+    );
+  }
+
+  private getAttributeSpecification(): Specification[] {
+    return this.getAttributeKeys().map(attributeKey =>
+      this.specificationBuilder.attributeSpecificationForKey(attributeKey)
+    );
+  }
+}
+
+export interface EntityBreadcrumb extends Breadcrumb, Entity {}