diff --git a/frontend/src/api/settings/setRetention.ts b/frontend/src/api/settings/setRetention.ts index dcf0a0f2c3..da8fdf515b 100644 --- a/frontend/src/api/settings/setRetention.ts +++ b/frontend/src/api/settings/setRetention.ts @@ -8,9 +8,9 @@ const setRetention = async ( props: Props, ): Promise | ErrorResponse> => { try { - const response = await axios.post( - `/settings/ttl?duration=${props.duration}&type=${props.type}`, - ); + const response = await axios.post(`/settings/ttl`, { + props, + }); return { statusCode: 200, diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx index 64591b9b59..653597c3f7 100644 --- a/frontend/src/container/GeneralSettings/Retention.tsx +++ b/frontend/src/container/GeneralSettings/Retention.tsx @@ -17,6 +17,7 @@ function Retention({ retentionValue, setRetentionValue, text, + hide, }: RetentionProps): JSX.Element { const { value: initialValue, @@ -64,7 +65,9 @@ function Retention({ func(null); } }; - + if (hide) { + return null; + } return ( @@ -103,6 +106,7 @@ interface RetentionProps { retentionValue: number; text: string; setRetentionValue: React.Dispatch>; + hide: boolean; } export default Retention; diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx index 7796e38d5f..db2c4f3ec8 100644 --- a/frontend/src/container/GeneralSettings/index.tsx +++ b/frontend/src/container/GeneralSettings/index.tsx @@ -1,13 +1,15 @@ import { Button, Col, Modal, notification, Row, Typography } from 'antd'; import getDisks from 'api/disks/getDisks'; -import getRetentionperoidApi from 'api/settings/getRetention'; +import getRetentionPeriodApi from 'api/settings/getRetention'; import setRetentionApi from 'api/settings/setRetention'; import Spinner from 'components/Spinner'; import TextToolTip from 'components/TextToolTip'; import useFetch from 'hooks/useFetch'; import convertIntoHr from 'lib/convertIntoHr'; import getSettingsPeroid from 'lib/getSettingsPeroid'; -import React, { useCallback, useEffect, useState } from 'react'; +import { find } from 'lodash-es'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { IDiskType } from 'types/api/disks/getDisks'; import { PayloadProps } from 'types/api/settings/getRetention'; import Retention from './Retention'; @@ -24,43 +26,36 @@ function GeneralSettings(): JSX.Element { setSelectedMetricsPeroid, ] = useState('month'); const [notifications, Element] = notification.useNotification(); - const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState( - '', - ); + const [modal, setModal] = useState(false); const [postApiLoading, setPostApiLoading] = useState(false); - const [selectedTracePeroid, setSelectedTracePeroid] = useState( - 'hr', - ); - - const [retentionPeroidTrace, setRetentionPeroidTrace] = useState(''); const [isDefaultMetrics, setIsDefaultMetrics] = useState(false); const [isDefaultTrace, setIsDefaultTrace] = useState(false); - const [availableDisks, setAvailableDisks] = useState(null); + const [availableDisks, setAvailableDisks] = useState(null); useEffect(() => { - getDisks().then((resp) => console.log({ disks: resp })) - }, []) - const currentTTLValues = { - metrics_ttl_duration_hrs: 24 * 30 * 10, - metrics_move_ttl_duration_hrs: -1, - traces_ttl_duration_hrs: -1, - traces_move_ttl_duration_hrs: -1, - }; + getDisks().then((response) => setAvailableDisks(response)); + }, []); + + const { payload: currentTTLValues, loading, error, errorMessage } = useFetch< + PayloadProps, + undefined + >(getRetentionPeriodApi, undefined); + const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState< number | null - >(currentTTLValues.metrics_ttl_duration_hrs); + >(currentTTLValues?.metrics_ttl_duration_hrs); const [metricsS3RetentionPeriod, setMetricsS3RetentionPeriod] = useState< number | null - >(currentTTLValues.metrics_move_ttl_duration_hrs); + >(currentTTLValues?.metrics_move_ttl_duration_hrs); const [tracesTotalRetentionPeriod, setTracesTotalRetentionPeriod] = useState< number | null - >(currentTTLValues.traces_ttl_duration_hrs); + >(currentTTLValues?.traces_ttl_duration_hrs); const [tracesS3RetentionPeriod, setTracesS3RetentionPeriod] = useState< number | null - >(currentTTLValues.traces_move_ttl_duration_hrs); + >(currentTTLValues?.traces_move_ttl_duration_hrs); const onModalToggleHandler = (): void => { setModal((modal) => !modal); @@ -70,11 +65,6 @@ function GeneralSettings(): JSX.Element { onModalToggleHandler(); }, []); - const { payload, loading, error, errorMessage } = useFetch< - PayloadProps, - undefined - >(getRetentionperoidApi, undefined); - const checkMetricTraceDefault = (trace: number, metric: number): void => { if (metric === -1) { setIsDefaultMetrics(true); @@ -89,99 +79,78 @@ function GeneralSettings(): JSX.Element { } }; // const retentionRenderConfig = () => { }; - const renderConfig = [ - { - name: 'Metrics', - retentionFields: [ - { - name: 'Total Retention Period', - value: metricsTotalRetentionPeriod, - setValue: setMetricsTotalRetentionPeriod, - }, - { - name: `Move to S3\n(should be lower than total retention period)`, - value: metricsS3RetentionPeriod, - setValue: setMetricsS3RetentionPeriod, - }, - ], - }, - { - name: 'Traces', - retentionFields: [ - { - name: 'Total Retention Period', - value: tracesTotalRetentionPeriod, - setValue: setTracesTotalRetentionPeriod, - }, - { - name: `Move to S3\n(should be lower than total retention period)`, - value: tracesS3RetentionPeriod, - setValue: setTracesS3RetentionPeriod, - }, - ], - }, - ]; - - useEffect(() => { - if (!loading && payload !== undefined) { - const { - metrics_ttl_duration_hrs: metricTllDuration, - traces_ttl_duration_hrs: traceTllDuration, - } = payload; - - checkMetricTraceDefault(traceTllDuration, metricTllDuration); - - const traceValue = getSettingsPeroid(traceTllDuration); - const metricsValue = getSettingsPeroid(metricTllDuration); - - setRetentionPeroidTrace(traceValue.value.toString()); - setSelectedTracePeroid(traceValue.peroid); - - setRetentionPeroidMetrics(metricsValue.value.toString()); - setSelectedMetricsPeroid(metricsValue.peroid); - } - }, [setSelectedMetricsPeroid, loading, payload]); + const renderConfig = useMemo(() => { + const s3Enabled = !!find( + availableDisks, + (disks: IDiskType) => disks?.type === 's3', + ); + return [ + { + name: 'Metrics', + retentionFields: [ + { + name: 'Total Retention Period', + value: metricsTotalRetentionPeriod, + setValue: setMetricsTotalRetentionPeriod, + }, + { + name: `Move to S3\n(should be lower than total retention period)`, + value: metricsS3RetentionPeriod, + setValue: setMetricsS3RetentionPeriod, + hide: !s3Enabled, + }, + ], + }, + { + name: 'Traces', + retentionFields: [ + { + name: 'Total Retention Period', + value: tracesTotalRetentionPeriod, + setValue: setTracesTotalRetentionPeriod, + }, + { + name: `Move to S3\n(should be lower than total retention period)`, + value: tracesS3RetentionPeriod, + setValue: setTracesS3RetentionPeriod, + hide: !s3Enabled, + }, + ], + }, + ]; + }, [ + availableDisks, + metricsS3RetentionPeriod, + metricsTotalRetentionPeriod, + tracesS3RetentionPeriod, + tracesTotalRetentionPeriod, + ]); const onOkHandler = async (): Promise => { try { setPostApiLoading(true); - const retentionTraceValue = - retentionPeroidTrace === '0' && (payload?.traces_ttl_duration_hrs || 0) < 0 - ? payload?.traces_ttl_duration_hrs || 0 - : parseInt(retentionPeroidTrace, 10); - - const retentionMetricsValue = - retentionPeroidMetrics === '0' && - (payload?.metrics_ttl_duration_hrs || 0) < 0 - ? payload?.metrics_ttl_duration_hrs || 0 - : parseInt(retentionPeroidMetrics, 10); - - const [tracesResponse, metricsResponse] = await Promise.all([ - setRetentionApi({ - duration: `${convertIntoHr(retentionTraceValue, selectedTracePeroid)}h`, - type: 'traces', - }), - setRetentionApi({ - duration: `${convertIntoHr( - retentionMetricsValue, - selectedMetricsPeroid, - )}h`, - type: 'metrics', - }), - ]); - - if ( - tracesResponse.statusCode === 200 && - metricsResponse.statusCode === 200 - ) { + // const retentionTraceValue = + // retentionPeroidTrace === '0' && (payload?.traces_ttl_duration_hrs || 0) < 0 + // ? payload?.traces_ttl_duration_hrs || 0 + // : parseInt(retentionPeroidTrace, 10); + // const retentionMetricsValue = + // retentionPeroidMetrics === '0' && + // (payload?.metrics_ttl_duration_hrs || 0) < 0 + // ? payload?.metrics_ttl_duration_hrs || 0 + // : parseInt(retentionPeroidMetrics, 10); + const apiResponse = await setRetentionApi({ + metrics_ttl_duration_hrs: metricsTotalRetentionPeriod || -1, + metrics_move_ttl_duration_hrs: metricsS3RetentionPeriod || -1, + traces_move_ttl_duration_hrs: tracesS3RetentionPeriod || -1, + traces_ttl_duration_hrs: tracesTotalRetentionPeriod || -1, + }); + if (apiResponse.statusCode === 200) { notifications.success({ message: 'Success!', placement: 'topRight', description: 'Congrats. The retention periods were updated correctly.', }); - - checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue); - + // checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue); onModalToggleHandler(); } else { notifications.error({ @@ -206,7 +175,7 @@ function GeneralSettings(): JSX.Element { return {errorMessage}; } - if (loading || payload === undefined) { + if (loading || currentTTLValues === undefined) { return ; } @@ -230,7 +199,7 @@ function GeneralSettings(): JSX.Element { }; const isDisabledHandler = (): boolean => { - return !!(retentionPeroidTrace === '' || retentionPeroidMetrics === ''); + return false; }; const errorText = getErrorText(); @@ -275,6 +244,7 @@ function GeneralSettings(): JSX.Element { text={retentionField.name} retentionValue={retentionField.value} setRetentionValue={retentionField.setValue} + hide={!!retentionField.hide} /> ))} diff --git a/frontend/src/types/api/settings/getRetention.ts b/frontend/src/types/api/settings/getRetention.ts index e6fd1eae43..f3ba539416 100644 --- a/frontend/src/types/api/settings/getRetention.ts +++ b/frontend/src/types/api/settings/getRetention.ts @@ -1,4 +1,6 @@ export interface PayloadProps { metrics_ttl_duration_hrs: number; + metrics_move_ttl_duration_hrs: number; traces_ttl_duration_hrs: number; + traces_move_ttl_duration_hrs: number; } diff --git a/frontend/src/types/api/settings/setRetention.ts b/frontend/src/types/api/settings/setRetention.ts index 6e82f8ef2a..9c2ced48f8 100644 --- a/frontend/src/types/api/settings/setRetention.ts +++ b/frontend/src/types/api/settings/setRetention.ts @@ -1,6 +1,8 @@ export interface Props { - type: 'metrics' | 'traces'; - duration: string; + metrics_ttl_duration_hrs: number; + metrics_move_ttl_duration_hrs: number; + traces_ttl_duration_hrs: number; + traces_move_ttl_duration_hrs: number; } export interface PayloadProps {