diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx index 35c2473248..0c26a19b25 100644 --- a/frontend/src/container/GeneralSettings/index.tsx +++ b/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(0); + const [isDefaultMetrics, setIsDefaultMetrics] = useState(false); + const [isDefaultTrace, setIsDefaultTrace] = useState(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 => { 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 ; } + 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 ( {Element} + {errorText && ( + + {errorText} + + )} +