Attribute expressions (#1367)

* feat: add support for attribute expressions

* test: update tests

Author: aaron-steinfeld

projects/observability/src/pages/explorer/explorer.component.test.ts

@@ -360,7 +360,7 @@ describe('Explorer component', () => {
     spectator.query(ExploreQueryEditorComponent)!.setInterval(new TimeDuration(30, TimeUnit.Second));
     spectator.query(ExploreQueryEditorComponent)!.updateGroupByKey(
       {
-        keys: ['apiName'],
+        keyExpressions: [{ key: 'apiName' }],
         limit: 6,
         includeRest: true
       },
@@ -370,7 +370,7 @@ describe('Explorer component', () => {
     expect(queryParamChangeSpy).toHaveBeenLastCalledWith({
       scope: 'spans',
       series: ['column:avg(second)'],
-      group: 'apiName',
+      group: ['apiName'],
       limit: 6,
       other: true,
       interval: '30s'

projects/observability/src/pages/explorer/explorer.component.ts

@@ -9,7 +9,7 @@ import {
   TimeDurationService
 } from '@hypertrace/common';
 import { Filter, ToggleItem } from '@hypertrace/components';
-import { isNil } from 'lodash-es';
+import { isEmpty, isNil } from 'lodash-es';
 import { concat, EMPTY, Observable, Subject } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { CartesianSeriesVisualizationType } from '../../shared/components/cartesian/chart';
@@ -19,6 +19,7 @@ import {
   ExploreVisualizationRequest
 } from '../../shared/components/explore-query-editor/explore-visualization-builder';
 import { IntervalValue } from '../../shared/components/interval-select/interval-select.component';
+import { AttributeExpression } from '../../shared/graphql/model/attribute/attribute-expression';
 import { AttributeMetadata } from '../../shared/graphql/model/metadata/attribute-metadata';
 import { MetricAggregationType } from '../../shared/graphql/model/metrics/metric-aggregation';
 import { GraphQlGroupBy } from '../../shared/graphql/model/schema/groupby/graphql-group-by';
@@ -216,8 +217,8 @@ export class ExplorerComponent {
   }
 
   private getGroupByQueryParams(groupBy?: GraphQlGroupBy): QueryParamObject {
-    const key = groupBy?.keys[0];
-    if (key === undefined) {
+    const keyExpressions = groupBy?.keyExpressions ?? [];
+    if (keyExpressions.length === 0) {
       return {
         // Clear existing selection
         [ExplorerQueryParam.Group]: undefined,
@@ -227,7 +228,7 @@ export class ExplorerComponent {
     }
 
     return {
-      [ExplorerQueryParam.Group]: key,
+      [ExplorerQueryParam.Group]: keyExpressions.map(expression => this.encodeAttributeExpression(expression)),
       [ExplorerQueryParam.OtherGroup]: groupBy?.includeRest || undefined, // No param needed for false
       [ExplorerQueryParam.GroupLimit]: groupBy?.limit
     };
@@ -238,7 +239,9 @@ export class ExplorerComponent {
       contextToggle: this.getOrDefaultContextItemFromQueryParam(param.get(ExplorerQueryParam.Scope) as ScopeQueryParam),
       groupBy: param.has(ExplorerQueryParam.Group)
         ? {
-            keys: param.getAll(ExplorerQueryParam.Group),
+            keyExpressions: param
+              .getAll(ExplorerQueryParam.Group)
+              .flatMap(expressionString => this.tryDecodeAttributeExpression(expressionString)),
             includeRest: param.get(ExplorerQueryParam.OtherGroup) === 'true',
             // tslint:disable-next-line: strict-boolean-expressions
             limit: parseInt(param.get(ExplorerQueryParam.GroupLimit)!) || 5
@@ -294,6 +297,19 @@ export class ExplorerComponent {
       }
     ];
   }
+
+  private encodeAttributeExpression(attributeExpression: AttributeExpression): string {
+    if (isEmpty(attributeExpression.subpath)) {
+      return attributeExpression.key;
+    }
+
+    return `${attributeExpression.key}__${attributeExpression.subpath}`;
+  }
+  private tryDecodeAttributeExpression(expressionString: string): [AttributeExpression] | [] {
+    const [key, subpath] = expressionString.split('__');
+
+    return [{ key: key, ...(isEmpty(subpath) ? { subpath: subpath } : {}) }];
+  }
 }
 interface ContextToggleItem extends ToggleItem<ExplorerContextScope> {
   value: ExplorerContextScope;

projects/observability/src/public-api.ts

@@ -64,6 +64,7 @@ export * from './shared/services/metadata/metadata.service';
 export * from './shared/services/metadata/metadata.service.module';
 export * from './shared/graphql/model/metadata/attribute-metadata';
 
+export * from './shared/graphql/model/attribute/attribute-expression';
 export * from './shared/graphql/model/metrics/metric-aggregation';
 export * from './shared/graphql/model/metrics/metric-health';
 

projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.test.ts

@@ -176,7 +176,7 @@ describe('Explore query editor', () => {
       expect.objectContaining({
         series: [defaultSeries],
         groupBy: {
-          keys: ['first groupable'],
+          keyExpressions: [{ key: 'first groupable' }],
           limit: 5 // Default group by limit
         }
       })
@@ -215,7 +215,7 @@ describe('Explore query editor', () => {
       expect.objectContaining({
         series: [defaultSeries],
         groupBy: {
-          keys: ['first groupable'],
+          keyExpressions: [{ key: 'first groupable' }],
           limit: 6
         }
       })

projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts

@@ -39,7 +39,7 @@ import {
         <ht-explore-query-group-by-editor
           class="group-by"
           [context]="currentVisualization.context"
-          [groupByKey]="(currentVisualization.groupBy?.keys)[0]"
+          [groupByKey]="(currentVisualization.groupBy?.keyExpressions)?.[0]?.key"
           (groupByKeyChange)="this.updateGroupByKey(currentVisualization.groupBy, $event)"
         ></ht-explore-query-group-by-editor>
 
@@ -103,8 +103,8 @@ export class ExploreQueryEditorComponent implements OnChanges, OnInit {
       this.setInterval(this.interval);
     }
 
-    if (changeObject.groupBy && this.groupBy?.keys.length) {
-      this.updateGroupByKey(this.groupBy, this.groupBy.keys[0]);
+    if (changeObject.groupBy && this.groupBy?.keyExpressions.length) {
+      this.updateGroupByKey(this.groupBy, this.groupBy.keyExpressions[0]?.key);
     }
   }
 
@@ -117,7 +117,9 @@ export class ExploreQueryEditorComponent implements OnChanges, OnInit {
       this.visualizationBuilder.groupBy();
     } else {
       this.visualizationBuilder.groupBy(
-        groupBy ? { ...groupBy, keys: [key] } : { keys: [key], limit: ExploreQueryEditorComponent.DEFAULT_GROUP_LIMIT }
+        groupBy
+          ? { ...groupBy, keyExpressions: [{ key: key }] }
+          : { keyExpressions: [{ key: key }], limit: ExploreQueryEditorComponent.DEFAULT_GROUP_LIMIT }
       );
     }
   }

projects/observability/src/shared/components/explore-query-editor/explore-visualization-builder.test.ts

@@ -84,15 +84,15 @@ describe('Explore visualization builder', () => {
       spectator.service
         .setSeries([buildSeries('test1')])
         .groupBy({
-          keys: ['testGroupBy'],
+          keyExpressions: [{ key: 'testGroupBy' }],
           limit: 15
         })
         .setSeries([buildSeries('test2')]);
 
       expectObservable(recordedRequests).toBe('10ms x', {
         x: expectedQuery({
           series: [matchSeriesWithName('test2')],
-          groupBy: { keys: ['testGroupBy'], limit: 15 }
+          groupBy: { keyExpressions: [{ key: 'testGroupBy' }], limit: 15 }
         })
       });
     });

projects/observability/src/shared/dashboard/dashboard-wrapper/navigable-dashboard.component.test.ts

@@ -144,7 +144,7 @@ describe('Navigable dashboard component', () => {
     };
     spectator.query(FilterBarComponent)?.filtersChange.next([explicitFilter]);
     expect(mockDataSource.addFilters).toHaveBeenCalledWith(
-      expect.objectContaining({ key: 'foo', operator: GraphQlOperatorType.Equals, value: 'bar' })
+      expect.objectContaining({ keyOrExpression: 'foo', operator: GraphQlOperatorType.Equals, value: 'bar' })
     );
   });
 

projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.test.ts

@@ -155,7 +155,7 @@ describe('Explore cartesian data source model', () => {
     ];
 
     model.groupBy = {
-      keys: ['baz'],
+      keyExpressions: [{ key: 'baz' }],
       includeRest: true,
       limit: 5
     };
@@ -220,7 +220,7 @@ describe('Explore cartesian data source model', () => {
     ];
 
     model.groupBy = {
-      keys: ['baz'],
+      keyExpressions: [{ key: 'baz' }],
       limit: 5
     };
 

projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.ts

@@ -5,6 +5,7 @@ import { NEVER, Observable, of } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 import { Series } from '../../../../components/cartesian/chart';
 import { ExploreRequestState } from '../../../../components/explore-query-editor/explore-visualization-builder';
+import { AttributeExpression } from '../../../../graphql/model/attribute/attribute-expression';
 import { MetricTimeseriesInterval } from '../../../../graphql/model/metric/metric-timeseries';
 import { GraphQlFilter } from '../../../../graphql/model/schema/filter/graphql-filter';
 import { ExploreSpecification } from '../../../../graphql/model/schema/specifications/explore-specification';
@@ -107,19 +108,19 @@ export abstract class ExploreCartesianDataSourceModel extends GraphQlDataSourceM
         (selection): selection is RequireBy<ExploreSpecification, 'aggregation'> => selection.aggregation !== undefined
       );
 
-    const groupByKeys = request.groupBy?.keys ?? [];
-    const isGroupBy = groupByKeys.length > 0;
+    const groupByExpressions = request.groupBy?.keyExpressions ?? [];
+    const isGroupBy = groupByExpressions.length > 0;
 
     if (!isGroupBy && request.interval) {
       return aggregatableSpecs.map(spec => this.buildTimeseriesData(spec, result));
     }
 
     if (isGroupBy && !request.interval) {
-      return aggregatableSpecs.map(spec => this.buildGroupedSeriesData(spec, groupByKeys, result));
+      return aggregatableSpecs.map(spec => this.buildGroupedSeriesData(spec, groupByExpressions, result));
     }
 
     if (isGroupBy && request.interval) {
-      return aggregatableSpecs.map(spec => this.buildGroupedTimeseriesData(spec, groupByKeys, result)).flat();
+      return aggregatableSpecs.map(spec => this.buildGroupedTimeseriesData(spec, groupByExpressions, result)).flat();
     }
 
     return [];
@@ -149,21 +150,25 @@ export abstract class ExploreCartesianDataSourceModel extends GraphQlDataSourceM
     };
   }
 
-  public buildGroupedSeriesData(spec: AggregatableSpec, groupByKeys: string[], result: ExploreResult): SeriesData {
+  public buildGroupedSeriesData(
+    spec: AggregatableSpec,
+    groupByExpressions: AttributeExpression[],
+    result: ExploreResult
+  ): SeriesData {
     return {
       data: result
-        .getGroupedSeriesData(groupByKeys, spec.name, spec.aggregation)
+        .getGroupedSeriesData(groupByExpressions, spec.name, spec.aggregation)
         .map(({ keys, value }) => [this.buildGroupedSeriesName(keys), value]),
       spec: spec
     };
   }
 
   public buildGroupedTimeseriesData(
     spec: AggregatableSpec,
-    groupByKeys: string[],
+    groupByExpressions: AttributeExpression[],
     result: ExploreResult
   ): SeriesData[] {
-    return Array.from(result.getGroupedTimeSeriesData(groupByKeys, spec.name, spec.aggregation).entries()).map(
+    return Array.from(result.getGroupedTimeSeriesData(groupByExpressions, spec.name, spec.aggregation).entries()).map(
       ([groupNames, data]) => ({
         data: data,
         groupName: this.buildGroupedSeriesName(groupNames),

projects/observability/src/shared/dashboard/data/graphql/explore/explore-result.test.ts

@@ -83,7 +83,7 @@ describe('Explore result', () => {
       ]
     });
 
-    expect(result.getGroupedSeriesData(['group'], 'foo', MetricAggregationType.Sum)).toEqual([
+    expect(result.getGroupedSeriesData([{ key: 'group' }], 'foo', MetricAggregationType.Sum)).toEqual([
       { keys: ['first'], value: 10 },
       { keys: ['second'], value: 15 },
       { keys: ['third'], value: 20 }
@@ -116,7 +116,7 @@ describe('Explore result', () => {
       ]
     });
 
-    expect(result.getGroupedSeriesData(['group'], 'foo', MetricAggregationType.Sum)).toEqual([
+    expect(result.getGroupedSeriesData([{ key: 'group' }], 'foo', MetricAggregationType.Sum)).toEqual([
       { keys: ['first'], value: 10 },
       { keys: ['Others'], value: 15 }
     ]);
@@ -172,7 +172,7 @@ describe('Explore result', () => {
       ]
     });
 
-    expect(result.getGroupedTimeSeriesData(['group'], 'foo', MetricAggregationType.Sum)).toEqual(
+    expect(result.getGroupedTimeSeriesData([{ key: 'group' }], 'foo', MetricAggregationType.Sum)).toEqual(
       new Map([
         [
           ['first'],