Summary list clickable

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;
 }

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;
       }

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']);
   });
 });

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';
         <ht-label class="summary-value-title" [label]="this.getFormattedLabel(item.label)"></ht-label>
         <ul class="summary-value-list">
           <li class="summary-value" *ngIf="this.getValuesArray(item.value).length === 0">None</li>
-          <li class="summary-value" *ngFor="let value of this.getValuesArray(item.value)">{{ value }}</li>
+          <li
+            class="summary-value"
+            [class.clickable]="item.clickable"
+            *ngFor="let value of this.getValuesArray(item.value)"
+            (click)="this.itemClick.emit(item)"
+          >
+            {{ value }}
+          </li>
         </ul>
       </ng-container>
     </div>
@@ -34,6 +41,9 @@ export class SummaryListComponent {
   @Input()
   public items?: SummaryItem[] = [];
 
+  @Output()
+  public readonly itemClick: EventEmitter<SummaryItem> = new EventEmitter();
+
   public getFormattedLabel(label: string): string {
     return startCase(label.toLowerCase());
   }

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

@@ -31,7 +31,7 @@ import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableCont
         <ht-search-box
           *ngIf="this.searchEnabled"
           class="control search-box"
-          [placeholder]="this.searchPlaceholder"
+          [placeholder]="this.searchPlaceholder || this.DEFAULT_SEARCH_PLACEHOLDER"
           (valueChange)="this.onSearchChange($event)"
         ></ht-search-box>
 
@@ -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[] = [];

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;
   }

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

@@ -55,6 +55,7 @@ import { TableWidgetModel } from './table-widget.model';
         <ht-table-controls
           class="table-controls"
           [searchEnabled]="!!this.api.model.getSearchAttribute()"
+          [searchPlaceholder]="this.api.model.getSearchPlaceholder()"
           [selectControls]="this.selectControls$ | async"
           [checkboxControls]="this.checkboxControls$ | async"
           [viewItems]="this.viewItems"

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

@@ -83,6 +83,10 @@ export class TableWidgetViewToggleModel extends TableWidgetModel implements Mode
     return this.delegateModel?.getSearchAttribute() ?? this.searchAttribute;
   }
 
+  public getSearchPlaceholder(): string | undefined {
+    return this.delegateModel?.getSearchPlaceholder() ?? this.searchPlaceholder;
+  }
+
   public getCheckboxControlOptions(): TableWidgetControlCheckboxOptionModel[] {
     return this.delegateModel?.getCheckboxControlOptions() ?? this.checkboxOptions;
   }