refactor: tagFilteritems-refactored (#2056)

* refactor: tagFilteritems-refactored

* refactor: wrapper-over-getwidget

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

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

@@ -19,13 +19,21 @@ export const databaseCallsRPS = ({
 } => {
 	const metricName = 'signoz_db_latency_count';
 	const groupBy = ['db_system'];
+	const itemsA = [
+		{
+			id: '',
+			key: 'service_name',
+			op: 'IN',
+			value: [`${servicename}`],
+		},
+		...tagFilterItems,
+	];
 
 	return getQueryBuilderQueries({
 		metricName,
-		legend,
 		groupBy,
-		servicename,
+		legend,
-		tagFilterItems,
+		itemsA,
 	});
 };
 
@@ -42,14 +50,24 @@ export const databaseCallsAvgDuration = ({
 	const legendFormula = '';
 	const legend = '';
 	const disabled = true;
+	const additionalItemsA = [
+		{
+			id: '',
+			key: 'service_name',
+			op: 'IN',
+			value: [`${servicename}`],
+		},
+		...tagFilterItems,
+	];
+	const additionalItemsB = additionalItemsA;
 
 	return getQueryBuilderQuerieswithFormula({
-		servicename,
-		legend,
-		disabled,
-		tagFilterItems,
 		metricNameA,
 		metricNameB,
+		additionalItemsA,
+		additionalItemsB,
+		legend,
+		disabled,
 		expression,
 		legendFormula,
 	});

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

@@ -6,7 +6,6 @@ import {
 
 import {
 	getQueryBuilderQueries,
-	getQueryBuilderQuerieswithAdditionalItems,
 	getQueryBuilderQuerieswithFormula,
 } from './MetricsPageQueriesFactory';
 
@@ -22,25 +21,41 @@ export const externalCallErrorPercent = ({
 } => {
 	const metricNameA = 'signoz_external_call_latency_count';
 	const metricNameB = 'signoz_external_call_latency_count';
-	const additionalItems = {
+	const additionalItemsA = [
-		id: '',
+		{
-		key: 'status_code',
+			id: '',
-		op: 'IN',
+			key: 'service_name',
-		value: ['STATUS_CODE_ERROR'],
+			op: 'IN',
-	};
+			value: [`${servicename}`],
-
+		},
+		{
+			id: '',
+			key: 'status_code',
+			op: 'IN',
+			value: ['STATUS_CODE_ERROR'],
+		},
+		...tagFilterItems,
+	];
+	const additionalItemsB = [
+		{
+			id: '',
+			key: 'service_name',
+			op: 'IN',
+			value: [`${servicename}`],
+		},
+		...tagFilterItems,
+	];
 	const legendFormula = 'External Call Error Percentage';
 	const expression = 'A*100/B';
 	const disabled = true;
-	return getQueryBuilderQuerieswithAdditionalItems({
+	return getQueryBuilderQuerieswithFormula({
 		metricNameA,
 		metricNameB,
-		additionalItems,
+		additionalItemsA,
-		servicename,
+		additionalItemsB,
 		legend,
 		groupBy,
 		disabled,
-		tagFilterItems,
 		expression,
 		legendFormula,
 	});
@@ -59,14 +74,24 @@ export const externalCallDuration = ({
 	const legendFormula = 'Average Duration';
 	const legend = '';
 	const disabled = true;
+	const additionalItemsA = [
+		{
+			id: '',
+			key: 'service_name',
+			op: 'IN',
+			value: [`${servicename}`],
+		},
+		...tagFilterItems,
+	];
+	const additionalItemsB = additionalItemsA;
 
 	return getQueryBuilderQuerieswithFormula({
-		servicename,
-		legend,
-		disabled,
-		tagFilterItems,
 		metricNameA,
 		metricNameB,
+		additionalItemsA,
+		additionalItemsB,
+		legend,
+		disabled,
 		expression,
 		legendFormula,
 	});
@@ -81,12 +106,20 @@ export const externalCallRpsByAddress = ({
 	queryBuilder: IMetricsBuilderQuery[];
 } => {
 	const metricName = 'signoz_external_call_latency_count';
+	const itemsA = [
+		{
+			id: '',
+			key: 'service_name',
+			op: 'IN',
+			value: [`${servicename}`],
+		},
+		...tagFilterItems,
+	];
 	return getQueryBuilderQueries({
-		servicename,
-		legend,
-		tagFilterItems,
 		metricName,
 		groupBy,
+		legend,
+		itemsA,
 	});
 };
 
@@ -103,16 +136,27 @@ export const externalCallDurationByAddress = ({
 	const expression = 'A/B';
 	const legendFormula = legend;
 	const disabled = true;
+	const additionalItemsA = [
+		{
+			id: '',
+			key: 'service_name',
+			op: 'IN',
+			value: [`${servicename}`],
+		},
+		...tagFilterItems,
+	];
+	const additionalItemsB = additionalItemsA;
+
 	return getQueryBuilderQuerieswithFormula({
-		servicename,
-		legend,
-		disabled,
-		tagFilterItems,
 		metricNameA,
 		metricNameB,
+		additionalItemsA,
+		additionalItemsB,
+		legend,
+		groupBy,
+		disabled,
 		expression,
 		legendFormula,
-		groupBy,
 	});
 };
 

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

@@ -4,14 +4,11 @@ import {
 	IQueryBuilderTagFilterItems,
 } from 'types/api/dashboard/getAll';
 
-import { ExternalCallProps } from './ExternalQueries';
-
 export const getQueryBuilderQueries = ({
 	metricName,
 	groupBy,
-	servicename,
 	legend,
-	tagFilterItems,
+	itemsA,
 }: BuilderQueriesProps): {
 	formulas: IMetricsBuilderFormula[];
 	queryBuilder: IMetricsBuilderQuery[];
@@ -27,15 +24,7 @@ export const getQueryBuilderQueries = ({
 			name: 'A',
 			reduceTo: 1,
 			tagFilters: {
-				items: [
+				items: itemsA,
-					{
-						id: '',
-						key: 'service_name',
-						op: 'IN',
-						value: [`${servicename}`],
-					},
-					...tagFilterItems,
-				],
 				op: 'AND',
 			},
 		},
@@ -43,13 +32,13 @@ export const getQueryBuilderQueries = ({
 });
 
 export const getQueryBuilderQuerieswithFormula = ({
-	servicename,
-	legend,
-	disabled,
-	tagFilterItems,
 	metricNameA,
 	metricNameB,
+	additionalItemsA,
+	additionalItemsB,
+	legend,
 	groupBy,
+	disabled,
 	expression,
 	legendFormula,
 }: BuilderQuerieswithFormulaProps): {
@@ -75,16 +64,7 @@ export const getQueryBuilderQuerieswithFormula = ({
 				name: 'A',
 				reduceTo: 1,
 				tagFilters: {
-					items: [
+					items: additionalItemsA,
-						{
-							id: '',
-							key: 'service_name',
-							op: 'IN',
-							value: [`${servicename}`],
-						},
-						...tagFilterItems,
-					],
-
 					op: 'AND',
 				},
 			},
@@ -97,15 +77,7 @@ export const getQueryBuilderQuerieswithFormula = ({
 				name: 'B',
 				reduceTo: 1,
 				tagFilters: {
-					items: [
+					items: additionalItemsB,
-						{
-							id: '',
-							key: 'service_name',
-							op: 'IN',
-							value: [`${servicename}`],
-						},
-						...tagFilterItems,
-					],
 					op: 'AND',
 				},
 			},
@@ -113,84 +85,14 @@ export const getQueryBuilderQuerieswithFormula = ({
 	};
 };
 
-export const getQueryBuilderQuerieswithAdditionalItems = ({
+interface BuilderQueriesProps {
-	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;
+	itemsA: IQueryBuilderTagFilterItems[];
 }
 
-interface BuilderQuerieswithFormulaProps extends ExternalCallProps {
+interface BuilderQuerieswithFormulaProps {
 	metricNameA: string;
 	metricNameB: string;
 	legend: string;
@@ -198,9 +100,6 @@ interface BuilderQuerieswithFormulaProps extends ExternalCallProps {
 	groupBy?: string[];
 	expression: string;
 	legendFormula: string;
-}
+	additionalItemsA: IQueryBuilderTagFilterItems[];
-
+	additionalItemsB: IQueryBuilderTagFilterItems[];
-interface BuilderQuerieswithAdditionalItems
-	extends BuilderQuerieswithFormulaProps {
-	additionalItems: IQueryBuilderTagFilterItems;
 }

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

@@ -25,6 +25,35 @@ function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
 	);
 	const legend = '{{db_system}}';
 
+	const databaseCallsRPSWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
+				queryType: 1,
+				promQL: [],
+				metricsBuilder: databaseCallsRPS({
+					servicename,
+					legend,
+					tagFilterItems,
+				}),
+				clickHouse: [],
+			}),
+		[getWidgetQueryBuilder, servicename, tagFilterItems],
+	);
+
+	const databaseCallsAverageDurationWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
+				queryType: 1,
+				promQL: [],
+				metricsBuilder: databaseCallsAvgDuration({
+					servicename,
+					tagFilterItems,
+				}),
+				clickHouse: [],
+			}),
+		[getWidgetQueryBuilder, servicename, tagFilterItems],
+	);
+
 	return (
 		<Row gutter={24}>
 			<Col span={12}>
@@ -34,16 +63,7 @@ function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
 						<FullView
 							name="database_call_rps"
 							fullViewOptions={false}
-							widget={getWidgetQueryBuilder({
+							widget={databaseCallsRPSWidget}
-								queryType: 1,
-								promQL: [],
-								metricsBuilder: databaseCallsRPS({
-									servicename,
-									legend,
-									tagFilterItems,
-								}),
-								clickHouse: [],
-							})}
 							yAxisUnit="reqps"
 						/>
 					</GraphContainer>
@@ -57,15 +77,7 @@ function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
 						<FullView
 							name="database_call_avg_duration"
 							fullViewOptions={false}
-							widget={getWidgetQueryBuilder({
+							widget={databaseCallsAverageDurationWidget}
-								queryType: 1,
-								promQL: [],
-								metricsBuilder: databaseCallsAvgDuration({
-									servicename,
-									tagFilterItems,
-								}),
-								clickHouse: [],
-							})}
 							yAxisUnit="ms"
 						/>
 					</GraphContainer>

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

@@ -29,6 +29,65 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 
 	const legend = '{{address}}';
 
+	const externalCallErrorWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
+				queryType: 1,
+				promQL: [],
+				metricsBuilder: externalCallErrorPercent({
+					servicename,
+					legend,
+					tagFilterItems,
+				}),
+				clickHouse: [],
+			}),
+		[getWidgetQueryBuilder, servicename, tagFilterItems],
+	);
+
+	const externalCallDurationWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
+				queryType: 1,
+				promQL: [],
+				metricsBuilder: externalCallDuration({
+					servicename,
+					tagFilterItems,
+				}),
+				clickHouse: [],
+			}),
+		[getWidgetQueryBuilder, servicename, tagFilterItems],
+	);
+
+	const externalCallRPSWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
+				queryType: 1,
+				promQL: [],
+				metricsBuilder: externalCallRpsByAddress({
+					servicename,
+					legend,
+					tagFilterItems,
+				}),
+				clickHouse: [],
+			}),
+		[getWidgetQueryBuilder, servicename, tagFilterItems],
+	);
+
+	const externalCallDurationAddressWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
+				queryType: 1,
+				promQL: [],
+				metricsBuilder: externalCallDurationByAddress({
+					servicename,
+					legend,
+					tagFilterItems,
+				}),
+				clickHouse: [],
+			}),
+		[getWidgetQueryBuilder, servicename, tagFilterItems],
+	);
+
 	return (
 		<>
 			<Row gutter={24}>
@@ -39,16 +98,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 							<FullView
 								name="external_call_error_percentage"
 								fullViewOptions={false}
-								widget={getWidgetQueryBuilder({
+								widget={externalCallErrorWidget}
-									queryType: 1,
-									promQL: [],
-									metricsBuilder: externalCallErrorPercent({
-										servicename,
-										legend,
-										tagFilterItems,
-									}),
-									clickHouse: [],
-								})}
 								yAxisUnit="%"
 							/>
 						</GraphContainer>
@@ -62,12 +112,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 							<FullView
 								name="external_call_duration"
 								fullViewOptions={false}
-								widget={getWidgetQueryBuilder({
+								widget={externalCallDurationWidget}
-									queryType: 1,
-									promQL: [],
-									metricsBuilder: externalCallDuration({ servicename, tagFilterItems }),
-									clickHouse: [],
-								})}
 								yAxisUnit="ms"
 							/>
 						</GraphContainer>
@@ -83,16 +128,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 							<FullView
 								name="external_call_rps_by_address"
 								fullViewOptions={false}
-								widget={getWidgetQueryBuilder({
+								widget={externalCallRPSWidget}
-									queryType: 1,
-									promQL: [],
-									metricsBuilder: externalCallRpsByAddress({
-										servicename,
-										legend,
-										tagFilterItems,
-									}),
-									clickHouse: [],
-								})}
 								yAxisUnit="reqps"
 							/>
 						</GraphContainer>
@@ -106,16 +142,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 							<FullView
 								name="external_call_duration_by_address"
 								fullViewOptions={false}
-								widget={getWidgetQueryBuilder({
+								widget={externalCallDurationAddressWidget}
-									queryType: 1,
-									promQL: [],
-									metricsBuilder: externalCallDurationByAddress({
-										servicename,
-										legend,
-										tagFilterItems,
-									}),
-									clickHouse: [],
-								})}
 								yAxisUnit="ms"
 							/>
 						</GraphContainer>