Merge branch 'main' into add-filter-operators

anandtiwary · web-flow · commit 8246dd2f36fe · 2021-04-15T14:18:24.000-07:00
diff --git a/.npmrc b/.npmrc
@@ -1 +1 @@
-@hypertrace:registry=https://api.bintray.com/npm/hypertrace/npm
+@hypertrace:registry=https://hypertrace.jfrog.io/artifactory/api/npm/npm/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
     "ts-node": "~9.1.1",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.1.5",
+    "typescript": "~4.1.5",
     "typescript-tslint-plugin": "^1.0.1"
   },
   "config": {
diff --git a/projects/components/src/multi-select/multi-select.component.test.ts b/projects/components/src/multi-select/multi-select.component.test.ts
@@ -138,6 +138,34 @@ describe('Multi Select Component', () => {
     });
   }));
 
+  test('should block prevent default when checkbox is clicked', fakeAsync(() => {
+    const onChange = jest.fn();
+    spectator = hostFactory(
+      `
+    <ht-multi-select (selectedChange)="onChange($event)" [selected]="selected">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
+      </ht-select-option>
+    </ht-multi-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          selected: [],
+          onChange: onChange
+        }
+      }
+    );
+
+    spectator.tick();
+    spectator.click('.trigger-content');
+    const selectedCheckboxElement = spectator.queryAll('ht-checkbox', { root: true })[0];
+    expect(spectator.dispatchFakeEvent(selectedCheckboxElement, 'click', true).defaultPrevented).toBe(true);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([selectionOptions[0].value]);
+    expect(spectator.query(LabelComponent)?.label).toEqual('first');
+    flush();
+  }));
+
   test('should notify and update selection when selection is changed', fakeAsync(() => {
     const onChange = jest.fn();
 
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
@@ -92,7 +92,11 @@ import { MultiSelectJustify } from './multi-select-justify';
                 (click)="this.onSelectionChange(item)"
                 class="multi-select-option"
               >
-                <ht-checkbox class="checkbox" [checked]="this.isSelectedItem(item)"></ht-checkbox>
+                <ht-checkbox
+                  class="checkbox"
+                  (click)="this.preventClickDefault($event)"
+                  [checked]="this.isSelectedItem(item)"
+                ></ht-checkbox>
                 <ht-icon
                   class="icon"
                   *ngIf="item.icon"
@@ -210,6 +214,10 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
     return this.selected !== undefined && this.selected.filter(value => value === item.value).length > 0;
   }
 
+  public preventClickDefault(event: Event): void {
+    event.preventDefault();
+  }
+
   private setSelection(selected: V[]): void {
     this.selected = selected;
     this.setTriggerLabel();
diff --git a/projects/components/src/time-range/time-range.component.scss b/projects/components/src/time-range/time-range.component.scss
@@ -15,7 +15,7 @@
 .trigger {
   display: flex;
   align-items: center;
-  height: 32px;
+  height: 36px;
   cursor: pointer;
 
   .trigger-icon {
diff --git a/projects/distributed-tracing/src/shared/graphql/request/handlers/traces/traces-graphql-query-handler.service.ts b/projects/distributed-tracing/src/shared/graphql/request/handlers/traces/traces-graphql-query-handler.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Dictionary, forkJoinSafeEmpty } from '@hypertrace/common';
 import { GraphQlHandlerType, GraphQlQueryHandler, GraphQlSelection } from '@hypertrace/graphql-client';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { defaultIfEmpty, map } from 'rxjs/operators';
 import { MetadataService } from '../../../../services/metadata/metadata.service';
 import { GlobalGraphQlFilterService } from '../../../model/schema/filter/global-graphql-filter.service';
 import { GraphQlFilter } from '../../../model/schema/filter/graphql-filter';
@@ -98,9 +98,10 @@ export class TracesGraphQlQueryHandlerService implements GraphQlQueryHandler<Gra
   }
 
   private resultUnits(specification: Specification, scope: string): Observable<string | undefined> {
-    return this.metadataService
-      .getAttribute(scope, specification.name)
-      .pipe(map(attribute => (attribute.units !== '' ? attribute.units : undefined)));
+    return this.metadataService.getAttribute(scope, specification.name).pipe(
+      map(attribute => (attribute.units !== '' ? attribute.units : undefined)),
+      defaultIfEmpty<string | undefined>(undefined)
+    );
   }
 }
 
diff --git a/projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts b/projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts
@@ -1,5 +1,6 @@
 import { CoreTableCellRendererType, TableMode, TableSortDirection, TableStyle } from '@hypertrace/components';
 import { TracingTableCellType } from '@hypertrace/distributed-tracing';
+import { ObservabilityTableCellType } from '../../../../shared/components/table/observability-table-cell-type';
 import { ObservabilityTraceType } from '../../../../shared/graphql/model/schema/observability-traces';
 
 export const apiTraceListDashboard = {
@@ -24,10 +25,21 @@ export const apiTraceListDashboard = {
       {
         type: 'table-widget-column',
         title: 'Exit Calls',
-        filterable: true,
+        filterable: false,
+        display: ObservabilityTableCellType.ExitCalls,
         value: {
-          type: 'attribute-specification',
-          attribute: 'apiExitCalls'
+          type: 'composite-specification',
+          specifications: [
+            {
+              type: 'attribute-specification',
+              attribute: 'apiExitCalls'
+            },
+            {
+              type: 'attribute-specification',
+              attribute: 'apiCalleeNameCount'
+            }
+          ],
+          'order-by': 'apiExitCalls'
         },
         'click-handler': {
           type: 'api-trace-navigation-handler'
diff --git a/projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts b/projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts
@@ -1,5 +1,6 @@
 import { CoreTableCellRendererType, TableMode, TableSortDirection, TableStyle } from '@hypertrace/components';
 import { TracingTableCellType } from '@hypertrace/distributed-tracing';
+import { ObservabilityTableCellType } from '../../../../shared/components/table/observability-table-cell-type';
 import { ObservabilityTraceType } from '../../../../shared/graphql/model/schema/observability-traces';
 
 export const serviceTraceListDashboard = {
@@ -50,10 +51,21 @@ export const serviceTraceListDashboard = {
       {
         type: 'table-widget-column',
         title: 'Exit Calls',
-        filterable: true,
+        filterable: false,
+        display: ObservabilityTableCellType.ExitCalls,
         value: {
-          type: 'attribute-specification',
-          attribute: 'apiExitCalls'
+          type: 'composite-specification',
+          specifications: [
+            {
+              type: 'attribute-specification',
+              attribute: 'apiExitCalls'
+            },
+            {
+              type: 'attribute-specification',
+              attribute: 'apiCalleeNameCount'
+            }
+          ],
+          'order-by': 'apiExitCalls'
         },
         'click-handler': {
           type: 'api-trace-navigation-handler'
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
@@ -0,0 +1,29 @@
+@import 'color-palette';
+@import 'font';
+
+.exit-calls-count {
+  @include body-1-regular($gray-7);
+}
+
+.api-callee-name-entries {
+  @include body-small($gray-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px;
+
+  .api-callee-name {
+    @include ellipsis-overflow();
+    max-width: 200px;
+  }
+
+  .api-callee-count {
+    color: white;
+    margin-left: 50px;
+  }
+}
+
+.remaining-api-callee {
+  @include body-small($gray-3);
+  padding: 2px;
+}
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
@@ -0,0 +1,43 @@
+import {
+  tableCellDataProvider,
+  TableCellNoOpParser,
+  tableCellProviders,
+  TooltipDirective
+} from '@hypertrace/components';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { ExitCallsTableCellRendererComponent } from './exit-calls-table-cell-renderer.component';
+
+describe('Exit Calls table cell renderer component', () => {
+  const buildComponent = createComponentFactory({
+    component: ExitCallsTableCellRendererComponent,
+    providers: [
+      tableCellProviders(
+        {
+          id: 'test'
+        },
+        new TableCellNoOpParser(undefined!)
+      )
+    ],
+    declarations: [MockComponent(TooltipDirective)],
+    shallow: true
+  });
+
+  test('testing component properties', () => {
+    const value = {
+      key1: '1',
+      key2: '2'
+    };
+    const spectator = buildComponent({
+      providers: [tableCellDataProvider({ value: [3, value] })]
+    });
+
+    expect(spectator.queryAll('.exit-calls-count')[0]).toContainText('3');
+    expect(spectator.component.apiCalleeNameEntries).toMatchObject([
+      ['key1', '1'],
+      ['key2', '2']
+    ]);
+    expect(spectator.component.uniqueApiCalleeCount).toBe(2);
+    expect(spectator.component.apiExitCalls).toBe(3);
+  });
+});
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { Dictionary } from '@hypertrace/common';
+import {
+  CoreTableCellParserType,
+  TableCellAlignmentType,
+  TableCellParserBase,
+  TableCellRenderer,
+  TableCellRendererBase,
+  TableColumnConfig,
+  TABLE_CELL_DATA,
+  TABLE_COLUMN_CONFIG,
+  TABLE_COLUMN_INDEX,
+  TABLE_DATA_PARSER,
+  TABLE_ROW_DATA
+} from '@hypertrace/components';
+import { Trace } from '@hypertrace/distributed-tracing';
+import { ObservabilityTableCellType } from '../../observability-table-cell-type';
+
+interface CellData {
+  units: number;
+  value: [number, Dictionary<string>];
+}
+@Component({
+  selector: 'ht-exit-calls-table-cell-renderer',
+  styleUrls: ['./exit-calls-table-cell-renderer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="exit-calls-cell" [htTooltip]="exitCallsTooltip">
+      <span class="exit-calls-count">{{ this.apiExitCalls }}</span>
+
+      <ng-template #exitCallsTooltip>
+        <ng-container *ngIf="this.apiExitCalls > 0; else noExitCalls">
+          <div *ngFor="let item of this.apiCalleeNameEntries" class="api-callee-name-entries">
+            <span class="api-callee-name">{{ item[0] }}</span>
+            <span class="api-callee-count">{{ item[1] }}</span>
+          </div>
+          <div
+            *ngIf="this.uniqueApiCalleeCount > ${ExitCallsTableCellRendererComponent.MAX_API_CALLEES_TO_SHOW}"
+            class="remaining-api-callee"
+          >
+            and {{ this.uniqueApiCalleeCount - ${ExitCallsTableCellRendererComponent.MAX_API_CALLEES_TO_SHOW} }} more
+          </div>
+        </ng-container>
+        <ng-template #noExitCalls>No exit calls</ng-template>
+      </ng-template>
+    </div>
+  `
+})
+@TableCellRenderer({
+  type: ObservabilityTableCellType.ExitCalls,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.NoOp
+})
+export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<CellData, Trace> implements OnInit {
+  public static readonly MAX_API_CALLEES_TO_SHOW: number = 10;
+  public readonly apiCalleeNameEntries: [string, string][];
+  public readonly apiExitCalls: number;
+  public readonly uniqueApiCalleeCount: number;
+
+  public constructor(
+    @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
+    @Inject(TABLE_COLUMN_INDEX) index: number,
+    @Inject(TABLE_DATA_PARSER)
+    parser: TableCellParserBase<CellData, Trace, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: CellData,
+    @Inject(TABLE_ROW_DATA) rowData: Trace
+  ) {
+    super(columnConfig, index, parser, cellData, rowData);
+    const apiCalleeNameEntries: [string, string][] = Object.entries(cellData.value[1]);
+    this.uniqueApiCalleeCount = apiCalleeNameEntries.length;
+    this.apiCalleeNameEntries = apiCalleeNameEntries.slice(
+      0,
+      ExitCallsTableCellRendererComponent.MAX_API_CALLEES_TO_SHOW
+    );
+    this.apiExitCalls = cellData.value[0];
+  }
+}
diff --git a/projects/observability/src/shared/components/table/observability-table-cell-renderer.module.ts b/projects/observability/src/shared/components/table/observability-table-cell-renderer.module.ts
@@ -1,20 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { TableModule } from '@hypertrace/components';
+import { TableModule, TooltipModule } from '@hypertrace/components';
 import { BackendIconTableCellParser } from './data-cell/backend-icon/backend-icon-table-cell-parser';
 import { BackendIconTableCellRendererComponent } from './data-cell/backend-icon/backend-icon-table-cell-renderer.component';
 import { BackendIconTableCellRendererModule } from './data-cell/backend-icon/backend-icon-table-cell-renderer.module';
 import { EntityTableCellParser } from './data-cell/entity/entity-table-cell-parser';
 import { EntityTableCellRendererComponent } from './data-cell/entity/entity-table-cell-renderer.component';
 import { EntityTableCellRendererModule } from './data-cell/entity/entity-table-cell-renderer.module';
+import { ExitCallsTableCellRendererComponent } from './data-cell/exit-calls/exit-calls-table-cell-renderer.component';
 
 @NgModule({
   imports: [
     CommonModule,
     TableModule.withCellParsers([EntityTableCellParser, BackendIconTableCellParser]),
-    TableModule.withCellRenderers([EntityTableCellRendererComponent, BackendIconTableCellRendererComponent]),
+    TableModule.withCellRenderers([
+      EntityTableCellRendererComponent,
+      BackendIconTableCellRendererComponent,
+      ExitCallsTableCellRendererComponent
+    ]),
     EntityTableCellRendererModule,
-    BackendIconTableCellRendererModule
-  ]
+    BackendIconTableCellRendererModule,
+    TooltipModule
+  ],
+  declarations: [ExitCallsTableCellRendererComponent],
+  exports: [ExitCallsTableCellRendererComponent]
 })
 export class ObservabilityTableCellRendererModule {}
diff --git a/projects/observability/src/shared/components/table/observability-table-cell-type.ts b/projects/observability/src/shared/components/table/observability-table-cell-type.ts
@@ -1,4 +1,5 @@
 export const enum ObservabilityTableCellType {
   Entity = 'entity',
-  BackendIcon = 'backend-icon'
+  BackendIcon = 'backend-icon',
+  ExitCalls = 'exit-calls'
 }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@hypertrace:registry=https://api.bintray.com/npm/hypertrace/npm`
	`1`	`+@hypertrace:registry=https://hypertrace.jfrog.io/artifactory/api/npm/npm/`