From bd08b6a717d0f6239e99b8e495ee370dab0ee0b9 Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Mon, 4 Jul 2022 14:44:32 +0530 Subject: [PATCH 1/8] feat: working code --- .../explore-query-editor.component.ts | 14 ++++ .../explore-query-editor.module.ts | 4 +- .../explore-visualization-builder.ts | 10 +++ ...explore-query-group-by-editor.component.ts | 2 +- ...plore-query-order-by-editor.component.scss | 31 ++++++++ ...explore-query-order-by-editor.component.ts | 74 +++++++++++++++++++ .../sort/graphql-sort-by-specification.ts | 2 +- .../argument/graphql-argument-builder.ts | 1 + 8 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.scss create mode 100644 projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.ts diff --git a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts index dbb4607e9..bed096725 100644 --- a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts +++ b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts @@ -4,6 +4,8 @@ import { Filter } from '@hypertrace/components'; import { Observable } from 'rxjs'; import { AttributeExpression } from '../../graphql/model/attribute/attribute-expression'; import { GraphQlGroupBy } from '../../graphql/model/schema/groupby/graphql-group-by'; +import { GraphQlSortBySpecification } from '../../graphql/model/schema/sort/graphql-sort-by-specification'; +// import { GraphQlSortBySpecification } from '../../graphql/model/schema/sort/graphql-sort-by-specification'; import { IntervalValue } from '../interval-select/interval-select.component'; import { ExploreRequestContext, @@ -44,6 +46,13 @@ import { (groupByExpressionChange)="this.updateGroupByExpression(currentVisualization.groupBy, $event)" > + + +
+ Order +
+ + + +
+
+ + ` +}) +export class ExploreQueryOrderByEditorComponent { + @Input() + public orderByExpression?: string; + + @Input() + public context?: TraceType; + + @Output() + public readonly orderByExpressionChange: EventEmitter = new EventEmitter(); + + public readonly orderOptions: SelectOption[] = this.getOrderByOptions(); + private readonly orderByExpressionsToEmit: Subject = new Subject(); + + public readonly currentOrderOption: string | undefined = this.orderOptions[1].value; + + public constructor() { + this.orderByExpressionsToEmit.pipe(debounceTime(500)).subscribe(this.orderByExpressionChange); + } + + public onOrderByDirectionChange(newDirection?: GraphQlSortDirection): void { + this.orderByExpressionsToEmit.next(newDirection ? { key: 'calls', direction: newDirection } : undefined); + } + + private getOrderByOptions(): SelectOption[] { + return [ + this.getEmptyOrderByOption(), + ...['Asc', 'Desc'].map(order => ({ + label: order, + value: order.toUpperCase() + })) + ]; + } + + private getEmptyOrderByOption(): SelectOption { + return { + value: undefined, + label: 'None' + }; + } +} diff --git a/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts b/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts index 27f45f839..f529321a9 100644 --- a/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts +++ b/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts @@ -3,5 +3,5 @@ import { GraphQlSortDirection } from './graphql-sort-direction'; export interface GraphQlSortBySpecification { direction: GraphQlSortDirection; - key: Specification; + key: Specification | string; } diff --git a/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts b/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts index abc21b9d4..1f2dfc12f 100644 --- a/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts +++ b/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts @@ -91,6 +91,7 @@ export class GraphQlArgumentBuilder { } protected buildOrderByArgumentValue(orderBy: GraphQlSortBySpecification): GraphQlArgumentObject { + // @ts-ignore const orderByFragment = orderBy.key.asGraphQlOrderByFragment(); const unknownFields = omit(orderByFragment, 'direction', 'expression'); From 3dff1b69ec670a99ef5e0b45a2a76dd5b1c183eb Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Tue, 5 Jul 2022 11:39:31 +0530 Subject: [PATCH 2/8] ci: lint errors --- .../explore-query-editor.component.ts | 6 ++---- .../argument/graphql-argument-builder.ts | 17 ++++++++++++++--- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts index bed096725..6d8543eb7 100644 --- a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts +++ b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts @@ -5,7 +5,6 @@ import { Observable } from 'rxjs'; import { AttributeExpression } from '../../graphql/model/attribute/attribute-expression'; import { GraphQlGroupBy } from '../../graphql/model/schema/groupby/graphql-group-by'; import { GraphQlSortBySpecification } from '../../graphql/model/schema/sort/graphql-sort-by-specification'; -// import { GraphQlSortBySpecification } from '../../graphql/model/schema/sort/graphql-sort-by-specification'; import { IntervalValue } from '../interval-select/interval-select.component'; import { ExploreRequestContext, @@ -50,7 +49,7 @@ import { class="order-by" [context]="currentVisualization.context" [orderByExpression]="currentVisualization.orderBy" - (orderByExpressionChange)="this.updateOrderBy($event, currentVisualization)" + (orderByExpressionChange)="this.updateOrderBy($event)" > this.buildOrderByArgumentValue(orderBy)) + value: orderBys.map(orderBy => + this.buildOrderByArgumentValue( + orderBy as { + direction: GraphQlSortDirection; + key: Specification; + } + ) + ) } ]; } @@ -90,8 +99,10 @@ export class GraphQlArgumentBuilder { }; } - protected buildOrderByArgumentValue(orderBy: GraphQlSortBySpecification): GraphQlArgumentObject { - // @ts-ignore + protected buildOrderByArgumentValue(orderBy: { + direction: GraphQlSortDirection; + key: Specification; + }): GraphQlArgumentObject { const orderByFragment = orderBy.key.asGraphQlOrderByFragment(); const unknownFields = omit(orderByFragment, 'direction', 'expression'); From 2ee3d4ca1e3af240beb883871bc1c2f6c54037f9 Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Wed, 6 Jul 2022 12:44:47 +0530 Subject: [PATCH 3/8] chore: change default value to None --- .../order-by/explore-query-order-by-editor.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.ts b/projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.ts index 4b49bf098..6c47569bb 100644 --- a/projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.ts +++ b/projects/observability/src/shared/components/explore-query-editor/order-by/explore-query-order-by-editor.component.ts @@ -45,7 +45,7 @@ export class ExploreQueryOrderByEditorComponent { public readonly orderOptions: SelectOption[] = this.getOrderByOptions(); private readonly orderByExpressionsToEmit: Subject = new Subject(); - public readonly currentOrderOption: string | undefined = this.orderOptions[1].value; + public readonly currentOrderOption: string | undefined = this.orderOptions[0].value; public constructor() { this.orderByExpressionsToEmit.pipe(debounceTime(500)).subscribe(this.orderByExpressionChange); From e8d0680cce44463ce0160f5d67ed975e330b631b Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Mon, 11 Jul 2022 15:15:04 +0530 Subject: [PATCH 4/8] refactor: code cleanup --- .../explore-query-editor.component.ts | 9 ++++----- .../explore-visualization-builder.ts | 12 ++++++------ .../explore-query-order-by-editor.component.ts | 18 +++++------------- 3 files changed, 15 insertions(+), 24 deletions(-) diff --git a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts index 6d8543eb7..9e6ee13d5 100644 --- a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts +++ b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts @@ -4,7 +4,7 @@ import { Filter } from '@hypertrace/components'; import { Observable } from 'rxjs'; import { AttributeExpression } from '../../graphql/model/attribute/attribute-expression'; import { GraphQlGroupBy } from '../../graphql/model/schema/groupby/graphql-group-by'; -import { GraphQlSortBySpecification } from '../../graphql/model/schema/sort/graphql-sort-by-specification'; +import { GraphQlSortDirection } from '../../graphql/model/schema/sort/graphql-sort-direction'; import { IntervalValue } from '../interval-select/interval-select.component'; import { ExploreRequestContext, @@ -38,6 +38,7 @@ import { [interval]="currentVisualization.interval" (intervalChange)="this.setInterval($event)" > + = new EventEmitter(); + public readonly orderByDirectionChange: EventEmitter = new EventEmitter(); public readonly orderOptions: SelectOption[] = this.getOrderByOptions(); - private readonly orderByExpressionsToEmit: Subject = new Subject(); + private readonly orderByExpressionsToEmit: Subject = new Subject(); public readonly currentOrderOption: string | undefined = this.orderOptions[0].value; public constructor() { - this.orderByExpressionsToEmit.pipe(debounceTime(500)).subscribe(this.orderByExpressionChange); + this.orderByExpressionsToEmit.pipe(debounceTime(500)).subscribe(this.orderByDirectionChange); } public onOrderByDirectionChange(newDirection?: GraphQlSortDirection): void { - this.orderByExpressionsToEmit.next(newDirection ? { key: 'calls', direction: newDirection } : undefined); + this.orderByExpressionsToEmit.next(newDirection); } private getOrderByOptions(): SelectOption[] { From eff3f65fc4f8ee863b59942d451899f782ca40b7 Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Mon, 11 Jul 2022 15:54:02 +0530 Subject: [PATCH 5/8] refactor: remove string type from sortBy key --- .../graphql/model/schema/sort/graphql-sort-by-specification.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts b/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts index f529321a9..27f45f839 100644 --- a/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts +++ b/projects/observability/src/shared/graphql/model/schema/sort/graphql-sort-by-specification.ts @@ -3,5 +3,5 @@ import { GraphQlSortDirection } from './graphql-sort-direction'; export interface GraphQlSortBySpecification { direction: GraphQlSortDirection; - key: Specification | string; + key: Specification; } From 60f7b607b87d5d6b0db05d2873179eee0377775d Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Mon, 11 Jul 2022 15:55:36 +0530 Subject: [PATCH 6/8] refactor: remove type cast from argument builder --- .../builders/argument/graphql-argument-builder.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts b/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts index 0cbdce255..e45493403 100644 --- a/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts +++ b/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts @@ -40,14 +40,7 @@ export class GraphQlArgumentBuilder { return [ { name: 'orderBy', - value: orderBys.map(orderBy => - this.buildOrderByArgumentValue( - orderBy as { - direction: GraphQlSortDirection; - key: Specification; - } - ) - ) + value: orderBys.map(orderBy => this.buildOrderByArgumentValue(orderBy)) } ]; } From 78e031d029dd4629717c457517864e744c8f82af Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Mon, 11 Jul 2022 15:57:27 +0530 Subject: [PATCH 7/8] refactor: revert type change for orderBy argument --- .../request/builders/argument/graphql-argument-builder.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts b/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts index e45493403..abc21b9d4 100644 --- a/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts +++ b/projects/observability/src/shared/graphql/request/builders/argument/graphql-argument-builder.ts @@ -3,8 +3,6 @@ import { isEmpty, omit } from 'lodash-es'; import { AttributeExpression } from '../../../model/attribute/attribute-expression'; import { GraphQlFilter } from '../../../model/schema/filter/graphql-filter'; import { GraphQlSortBySpecification } from '../../../model/schema/sort/graphql-sort-by-specification'; -import { GraphQlSortDirection } from '../../../model/schema/sort/graphql-sort-direction'; -import { Specification } from '../../../model/schema/specifier/specification'; import { GraphQlTimeRange } from '../../../model/schema/timerange/graphql-time-range'; import { TraceType } from '../../../model/schema/trace'; @@ -92,10 +90,7 @@ export class GraphQlArgumentBuilder { }; } - protected buildOrderByArgumentValue(orderBy: { - direction: GraphQlSortDirection; - key: Specification; - }): GraphQlArgumentObject { + protected buildOrderByArgumentValue(orderBy: GraphQlSortBySpecification): GraphQlArgumentObject { const orderByFragment = orderBy.key.asGraphQlOrderByFragment(); const unknownFields = omit(orderByFragment, 'direction', 'expression'); From 8c6a2575859235dbd078ef22d52cad2955a20920 Mon Sep 17 00:00:00 2001 From: Abhijeet Singh Date: Tue, 12 Jul 2022 12:19:13 +0530 Subject: [PATCH 8/8] refactor: add optional chaining to series --- .../explore-query-editor/explore-visualization-builder.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 932c8242d..7b385aa82 100644 --- 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 @@ -138,7 +138,7 @@ export class ExploreVisualizationBuilder implements OnDestroy { interval: this.resolveInterval(state.interval), filters: state.filters && this.graphQlFilterBuilderService.buildGraphQlFieldFilters(state.filters), groupBy: state.groupBy, - orderBy: state.orderBy && [{ direction: state.orderBy, key: state.series[0].specification }], + orderBy: state.orderBy && [{ direction: state.orderBy, key: state.series[0]?.specification }], limit: state.resultLimit }); }