fix: edit columns uses displayName when title not provided (#362)

* fix: edit columns uses displayName when title not provided

* fix: linting and test

Author: jake-bassett

projects/components/src/table/table.component.ts

@@ -88,7 +88,7 @@ import { TableColumnConfigExtended, TableService } from './table.service';
                 [editable]="!this.isTreeType()"
                 [metadata]="this.metadata"
                 [columnConfig]="columnDef"
-                [availableColumns]="this.visibleColumnConfigs$ | async"
+                [availableColumns]="this.columnConfigs$ | async"
                 [index]="index"
                 [sort]="columnDef.sort"
                 (sortChange)="this.onSortChange($event, columnDef)"

projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts

@@ -1,22 +1,17 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Renderer } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { WidgetRenderer } from '../widget-renderer';
 import { ConditionalModel } from './conditional.model';
 
 @Renderer({ modelClass: ConditionalModel })
 @Component({
   selector: 'ht-conditional-widget',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: ` <ng-container [hdaDashboardModel]="this.getChildModel() | async"> </ng-container> `
+  template: ` <ng-container [hdaDashboardModel]="this.data$ | async"> </ng-container> `
 })
 export class ConditionalWidgetRendererComponent extends WidgetRenderer<ConditionalModel> {
-  public getChildModel(): Observable<object> {
-    return this.model.getChildModel().pipe(takeUntil(this.destroyed$));
-  }
-
   protected fetchData(): Observable<object> {
-    return this.getChildModel();
+    return this.model.getChildModel();
   }
 }

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-column.model.test.ts

@@ -1,4 +1,6 @@
+import { fakeAsync } from '@angular/core/testing';
 import { CoreTableCellRendererType } from '@hypertrace/components';
+import { runFakeRxjs } from '@hypertrace/test-utils';
 import { SpecificationBuilder } from '../../../graphql/request/builders/specification/specification-builder';
 import { TableWidgetColumnModel } from './table-widget-column.model';
 
@@ -11,20 +13,21 @@ describe('Table widget column model', () => {
   };
   const specBuilder = new SpecificationBuilder();
 
-  test('builds a column def for an attribute specification', () => {
+  test('builds a column def for an attribute specification', fakeAsync(() => {
     const model = buildModel({
       value: specBuilder.attributeSpecificationForKey('name'),
       title: 'Name column',
       display: CoreTableCellRendererType.Text
     });
 
-    const columnDef = model.asTableColumnDef();
-    expect(columnDef).toEqual(
-      expect.objectContaining({
-        id: 'name',
-        title: 'Name column',
-        display: CoreTableCellRendererType.Text
-      })
-    );
-  });
+    runFakeRxjs(({ expectObservable }) => {
+      expectObservable(model.asTableColumnDef()).toBe('(x|)', {
+        x: expect.objectContaining({
+          id: 'name',
+          title: 'Name column',
+          display: CoreTableCellRendererType.Text
+        })
+      });
+    });
+  }));
 });

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-column.model.ts

@@ -7,7 +7,11 @@ import {
 } from '@hypertrace/components';
 import { EnumPropertyTypeInstance, ENUM_TYPE } from '@hypertrace/dashboards';
 import { BOOLEAN_PROPERTY, Model, ModelProperty, ModelPropertyType, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { ModelInject } from '@hypertrace/hyperdash-angular';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { Specification } from '../../../graphql/model/schema/specifier/specification';
+import { MetadataService } from '../../../services/metadata/metadata.service';
 import { InteractionHandler } from '../../interaction/interaction-handler';
 
 @Model({
@@ -91,12 +95,23 @@ export class TableWidgetColumnModel {
   })
   public sort?: TableSortDirection;
 
-  public asTableColumnDef(): SpecificationBackedTableColumnDef {
+  @ModelInject(MetadataService)
+  private readonly metadataService!: MetadataService;
+
+  public asTableColumnDef(scope?: string): Observable<SpecificationBackedTableColumnDef> {
+    return scope !== undefined
+      ? this.metadataService
+          .getAttributeKeyDisplayName(scope, this.value.name)
+          .pipe(map(displayName => this.toSpecificationBackedColumnDef(displayName)))
+      : of(this.toSpecificationBackedColumnDef());
+  }
+
+  private toSpecificationBackedColumnDef(displayName?: string): SpecificationBackedTableColumnDef {
     return {
       id: this.value.resultAlias(),
       name: this.value.name,
       display: this.display,
-      title: this.title ?? this.value.name,
+      title: this.title ?? displayName ?? this.value.name,
       titleTooltip: this.titleTooltip,
       alignment: this.alignment,
       width: this.width,

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget.model.ts

@@ -1,3 +1,4 @@
+import { forkJoinSafeEmpty } from '@hypertrace/common';
 import { TableDataSource, TableMode, TableRow, TableSelectionMode, TableStyle } from '@hypertrace/components';
 import {
   ArrayPropertyTypeInstance,
@@ -18,7 +19,8 @@ import {
   STRING_PROPERTY
 } from '@hypertrace/hyperdash';
 import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { InteractionHandler } from '../../interaction/interaction-handler';
 import { TableWidgetRowSelectionModel } from './selections/table-widget-row-selection.model';
 import { TableWidgetColumnsService } from './services/table-widget-columns.service';
@@ -185,13 +187,15 @@ export class TableWidgetModel {
   }
 
   public getColumns(scope?: string): Observable<SpecificationBackedTableColumnDef[]> {
-    const modelColumns = this.columns.map(column => column.asTableColumnDef());
+    const modelColumns: Observable<SpecificationBackedTableColumnDef[]> = forkJoinSafeEmpty(
+      this.columns.map(column => column.asTableColumnDef(scope))
+    );
 
     if (scope === undefined || !this.fetchEditableColumns) {
-      return of(modelColumns);
+      return modelColumns;
     }
 
-    return this.tableWidgetColumnsService.fetchColumn(scope, modelColumns);
+    return modelColumns.pipe(switchMap(columns => this.tableWidgetColumnsService.fetchColumn(scope, columns)));
   }
 
   public getChildModel(row: TableRow): object | undefined {

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { servicesListDashboard } from './services-list-dashboard';
+import { servicesListDashboard } from './services-list.dashboard';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -3,7 +3,7 @@ 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 { servicesListDashboard } from './services-list.dashboard';
 
 @NgModule({
   imports: [

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

@@ -67,7 +67,7 @@ export * from './shared/components/donut/donut';
 export * from './pages/apis/backends/backend-list.module';
 export * from './pages/apis/backends/backend-list.component';
 export * from './pages/apis/services/service-list.component';
-export * from './pages/apis/services/services-list-dashboard';
+export * from './pages/apis/services/services-list.dashboard';
 export * from './pages/apis/topology/application-flow.component';
 export * from './pages/apis/topology/application-flow.module';