Merge branch 'main' into feat/aws-integration-ui-facing-api-0

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -130,7 +130,7 @@ services:
       restart_policy:
         condition: on-failure
   query-service:
-    image: signoz/query-service:0.67.0
+    image: signoz/query-service:0.67.1
     command: ["-config=/root/config/prometheus.yml", "--use-logs-new-schema=true", "--use-trace-new-schema=true"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -158,7 +158,7 @@ services:
         condition: on-failure
     !!merge <<: *db-depend
   frontend:
-    image: signoz/frontend:0.67.0
+    image: signoz/frontend:0.67.1
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/clickhouse-setup/docker-compose-minimal.yaml

@@ -145,7 +145,7 @@ services:
       - --storage.path=/data
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.67.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.67.1}
     container_name: signoz-query-service
     command: ["-config=/root/config/prometheus.yml", "--use-logs-new-schema=true", "--use-trace-new-schema=true"]
     # ports:
@@ -172,7 +172,7 @@ services:
       retries: 3
     !!merge <<: *db-depend
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.67.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.67.1}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:

deploy/docker/clickhouse-setup/docker-compose.testing.yaml

@@ -148,7 +148,7 @@ services:
       - --storage.path=/data
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.67.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.67.1}
     container_name: signoz-query-service
     command: ["-config=/root/config/prometheus.yml", "-gateway-url=https://api.staging.signoz.cloud", "--use-logs-new-schema=true", "--use-trace-new-schema=true"]
     # ports:
@@ -176,7 +176,7 @@ services:
       retries: 3
     !!merge <<: *db-depend
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.67.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.67.1}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:

frontend/public/locales/en/billings.json

@@ -3,7 +3,9 @@
 	"billing": "Billing",
 	"manage_billing_and_costs": "Manage your billing information, invoices, and monitor costs.",
 	"enterprise_cloud": "Enterprise Cloud",
+	"teams_cloud": "Teams Cloud",
 	"enterprise": "Enterprise",
+	"teams": "Teams",
 	"card_details_recieved_and_billing_info": "We have received your card details, your billing will only start after the end of your free trial period.",
 	"upgrade_plan": "Upgrade Plan",
 	"manage_billing": "Manage Billing",

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -430,7 +430,7 @@ export default function BillingContainer(): JSX.Element {
 				<Flex justify="space-between" align="center">
 					<Flex vertical>
 						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
-							{isCloudUserVal ? t('enterprise_cloud') : t('enterprise')}{' '}
+							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
 						</Typography.Title>
 						{!isLoading && !isFetchingBillingData ? (

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -44,6 +44,7 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		variablesToGetUpdated,
+		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
@@ -202,11 +203,13 @@ function GridCardGraph({
 			refetchOnMount: false,
 			onError: (error) => {
 				setErrorMessage(error.message);
+				setDashboardQueryRangeCalled(true);
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
+				setDashboardQueryRangeCalled(true);
 			},
 		},
 	);

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -1,5 +1,6 @@
 import './GridCardLayout.styles.scss';
 
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Form, Input, Modal, Typography } from 'antd';
 import { useForm } from 'antd/es/form/Form';
@@ -61,6 +62,8 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		setPanelMap,
 		setSelectedDashboard,
 		isDashboardLocked,
+		dashboardQueryRangeCalled,
+		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { data } = selectedDashboard || {};
 	const { pathname } = useLocation();
@@ -124,6 +127,25 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		setDashboardLayout(sortLayout(layouts));
 	}, [layouts]);
 
+	useEffect(() => {
+		setDashboardQueryRangeCalled(false);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			// Send Sentry event if query_range is not called within expected timeframe (2 mins) when there are widgets
+			if (!dashboardQueryRangeCalled && data?.widgets?.length) {
+				Sentry.captureEvent({
+					message: `Dashboard query range not called within expected timeframe even when there are ${data?.widgets?.length} widgets`,
+					level: 'warning',
+				});
+			}
+		}, 120000);
+
+		return (): void => clearTimeout(timeoutId);
+	}, [dashboardQueryRangeCalled, data?.widgets?.length]);
+
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data)) {

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,9 +1,19 @@
 import { Row } from 'antd';
-import { isNull } from 'lodash-es';
+import { isEmpty } 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 {
@@ -21,6 +31,14 @@ 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 = [];
@@ -43,35 +61,46 @@ function DashboardVariableSelection(): JSX.Element | null {
 		}
 	}, [variables]);
 
-	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,
-		]);
-	};
+	useEffect(() => {
+		if (variablesTableData.length > 0) {
+			const depGrp = buildDependencies(variablesTableData);
+			const { order, graph } = buildDependencyGraph(depGrp);
+			const parentDependencyGraph = buildParentDependencyGraph(graph);
+
+			// cleanup order to only include variables that are of type 'QUERY'
+			const cleanedOrder = order.filter((variable) => {
+				const variableData = variablesTableData.find(
+					(v: IDashboardVariable) => v.name === variable,
+				);
+				return variableData?.type === 'QUERY';
+			});
+
+			setDependencyData({
+				order: cleanedOrder,
+				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 onValueUpdate = (
 		name: string,
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
+		// isMountedCall?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
@@ -111,7 +140,20 @@ function DashboardVariableSelection(): JSX.Element | null {
 				});
 			}
 
-			onVarChanged(name);
+			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));
+			}
 		}
 	};
 
@@ -139,6 +181,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 						onValueUpdate={onValueUpdate}
 						variablesToGetUpdated={variablesToGetUpdated}
 						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				))}
 		</Row>

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx

@@ -49,6 +49,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -65,6 +70,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -80,6 +90,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -109,6 +124,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -133,6 +153,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -149,6 +174,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);