diff --git a/projects/components/src/summary-list/summary-list-api.ts b/projects/components/src/summary-list/summary-list-api.ts index 090d205b6..570fdb231 100644 --- a/projects/components/src/summary-list/summary-list-api.ts +++ b/projects/components/src/summary-list/summary-list-api.ts @@ -3,4 +3,5 @@ import { PrimitiveValue } from '@hypertrace/common'; export interface SummaryItem { label: string; value: PrimitiveValue | PrimitiveValue[]; + clickable?: boolean; } diff --git a/projects/components/src/summary-list/summary-list.component.scss b/projects/components/src/summary-list/summary-list.component.scss index fb2609b8b..c218129e6 100644 --- a/projects/components/src/summary-list/summary-list.component.scss +++ b/projects/components/src/summary-list/summary-list.component.scss @@ -35,6 +35,10 @@ @include body-2-regular($gray-7); padding-top: 3px; + &.clickable { + @include link(); + } + &:first-child { padding-top: 6px; } diff --git a/projects/components/src/summary-list/summary-list.component.test.ts b/projects/components/src/summary-list/summary-list.component.test.ts index 762ce8894..7a30cf2f8 100644 --- a/projects/components/src/summary-list/summary-list.component.test.ts +++ b/projects/components/src/summary-list/summary-list.component.test.ts @@ -73,7 +73,7 @@ describe('Summary List component', () => { }); test('gets value array', () => { - const values = spectator.queryAll('li').map(e => e.textContent); + const values = spectator.queryAll('li').map(e => e.textContent?.trim()); expect(values).toEqual(['0', '0', '1', '2', 'zero', 'zero', 'one', 'two', 'three', 'true', 'true', 'false']); }); }); diff --git a/projects/components/src/summary-list/summary-list.component.ts b/projects/components/src/summary-list/summary-list.component.ts index 6b9cc8785..5ca502abd 100644 --- a/projects/components/src/summary-list/summary-list.component.ts +++ b/projects/components/src/summary-list/summary-list.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; import { PrimitiveValue } from '@hypertrace/common'; import { startCase } from 'lodash-es'; @@ -18,7 +18,14 @@ import { SummaryItem } from './summary-list-api'; @@ -34,6 +41,9 @@ export class SummaryListComponent { @Input() public items?: SummaryItem[] = []; + @Output() + public readonly itemClick: EventEmitter = new EventEmitter(); + public getFormattedLabel(label: string): string { return startCase(label.toLowerCase()); } @@ -41,4 +51,8 @@ export class SummaryListComponent { public getValuesArray(value: PrimitiveValue | PrimitiveValue[]): PrimitiveValue[] { return Array.isArray(value) ? value : [value]; } + + public onItemCLick(item: SummaryItem): void { + item.clickable && this.itemClick.emit(item); + } } diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts index 5b55b9c08..7bae09da2 100644 --- a/projects/components/src/table/controls/table-controls.component.ts +++ b/projects/components/src/table/controls/table-controls.component.ts @@ -31,7 +31,7 @@ import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableCont @@ -85,11 +85,12 @@ import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableCont ` }) export class TableControlsComponent implements OnChanges { + public readonly DEFAULT_SEARCH_PLACEHOLDER: string = 'Search...'; @Input() public searchEnabled?: boolean; @Input() - public searchPlaceholder?: string = 'Search...'; + public searchPlaceholder?: string; @Input() public selectControls?: SelectControl[] = []; 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 6091933cc..ac304ece7 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 @@ -48,6 +48,13 @@ export abstract class TableWidgetBaseModel extends BaseModel { }) public searchAttribute?: string; + @ModelProperty({ + key: 'search-placeholder', + displayName: 'Search Placeholder', + type: STRING_PROPERTY.type + }) + public searchPlaceholder?: string; + @ModelProperty({ key: 'select-control-options', displayName: 'Select Options', @@ -139,6 +146,10 @@ export abstract class TableWidgetBaseModel extends BaseModel { return this.searchAttribute; } + public getSearchPlaceholder(): string | undefined { + return this.searchPlaceholder; + } + public getSelectControlOptions(): TableWidgetControlSelectOptionModel[] { return this.selectOptions; } 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 6e372458c..07b7e40db 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 @@ -55,6 +55,7 @@ import { TableWidgetModel } from './table-widget.model';