hypertrace · jake-bassett · Feb 18, 2021 · Feb 17, 2021 · Feb 18, 2021 · Feb 18, 2021
@@ -5,7 +5,7 @@ import { DateFormatOptions, DateFormatter } from './date-formatter';
   name: 'htDisplayDate'
 })
 export class DisplayDatePipe implements PipeTransform {
-  public transform(value?: Date | number, options: DateFormatOptions = {}): string {
-    return new DateFormatter(options).format(value);
+  public transform(value?: Date | number | null, options: DateFormatOptions = {}): string {
+    return value !== null ? new DateFormatter(options).format(value) : '-';
   }
 }
@@ -9,6 +9,10 @@ export class DisplayNumberPipe implements PipeTransform {
   private static readonly FLOAT_FORMATTER: NumericFormatter = floatFormatter;
 
   public transform(value: unknown, style: FormatterStyle = FormatterStyle.Auto): string {
+    if (value === null) {
+      return '-';
+    }
+
     const valueAsNumber = Number(value);
     if (isNaN(valueAsNumber)) {
       return '-';

@@ -15,7 +15,7 @@ describe('String formatter', () => {
 
   test('can convert to display string', () => {
     // tslint:disable-next-line: no-null-keyword
-    expect(displayString(null)).toBe('Unknown');
+    expect(displayString(null)).toBe('-');
     expect(displayString(undefined)).toBe('Unknown');
     expect(displayString('')).toBe('Unknown');
     expect(displayString('value')).toBe('value');

@@ -13,6 +13,10 @@ export const titleCaseFromSnakeCase = (snakeCaseString: string): string =>
     .join(' ');
 
 export const displayString = (provided?: unknown): string => {
+  if (provided === null) {
+    return '-';
+  }
+
   switch (typeof provided) {
     case 'object':
       return Array.isArray(provided)

@@ -15,7 +15,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
       class="text-cell"
       [htTooltip]="this.value"
     >
-      {{ this.value }}
+      {{ this.value | htDisplayString }}
     </div>
   `
 })

@@ -33,11 +33,11 @@ export const enum TableControlOptionType {
 export interface TableControlOption<TMetaValue = unknown, TValue = unknown> {
   type: TableControlOptionType;
   label: string;
-  metaValue: TMetaValue; // Used in a query - type based on TableWidgetControlOptionType
+  metaValue: TMetaValue; // Used in a query - type based on TableControlOptionType
   value?: TValue; // If a control needs to carry a value, use this (example: checkbox boolean)
 }
 
-export interface TableUnsetControlOption extends TableControlOption<string, undefined> {
+export interface TableUnsetFilterControlOption extends TableControlOption<string, undefined> {
   type: TableControlOptionType.UnsetFilter;
   metaValue: string;
 }

@@ -13,6 +13,8 @@ import { SubscriptionLifecycle, TypedSimpleChanges } from '@hypertrace/common';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { IconSize } from '../../icon/icon-size';
+import { MultiSelectJustify } from '../../multi-select/multi-select-justify';
+import { TriggerLabelDisplayMode } from '../../multi-select/multi-select.component';
 import { ToggleItem } from '../../toggle-group/toggle-item';
 import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableControlOption } from './table-controls-api';
 
@@ -55,6 +57,8 @@ import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableCont
         <ht-multi-select
           class="filter-multi-select"
           *ngIf="this.checkboxControlsEnabled"
+          justify="${MultiSelectJustify.Center}"
+          triggerLabelDisplayMode="${TriggerLabelDisplayMode.Icon}"
           icon="${IconType.Settings}"
           iconSize="${IconSize.Large}"
           [selected]="this.checkboxSelections"

@@ -17,6 +17,7 @@ export interface TableDataRequest<TCol extends TableColumnConfig = TableColumnCo
     direction: TableSortDirection;
   };
   filters?: TableFilter[];
+  includeInactive?: boolean;
 }
 
 export interface TableDataResponse<TData> {

@@ -12,7 +12,7 @@ import { ContainerLayout } from './layout/container-layout';
 @Model({
   type: 'container-widget'
 })
-export class ContainerWidgetModel {
+export class ContainerWidgetModel<TChild = object> {
   @ModelProperty({
     type: STRING_PROPERTY.type,
     key: 'title',
@@ -24,7 +24,7 @@ export class ContainerWidgetModel {
     type: ARRAY_PROPERTY.type,
     key: 'children'
   })
-  public children: object[] = [];
+  public children: TChild[] = [];
 
   @ModelProperty({
     // tslint:disable-next-line: no-object-literal-type-assertion

@@ -20,6 +20,7 @@ export * from './shared/dashboard/data/graphql/filter/graphql-filter-data-source
 export * from './shared/dashboard/data/graphql/filter/graphql-filter-data-source.model';
 export * from './shared/dashboard/data/graphql/graphql-table-control-options-data-source.model';
 export * from './shared/dashboard/data/graphql/graphql-data-source.model';
+export * from './shared/dashboard/data/graphql/graphql-table-control-options-data-source.model';
 export * from './shared/dashboard/data/graphql/graphql-query-event.service';
 export * from './shared/dashboard/data/graphql/graphql-data-source.module';
 export * from './shared/dashboard/data/graphql/specifiers/attribute-specification.model';

@@ -5,25 +5,27 @@ import { TracingTableCellType } from '../../tracing-table-cell-type';
 @TableCellParser({
   type: TracingTableCellType.Metric
 })
-export class MetricTableCellParser extends TableCellParserBase<number, number, number> {
-  public parseValue(cellData: CellData): number {
-    return Math.round(this.extractValue(cellData)!);
+export class MetricTableCellParser extends TableCellParserBase<number, CellValue, CellValue> {
+  public parseValue(cellData: CellData): CellValue {
+    const extractedValue = this.extractValue(cellData);
+
+    return extractedValue === undefined ? extractedValue : Math.round(extractedValue);
   }
 
-  public parseFilterValue(cellData: number): number {
+  public parseFilterValue(cellData: number): CellValue {
     return this.parseValue(cellData);
   }
 
   public parseUnits(cellData: CellData): string {
     return this.extractUnits(cellData)!;
   }
 
-  private extractValue(cellData: CellData): number | undefined {
+  private extractValue(cellData: CellData): CellValue {
     switch (typeof cellData) {
       case 'number':
         return cellData;
       case 'object':
-        return cellData.value;
+        return cellData === null ? undefined : cellData.value;
       default:
         return undefined;
     }
@@ -34,11 +36,12 @@ export class MetricTableCellParser extends TableCellParserBase<number, number, n
       case 'number':
         return undefined;
       case 'object':
-        return cellData.units;
+        return cellData === null ? undefined : cellData.units;
       default:
         return undefined;
     }
   }
 }
 
-type CellData = number | Partial<MetricAggregation>;
+type CellData = number | null | Partial<MetricAggregation>;
+type CellValue = number | undefined;
@@ -24,7 +24,8 @@ import { TracingTableCellType } from '../../tracing-table-cell-type';
     <div class="metric-cell" [htTooltip]="this.tooltip">
       <!-- This displays as "<value> <unit>", e.g. 120 ms -->
       <span
-        >{{ this.value | htDisplayNumber: this.formatter }} <span *ngIf="this.units">{{ this.units }}</span></span
+        >{{ this.value | htDisplayNumber: this.formatter }}
+        <span *ngIf="this.value !== undefined && this.units">{{ this.units }}</span></span
       >
     </div>
   `

@@ -11,6 +11,7 @@ import { EntityNavigationService } from '../../services/navigation/entity/entity
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div
+      *ngIf="this.name"
       class="ht-entity-renderer"
       [ngClass]="{ navigable: this.navigable }"
       [htTooltip]="this.name"
@@ -24,6 +25,7 @@ import { EntityNavigationService } from '../../services/navigation/entity/entity
       ></ht-icon>
       <div class="name" *ngIf="this.name" data-sensitive-pii>{{ this.name }}</div>
     </div>
+    <div *ngIf="!this.name">-</div>
   `
 })
 export class EntityRendererComponent implements OnChanges {

@@ -3,7 +3,7 @@ import {
   TableControlOption,
   TableControlOptionType,
   TableFilter,
-  TableUnsetControlOption
+  TableUnsetFilterControlOption
 } from '@hypertrace/components';
 import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
@@ -21,7 +21,7 @@ export class EntitiesAttributeOptionsDataSourceModel extends EntitiesAttributeDa
   })
   public unsetLabel: string = 'All';
 
-  private buildUnsetOption(attribute: string): TableUnsetControlOption {
+  private buildUnsetOption(attribute: string): TableUnsetFilterControlOption {
     return {
       type: TableControlOptionType.UnsetFilter,
       label: this.unsetLabel,

@@ -73,7 +73,8 @@ export class EntityTableDataSourceModel extends TableDataSourceModel {
       },
       filters: [...filters, ...this.toGraphQlFilters(request.filters)],
       timeRange: this.getTimeRangeOrThrow(),
-      includeTotal: true
+      includeTotal: true,
+      includeInactive: request.includeInactive
     };
   }