fix(BUG): error text is show to the user (#427)

* fix(BUG): error text is show to the user

* fix(bug): retention condition is updated

frontend/src/container/GeneralSettings/index.tsx

@@ -9,7 +9,12 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { PayloadProps } from 'types/api/settings/getRetention';
 
 import Retention from './Retention';
-import { ButtonContainer, Container } from './styles';
+import {
+	ButtonContainer,
+	Container,
+	ErrorText,
+	ErrorTextContainer,
+} from './styles';
 
 const GeneralSettings = (): JSX.Element => {
 	const [
@@ -29,6 +34,8 @@ const GeneralSettings = (): JSX.Element => {
 	);
 
 	const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<number>(0);
+	const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
+	const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
 
 	const onClickSaveHandler = useCallback(() => {
 		onModalToggleHandler();
@@ -43,10 +50,26 @@ const GeneralSettings = (): JSX.Element => {
 		setModal((modal) => !modal);
 	};
 
+	const checkMetricTraceDefault = (trace: number, metric: number): void => {
+		if (metric === -1) {
+			setIsDefaultMetrics(true);
+		} else {
+			setIsDefaultMetrics(false);
+		}
+
+		if (trace === -1) {
+			setIsDefaultTrace(true);
+		} else {
+			setIsDefaultTrace(false);
+		}
+	};
+
 	useEffect(() => {
 		if (!loading && payload !== undefined) {
 			const { metrics_ttl_duration_hrs, traces_ttl_duration_hrs } = payload;
 
+			checkMetricTraceDefault(traces_ttl_duration_hrs, metrics_ttl_duration_hrs);
+
 			const traceValue = getSettingsPeroid(traces_ttl_duration_hrs);
 			const metricsValue = getSettingsPeroid(metrics_ttl_duration_hrs);
 
@@ -61,14 +84,24 @@ const GeneralSettings = (): JSX.Element => {
 	const onOkHandler = async (): Promise<void> => {
 		try {
 			setPostApiLoading(true);
+			const retentionTraceValue =
+				retentionPeroidTrace === 0 && (payload?.traces_ttl_duration_hrs || 0) < 0
+					? payload?.traces_ttl_duration_hrs || 0
+					: retentionPeroidTrace;
+
+			const retentionMetricsValue =
+				retentionPeroidMetrics === 0 && (payload?.metrics_ttl_duration_hrs || 0) < 0
+					? payload?.metrics_ttl_duration_hrs || 0
+					: retentionPeroidMetrics;
+
 			const [tracesResponse, metricsResponse] = await Promise.all([
 				setRetentionApi({
-					duration: `${convertIntoHr(retentionPeroidTrace, selectedTracePeroid)}h`,
+					duration: `${convertIntoHr(retentionTraceValue, selectedTracePeroid)}h`,
 					type: 'traces',
 				}),
 				setRetentionApi({
 					duration: `${convertIntoHr(
-						retentionPeroidMetrics,
+						retentionMetricsValue,
 						selectedMetricsPeroid,
 					)}h`,
 					type: 'metrics',
@@ -84,6 +117,9 @@ const GeneralSettings = (): JSX.Element => {
 					placement: 'topRight',
 					description: 'Congrats. The retention periods were updated correctly.',
 				});
+
+				checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue);
+
 				onModalToggleHandler();
 			} else {
 				notifications.error({
@@ -112,10 +148,37 @@ const GeneralSettings = (): JSX.Element => {
 		return <Spinner tip="Loading.." height="70vh" />;
 	}
 
+	const getErrorText = (): string => {
+		const getValue = (value: string): string =>
+			`Retention Peroid for ${value} is not set yet. Please set by choosing below`;
+
+		if (!isDefaultMetrics && !isDefaultTrace) {
+			return '';
+		}
+
+		if (isDefaultMetrics && !isDefaultTrace) {
+			return `${getValue('Metrics')}`;
+		}
+
+		if (!isDefaultMetrics && isDefaultTrace) {
+			return `${getValue('Trace')}`;
+		}
+
+		return `${getValue('Trace , Metrics')}`;
+	};
+
+	const errorText = getErrorText();
+
 	return (
 		<Container>
 			{Element}
 
+			{errorText && (
+				<ErrorTextContainer>
+					<ErrorText>{errorText}</ErrorText>
+				</ErrorTextContainer>
+			)}
+
 			<Retention
 				text={'Retention Period for Metrics'}
 				selectedRetentionPeroid={selectedMetricsPeroid}

frontend/src/container/GeneralSettings/styles.ts

@@ -59,3 +59,17 @@ export const TextContainer = styled.div`
 		min-width: 100px;
 	}
 `;
+
+export const ErrorTextContainer = styled.div`
+	&&& {
+		margin-top: 2rem;
+		margin-bottom: 2rem;
+	}
+`;
+
+export const ErrorText = styled(TypographyComponent)`
+	&&& {
+		color: #e89a3c;
+		font-style: italic;
+	}
+`;