feat: filter spans

SigNoz · Jan 9, 2025 · 4979106 · 4979106
1 parent 5839b65
commit 4979106
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 845 deletions.
diff --git a/...end/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx b/...end/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -1,19 +1,9 @@
 import { Row } from 'antd';
-import { isEmpty } from 'lodash-es';
+import { isNull } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import {
-	buildDependencies,
-	buildDependencyGraph,
-	buildParentDependencyGraph,
-	IDependencyData,
-	onUpdateVariableNode,
-} from './util';
+
 import VariableItem from './VariableItem';
 
 function DashboardVariableSelection(): JSX.Element | null {
@@ -31,14 +21,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 
-	const [dependencyData, setDependencyData] = useState<IDependencyData | null>(
-		null,
-	);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
 	useEffect(() => {
 		if (variables) {
 			const tableRowData = [];
@@ -61,37 +43,35 @@ function DashboardVariableSelection(): JSX.Element | null {
 		}
 	}, [variables]);
 
-	useEffect(() => {
-		if (variablesTableData.length > 0) {
-			const depGrp = buildDependencies(variablesTableData);
-			const { order, graph } = buildDependencyGraph(depGrp);
-			const parentDependencyGraph = buildParentDependencyGraph(graph);
-			setDependencyData({
-				order,
-				graph,
-				parentDependencyGraph,
-			});
-		}
-	}, [setVariablesToGetUpdated, variables, variablesTableData]);
-
-	// this handles the case where the dependency order changes i.e. variable list updated via creation or deletion etc. and we need to refetch the variables
-	// also trigger when the global time changes
-	useEffect(
-		() => {
-			if (!isEmpty(dependencyData?.order)) {
-				setVariablesToGetUpdated(dependencyData?.order || []);
-			}
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[JSON.stringify(dependencyData?.order), minTime, maxTime],
-	);
+	const onVarChanged = (name: string): void => {
+		/**
+		 * this function takes care of adding the dependent variables to current update queue and removing
+		 * the updated variable name from the queue
+		 */
+		const dependentVariables = variablesTableData
+			?.map((variable: any) => {
+				if (variable.type === 'QUERY') {
+					const re = new RegExp(`\\{\\{\\s*?\\.${name}\\s*?\\}\\}`); // regex for `{{.var}}`
+					const queryValue = variable.queryValue || '';
+					const dependVarReMatch = queryValue.match(re);
+					if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
+						return variable.name;
+					}
+				}
+				return null;
+			})
+			.filter((val: string | null) => !isNull(val));
+		setVariablesToGetUpdated((prev) => [
+			...prev.filter((v) => v !== name),
+			...dependentVariables,
+		]);
+	};
 
 	const onValueUpdate = (
 		name: string,
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		// isMountedCall?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
@@ -131,20 +111,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 				});
 			}
 
-			if (dependencyData) {
-				const updatedVariables: string[] = [];
-				onUpdateVariableNode(
-					name,
-					dependencyData.graph,
-					dependencyData.order,
-					(node) => updatedVariables.push(node),
-				);
-				setVariablesToGetUpdated((prev) => [
-					...new Set([...prev, ...updatedVariables.filter((v) => v !== name)]),
-				]);
-			} else {
-				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
-			}
+			onVarChanged(name);
 		}
 	};
 
@@ -172,7 +139,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 						onValueUpdate={onValueUpdate}
 						variablesToGetUpdated={variablesToGetUpdated}
 						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
 					/>
 				))}
 		</Row>

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
@@ -49,11 +49,6 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -70,11 +65,6 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -90,11 +80,6 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -124,11 +109,6 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -153,11 +133,6 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -174,11 +149,6 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);