From 6629447d83b5c770292b56106498bf5c6298dbac Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Fri, 22 Jan 2021 12:29:44 -0800 Subject: [PATCH 1/4] feat: change table controls to more generic view toggle instead of mode --- .../controls/table-controls.component.test.ts | 14 +- .../controls/table-controls.component.ts | 33 ++-- .../widgets/table/table-widget-base.model.ts | 8 +- .../table/table-widget-renderer.component.ts | 31 ++-- .../table/table-widget-select-filter.model.ts | 11 +- ...l.ts => table-widget-view-toggle.model.ts} | 71 +++----- .../widgets/table/table-widget-view.model.ts | 18 ++ .../widgets/table/table-widget.module.ts | 6 +- .../apis/services/service-list.dashboard.ts | 165 ++++++++++-------- 9 files changed, 190 insertions(+), 167 deletions(-) rename projects/distributed-tracing/src/shared/dashboard/widgets/table/{mode-toggle-table-widget.model.ts => table-widget-view-toggle.model.ts} (53%) create mode 100644 projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts diff --git a/projects/components/src/table/controls/table-controls.component.test.ts b/projects/components/src/table/controls/table-controls.component.test.ts index fe339308f..319a34249 100644 --- a/projects/components/src/table/controls/table-controls.component.test.ts +++ b/projects/components/src/table/controls/table-controls.component.test.ts @@ -17,10 +17,10 @@ describe('Table Controls component', () => { [searchEnabled]="searchEnabled" [searchPlaceholder]="searchPlaceholder" [filterItems]="filterItems" - [modeItems]="modeItems" + [viewItems]="viewItems" (searchChange)="searchChange($event)" (filterChange)="filterChange($event)" - (modeChange)="modeChange($event)" + (viewChange)="viewChange($event)" > ` @@ -103,10 +103,10 @@ describe('Table Controls component', () => { expect(onChangeSpy).toHaveBeenCalled(); }); - test('should provide toggle group items for each mode', () => { + test('should provide toggle group items for each view', () => { const spectator = createHost(undefined, { hostProps: { - modeItems: [ + viewItems: [ { label: 'test1', value: 'TEST1' @@ -122,12 +122,12 @@ describe('Table Controls component', () => { expect(spectator.query(ToggleGroupComponent)?.items?.length).toEqual(2); }); - test('should emit mode when selected', () => { + test('should emit view when selected', () => { const onChangeSpy = jest.fn(); const spectator = createHost(undefined, { hostProps: { - modeItems: [ + viewItems: [ { label: 'test1', value: 'TEST1' @@ -137,7 +137,7 @@ describe('Table Controls component', () => { value: 'TEST2' } ], - modeChange: onChangeSpy + viewChange: onChangeSpy } }); diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts index c58e898c1..f4dcb2410 100644 --- a/projects/components/src/table/controls/table-controls.component.ts +++ b/projects/components/src/table/controls/table-controls.component.ts @@ -5,7 +5,6 @@ import { isEmpty } from 'lodash-es'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import { ToggleItem } from '../../toggle-group/toggle-item'; -import { TableMode } from '../table-api'; import { SelectChange, SelectFilter } from './table-controls-api'; @Component({ @@ -60,10 +59,10 @@ import { SelectChange, SelectFilter } from './table-controls-api'; @@ -86,10 +85,10 @@ export class TableControlsComponent implements OnChanges { public activeFilterItem?: ToggleItem; @Input() - public modeItems?: ToggleItem[] = []; + public viewItems?: ToggleItem[] = []; @Input() - public activeModeItem?: ToggleItem; + public activeViewItem?: ToggleItem; // Checkbox filter @Input() @@ -111,10 +110,10 @@ export class TableControlsComponent implements OnChanges { public readonly filterChange: EventEmitter = new EventEmitter(); @Output() - public readonly modeChange: EventEmitter = new EventEmitter(); + public readonly viewChange: EventEmitter = new EventEmitter(); - public get modeToggleEnabled(): boolean { - return !!this.modeItems && this.modeItems.length > 0; + public get viewToggleEnabled(): boolean { + return !!this.viewItems && this.viewItems.length > 0; } public get checkboxEnabled(): boolean { @@ -126,7 +125,7 @@ export class TableControlsComponent implements OnChanges { } public get anyControlsEnabled(): boolean { - return this.modeToggleEnabled || this.checkboxEnabled || this.filterItemsEnabled || !!this.searchEnabled; + return this.viewToggleEnabled || this.checkboxEnabled || this.filterItemsEnabled || !!this.searchEnabled; } private readonly searchDebounceSubject: Subject = new Subject(); @@ -142,8 +141,8 @@ export class TableControlsComponent implements OnChanges { this.setActiveFilterItem(); } - if (changes.modeItems) { - this.setActiveModeItem(); + if (changes.viewItems) { + this.setActiveViewItem(); } } @@ -153,9 +152,9 @@ export class TableControlsComponent implements OnChanges { } } - private setActiveModeItem(): void { - if (this.modeItems !== undefined) { - this.activeModeItem = this.modeItems.find(item => item === this.activeModeItem) ?? this.modeItems[0]; + private setActiveViewItem(): void { + if (this.viewItems !== undefined) { + this.activeViewItem = this.viewItems.find(item => item === this.activeViewItem) ?? this.viewItems[0]; } } @@ -174,7 +173,7 @@ export class TableControlsComponent implements OnChanges { this.searchDebounceSubject.next(text); } - public onModeChange(item: ToggleItem): void { - this.modeChange.emit(item.value); + public onModeChange(item: ToggleItem): void { + this.viewChange.emit(item.value); } } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts index dc344171a..47aa2dc26 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts @@ -138,12 +138,12 @@ export abstract class TableWidgetBaseModel extends BaseModel { return TableSelectionMode.Single; } - public setMode(_mode: TableMode): void { + public setView(_view: string): void { // No-op here, but can be overridden return; } - public getModeOptions(): TableMode[] { + public getViewOptions(): string[] { // No-op here, but can be overridden return []; } @@ -152,6 +152,10 @@ export abstract class TableWidgetBaseModel extends BaseModel { return this.filterOptions; } + public getSearchAttribute(): string | undefined { + return this.searchAttribute; + } + public getCheckboxFilterOption(): TableWidgetCheckboxFilterModel | undefined { return this.checkboxFilterOption; } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 78521eeaa..2f7d2906b 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -17,7 +17,6 @@ import { TableColumnConfig, TableDataSource, TableFilter, - TableMode, TableRow, TableSelectionMode, TableStyle, @@ -32,14 +31,14 @@ import { filter, first, map, pairwise, share, startWith, switchMap, tap } from ' import { AttributeMetadata, toFilterAttributeType } from '../../../graphql/model/metadata/attribute-metadata'; import { MetadataService } from '../../../services/metadata/metadata.service'; import { InteractionHandler } from '../../interaction/interaction-handler'; -import { ModeToggleTableWidgetModel } from './mode-toggle-table-widget.model'; import { TableWidgetBaseModel } from './table-widget-base.model'; import { SpecificationBackedTableColumnDef } from './table-widget-column.model'; import { TableWidgetFilterModel } from './table-widget-filter-model'; +import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model'; import { TableWidgetModel } from './table-widget.model'; @Renderer({ modelClass: TableWidgetModel }) -@Renderer({ modelClass: ModeToggleTableWidgetModel }) +@Renderer({ modelClass: TableWidgetViewToggleModel }) @Component({ selector: 'ht-table-widget-renderer', styleUrls: ['./table-widget-renderer.component.scss'], @@ -53,17 +52,17 @@ import { TableWidgetModel } from './table-widget.model';
@@ -96,8 +95,8 @@ export class TableWidgetRendererComponent extends WidgetRenderer | undefined> implements OnInit { public filterItems: ToggleItem[] = []; - public modeItems: ToggleItem[] = []; - public activeMode!: TableMode; + public viewItems: ToggleItem[] = []; + public activeMode!: string; public selectFilterItems$!: Observable; @@ -124,8 +123,6 @@ export class TableWidgetRendererComponent public ngOnInit(): void { super.ngOnInit(); - this.onModeChange(this.model.mode); - this.metadata$ = this.getScopeAttributes(); this.columnConfigs$ = (isNonEmptyString(this.model.id) ? this.preferenceService.get(this.model.id, []) @@ -151,9 +148,9 @@ export class TableWidgetRendererComponent value: filterOption })); - this.modeItems = this.model.getModeOptions().map(modeOption => ({ - label: capitalize(modeOption), - value: modeOption + this.viewItems = this.model.getViewOptions().map(viewOption => ({ + label: capitalize(viewOption), + value: viewOption })); this.maybeEmitInitialCheckboxFilterChange(); @@ -321,16 +318,16 @@ export class TableWidgetRendererComponent public onSearchChange(text: string): void { const searchFilter: TableFilter = { - field: this.api.model.searchAttribute!, + field: this.api.model.getSearchAttribute()!, operator: FilterOperator.Like, value: text }; this.searchFilterSubject.next([searchFilter]); } - public onModeChange(mode: TableMode): void { - this.activeMode = mode; - this.model.setMode(mode); + public onViewChange(view: string): void { + this.activeMode = view; + this.model.setView(view); this.columnConfigs$ = this.getColumnConfigs(); } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-select-filter.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-select-filter.model.ts index 89124c9e9..36294b152 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-select-filter.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-select-filter.model.ts @@ -3,6 +3,7 @@ import { FilterOperator, TableFilter } from '@hypertrace/components'; import { Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; @Model({ type: 'table-widget-select-filter', @@ -26,7 +27,15 @@ export class TableWidgetSelectFilterModel { protected readonly api!: ModelApi; public getData(): Observable { - return this.api.getData(); + return this.api.getData().pipe( + map(values => values.filter(value => !this.isEmpty(value))), + map(values => values.sort()) + ); + } + + public isEmpty(value: unknown): boolean { + // Empty values can't be queried through filtering yet, so need to remove them so they don't appear in the dropdown + return value === undefined || value === null || value === ''; } public getTableFilter(value: unknown): TableFilter { diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/mode-toggle-table-widget.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts similarity index 53% rename from projects/distributed-tracing/src/shared/dashboard/widgets/table/mode-toggle-table-widget.model.ts rename to projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts index 961790db1..86f198d3e 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/mode-toggle-table-widget.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts @@ -1,78 +1,53 @@ -import { TableDataSource, TableMode, TableRow } from '@hypertrace/components'; -import { ArrayPropertyTypeInstance, ENUM_TYPE, ModelTemplatePropertyType } from '@hypertrace/dashboards'; -import { ARRAY_PROPERTY, Model, ModelApi, ModelJson, ModelProperty } from '@hypertrace/hyperdash'; +import { TableDataSource, TableRow } from '@hypertrace/components'; +import { ArrayPropertyTypeInstance } from '@hypertrace/dashboards'; +import { ARRAY_PROPERTY, Model, ModelApi, ModelProperty, ModelPropertyType } from '@hypertrace/hyperdash'; import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; import { NEVER, Observable } from 'rxjs'; import { TableWidgetRowSelectionModel } from './selections/table-widget-row-selection.model'; import { TableWidgetBaseModel } from './table-widget-base.model'; import { TableWidgetCheckboxFilterModel } from './table-widget-checkbox-filter-model'; import { SpecificationBackedTableColumnDef } from './table-widget-column.model'; +import { TableWidgetSelectFilterModel } from './table-widget-select-filter.model'; +import { TableWidgetViewModel } from './table-widget-view.model'; import { TableWidgetModel } from './table-widget.model'; @Model({ - type: 'mode-toggle-table-widget', - displayName: 'Mode Toggle Table Widget' + type: 'table-widget-view-toggle' }) -export class ModeToggleTableWidgetModel extends TableWidgetBaseModel { +export class TableWidgetViewToggleModel extends TableWidgetBaseModel { @ModelProperty({ - key: 'modeOptions', - displayName: 'Modes Toggle Options', + key: 'views', // tslint:disable-next-line: no-object-literal-type-assertion type: { key: ARRAY_PROPERTY.type, subtype: { - key: ENUM_TYPE.type, - values: [TableMode.Flat, TableMode.Tree, TableMode.Detail] + key: ModelPropertyType.TYPE, + defaultModelClass: TableWidgetViewModel } } as ArrayPropertyTypeInstance }) - public modeOptions: TableMode[] = []; - - @ModelProperty({ - key: 'flat', - type: ModelTemplatePropertyType.TYPE - }) - public flat!: ModelJson; - - @ModelProperty({ - key: 'tree', - type: ModelTemplatePropertyType.TYPE - }) - public tree!: ModelJson; - - @ModelProperty({ - key: 'detail', - type: ModelTemplatePropertyType.TYPE - }) - public detail!: ModelJson; + public views: TableWidgetViewModel[] = []; @ModelInject(MODEL_API) protected readonly api!: ModelApi; private delegateModel?: TableWidgetModel; - public setMode(mode: TableMode): void { + public setView(view: string): void { if (this.delegateModel) { this.api.destroyChild(this.delegateModel); } - this.delegateModel = this.createDelegate(mode); + this.delegateModel = this.createDelegate(view); } - public getModeOptions(): TableMode[] { - return this.modeOptions; + public getViewOptions(): string[] { + return this.views.map(v => v.view); } - private createDelegate(mode: TableMode): TableWidgetModel | undefined { - switch (mode) { - case TableMode.Detail: - return this.api.createChild(this.detail); - case TableMode.Tree: - return this.api.createChild(this.tree); - case TableMode.Flat: - return this.api.createChild(this.flat); - default: - return undefined; - } + private createDelegate(view: string): TableWidgetModel | undefined { + const found = this.views.find(v => v.view.toLowerCase() === view.toLowerCase()); + + return found ? this.api.createChild(found.template) : undefined; } public getData(): Observable> { @@ -93,7 +68,15 @@ export class ModeToggleTableWidgetModel extends TableWidgetBaseModel { : []; } + public getSearchAttribute(): string | undefined { + return this.delegateModel?.getSearchAttribute() ?? this.searchAttribute; + } + public getCheckboxFilterOption(): TableWidgetCheckboxFilterModel | undefined { return this.delegateModel?.getCheckboxFilterOption() ?? this.checkboxFilterOption; } + + public getSelectFilterOptions(): TableWidgetSelectFilterModel[] { + return this.delegateModel?.getSelectFilterOptions() ?? this.selectFilterOptions; + } } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts new file mode 100644 index 000000000..5de9aeae8 --- /dev/null +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts @@ -0,0 +1,18 @@ +import { ModelTemplatePropertyType } from '@hypertrace/dashboards'; +import { Model, ModelJson, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; +@Model({ + type: 'table-widget-view' +}) +export class TableWidgetViewModel { + @ModelProperty({ + key: 'view', + type: STRING_PROPERTY.type + }) + public view!: string; + + @ModelProperty({ + key: 'template', + type: ModelTemplatePropertyType.TYPE + }) + public template!: ModelJson; +} diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget.module.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget.module.ts index 072e3f2fc..5bf017ee9 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget.module.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget.module.ts @@ -11,12 +11,13 @@ import { import { WidgetHeaderModel } from '@hypertrace/dashboards'; import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; import { TracingTableCellRendererModule } from '../../../components/table/tracing-table-cell-renderer.module'; -import { ModeToggleTableWidgetModel } from './mode-toggle-table-widget.model'; import { TableWidgetRowSelectionModel } from './selections/table-widget-row-selection.model'; import { TableWidgetCheckboxFilterModel } from './table-widget-checkbox-filter-model'; import { TableWidgetColumnModel } from './table-widget-column.model'; import { TableWidgetRendererComponent } from './table-widget-renderer.component'; import { TableWidgetSelectFilterModel } from './table-widget-select-filter.model'; +import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model'; +import { TableWidgetViewModel } from './table-widget-view.model'; import { TableWidgetModel } from './table-widget.model'; @NgModule({ @@ -30,7 +31,8 @@ import { TableWidgetModel } from './table-widget.model'; TableWidgetCheckboxFilterModel, TableWidgetSelectFilterModel, WidgetHeaderModel, - ModeToggleTableWidgetModel + TableWidgetViewToggleModel, + TableWidgetViewModel ], renderers: [TableWidgetRendererComponent], propertyTypes: [] diff --git a/projects/observability/src/pages/apis/services/service-list.dashboard.ts b/projects/observability/src/pages/apis/services/service-list.dashboard.ts index 8c18dda00..9839fd346 100644 --- a/projects/observability/src/pages/apis/services/service-list.dashboard.ts +++ b/projects/observability/src/pages/apis/services/service-list.dashboard.ts @@ -1,88 +1,99 @@ -import { CoreTableCellRendererType, TableSortDirection } from '@hypertrace/components'; +import { CoreTableCellRendererType, TableMode, TableSortDirection, TableStyle } 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: 'container-widget', + layout: { + type: 'auto-container-layout', + 'enable-style': false + }, + children: [ { - 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' + type: 'table-widget', + id: 'service-list.table', + mode: TableMode.Flat, + style: TableStyle.FullPage, + 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' } } - ], - data: { - type: 'entity-table-data-source', - entity: 'SERVICE' - } + ] } }; From 3aca70e40c6a9b97a02979d44d43fb717470f02a Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Fri, 22 Jan 2021 16:39:51 -0800 Subject: [PATCH 2/4] fix: add mode change and some other clean up --- .../widgets/table/table-widget-renderer.component.ts | 9 +++++++-- .../dashboard/widgets/table/table-widget-view.model.ts | 1 + .../endpoint-detail/endpoint-detail-routing.module.ts} | 2 +- src/app/routes/endpoints/endpoint-routing.module.ts | 2 +- src/app/routes/services/services-routing.module.ts | 2 +- 5 files changed, 11 insertions(+), 5 deletions(-) rename src/app/routes/{api-detail/api-detail-routing.module.ts => endpoints/endpoint-detail/endpoint-detail-routing.module.ts} (95%) diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 2f7d2906b..fbb6a2464 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -16,7 +16,7 @@ import { StatefulTableRow, TableColumnConfig, TableDataSource, - TableFilter, + TableFilter, TableMode, TableRow, TableSelectionMode, TableStyle, @@ -123,6 +123,8 @@ export class TableWidgetRendererComponent public ngOnInit(): void { super.ngOnInit(); + this.onModeChange(this.model.mode); + this.metadata$ = this.getScopeAttributes(); this.columnConfigs$ = (isNonEmptyString(this.model.id) ? this.preferenceService.get(this.model.id, []) @@ -325,8 +327,11 @@ export class TableWidgetRendererComponent this.searchFilterSubject.next([searchFilter]); } + public onModeChange(mode: TableMode): void { + this.activeMode = mode; + } + public onViewChange(view: string): void { - this.activeMode = view; this.model.setView(view); this.columnConfigs$ = this.getColumnConfigs(); } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts index 5de9aeae8..d0bb5b658 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts @@ -1,5 +1,6 @@ import { ModelTemplatePropertyType } from '@hypertrace/dashboards'; import { Model, ModelJson, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; + @Model({ type: 'table-widget-view' }) diff --git a/src/app/routes/api-detail/api-detail-routing.module.ts b/src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts similarity index 95% rename from src/app/routes/api-detail/api-detail-routing.module.ts rename to src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts index ce196f185..f7d44df97 100644 --- a/src/app/routes/api-detail/api-detail-routing.module.ts +++ b/src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts @@ -39,4 +39,4 @@ const ROUTE_CONFIG: TraceRoute[] = [ @NgModule({ imports: [RouterModule.forChild(ROUTE_CONFIG), ApiDetailModule] }) -export class ApiDetailRoutingModule {} +export class EndpointDetailRoutingModule {} diff --git a/src/app/routes/endpoints/endpoint-routing.module.ts b/src/app/routes/endpoints/endpoint-routing.module.ts index 5075d7709..549aec589 100644 --- a/src/app/routes/endpoints/endpoint-routing.module.ts +++ b/src/app/routes/endpoints/endpoint-routing.module.ts @@ -18,7 +18,7 @@ const ROUTE_CONFIG: TraceRoute[] = [ resolve: { breadcrumb: ApiDetailBreadcrumbResolver }, - loadChildren: () => import('../api-detail/api-detail-routing.module').then(module => module.ApiDetailRoutingModule) + loadChildren: () => import('./endpoint-detail/endpoint-detail-routing.module').then(module => module.EndpointDetailRoutingModule) } ]; diff --git a/src/app/routes/services/services-routing.module.ts b/src/app/routes/services/services-routing.module.ts index 3fa3de0bb..4e7e2b301 100644 --- a/src/app/routes/services/services-routing.module.ts +++ b/src/app/routes/services/services-routing.module.ts @@ -28,7 +28,7 @@ const ROUTE_CONFIG: TraceRoute[] = [ resolve: { breadcrumb: ApiDetailBreadcrumbResolver }, - loadChildren: () => import('../api-detail/api-detail-routing.module').then(module => module.ApiDetailRoutingModule) + loadChildren: () => import('../endpoints/endpoint-detail/endpoint-detail-routing.module').then(module => module.EndpointDetailRoutingModule) } ]; From 3e3efe2340d969d0a02645c87efb40e759bcaa07 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Fri, 22 Jan 2021 16:48:52 -0800 Subject: [PATCH 3/4] fix: prettier --- .../widgets/table/table-widget-renderer.component.ts | 3 ++- src/app/routes/endpoints/endpoint-routing.module.ts | 3 ++- src/app/routes/services/services-routing.module.ts | 5 ++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index fbb6a2464..54158a889 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -16,7 +16,8 @@ import { StatefulTableRow, TableColumnConfig, TableDataSource, - TableFilter, TableMode, + TableFilter, + TableMode, TableRow, TableSelectionMode, TableStyle, diff --git a/src/app/routes/endpoints/endpoint-routing.module.ts b/src/app/routes/endpoints/endpoint-routing.module.ts index 549aec589..3fb85cf2e 100644 --- a/src/app/routes/endpoints/endpoint-routing.module.ts +++ b/src/app/routes/endpoints/endpoint-routing.module.ts @@ -18,7 +18,8 @@ const ROUTE_CONFIG: TraceRoute[] = [ resolve: { breadcrumb: ApiDetailBreadcrumbResolver }, - loadChildren: () => import('./endpoint-detail/endpoint-detail-routing.module').then(module => module.EndpointDetailRoutingModule) + loadChildren: () => + import('./endpoint-detail/endpoint-detail-routing.module').then(module => module.EndpointDetailRoutingModule) } ]; diff --git a/src/app/routes/services/services-routing.module.ts b/src/app/routes/services/services-routing.module.ts index 4e7e2b301..14c930e50 100644 --- a/src/app/routes/services/services-routing.module.ts +++ b/src/app/routes/services/services-routing.module.ts @@ -28,7 +28,10 @@ const ROUTE_CONFIG: TraceRoute[] = [ resolve: { breadcrumb: ApiDetailBreadcrumbResolver }, - loadChildren: () => import('../endpoints/endpoint-detail/endpoint-detail-routing.module').then(module => module.EndpointDetailRoutingModule) + loadChildren: () => + import('../endpoints/endpoint-detail/endpoint-detail-routing.module').then( + module => module.EndpointDetailRoutingModule + ) } ]; From da3c216e048169aac72187aa1e0cf1a0c5cf3c8d Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Mon, 25 Jan 2021 13:06:56 -0800 Subject: [PATCH 4/4] fix: naming and removed trivial method --- .../widgets/table/table-widget-renderer.component.ts | 10 +--------- .../widgets/table/table-widget-view-toggle.model.ts | 4 ++-- .../dashboard/widgets/table/table-widget-view.model.ts | 4 ++-- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 54158a889..ae293cdbe 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -17,7 +17,6 @@ import { TableColumnConfig, TableDataSource, TableFilter, - TableMode, TableRow, TableSelectionMode, TableStyle, @@ -72,7 +71,7 @@ import { TableWidgetModel } from './table-widget.model'; [ngClass]="{ 'header-margin': this.model.header?.topMargin }" [columnConfigs]="this.columnConfigs$ | async" [metadata]="this.metadata$ | async" - [mode]="this.activeMode" + [mode]="this.model.mode" [selectionMode]="this.model.getSelectionMode()" [display]="this.model.style" [data]="this.data$ | async" @@ -97,7 +96,6 @@ export class TableWidgetRendererComponent implements OnInit { public filterItems: ToggleItem[] = []; public viewItems: ToggleItem[] = []; - public activeMode!: string; public selectFilterItems$!: Observable; @@ -124,8 +122,6 @@ export class TableWidgetRendererComponent public ngOnInit(): void { super.ngOnInit(); - this.onModeChange(this.model.mode); - this.metadata$ = this.getScopeAttributes(); this.columnConfigs$ = (isNonEmptyString(this.model.id) ? this.preferenceService.get(this.model.id, []) @@ -328,10 +324,6 @@ export class TableWidgetRendererComponent this.searchFilterSubject.next([searchFilter]); } - public onModeChange(mode: TableMode): void { - this.activeMode = mode; - } - public onViewChange(view: string): void { this.model.setView(view); this.columnConfigs$ = this.getColumnConfigs(); diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts index 86f198d3e..bd1eee9af 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts @@ -41,11 +41,11 @@ export class TableWidgetViewToggleModel extends TableWidgetBaseModel { } public getViewOptions(): string[] { - return this.views.map(v => v.view); + return this.views.map(v => v.label); } private createDelegate(view: string): TableWidgetModel | undefined { - const found = this.views.find(v => v.view.toLowerCase() === view.toLowerCase()); + const found = this.views.find(v => v.label.toLowerCase() === view.toLowerCase()); return found ? this.api.createChild(found.template) : undefined; } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts index d0bb5b658..ec0ab1ada 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view.model.ts @@ -6,10 +6,10 @@ import { Model, ModelJson, ModelProperty, STRING_PROPERTY } from '@hypertrace/hy }) export class TableWidgetViewModel { @ModelProperty({ - key: 'view', + key: 'label', type: STRING_PROPERTY.type }) - public view!: string; + public label!: string; @ModelProperty({ key: 'template',