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';
- None
- - {{ value }}
+ -
+ {{ value }}
+
@@ -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';