Merge branch 'main' into d3-zoom-refactor

anandtiwary · web-flow · commit 9d92fa64dfc4 · 2021-02-18T13:32:45.000-08:00
diff --git a/projects/assets-library/assets/icons/sort.svg b/projects/assets-library/assets/icons/sort.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="48px" height="48px">
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" fill="currentColor"/>
+</svg>
diff --git a/projects/assets-library/src/icons/icon-library.module.ts b/projects/assets-library/src/icons/icon-library.module.ts
@@ -66,6 +66,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.Search, url: `${iconsRootPath}/search.svg` },
         { key: IconType.SidebarCollapse, url: `${iconsRootPath}/sidebar-collapse.svg` },
         { key: IconType.SidebarExpand, url: `${iconsRootPath}/sidebar-expand.svg` },
+        { key: IconType.Sort, url: `${iconsRootPath}/sort.svg` },
         { key: IconType.Slack, url: `${iconsRootPath}/slack.svg` },
         { key: IconType.Spinner, url: `${iconsRootPath}/spinner.svg` },
         { key: IconType.StatusCode, url: `${iconsRootPath}/status-code.svg` },
diff --git a/projects/assets-library/src/icons/icon-type.ts b/projects/assets-library/src/icons/icon-type.ts
@@ -87,6 +87,7 @@ export const enum IconType {
   SidebarCollapse = 'svg:sidebar-collapse',
   SidebarExpand = 'svg:sidebar-expand',
   Slack = 'svg:slack',
+  Sort = 'svg:sort',
   SpanId = 'bookmark_border',
   Spinner = 'svg:spinner',
   StatusCode = 'svg:status-code',
diff --git a/projects/common/src/utilities/formatters/date/display-date.pipe.ts b/projects/common/src/utilities/formatters/date/display-date.pipe.ts
@@ -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) : '-';
   }
 }
diff --git a/projects/common/src/utilities/formatters/numeric/display-number.pipe.ts b/projects/common/src/utilities/formatters/numeric/display-number.pipe.ts
@@ -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 '-';
diff --git a/projects/common/src/utilities/formatters/string/string-formatter.test.ts b/projects/common/src/utilities/formatters/string/string-formatter.test.ts
@@ -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');
diff --git a/projects/common/src/utilities/formatters/string/string-formatter.ts b/projects/common/src/utilities/formatters/string/string-formatter.ts
@@ -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)
diff --git a/projects/components/src/breadcrumbs/breadcrumbs.component.scss b/projects/components/src/breadcrumbs/breadcrumbs.component.scss
@@ -3,7 +3,6 @@
 .breadcrumbs {
   .breadcrumb-section {
     display: flex;
-    padding-bottom: 12px;
 
     .breadcrumb {
       @include body-small($blue-5);
diff --git a/projects/components/src/copy-shareable-link-to-clipboard/copy-shareable-link-to-clipboard.component.ts b/projects/components/src/copy-shareable-link-to-clipboard/copy-shareable-link-to-clipboard.component.ts
@@ -10,11 +10,12 @@ import { ButtonSize } from '../button/button';
   styleUrls: ['./copy-shareable-link-to-clipboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="shareable-link" htTooltip="Copy shareable url link to clipboard">
+    <div class="shareable-link">
       <ht-copy-to-clipboard
         [size]="this.size"
         icon="${IconType.Share}"
         [text]="this.shareableUrl$ | async"
+        tooltip="Copy shareable url link to clipboard"
       ></ht-copy-to-clipboard>
     </div>
   `
diff --git a/projects/components/src/select/select-option.component.ts b/projects/components/src/select/select-option.component.ts
@@ -15,6 +15,9 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   @Input()
   public label!: string;
 
+  @Input()
+  public selectedLabel?: string;
+
   @Input()
   public style: SelectOptionStyle = SelectOptionStyle.Default;
 
diff --git a/projects/components/src/select/select-option.ts b/projects/components/src/select/select-option.ts
@@ -1,6 +1,7 @@
 export interface SelectOption<V> {
   value: V;
   label: string;
+  selectedLabel?: string;
   icon?: string;
   iconColor?: string;
 }
diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts
@@ -27,10 +27,10 @@ describe('Select Component', () => {
   const selectionOptions = [
     { label: 'first', value: 'first-value' },
     { label: 'second', value: 'second-value' },
-    { label: 'third', value: 'third-value' }
+    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!' }
   ];
 
-  test('should display intial selection', fakeAsync(() => {
+  test('should display initial selection', fakeAsync(() => {
     spectator = hostFactory(
       `
     <ht-select [selected]="selected">
@@ -127,7 +127,7 @@ describe('Select Component', () => {
     spectator = hostFactory(
       `
     <ht-select [selected]="selected" (selectedChange)="onChange($event)">
-      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [selectedLabel]="option.selectedLabel">
       </ht-select-option>
     </ht-select>`,
       {
@@ -140,14 +140,15 @@ describe('Select Component', () => {
     );
 
     spectator.tick();
+    expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[1].label);
     spectator.click('.trigger-content');
 
     const optionElements = spectator.queryAll('.select-option', { root: true });
     spectator.click(optionElements[2]);
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(selectionOptions[2].value);
-    expect(spectator.element).toHaveText(selectionOptions[2].label);
+    expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[2].selectedLabel!);
     flush();
   }));
 
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
@@ -54,7 +54,8 @@ import { SelectSize } from './select-size';
             >
               <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize">
               </ht-icon>
-              <ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
+              <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
+              </ht-label>
               <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
             </div>
             <div
diff --git a/projects/components/src/table/cells/data-renderers/text/text-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/text/text-table-cell-renderer.component.ts
@@ -15,7 +15,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
       class="text-cell"
       [htTooltip]="this.value"
     >
-      {{ this.value }}
+      {{ this.value | htDisplayString }}
     </div>
   `
 })
diff --git a/projects/components/src/table/controls/table-controls-api.ts b/projects/components/src/table/controls/table-controls-api.ts
@@ -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;
 }
diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
@@ -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"
diff --git a/projects/components/src/table/data/table-data-source.ts b/projects/components/src/table/data/table-data-source.ts
@@ -17,6 +17,7 @@ export interface TableDataRequest<TCol extends TableColumnConfig = TableColumnCo
     direction: TableSortDirection;
   };
   filters?: TableFilter[];
+  includeInactive?: boolean;
 }
 
 export interface TableDataResponse<TData> {
diff --git a/projects/dashboards/src/widgets/container/container-widget.model.ts b/projects/dashboards/src/widgets/container/container-widget.model.ts
@@ -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
diff --git a/projects/distributed-tracing/src/public-api.ts b/projects/distributed-tracing/src/public-api.ts
@@ -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';
diff --git a/projects/distributed-tracing/src/shared/components/table/data-cell/metric/metric-table-cell-parser.ts b/projects/distributed-tracing/src/shared/components/table/data-cell/metric/metric-table-cell-parser.ts
@@ -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;
diff --git a/projects/distributed-tracing/src/shared/components/table/data-cell/metric/metric-table-cell-renderer.component.ts b/projects/distributed-tracing/src/shared/components/table/data-cell/metric/metric-table-cell-renderer.component.ts
@@ -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>
   `
diff --git a/projects/distributed-tracing/src/shared/dashboard/dashboard-wrapper/navigable-dashboard.component.ts b/projects/distributed-tracing/src/shared/dashboard/dashboard-wrapper/navigable-dashboard.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { TypedSimpleChanges } from '@hypertrace/common';
+import { Dictionary, TypedSimpleChanges } from '@hypertrace/common';
 import { Filter } from '@hypertrace/components';
 import { DashboardPersistenceService } from '@hypertrace/dashboards';
 import { Dashboard, ModelJson } from '@hypertrace/hyperdash';
@@ -37,10 +37,13 @@ import { GraphQlFilterDataSourceModel } from '../data/graphql/filter/graphql-fil
 })
 export class NavigableDashboardComponent implements OnChanges {
   @Input()
-  public readonly defaultJson?: ModelJson;
+  public navLocation?: string | null;
 
   @Input()
-  public navLocation?: string | null;
+  public defaultJson?: ModelJson;
+
+  @Input()
+  public variables?: Dictionary<unknown>;
 
   @Input()
   public filterConfig?: NavigableDashboardFilterConfig;
@@ -89,6 +92,7 @@ export class NavigableDashboardComponent implements OnChanges {
 
   public onDashboardReady(dashboard: Dashboard): void {
     this.dashboard = dashboard;
+    this.applyVariablesToDashboard(this.dashboard, this.variables);
     this.applyFiltersToDashboard(dashboard, this.explicitFilters);
     this.dashboardReady.emit(dashboard);
   }
@@ -100,6 +104,12 @@ export class NavigableDashboardComponent implements OnChanges {
     }
   }
 
+  public applyVariablesToDashboard(dashboard: Dashboard, variables: Dictionary<unknown> = {}): void {
+    for (const key of Object.keys(variables)) {
+      dashboard.setVariable(key, variables[key]);
+    }
+  }
+
   public applyFiltersToDashboard(dashboard: Dashboard, explicitFilters: Filter[]): void {
     const rootDataSource = dashboard.getRootDataSource<GraphQlFilterDataSourceModel>();
     rootDataSource
diff --git a/projects/observability/src/pages/apis/api-detail/metrics/api-metrics.component.ts b/projects/observability/src/pages/apis/api-detail/metrics/api-metrics.component.ts
@@ -3,7 +3,7 @@ import { ReplayObservable } from '@hypertrace/common';
 import { NavigableDashboardFilterConfig } from '@hypertrace/distributed-tracing';
 import { map } from 'rxjs/operators';
 import { ApiDetailService } from '../api-detail.service';
-import { apiMetricsDashboard } from './api-metrics-dashboard';
+import { apiMetricsDashboard } from './api-metrics.dashboard';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/observability/src/pages/apis/api-detail/metrics/api-metrics.dashboard.ts b/projects/observability/src/pages/apis/api-detail/metrics/api-metrics.dashboard.ts
@@ -200,6 +200,22 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
             'color-palette': RED_COLOR_PALETTE,
             'selectable-interval': true,
             'legend-position': LegendPosition.TopLeft,
+            bands: [
+              {
+                type: 'band',
+                name: 'Average Baseline',
+                'upper-bound-name': 'Average Upper Bound',
+                'lower-bound-name': 'Average Lower Bound',
+                data: {
+                  type: 'entity-metric-timeseries-data-source',
+                  metric: {
+                    type: 'metric-timeseries-band',
+                    metric: 'duration',
+                    aggregation: MetricAggregationType.Average
+                  }
+                }
+              }
+            ],
             series: [
               {
                 type: 'series',
@@ -321,6 +337,22 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                 'legend-position': LegendPosition.None,
                 'show-summary': true,
                 title: 'Error Rate',
+                bands: [
+                  {
+                    type: 'band',
+                    name: 'Baseline',
+                    'upper-bound-name': 'Upper Bound',
+                    'lower-bound-name': 'Lower Bound',
+                    data: {
+                      type: 'entity-metric-timeseries-data-source',
+                      metric: {
+                        type: 'metric-timeseries-band',
+                        metric: 'errorCount',
+                        aggregation: MetricAggregationType.AvgrateSecond
+                      }
+                    }
+                  }
+                ],
                 series: [
                   {
                     type: 'series',
diff --git a/projects/observability/src/pages/apis/api-detail/metrics/api-metrics.module.ts b/projects/observability/src/pages/apis/api-detail/metrics/api-metrics.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { FilterBarModule, LoadAsyncModule } from '@hypertrace/components';
 import { NavigableDashboardModule } from '@hypertrace/distributed-tracing';
 import { ObservabilityDashboardModule } from '../../../../shared/dashboard/observability-dashboard.module';
-import { apiMetricsDashboard } from './api-metrics-dashboard';
 import { ApiMetricsComponent } from './api-metrics.component';
+import { apiMetricsDashboard } from './api-metrics.dashboard';
 
 @NgModule({
   imports: [
diff --git a/projects/observability/src/pages/apis/api-detail/overview/api-overview.dashboard.ts b/projects/observability/src/pages/apis/api-detail/overview/api-overview.dashboard.ts
diff --git a/projects/observability/src/pages/apis/service-detail/metrics/service-metrics.component.ts b/projects/observability/src/pages/apis/service-detail/metrics/service-metrics.component.ts
diff --git a/projects/observability/src/pages/apis/service-detail/metrics/service-metrics.dashboard.ts b/projects/observability/src/pages/apis/service-detail/metrics/service-metrics.dashboard.ts
diff --git a/projects/observability/src/pages/apis/service-detail/overview/service-overview.dashboard.ts b/projects/observability/src/pages/apis/service-detail/overview/service-overview.dashboard.ts
diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts
diff --git a/projects/observability/src/shared/components/entity-renderer/entity-renderer.component.ts b/projects/observability/src/shared/components/entity-renderer/entity-renderer.component.ts
diff --git a/projects/observability/src/shared/dashboard/data/graphql/entity/attribute/entities-attribute-options-data-source.model.ts b/projects/observability/src/shared/dashboard/data/graphql/entity/attribute/entities-attribute-options-data-source.model.ts
diff --git a/projects/observability/src/shared/dashboard/data/graphql/table/entity/entity-table-data-source.model.ts b/projects/observability/src/shared/dashboard/data/graphql/table/entity/entity-table-data-source.model.ts
diff --git a/projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/cartesian-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/cartesian-widget.model.ts

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { DateFormatOptions, DateFormatter } from './date-formatter';`
`5`	`5`	`name: 'htDisplayDate'`
`6`	`6`	`})`
`7`	`7`	`export class DisplayDatePipe implements PipeTransform {`
`8`		`- public transform(value?: Date \| number, options: DateFormatOptions = {}): string {`
`9`		`- return new DateFormatter(options).format(value);`
	`8`	`+ public transform(value?: Date \| number \| null, options: DateFormatOptions = {}): string {`
	`9`	`+ return value !== null ? new DateFormatter(options).format(value) : '-';`
`10`	`10`	`}`
`11`	`11`	`}`