Merge branch 'main' into table-row-border-style

adisreyaj · web-flow · commit 2b430f594b65 · 2022-02-18T01:42:43.000+05:30
diff --git a/projects/components/src/filtering/filter-bar/filter-chip/filter-chip.service.ts b/projects/components/src/filtering/filter-bar/filter-chip/filter-chip.service.ts
@@ -13,6 +13,7 @@ import {
   tryParseStringForAttribute
 } from '../../filter/parser/parsed-filter';
 import { AbstractFilterParser } from '../../filter/parser/types/abstract-filter-parser';
+import { FilterValue } from './../../filter/filter';
 
 @Injectable({
   providedIn: 'root'
@@ -61,7 +62,7 @@ export class FilterChipService {
 
   private buildIncompleteFiltersForAttribute(
     text: string,
-    filterBuilder: AbstractFilterBuilder<unknown>,
+    filterBuilder: AbstractFilterBuilder<FilterValue>,
     attributeExpression: FilterAttributeExpression
   ): IncompleteFilter[] {
     const topLevelOperatorFilters = filterBuilder.supportedTopLevelOperators().map(operator => ({
@@ -95,8 +96,8 @@ export class FilterChipService {
   }
 
   private buildIncompleteFilterForAttributeAndOperator(
-    filterBuilder: AbstractFilterBuilder<unknown>,
-    filterParser: AbstractFilterParser<unknown>,
+    filterBuilder: AbstractFilterBuilder<FilterValue>,
+    filterParser: AbstractFilterParser<FilterValue>,
     splitFilter: SplitFilter<FilterOperator>,
     text: string
   ): IncompleteFilter {
@@ -132,7 +133,7 @@ export class FilterChipService {
   }
 
   private buildIncompleteFilterForPartialAttributeMatch(
-    filterBuilder: AbstractFilterBuilder<unknown>,
+    filterBuilder: AbstractFilterBuilder<FilterValue>,
     attribute: FilterAttribute
   ): IncompleteFilter {
     return {
diff --git a/projects/components/src/filtering/filter-button/filter-button.component.ts b/projects/components/src/filtering/filter-button/filter-button.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import { IconType } from '@hypertrace/assets-library';
 import { IconSize } from '../../icon/icon-size';
 import { FilterBuilderLookupService } from '../filter/builder/filter-builder-lookup.service';
-import { Filter } from '../filter/filter';
+import { Filter, FilterValue } from '../filter/filter';
 import { FilterAttribute } from '../filter/filter-attribute';
 import { FilterUrlService } from '../filter/filter-url.service';
 
@@ -45,7 +45,7 @@ export class FilterButtonComponent implements OnChanges {
   public attribute?: FilterAttribute;
 
   @Input()
-  public value?: unknown;
+  public value?: FilterValue;
 
   @Output()
   public readonly popoverOpen: EventEmitter<boolean> = new EventEmitter();
diff --git a/projects/components/src/filtering/filter-modal/in-filter-modal.component.ts b/projects/components/src/filtering/filter-modal/in-filter-modal.component.ts
@@ -3,7 +3,7 @@ import { sortUnknown } from '@hypertrace/common';
 import { ButtonRole } from '../../button/button';
 import { ModalRef, MODAL_DATA } from '../../modal/modal';
 import { FilterBuilderLookupService } from '../filter/builder/filter-builder-lookup.service';
-import { IncompleteFilter } from '../filter/filter';
+import { FilterValue, IncompleteFilter } from '../filter/filter';
 import { FilterAttribute } from '../filter/filter-attribute';
 import { FilterOperator } from '../filter/filter-operators';
 import { FilterUrlService } from '../filter/filter-url.service';
@@ -43,7 +43,7 @@ import { FilterUrlService } from '../filter/filter-url.service';
 })
 export class InFilterModalComponent {
   public isSupported: boolean = false;
-  public selected: Set<unknown> = new Set<unknown>();
+  public selected: Set<FilterValue> = new Set<FilterValue>();
 
   public constructor(
     private readonly modalRef: ModalRef<never>,
@@ -91,7 +91,7 @@ export class InFilterModalComponent {
     this.modalRef.close();
   }
 
-  public onChecked(checked: boolean, value: unknown): void {
+  public onChecked(checked: boolean, value: FilterValue): void {
     checked ? this.selected.add(value) : this.selected.delete(value);
   }
 }
diff --git a/projects/components/src/filtering/filter/builder/filter-builder-lookup.service.ts b/projects/components/src/filtering/filter/builder/filter-builder-lookup.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { assertUnreachable } from '@hypertrace/common';
+import { FilterValue } from '../filter';
 import { FilterAttributeType } from '../filter-attribute-type';
 import { AbstractFilterBuilder } from './types/abstract-filter-builder';
 import { BooleanFilterBuilder } from './types/boolean-filter-builder';
@@ -11,7 +12,7 @@ import { StringMapFilterBuilder } from './types/string-map-filter-builder';
   providedIn: 'root'
 })
 export class FilterBuilderLookupService {
-  public lookup(type: FilterAttributeType): AbstractFilterBuilder<unknown> {
+  public lookup(type: FilterAttributeType): AbstractFilterBuilder<FilterValue> {
     switch (type) {
       case FilterAttributeType.Boolean:
         return new BooleanFilterBuilder();
diff --git a/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts b/projects/components/src/filtering/filter/builder/types/abstract-filter-builder.ts
@@ -1,13 +1,13 @@
 import { collapseWhitespace } from '@hypertrace/common';
 import { isEmpty } from 'lodash-es';
-import { Filter } from '../../filter';
+import { Filter, FilterValue, IncompleteFilter } from '../../filter';
 import { FilterAttribute } from '../../filter-attribute';
 import { FilterAttributeType } from '../../filter-attribute-type';
 import { MAP_LHS_DELIMITER } from '../../filter-delimiters';
 import { FilterOperator, toUrlFilterOperator } from '../../filter-operators';
 import { FilterAttributeExpression } from '../../parser/parsed-filter';
 
-export abstract class AbstractFilterBuilder<TValue> {
+export abstract class AbstractFilterBuilder<TValue extends FilterValue> {
   public abstract supportedAttributeType(): FilterAttributeType;
 
   public abstract supportedSubpathOperators(): FilterOperator[];
@@ -47,6 +47,30 @@ export abstract class AbstractFilterBuilder<TValue> {
     };
   }
 
+  public buildPartialFilter(
+    attribute: FilterAttribute,
+    operator?: FilterOperator,
+    value?: TValue,
+    subpath?: string
+  ): IncompleteFilter<TValue> {
+    if (
+      operator !== undefined &&
+      ((isEmpty(subpath) && !this.supportedTopLevelOperators().includes(operator)) ||
+        (!isEmpty(subpath) && !this.supportedSubpathOperators().includes(operator)))
+    ) {
+      throw Error(`Operator '${operator}' not supported for filter attribute type '${attribute.type}'`);
+    }
+
+    return {
+      metadata: attribute,
+      field: attribute.name,
+      subpath: subpath,
+      operator: operator,
+      value: value,
+      userString: this.buildUserFilterString(attribute, subpath, operator, value)
+    };
+  }
+
   public buildUserFilterString(
     attribute: FilterAttribute,
     subpath?: string,
diff --git a/projects/components/src/filtering/filter/filter-url.service.ts b/projects/components/src/filtering/filter/filter-url.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { NavigationService } from '@hypertrace/common';
+import { remove } from 'lodash-es';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { FilterBuilderLookupService } from './builder/filter-builder-lookup.service';
@@ -25,6 +26,21 @@ export class FilterUrlService {
     return this.navigationService.navigation$.pipe(map(() => this.getUrlFilters(attributes)));
   }
 
+  public getUrlFiltersForAttributes(attributes: FilterAttribute[]): (Filter | IncompleteFilter)[] {
+    const urlFilters = this.getUrlFilters(attributes);
+
+    return attributes.map(attribute => {
+      const match = urlFilters.find(f => f.field === attribute.name);
+      if (match !== undefined) {
+        remove(urlFilters, f => f === match);
+
+        return match;
+      }
+
+      return this.filterBuilderLookupService.lookup(attribute.type).buildPartialFilter(attribute);
+    });
+  }
+
   public getUrlFilters(attributes: FilterAttribute[]): Filter[] {
     return this.navigationService
       .getAllValuesForQueryParameter(FilterUrlService.FILTER_QUERY_PARAM)
diff --git a/projects/components/src/filtering/filter/filter.ts b/projects/components/src/filtering/filter/filter.ts
@@ -1,23 +1,26 @@
+import { Dictionary } from '@hypertrace/common';
 import { FilterAttribute } from './filter-attribute';
 import { FilterOperator, incompatibleOperators } from './filter-operators';
 
-export interface Filter<TValue = unknown> extends IncompleteFilter {
+export interface Filter<TValue extends FilterValue = FilterValue> extends IncompleteFilter {
   operator: FilterOperator;
   value: TValue;
   urlString: string;
 }
 
-export interface IncompleteFilter<TValue = unknown> extends FieldFilter<TValue> {
+export interface IncompleteFilter<TValue extends FilterValue = FilterValue> extends FieldFilter<TValue> {
   metadata: FilterAttribute;
   userString: string;
 }
 
-export interface FieldFilter<TValue = unknown> {
+export interface FieldFilter<TValue extends FilterValue = FilterValue> {
   field: string;
   subpath?: string;
   operator?: FilterOperator;
   value?: TValue;
 }
 
+export type FilterValue = string | number | boolean | Date | Dictionary<FilterValue> | FilterValue[];
+
 export const areCompatibleFilters = (f1: Filter, f2: Filter) =>
   f1.field !== f2.field || f1.subpath !== f2.subpath || !incompatibleOperators(f1.operator).includes(f2.operator);
diff --git a/projects/components/src/filtering/filter/parser/filter-parser-lookup.service.ts b/projects/components/src/filtering/filter/parser/filter-parser-lookup.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { assertUnreachable } from '@hypertrace/common';
+import { FilterValue } from '../filter';
 import { FilterAttributeType } from '../filter-attribute-type';
 import { FilterOperator } from '../filter-operators';
 import { AbstractFilterParser } from './types/abstract-filter-parser';
@@ -14,7 +15,7 @@ export class FilterParserLookupService {
   // TODO remove the separate parsers entirely.
   // There's next to no logic left in them, and they duplicate (incorrectly) supported operators,
   // Which should be based on attribute type (as defined in filter builders)
-  public lookup(operator: FilterOperator): AbstractFilterParser<unknown> {
+  public lookup(operator: FilterOperator): AbstractFilterParser<FilterValue> {
     switch (operator) {
       case FilterOperator.Equals:
       case FilterOperator.NotEquals:
diff --git a/projects/components/src/table/table-api.ts b/projects/components/src/table/table-api.ts
@@ -1,6 +1,6 @@
 import { Dictionary } from '@hypertrace/common';
 import { Observable } from 'rxjs';
-import { FieldFilter } from '../filtering/filter/filter';
+import { FieldFilter, FilterValue } from '../filtering/filter/filter';
 import { FilterOperator } from '../filtering/filter/filter-operators';
 import { TableCellAlignmentType } from './cells/types/table-cell-alignment-type';
 
@@ -60,7 +60,7 @@ export interface RowStateChange {
 
 export interface TableFilter extends FieldFilter {
   operator: FilterOperator;
-  value: unknown;
+  value: FilterValue;
 }
 
 export const enum TableSortDirection {
diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts
@@ -308,6 +308,9 @@ export class TableComponent
   @Output()
   public readonly columnConfigsChange: EventEmitter<TableColumnConfig[]> = new EventEmitter<TableColumnConfig[]>();
 
+  @Output()
+  public readonly sortChange: EventEmitter<SortedColumn> = new EventEmitter<SortedColumn>();
+
   @ViewChild(PaginatorComponent)
   public paginator?: PaginatorComponent;
 
@@ -538,10 +541,12 @@ export class TableComponent
 
   public onSortChange(direction: TableSortDirection, columnConfig: TableColumnConfigExtended): void {
     if (TableCdkColumnUtil.isColumnSortable(columnConfig)) {
-      this.updateSort({
+      const sortedColumn: SortedColumn = {
         column: columnConfig,
         direction: direction
-      });
+      };
+      this.sortChange.emit(sortedColumn);
+      this.updateSort(sortedColumn);
     }
 
     if (this.syncWithUrl) {
@@ -776,7 +781,7 @@ export class TableComponent
   }
 }
 
-interface SortedColumn {
+export interface SortedColumn {
   column: TableColumnConfigExtended;
   direction?: TableSortDirection;
 }
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.scss b/projects/components/src/toggle-switch/toggle-switch.component.scss
@@ -1,7 +1,10 @@
 @import 'color-palette';
 @import 'font';
 
-:host {
+.toggle-switch {
+  display: flex;
+  align-items: center;
+
   ::ng-deep {
     .mat-slide-toggle {
       &.disabled {
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.ts b/projects/components/src/toggle-switch/toggle-switch.component.ts
@@ -7,15 +7,17 @@ import { ToggleSwitchSize } from './toggle-switch-size';
   styleUrls: ['./toggle-switch.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <mat-slide-toggle
-      color="primary"
-      [checked]="this.checked"
-      [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
-      [disabled]="this.disabled"
-      (change)="this.onToggle($event)"
-    >
-      <div class="label">{{ this.label }}</div>
-    </mat-slide-toggle>
+    <div class="toggle-switch">
+      <mat-slide-toggle
+        color="primary"
+        [checked]="this.checked"
+        [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
+        [disabled]="this.disabled"
+        (change)="this.onToggle($event)"
+      >
+        <div class="label">{{ this.label }}</div>
+      </mat-slide-toggle>
+    </div>
   `
 })
 export class ToggleSwitchComponent {
diff --git a/projects/observability/src/shared/components/explore-query-editor/explore-visualization-builder.ts b/projects/observability/src/shared/components/explore-query-editor/explore-visualization-builder.ts
@@ -128,7 +128,7 @@ export class ExploreVisualizationBuilder implements OnDestroy {
       selections: state.series.map(series => series.specification),
       context: state.context,
       interval: this.resolveInterval(state.interval),
-      filters: state.filters && this.graphQlFilterBuilderService.buildGraphQlFilters(state.filters),
+      filters: state.filters && this.graphQlFilterBuilderService.buildGraphQlFieldFilters(state.filters),
       groupBy: state.groupBy,
       limit: state.resultLimit
     });
@@ -178,7 +178,7 @@ export class ExploreVisualizationBuilder implements OnDestroy {
       traceType: traceType,
       properties: specifications,
       limit: 100,
-      filters: filters && this.graphQlFilterBuilderService.buildGraphQlFilters(filters)
+      filters: filters && this.graphQlFilterBuilderService.buildGraphQlFieldFilters(filters)
     };
   }
 
@@ -190,7 +190,7 @@ export class ExploreVisualizationBuilder implements OnDestroy {
       requestType: SPANS_GQL_REQUEST,
       properties: specifications,
       limit: 100,
-      filters: filters && this.graphQlFilterBuilderService.buildGraphQlFilters(filters)
+      filters: filters && this.graphQlFilterBuilderService.buildGraphQlFieldFilters(filters)
     };
   }
 
diff --git a/projects/observability/src/shared/dashboard/dashboard-wrapper/navigable-dashboard.component.ts b/projects/observability/src/shared/dashboard/dashboard-wrapper/navigable-dashboard.component.ts
@@ -110,7 +110,10 @@ export class NavigableDashboardComponent implements OnChanges {
     const rootDataSource = dashboard.getRootDataSource<GraphQlFilterDataSourceModel>();
     rootDataSource
       ?.clearFilters()
-      .addFilters(...this.implicitFilters, ...this.graphQlFilterBuilderService.buildGraphQlFilters(explicitFilters));
+      .addFilters(
+        ...this.implicitFilters,
+        ...this.graphQlFilterBuilderService.buildGraphQlFieldFilters(explicitFilters)
+      );
     dashboard.refresh();
   }
 }
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
@@ -1,4 +1,4 @@
-import { FilterOperator, TableControlOptionType, TableSelectControlOption } from '@hypertrace/components';
+import { FilterOperator, FilterValue, TableControlOptionType, TableSelectControlOption } from '@hypertrace/components';
 import { Model } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -17,7 +17,7 @@ export class EntitiesAttributeOptionsDataSourceModel extends EntitiesAttributeDa
           metaValue: {
             field: this.specification.name,
             operator: FilterOperator.Equals,
-            value: value
+            value: value as FilterValue
           }
         }))
       )
diff --git a/projects/observability/src/shared/dashboard/data/graphql/table/table-data-source.model.ts b/projects/observability/src/shared/dashboard/data/graphql/table/table-data-source.model.ts
@@ -47,6 +47,6 @@ export abstract class TableDataSourceModel extends GraphQlDataSourceModel<TableD
   ): TableDataResponse<TableRow>;
 
   protected toGraphQlFilters(tableFilters: TableFilter[] = []): GraphQlFilter[] {
-    return this.graphQlFilterBuilderService.buildGraphQlFilters(tableFilters);
+    return this.graphQlFilterBuilderService.buildGraphQlFiltersFromTableFilters(tableFilters);
   }
 }
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
@@ -615,7 +615,7 @@ export class TableWidgetRendererComponent
   private mergeFilters(tableFilter: TableFilter): TableFilter[] {
     const existingSelectFiltersWithChangedRemoved = this.removeFilters(tableFilter.field);
 
-    return [...existingSelectFiltersWithChangedRemoved, tableFilter].filter(f => f.value !== undefined); // Remove filters that are unset
+    return [...existingSelectFiltersWithChangedRemoved, tableFilter];
   }
 
   private removeFilters(field: string): TableFilter[] {
diff --git a/projects/observability/src/shared/services/filter-builder/graphql-filter-builder.service.test.ts b/projects/observability/src/shared/services/filter-builder/graphql-filter-builder.service.test.ts
@@ -32,7 +32,7 @@ describe('Graphql filter builder service', () => {
     const spectator = serviceFactory();
 
     expect(
-      spectator.service.buildGraphQlFilters([
+      spectator.service.buildGraphQlFieldFilters([
         buildFilter(attribute2, FilterOperator.Equals, 'foo'),
         buildFilter(attribute2, FilterOperator.NotEquals, 'bar'),
         buildFilter(attribute1, FilterOperator.GreaterThan, 5),
diff --git a/projects/observability/src/shared/services/filter-builder/graphql-filter-builder.service.ts b/projects/observability/src/shared/services/filter-builder/graphql-filter-builder.service.ts
