Merge branch 'develop' into release/v0.7.5

frontend/package.json

@@ -68,6 +68,7 @@
 		"react-graph-vis": "^1.0.5",
 		"react-grid-layout": "^1.2.5",
 		"react-i18next": "^11.16.1",
+		"react-query": "^3.34.19",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
 		"react-use": "^17.3.2",

frontend/src/container/GeneralSettings/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import { Button, Col, Modal, notification, Row, Typography } from 'antd';
 import getDisks from 'api/disks/getDisks';
 import getRetentionPeriodApi from 'api/settings/getRetention';
@@ -12,12 +13,7 @@ import { IDiskType } from 'types/api/disks/getDisks';
 import { PayloadProps } from 'types/api/settings/getRetention';
 
 import Retention from './Retention';
-import {
-	ButtonContainer,
-	ErrorText,
-	ErrorTextContainer,
-	ToolTipContainer,
-} from './styles';
+import { ButtonContainer, ErrorText, ErrorTextContainer } from './styles';
 
 function GeneralSettings(): JSX.Element {
 	const { t } = useTranslation();
@@ -31,10 +27,17 @@ function GeneralSettings(): JSX.Element {
 		getDisks().then((response) => setAvailableDisks(response.payload));
 	}, []);
 
-	const { payload: currentTTLValues, loading, error, errorMessage } = useFetch<
+	const { payload, loading, error, errorMessage } = useFetch<
 		PayloadProps,
 		undefined
 	>(getRetentionPeriodApi, undefined);
+
+	const [currentTTLValues, setCurrentTTLValues] = useState(payload);
+
+	useEffect(() => {
+		setCurrentTTLValues(payload);
+	}, [payload]);
+
 	const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState<
 		number | null
 	>(null);
@@ -63,6 +66,7 @@ function GeneralSettings(): JSX.Element {
 					: null,
 			);
 		}
+		console.log({ changed: currentTTLValues });
 	}, [currentTTLValues]);
 
 	const onModalToggleHandler = (): void => {
@@ -138,43 +142,65 @@ function GeneralSettings(): JSX.Element {
 	const onOkHandler = async (): Promise<void> => {
 		try {
 			setPostApiLoading(true);
-			const [metricsTTLApiResponse, tracesTTLApiResponse] = await Promise.all([
-				setRetentionApi({
-					type: 'metrics',
-					totalDuration: `${metricsTotalRetentionPeriod || -1}h`,
-					coldStorage: s3Enabled ? 's3' : null,
-					toColdDuration: `${metricsS3RetentionPeriod || -1}h`,
-				}),
-				setRetentionApi({
-					type: 'traces',
-					totalDuration: `${tracesTotalRetentionPeriod || -1}h`,
-					coldStorage: s3Enabled ? 's3' : null,
-					toColdDuration: `${tracesS3RetentionPeriod || -1}h`,
-				}),
-			]);
-			[
-				{
-					apiResponse: metricsTTLApiResponse,
-					name: 'metrics',
-				},
-				{
-					apiResponse: tracesTTLApiResponse,
-					name: 'traces',
-				},
-			].forEach(({ apiResponse, name }) => {
-				if (apiResponse.statusCode === 200) {
-					notifications.success({
-						message: 'Success!',
-						placement: 'topRight',
-
-						description: t('settings.retention_success_message', { name }),
-					});
-				} else {
-					notifications.error({
-						message: 'Error',
-						description: t('settings.retention_error_message', { name }),
-						placement: 'topRight',
-					});
+			const apiCalls = [];
+
+			if (
+				!(
+					currentTTLValues?.metrics_move_ttl_duration_hrs ===
+						metricsS3RetentionPeriod &&
+					currentTTLValues.metrics_ttl_duration_hrs === metricsTotalRetentionPeriod
+				)
+			) {
+				apiCalls.push(() =>
+					setRetentionApi({
+						type: 'metrics',
+						totalDuration: `${metricsTotalRetentionPeriod || -1}h`,
+						coldStorage: s3Enabled ? 's3' : null,
+						toColdDuration: `${metricsS3RetentionPeriod || -1}h`,
+					}),
+				);
+			} else {
+				apiCalls.push(() => Promise.resolve(null));
+			}
+
+			if (
+				!(
+					currentTTLValues?.traces_move_ttl_duration_hrs ===
+						tracesS3RetentionPeriod &&
+					currentTTLValues.traces_ttl_duration_hrs === tracesTotalRetentionPeriod
+				)
+			) {
+				apiCalls.push(() =>
+					setRetentionApi({
+						type: 'traces',
+						totalDuration: `${tracesTotalRetentionPeriod || -1}h`,
+						coldStorage: s3Enabled ? 's3' : null,
+						toColdDuration: `${tracesS3RetentionPeriod || -1}h`,
+					}),
+				);
+			} else {
+				apiCalls.push(() => Promise.resolve(null));
+			}
+			const apiCallSequence = ['metrics', 'traces'];
+			const apiResponses = await Promise.all(apiCalls.map((api) => api()));
+
+			apiResponses.forEach((apiResponse, idx) => {
+				const name = apiCallSequence[idx];
+				if (apiResponse) {
+					if (apiResponse.statusCode === 200) {
+						notifications.success({
+							message: 'Success!',
+							placement: 'topRight',
+
+							description: t('settings.retention_success_message', { name }),
+						});
+					} else {
+						notifications.error({
+							message: 'Error',
+							description: t('settings.retention_error_message', { name }),
+							placement: 'topRight',
+						});
+					}
 				}
 			});
 			onModalToggleHandler();
@@ -186,10 +212,18 @@ function GeneralSettings(): JSX.Element {
 				placement: 'topRight',
 			});
 		}
+		// Updates the currentTTL Values in order to avoid pushing the same values.
+		setCurrentTTLValues({
+			metrics_ttl_duration_hrs: metricsTotalRetentionPeriod || -1,
+			metrics_move_ttl_duration_hrs: metricsS3RetentionPeriod || -1,
+			traces_ttl_duration_hrs: tracesTotalRetentionPeriod || -1,
+			traces_move_ttl_duration_hrs: tracesS3RetentionPeriod || -1,
+		});
+
 		setModal(false);
 	};
 
-	const [isDisabled, errorText] = useMemo(() => {
+	const [isDisabled, errorText] = useMemo((): [boolean, string] => {
 		// Various methods to return dynamic error message text.
 		const messages = {
 			compareError: (name: string | number): string =>
@@ -228,8 +262,18 @@ function GeneralSettings(): JSX.Element {
 				errorText = messages.nullValueError('traces');
 			}
 		}
+		if (
+			currentTTLValues?.metrics_ttl_duration_hrs === metricsTotalRetentionPeriod &&
+			currentTTLValues.metrics_move_ttl_duration_hrs ===
+				metricsS3RetentionPeriod &&
+			currentTTLValues.traces_ttl_duration_hrs === tracesTotalRetentionPeriod &&
+			currentTTLValues.traces_move_ttl_duration_hrs === tracesS3RetentionPeriod
+		) {
+			isDisabled = true;
+		}
 		return [isDisabled, errorText];
 	}, [
+		currentTTLValues,
 		metricsS3RetentionPeriod,
 		metricsTotalRetentionPeriod,
 		s3Enabled,
@@ -249,27 +293,16 @@ function GeneralSettings(): JSX.Element {
 	return (
 		<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 			{Element}
-			{errorText ? (
-				<ErrorTextContainer>
-					<ErrorText>{errorText}</ErrorText>
-
-					<TextToolTip
-						{...{
-							text: `More details on how to set retention period`,
-							url: 'https://signoz.io/docs/userguide/retention-period/',
-						}}
-					/>
-				</ErrorTextContainer>
-			) : (
-				<ToolTipContainer>
-					<TextToolTip
-						{...{
-							text: `More details on how to set retention period`,
-							url: 'https://signoz.io/docs/userguide/retention-period/',
-						}}
-					/>
-				</ToolTipContainer>
-			)}
+			<ErrorTextContainer>
+				<TextToolTip
+					{...{
+						text: `More details on how to set retention period`,
+						url: 'https://signoz.io/docs/userguide/retention-period/',
+					}}
+				/>
+				{errorText && <ErrorText>{errorText}</ErrorText>}
+			</ErrorTextContainer>
+
 			<Row justify="space-around">{renderConfig}</Row>
 
 			<Modal

frontend/src/container/GeneralSettings/styles.ts

@@ -56,6 +56,7 @@ export const ErrorTextContainer = styled.div`
 		margin-bottom: 2rem;
 		display: flex;
 		align-items: center;
+		gap: 1rem;
 
 		> article {
 			margin-right: 1rem;

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

@@ -36,7 +36,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 		history.replace(
 			`${
 				ROUTES.TRACE
-			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["ok","error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
+			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=[]&&isFilterExclude={"serviceName":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
 		);
 	};
 
@@ -88,7 +88,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 		history.replace(
 			`${
 				ROUTES.TRACE
-			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
+			}?${urlParams.toString()}?selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=[]&isFilterExclude={"serviceName":false,"status":false}&userSelectedFilter={"serviceName":["${servicename}"],"status":["error"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
 		);
 	};
 

frontend/src/container/MetricsApplication/TopEndpointsTable.tsx

@@ -33,7 +33,7 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 		history.push(
 			`${
 				ROUTES.TRACE
-			}?${urlParams.toString()}&selected={"status":["error","ok"],"serviceName":["${servicename}"],"operation":["${operation}"]}&filterToFetchData=["duration","status","serviceName","operation"]&isSelectedFilterSkipped=true&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"],"operation":["${operation}"]}&isSelectedFilterSkipped=true`,
+			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"operation":["${operation}"]}&filterToFetchData=["duration","status","serviceName","operation"]&spanAggregateCurrentPage=1&selectedTags=[]&&isFilterExclude={"serviceName":false,"operation":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"],"operation":["${operation}"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
 		);
 	};
 

frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx

@@ -130,7 +130,6 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 					filterToFetchData,
 					spansAggregate.currentPage,
 					selectedTags,
-					updatedFilter,
 					preIsFilterExclude,
 					preUserSelectedMap,
 					spansAggregate.order,

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx

@@ -126,7 +126,6 @@ function Duration(): JSX.Element {
 				filterToFetchData,
 				spansAggregate.currentPage,
 				selectedTags,
-				preFilter,
 				isFilterExclude,
 				userSelectedFilter,
 				spansAggregate.order,

frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx

@@ -110,7 +110,6 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					updatedFilterData,
 					spansAggregate.currentPage,
 					selectedTags,
-					updatedFilter,
 					isFilterExclude,
 					getPreUserSelected,
 					spansAggregate.order,
@@ -139,7 +138,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 			...filterToFetchData.filter((name) => name !== PanelName),
 		];
 
-		preSelectedFilter.delete(PanelName);
+		// preSelectedFilter.delete(PanelName);
 
 		dispatch({
 			type: UPDATE_ALL_FILTERS,
@@ -160,7 +159,6 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 			preFilterToFetchTheData,
 			spansAggregate.currentPage,
 			selectedTags,
-			filter,
 			isFilterExclude,
 			userSelectedFilter,
 			spansAggregate.order,
@@ -210,7 +208,6 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					filterToFetchData,
 					spansAggregate.currentPage,
 					selectedTags,
-					getUpdatedFilter,
 					postIsFilterExclude,
 					preUserSelected,
 					spansAggregate.order,

frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx

@@ -32,6 +32,7 @@ function TagValue(props: TagValueProps): JSX.Element {
 
 	return (
 		<SelectComponent
+			value={selectedValues[0]}
 			onSelect={(value: unknown): void => {
 				if (typeof value === 'string') {
 					setLocalSelectedTags((tags) => [

frontend/src/container/Trace/Search/AllTags/index.tsx

@@ -116,14 +116,16 @@ function AllTags({
 			</Wrapper>
 
 			<ButtonContainer>
-				<Button onClick={onResetHandler}>Reset</Button>
-				<Button
-					type="primary"
-					onClick={onRunQueryHandler}
-					icon={<CaretRightFilled />}
-				>
-					Run Query
-				</Button>
+				<Space align="start">
+					<Button onClick={onResetHandler}>Reset</Button>
+					<Button
+						type="primary"
+						onClick={onRunQueryHandler}
+						icon={<CaretRightFilled />}
+					>
+						Run Query
+					</Button>
+				</Space>
 			</ButtonContainer>
 		</Container>
 	);

frontend/src/container/Trace/Search/AllTags/styles.ts

@@ -6,7 +6,7 @@ export const Container = styled(Card)`
 	min-height: 20vh;
 	width: 100%;
 	z-index: 2;
-	position: absolute;
+	position: absolute !important;
 
 	.ant-card-body {
 		padding-bottom: 0;
@@ -35,20 +35,16 @@ export const Wrapper = styled.div`
 	}
 `;
 
-export const ButtonContainer = styled.div`
+export const ButtonContainer = styled(Card)`
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
-	background-color: #303030;
-	padding-top: 11px;
-	padding-bottom: 11px;
-	padding-right: 38.01px;
 
-	margin-top: 1rem;
+	padding-top: 11px !important;
+	padding-bottom: 11px !important;
+	padding-right: 38.01px !important;
 
-	> button:nth-child(1) {
-		margin-right: 1rem;
-	}
+	margin-top: 1rem !important;
 `;
 
 export const CurrentTagsContainer = styled.div`