1374 dbcalls querybuilder (#1608)

* refactor: dbcalls-fromPromql-querybuilder


Co-authored-by: Pranay Prateek <pranay@signoz.io>
Co-authored-by: Ankit Nayan <ankit@signoz.io>

frontend/src/container/MetricsApplication/MetricsPageQueries/DBCallQueries.ts

@@ -0,0 +1,65 @@
+import {
+	IMetricsBuilderFormula,
+	IMetricsBuilderQuery,
+	IQueryBuilderTagFilterItems,
+} from 'types/api/dashboard/getAll';
+
+import {
+	getQueryBuilderQueries,
+	getQueryBuilderQuerieswithFormula,
+} from './MetricsPageQueriesFactory';
+
+export const databaseCallsRPS = ({
+	servicename,
+	legend,
+	tagFilterItems,
+}: DatabaseCallsRPSProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	const metricName = 'signoz_db_latency_count';
+	const groupBy = ['db_system'];
+
+	return getQueryBuilderQueries({
+		metricName,
+		legend,
+		groupBy,
+		servicename,
+		tagFilterItems,
+	});
+};
+
+export const databaseCallsAvgDuration = ({
+	servicename,
+	tagFilterItems,
+}: DatabaseCallProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	const metricNameA = 'signoz_db_latency_sum';
+	const metricNameB = 'signoz_db_latency_count';
+	const expression = 'A/B';
+	const legendFormula = '';
+	const legend = '';
+	const disabled = true;
+
+	return getQueryBuilderQuerieswithFormula({
+		servicename,
+		legend,
+		disabled,
+		tagFilterItems,
+		metricNameA,
+		metricNameB,
+		expression,
+		legendFormula,
+	});
+};
+
+interface DatabaseCallsRPSProps extends DatabaseCallProps {
+	legend: '{{db_system}}';
+}
+
+interface DatabaseCallProps {
+	servicename: string | undefined;
+	tagFilterItems: IQueryBuilderTagFilterItems[] | [];
+}

frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts

@@ -0,0 +1,126 @@
+import {
+	IMetricsBuilderFormula,
+	IMetricsBuilderQuery,
+	IQueryBuilderTagFilterItems,
+} from 'types/api/dashboard/getAll';
+
+import {
+	getQueryBuilderQueries,
+	getQueryBuilderQuerieswithAdditionalItems,
+	getQueryBuilderQuerieswithFormula,
+} from './MetricsPageQueriesFactory';
+
+const groupBy = ['address'];
+
+export const externalCallErrorPercent = ({
+	servicename,
+	legend,
+	tagFilterItems,
+}: ExternalCallDurationByAddressProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	const metricNameA = 'signoz_external_call_latency_count';
+	const metricNameB = 'signoz_external_call_latency_count';
+	const additionalItems = {
+		id: '',
+		key: 'status_code',
+		op: 'IN',
+		value: ['STATUS_CODE_ERROR'],
+	};
+
+	const legendFormula = 'External Call Error Percentage';
+	const expression = 'A*100/B';
+	const disabled = false;
+	return getQueryBuilderQuerieswithAdditionalItems({
+		metricNameA,
+		metricNameB,
+		additionalItems,
+		servicename,
+		legend,
+		groupBy,
+		disabled,
+		tagFilterItems,
+		expression,
+		legendFormula,
+	});
+};
+
+export const externalCallDuration = ({
+	servicename,
+	tagFilterItems,
+}: ExternalCallProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	const metricNameA = 'signoz_external_call_latency_sum';
+	const metricNameB = 'signoz_external_call_latency_count';
+	const expression = 'A/B';
+	const legendFormula = 'Average Duration';
+	const legend = '';
+	const disabled = true;
+
+	return getQueryBuilderQuerieswithFormula({
+		servicename,
+		legend,
+		disabled,
+		tagFilterItems,
+		metricNameA,
+		metricNameB,
+		expression,
+		legendFormula,
+	});
+};
+
+export const externalCallRpsByAddress = ({
+	servicename,
+	legend,
+	tagFilterItems,
+}: ExternalCallDurationByAddressProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	const metricName = 'signoz_external_call_latency_count';
+	return getQueryBuilderQueries({
+		servicename,
+		legend,
+		tagFilterItems,
+		metricName,
+		groupBy,
+	});
+};
+
+export const externalCallDurationByAddress = ({
+	servicename,
+	legend,
+	tagFilterItems,
+}: ExternalCallDurationByAddressProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	const metricNameA = 'signoz_external_call_latency_sum';
+	const metricNameB = 'signoz_external_call_latency_count';
+	const expression = 'A/B';
+	const legendFormula = legend;
+	const disabled = false;
+	return getQueryBuilderQuerieswithFormula({
+		servicename,
+		legend,
+		disabled,
+		tagFilterItems,
+		metricNameA,
+		metricNameB,
+		expression,
+		legendFormula,
+		groupBy,
+	});
+};
+
+interface ExternalCallDurationByAddressProps extends ExternalCallProps {
+	legend: '{{address}}';
+}
+
+export interface ExternalCallProps {
+	servicename: string | undefined;
+	tagFilterItems: IQueryBuilderTagFilterItems[];
+}

frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.tsx

@@ -1,238 +0,0 @@
-import {
-	IMetricsBuilderFormula,
-	IMetricsBuilderQuery,
-	IQueryBuilderTagFilterItems,
-} from 'types/api/dashboard/getAll';
-
-export const externalCallErrorPercent = ({
-	servicename,
-	legend,
-	tagFilterItems,
-}: ExternalCallDurationByAddressProps): {
-	formulas: IMetricsBuilderFormula[];
-	queryBuilder: IMetricsBuilderQuery[];
-} => ({
-	formulas: [
-		{
-			name: 'F1',
-			expression: 'A*100/B',
-			disabled: false,
-			legend: 'External Call Error Percentage',
-		},
-	],
-	queryBuilder: [
-		{
-			name: 'A',
-			aggregateOperator: 18,
-			metricName: 'signoz_external_call_latency_count',
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					{
-						id: '',
-						key: 'status_code',
-						op: 'IN',
-						value: ['STATUS_CODE_ERROR'],
-					},
-					...tagFilterItems,
-				],
-
-				op: 'AND',
-			},
-			groupBy: ['address'],
-			legend,
-			disabled: false,
-		},
-		{
-			name: 'B',
-			aggregateOperator: 18,
-			metricName: 'signoz_external_call_latency_count',
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
-				op: 'AND',
-			},
-			groupBy: ['address'],
-			legend,
-			disabled: false,
-		},
-	],
-});
-
-export const externalCallDuration = ({
-	servicename,
-	tagFilterItems,
-}: ExternalCallProps): {
-	formulas: IMetricsBuilderFormula[];
-	queryBuilder: IMetricsBuilderQuery[];
-} => ({
-	formulas: [
-		{
-			disabled: false,
-			expression: 'A/B',
-			name: 'F1',
-			legend: 'Average Duration',
-		},
-	],
-	queryBuilder: [
-		{
-			aggregateOperator: 18,
-			disabled: true,
-			groupBy: [],
-			legend: '',
-			metricName: 'signoz_external_call_latency_sum',
-			name: 'A',
-			reduceTo: 1,
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
-				op: 'AND',
-			},
-		},
-		{
-			aggregateOperator: 18,
-			disabled: true,
-			groupBy: [],
-			legend: '',
-			metricName: 'signoz_external_call_latency_count',
-			name: 'B',
-			reduceTo: 1,
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
-				op: 'AND',
-			},
-		},
-	],
-});
-
-export const externalCallRpsByAddress = ({
-	servicename,
-	legend,
-	tagFilterItems,
-}: ExternalCallDurationByAddressProps): {
-	formulas: IMetricsBuilderFormula[];
-	queryBuilder: IMetricsBuilderQuery[];
-} => ({
-	formulas: [],
-	queryBuilder: [
-		{
-			aggregateOperator: 18,
-			disabled: false,
-			groupBy: ['address'],
-			legend,
-			metricName: 'signoz_external_call_latency_count',
-			name: 'A',
-			reduceTo: 1,
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
-				op: 'AND',
-			},
-		},
-	],
-});
-
-export const externalCallDurationByAddress = ({
-	servicename,
-	legend,
-	tagFilterItems,
-}: ExternalCallDurationByAddressProps): {
-	formulas: IMetricsBuilderFormula[];
-	queryBuilder: IMetricsBuilderQuery[];
-} => ({
-	formulas: [
-		{
-			disabled: false,
-			expression: 'A/B',
-			name: 'F1',
-			legend,
-		},
-	],
-	queryBuilder: [
-		{
-			aggregateOperator: 18,
-			disabled: false,
-			groupBy: ['address'],
-			legend,
-			metricName: 'signoz_external_call_latency_sum',
-			name: 'A',
-			reduceTo: 1,
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
-				op: 'AND',
-			},
-		},
-		{
-			aggregateOperator: 18,
-			disabled: false,
-			groupBy: ['address'],
-			legend,
-			metricName: 'signoz_external_call_latency_count',
-			name: 'B',
-			reduceTo: 1,
-			tagFilters: {
-				items: [
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
-				op: 'AND',
-			},
-		},
-	],
-});
-
-interface ExternalCallDurationByAddressProps extends ExternalCallProps {
-	legend: '{{address}}';
-}
-
-interface ExternalCallProps {
-	servicename: string | undefined;
-	tagFilterItems: IQueryBuilderTagFilterItems[] | [];
-}

frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts

@@ -0,0 +1,206 @@
+import {
+	IMetricsBuilderFormula,
+	IMetricsBuilderQuery,
+	IQueryBuilderTagFilterItems,
+} from 'types/api/dashboard/getAll';
+
+import { ExternalCallProps } from './ExternalQueries';
+
+export const getQueryBuilderQueries = ({
+	metricName,
+	groupBy,
+	servicename,
+	legend,
+	tagFilterItems,
+}: BuilderQueriesProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => ({
+	formulas: [],
+	queryBuilder: [
+		{
+			aggregateOperator: 18,
+			disabled: false,
+			groupBy,
+			legend,
+			metricName,
+			name: 'A',
+			reduceTo: 1,
+			tagFilters: {
+				items: [
+					{
+						id: '',
+						key: 'service_name',
+						op: 'IN',
+						value: [`${servicename}`],
+					},
+					...tagFilterItems,
+				],
+				op: 'AND',
+			},
+		},
+	],
+});
+
+export const getQueryBuilderQuerieswithFormula = ({
+	servicename,
+	legend,
+	disabled,
+	tagFilterItems,
+	metricNameA,
+	metricNameB,
+	groupBy,
+	expression,
+	legendFormula,
+}: BuilderQuerieswithFormulaProps): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => {
+	return {
+		formulas: [
+			{
+				disabled: false,
+				expression,
+				name: 'F1',
+				legend: legendFormula,
+			},
+		],
+		queryBuilder: [
+			{
+				aggregateOperator: 18,
+				disabled,
+				groupBy,
+				legend,
+				metricName: metricNameA,
+				name: 'A',
+				reduceTo: 1,
+				tagFilters: {
+					items: [
+						{
+							id: '',
+							key: 'service_name',
+							op: 'IN',
+							value: [`${servicename}`],
+						},
+						...tagFilterItems,
+					],
+
+					op: 'AND',
+				},
+			},
+			{
+				aggregateOperator: 18,
+				disabled,
+				groupBy,
+				legend,
+				metricName: metricNameB,
+				name: 'B',
+				reduceTo: 1,
+				tagFilters: {
+					items: [
+						{
+							id: '',
+							key: 'service_name',
+							op: 'IN',
+							value: [`${servicename}`],
+						},
+						...tagFilterItems,
+					],
+					op: 'AND',
+				},
+			},
+		],
+	};
+};
+
+export const getQueryBuilderQuerieswithAdditionalItems = ({
+	servicename,
+	legend,
+	disabled,
+	tagFilterItems,
+	metricNameA,
+	metricNameB,
+	groupBy,
+	expression,
+	legendFormula,
+	additionalItems,
+}: BuilderQuerieswithAdditionalItems): {
+	formulas: IMetricsBuilderFormula[];
+	queryBuilder: IMetricsBuilderQuery[];
+} => ({
+	formulas: [
+		{
+			disabled: false,
+			expression,
+			name: 'F1',
+			legend: legendFormula,
+		},
+	],
+	queryBuilder: [
+		{
+			aggregateOperator: 18,
+			disabled,
+			groupBy,
+			legend,
+			metricName: metricNameA,
+			name: 'A',
+			reduceTo: 1,
+			tagFilters: {
+				items: [
+					{
+						id: '',
+						key: 'service_name',
+						op: 'IN',
+						value: [`${servicename}`],
+					},
+					additionalItems,
+					...tagFilterItems,
+				],
+
+				op: 'AND',
+			},
+		},
+		{
+			aggregateOperator: 18,
+			disabled,
+			groupBy,
+			legend,
+			metricName: metricNameB,
+			name: 'B',
+			reduceTo: 1,
+			tagFilters: {
+				items: [
+					{
+						id: '',
+						key: 'service_name',
+						op: 'IN',
+						value: [`${servicename}`],
+					},
+					...tagFilterItems,
+				],
+				op: 'AND',
+			},
+		},
+	],
+});
+
+interface BuilderQueriesProps extends ExternalCallProps {
+	metricName: string;
+	groupBy?: string[];
+	legend: string;
+}
+
+interface BuilderQuerieswithFormulaProps extends ExternalCallProps {
+	metricNameA: string;
+	metricNameB: string;
+	legend: string;
+	disabled: boolean;
+	groupBy?: string[];
+	expression: string;
+	legendFormula: string;
+}
+
+interface BuilderQuerieswithAdditionalItems
+	extends BuilderQuerieswithFormulaProps {
+	additionalItems: IQueryBuilderTagFilterItems;
+}

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -1,19 +1,30 @@
 import { Col } from 'antd';
-import FullView from 'container/GridGraphLayout/Graph/FullView';
-import React from 'react';
+import FullView from 'container/GridGraphLayout/Graph/FullView/index.metricsBuilder';
+import {
+	databaseCallsAvgDuration,
+	databaseCallsRPS,
+} from 'container/MetricsApplication/MetricsPageQueries/DBCallQueries';
+import { resourceAttributesToTagFilterItems } from 'lib/resourceAttributes';
+import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
-import { PromQLWidgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/dashboard/getAll';
 import MetricReducer from 'types/reducer/metrics';
 
 import { Card, GraphContainer, GraphTitle, Row } from '../styles';
 
-function DBCall({ getWidget }: DBCallProps): JSX.Element {
+function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();
-	const { resourceAttributePromQLQuery } = useSelector<AppState, MetricReducer>(
+	const { resourceAttributeQueries } = useSelector<AppState, MetricReducer>(
 		(state) => state.metrics,
 	);
+	const tagFilterItems = useMemo(
+		() => resourceAttributesToTagFilterItems(resourceAttributeQueries) || [],
+		[resourceAttributeQueries],
+	);
+	const legend = '{{db_system}}';
+
 	return (
 		<Row gutter={24}>
 			<Col span={12}>
@@ -23,12 +34,16 @@ function DBCall({ getWidget }: DBCallProps): JSX.Element {
 						<FullView
 							name="database_call_rps"
 							fullViewOptions={false}
-							widget={getWidget([
-								{
-									query: `sum(rate(signoz_db_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (db_system)`,
-									legend: '{{db_system}}',
-								},
-							])}
+							widget={getWidgetQueryBuilder({
+								queryType: 1,
+								promQL: [],
+								metricsBuilder: databaseCallsRPS({
+									servicename,
+									legend,
+									tagFilterItems,
+								}),
+								clickHouse: [],
+							})}
 							yAxisUnit="reqps"
 						/>
 					</GraphContainer>
@@ -42,12 +57,15 @@ function DBCall({ getWidget }: DBCallProps): JSX.Element {
 						<FullView
 							name="database_call_avg_duration"
 							fullViewOptions={false}
-							widget={getWidget([
-								{
-									query: `sum(rate(signoz_db_latency_sum{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m]))/sum(rate(signoz_db_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m]))`,
-									legend: '',
-								},
-							])}
+							widget={getWidgetQueryBuilder({
+								queryType: 1,
+								promQL: [],
+								metricsBuilder: databaseCallsAvgDuration({
+									servicename,
+									tagFilterItems,
+								}),
+								clickHouse: [],
+							})}
 							yAxisUnit="ms"
 						/>
 					</GraphContainer>
@@ -58,7 +76,7 @@ function DBCall({ getWidget }: DBCallProps): JSX.Element {
 }
 
 interface DBCallProps {
-	getWidget: (query: PromQLWidgets['query']) => PromQLWidgets;
+	getWidgetQueryBuilder: (query: Widgets['query']) => Widgets;
 }
 
 export default DBCall;

frontend/src/container/MetricsApplication/index.tsx

@@ -58,7 +58,7 @@ function OverViewTab(): JSX.Element {
 }
 
 function DbCallTab(): JSX.Element {
-	return <DBCall getWidget={getWidget} />;
+	return <DBCall getWidgetQueryBuilder={getWidgetQueryBuilder} />;
 }
 
 function ExternalTab(): JSX.Element {