From 6d7081a4bdc4ea5aed9db74332e07e921cab604b Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Thu, 20 Jul 2023 12:02:21 +0530 Subject: [PATCH] USE_SPAN_METRICS for latency graph on Feature flag (#3172) --- frontend/src/constants/features.ts | 1 + .../MetricsPageQueriesFactory.ts | 2 +- .../MetricsPageQueries/OverviewQueries.ts | 108 ++++++++---------- .../MetricsApplication/Tabs/Overview.tsx | 18 +-- .../Tabs/Overview/ServiceOverview.tsx | 11 +- .../container/MetricsApplication/constant.ts | 9 +- 6 files changed, 75 insertions(+), 74 deletions(-) diff --git a/frontend/src/constants/features.ts b/frontend/src/constants/features.ts index cceaf2817b..c5f4a1e7b8 100644 --- a/frontend/src/constants/features.ts +++ b/frontend/src/constants/features.ts @@ -8,4 +8,5 @@ export enum FeatureKeys { QUERY_BUILDER_PANELS = 'QUERY_BUILDER_PANELS', QUERY_BUILDER_ALERTS = 'QUERY_BUILDER_ALERTS', DISABLE_UPSELL = 'DISABLE_UPSELL', + USE_SPAN_METRICS = 'USE_SPAN_METRICS', } diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts index e8a803598c..58f535cd04 100644 --- a/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts +++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts @@ -43,11 +43,11 @@ export const getQueryBuilderQueries = ({ inputFormat: 'ns', start: store.getState().globalTime.minTime, }), - reduceTo: 'sum', filters: { items: filterItems[index], op: 'AND', }, + reduceTo: 'sum', dataSource, }; diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts index 4032a0822f..ec2d7b9272 100644 --- a/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts +++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts @@ -7,7 +7,8 @@ import { DataType, FORMULA, GraphTitle, - LETENCY_LEGENDS_AGGREGATEOPERATOR, + LATENCY_AGGREGATEOPERATOR, + LATENCY_AGGREGATEOPERATOR_SPAN_METRICS, MetricsType, OPERATION_LEGENDS, QUERYNAME_AND_EXPRESSION, @@ -22,79 +23,58 @@ import { export const latency = ({ servicename, tagFilterItems, + isSpanMetricEnable = false, + topLevelOperationsRoute, }: LatencyProps): QueryBuilderData => { - const autocompleteData: BaseAutocompleteData[] = [ + const newAutoCompleteData: BaseAutocompleteData = { + key: isSpanMetricEnable + ? WidgetKeys.Signoz_latency_bucket + : WidgetKeys.DurationNano, + dataType: DataType.FLOAT64, + isColumn: true, + type: isSpanMetricEnable ? null : MetricsType.Tag, + }; + + const autocompleteData: BaseAutocompleteData[] = Array(3).fill( + newAutoCompleteData, + ); + + const filterItem: TagFilterItem[] = [ { - key: WidgetKeys.DurationNano, - dataType: DataType.FLOAT64, - isColumn: true, - type: MetricsType.Tag, + id: '', + key: { + key: isSpanMetricEnable ? WidgetKeys.Service_name : WidgetKeys.ServiceName, + dataType: DataType.STRING, + type: isSpanMetricEnable ? MetricsType.Resource : MetricsType.Tag, + isColumn: !isSpanMetricEnable, + }, + op: isSpanMetricEnable ? OPERATORS.IN : OPERATORS['='], + value: isSpanMetricEnable ? [servicename] : servicename, }, { - key: WidgetKeys.DurationNano, - dataType: DataType.FLOAT64, - isColumn: true, - type: MetricsType.Tag, - }, - { - key: WidgetKeys.DurationNano, - dataType: DataType.FLOAT64, - isColumn: true, - type: MetricsType.Tag, + id: '', + key: { + dataType: DataType.STRING, + isColumn: !isSpanMetricEnable, + key: isSpanMetricEnable ? WidgetKeys.Operation : WidgetKeys.Name, + type: MetricsType.Tag, + }, + op: OPERATORS.IN.toLowerCase(), // TODO: need to remove toLowerCase() this once backend is changed + value: [...topLevelOperationsRoute], }, + ...tagFilterItems, ]; - const filterItems: TagFilterItem[][] = [ - [ - { - id: '', - key: { - key: WidgetKeys.ServiceName, - dataType: DataType.STRING, - type: MetricsType.Tag, - isColumn: true, - }, - op: OPERATORS['='], - value: `${servicename}`, - }, - ...tagFilterItems, - ], - [ - { - id: '', - key: { - key: WidgetKeys.ServiceName, - dataType: DataType.STRING, - type: MetricsType.Tag, - isColumn: true, - }, - op: OPERATORS['='], - value: `${servicename}`, - }, - ...tagFilterItems, - ], - [ - { - id: '', - key: { - key: WidgetKeys.ServiceName, - dataType: DataType.STRING, - type: MetricsType.Tag, - isColumn: true, - }, - op: OPERATORS['='], - value: `${servicename}`, - }, - ...tagFilterItems, - ], - ]; + const filterItems: TagFilterItem[][] = Array(3).fill([...filterItem]); return getQueryBuilderQueries({ autocompleteData, - legends: LETENCY_LEGENDS_AGGREGATEOPERATOR, + legends: LATENCY_AGGREGATEOPERATOR, filterItems, - aggregateOperator: LETENCY_LEGENDS_AGGREGATEOPERATOR, - dataSource: DataSource.TRACES, + aggregateOperator: isSpanMetricEnable + ? LATENCY_AGGREGATEOPERATOR_SPAN_METRICS + : LATENCY_AGGREGATEOPERATOR, + dataSource: isSpanMetricEnable ? DataSource.METRICS : DataSource.TRACES, queryNameAndExpression: QUERYNAME_AND_EXPRESSION, }); }; @@ -250,4 +230,6 @@ export interface OperationPerSecProps { export interface LatencyProps { servicename: IServiceName['servicename']; tagFilterItems: TagFilterItem[]; + isSpanMetricEnable?: boolean; + topLevelOperationsRoute: string[]; } diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index 542449ba97..9d30b624f2 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx @@ -97,6 +97,11 @@ function Application(): JSX.Element { [queries], ); + const topLevelOperationsRoute = useMemo( + () => (topLevelOperations ? topLevelOperations[servicename || ''] : []), + [servicename, topLevelOperations], + ); + const operationPerSecWidget = useMemo( () => getWidgetQueryBuilder( @@ -106,16 +111,14 @@ function Application(): JSX.Element { builder: operationPerSec({ servicename, tagFilterItems, - topLevelOperations: topLevelOperations - ? topLevelOperations[servicename || ''] - : [], + topLevelOperations: topLevelOperationsRoute, }), clickhouse_sql: [], id: uuid(), }, GraphTitle.RATE_PER_OPS, ), - [servicename, topLevelOperations, tagFilterItems], + [servicename, tagFilterItems, topLevelOperationsRoute], ); const errorPercentageWidget = useMemo( @@ -127,16 +130,14 @@ function Application(): JSX.Element { builder: errorPercentage({ servicename, tagFilterItems, - topLevelOperations: topLevelOperations - ? topLevelOperations[servicename || ''] - : [], + topLevelOperations: topLevelOperationsRoute, }), clickhouse_sql: [], id: uuid(), }, GraphTitle.ERROR_PERCENTAGE, ), - [servicename, topLevelOperations, tagFilterItems], + [servicename, tagFilterItems, topLevelOperationsRoute], ); const onDragSelect = useCallback( @@ -181,6 +182,7 @@ function Application(): JSX.Element { selectedTimeStamp={selectedTimeStamp} selectedTraceTags={selectedTraceTags} tagFilterItems={tagFilterItems} + topLevelOperationsRoute={topLevelOperationsRoute} /> diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx index 342ddc191d..3b1ad2b7d9 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx @@ -1,8 +1,10 @@ +import { FeatureKeys } from 'constants/features'; import Graph from 'container/GridGraphLayout/Graph/'; import { GraphTitle } from 'container/MetricsApplication/constant'; import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory'; import { latency } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries'; import { Card, GraphContainer } from 'container/MetricsApplication/styles'; +import useFeatureFlag from 'hooks/useFeatureFlag'; import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData'; @@ -20,9 +22,13 @@ function ServiceOverview({ selectedTraceTags, selectedTimeStamp, tagFilterItems, + topLevelOperationsRoute, }: ServiceOverviewProps): JSX.Element { const { servicename } = useParams(); + const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS) + ?.active; + const latencyWidget = useMemo( () => getWidgetQueryBuilder( @@ -32,13 +38,15 @@ function ServiceOverview({ builder: latency({ servicename, tagFilterItems, + isSpanMetricEnable, + topLevelOperationsRoute, }), clickhouse_sql: [], id: uuid(), }, GraphTitle.LATENCY, ), - [servicename, tagFilterItems], + [servicename, tagFilterItems, isSpanMetricEnable, topLevelOperationsRoute], ); return ( @@ -79,6 +87,7 @@ interface ServiceOverviewProps { onDragSelect: (start: number, end: number) => void; handleGraphClick: (type: string) => ClickHandlerType; tagFilterItems: TagFilterItem[]; + topLevelOperationsRoute: string[]; } export default ServiceOverview; diff --git a/frontend/src/container/MetricsApplication/constant.ts b/frontend/src/container/MetricsApplication/constant.ts index 6ceead671d..0e917cce47 100644 --- a/frontend/src/container/MetricsApplication/constant.ts +++ b/frontend/src/container/MetricsApplication/constant.ts @@ -3,7 +3,12 @@ export const legend = { }; export const QUERYNAME_AND_EXPRESSION = ['A', 'B', 'C']; -export const LETENCY_LEGENDS_AGGREGATEOPERATOR = ['p50', 'p90', 'p99']; +export const LATENCY_AGGREGATEOPERATOR = ['p50', 'p90', 'p99']; +export const LATENCY_AGGREGATEOPERATOR_SPAN_METRICS = [ + 'hist_quantile_50', + 'hist_quantile_90', + 'hist_quantile_99', +]; export const OPERATION_LEGENDS = ['Operations']; export enum FORMULA { @@ -35,6 +40,7 @@ export enum MetricsType { } export enum WidgetKeys { + Name = 'name', Address = 'address', DurationNano = 'durationNano', StatusCode = 'status_code', @@ -50,4 +56,5 @@ export enum WidgetKeys { SignozCallsTotal = 'signoz_calls_total', SignozExternalCallLatencyCount = 'signoz_external_call_latency_count', SignozExternalCallLatencySum = 'signoz_external_call_latency_sum', + Signoz_latency_bucket = 'signoz_latency_bucket', }