diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json index e63d6d083e..571ac5e43a 100644 --- a/frontend/public/locales/en/translation.json +++ b/frontend/public/locales/en/translation.json @@ -1,3 +1,18 @@ { - "monitor_signup": "Monitor your applications. Find what is causing issues." + "monitor_signup": "Monitor your applications. Find what is causing issues.", + "routes": { + "general": "General", + "alert_channels": "Alert Channels" + }, + "settings": { + "total_retention_period": "Total Retention Period", + "move_to_s3": "Move to S3\n(should be lower than total retention period)", + "retention_success_message": "Congrats. The retention periods for {{name}} has been updated successfully.", + "retention_error_message": "There was an issue in changing the retention period for {{name}}. Please try again or reach out to support@signoz.io", + "retention_failed_message": "There was an issue in changing the retention period. Please try again or reach out to support@signoz.io", + "retention_comparison_error": "Total retention period for {{name}} can’t be lower or equal to the period after which data is moved to s3.", + "retention_null_value_error": "Retention Period for {{name}} is not set yet. Please set by choosing below", + "retention_confirmation": "Are you sure you want to change the retention period?", + "retention_confirmation_description": "This will change the amount of storage needed for saving metrics & traces." + } } diff --git a/frontend/src/api/disks/getDisks.ts b/frontend/src/api/disks/getDisks.ts new file mode 100644 index 0000000000..9dced1b0fd --- /dev/null +++ b/frontend/src/api/disks/getDisks.ts @@ -0,0 +1,24 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps } from 'types/api/disks/getDisks'; + +const getDisks = async (): Promise< + SuccessResponse | ErrorResponse +> => { + try { + const response = await axios.get(`/disks`); + + return { + statusCode: 200, + error: null, + message: 'Success', + payload: response.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default getDisks; diff --git a/frontend/src/api/settings/setRetention.ts b/frontend/src/api/settings/setRetention.ts index dcf0a0f2c3..62aa3559e5 100644 --- a/frontend/src/api/settings/setRetention.ts +++ b/frontend/src/api/settings/setRetention.ts @@ -9,7 +9,11 @@ const setRetention = async ( ): Promise | ErrorResponse> => { try { const response = await axios.post( - `/settings/ttl?duration=${props.duration}&type=${props.type}`, + `/settings/ttl?duration=${props.totalDuration}&type=${props.type}${ + props.coldStorage + ? `&coldStorage=${props.coldStorage};toColdDuration=${props.toColdDuration}` + : '' + }`, ); return { diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx index b2f5cb5a09..54fb89a394 100644 --- a/frontend/src/container/GeneralSettings/Retention.tsx +++ b/frontend/src/container/GeneralSettings/Retention.tsx @@ -1,108 +1,118 @@ -import { DownOutlined } from '@ant-design/icons'; -import { Button, Menu } from 'antd'; -import React from 'react'; +import { Col, Row, Select } from 'antd'; +import { find } from 'lodash-es'; +import React, { useEffect, useRef, useState } from 'react'; -import { SettingPeroid } from '.'; import { - Dropdown, Input, RetentionContainer, - TextContainer, - Typography, + RetentionFieldInputContainer, + RetentionFieldLabel, } from './styles'; +import { + convertHoursValueToRelevantUnit, + SettingPeriod, + TimeUnits, +} from './utils'; + +const { Option } = Select; function Retention({ retentionValue, - setRentionValue, - selectedRetentionPeroid, - setSelectedRetentionPeroid, + setRetentionValue, text, -}: RetentionProps): JSX.Element { - const options: Option[] = [ - { - key: 'hr', - value: 'Hrs', - }, - { - key: 'day', - value: 'Days', - }, - { - key: 'month', - value: 'Months', - }, - ]; - - const onClickHandler = ( - e: { key: string }, - func: React.Dispatch>, - ): void => { - const selected = e.key as SettingPeroid; - func(selected); - }; - - const menu = ( - onClickHandler(e, setSelectedRetentionPeroid)}> - {options.map((option) => ( - {option.value} - ))} - + hide, +}: RetentionProps): JSX.Element | null { + const { + value: initialValue, + timeUnitValue: initialTimeUnitValue, + } = convertHoursValueToRelevantUnit(Number(retentionValue)); + const [selectedTimeUnit, setSelectTimeUnit] = useState(initialTimeUnitValue); + const [selectedValue, setSelectedValue] = useState( + initialValue, ); + const interacted = useRef(false); + useEffect(() => { + if (!interacted.current) setSelectedValue(initialValue); + }, [initialValue]); - const currentSelectedOption = (option: SettingPeroid): string | undefined => { - return options.find((e) => e.key === option)?.value; + useEffect(() => { + if (!interacted.current) setSelectTimeUnit(initialTimeUnitValue); + }, [initialTimeUnitValue]); + + const menuItems = TimeUnits.map((option) => ( + + )); + + const currentSelectedOption = (option: SettingPeriod): void => { + const selectedValue = find(TimeUnits, (e) => e.value === option)?.value; + if (selectedValue) setSelectTimeUnit(selectedValue); }; + useEffect(() => { + const inverseMultiplier = find( + TimeUnits, + (timeUnit) => timeUnit.value === selectedTimeUnit, + )?.multiplier; + if (!selectedValue) setRetentionValue(null); + if (selectedValue && inverseMultiplier) { + setRetentionValue(selectedValue * (1 / inverseMultiplier)); + } + }, [selectedTimeUnit, selectedValue, setRetentionValue]); + const onChangeHandler = ( e: React.ChangeEvent, - func: React.Dispatch>, + func: React.Dispatch>, ): void => { + interacted.current = true; const { value } = e.target; const integerValue = parseInt(value, 10); if (value.length > 0 && integerValue.toString() === value) { - const parsedValue = Math.abs(integerValue).toString(); + const parsedValue = Math.abs(integerValue); func(parsedValue); } if (value.length === 0) { - func(''); + func(null); } }; - + if (hide) { + return null; + } return ( - - {text} - - - onChangeHandler(e, setRentionValue)} - /> - - - - + + + {text} + + + + = 0 ? selectedValue : ''} + onChange={(e): void => onChangeHandler(e, setSelectedValue)} + style={{ width: 75 }} + /> + + + + ); } -interface Option { - key: SettingPeroid; - value: string; -} - interface RetentionProps { - retentionValue: string; + retentionValue: number | null; text: string; - setRentionValue: React.Dispatch>; - selectedRetentionPeroid: SettingPeroid; - setSelectedRetentionPeroid: React.Dispatch< - React.SetStateAction - >; + 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 e741e81886..73d61550a9 100644 --- a/frontend/src/container/GeneralSettings/index.tsx +++ b/frontend/src/container/GeneralSettings/index.tsx @@ -1,43 +1,69 @@ -import { Button, Modal, notification, Typography } from 'antd'; -import getRetentionperoidApi from 'api/settings/getRetention'; +import { Button, Col, Modal, notification, Row, Typography } from 'antd'; +import getDisks from 'api/disks/getDisks'; +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 { useTranslation } from 'react-i18next'; +import { IDiskType } from 'types/api/disks/getDisks'; import { PayloadProps } from 'types/api/settings/getRetention'; import Retention from './Retention'; import { ButtonContainer, - Container, ErrorText, ErrorTextContainer, ToolTipContainer, } from './styles'; function GeneralSettings(): JSX.Element { - const [ - selectedMetricsPeroid, - setSelectedMetricsPeroid, - ] = useState('month'); + const { t } = useTranslation(); 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 [availableDisks, setAvailableDisks] = useState(null); - const [retentionPeroidTrace, setRetentionPeroidTrace] = useState(''); - const [isDefaultMetrics, setIsDefaultMetrics] = useState(false); - const [isDefaultTrace, setIsDefaultTrace] = useState(false); + useEffect(() => { + getDisks().then((response) => setAvailableDisks(response.payload)); + }, []); + + const { payload: currentTTLValues, loading, error, errorMessage } = useFetch< + PayloadProps, + undefined + >(getRetentionPeriodApi, undefined); + const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState< + number | null + >(null); + const [metricsS3RetentionPeriod, setMetricsS3RetentionPeriod] = useState< + number | null + >(null); + const [tracesTotalRetentionPeriod, setTracesTotalRetentionPeriod] = useState< + number | null + >(null); + const [tracesS3RetentionPeriod, setTracesS3RetentionPeriod] = useState< + number | null + >(null); + + useEffect(() => { + if (currentTTLValues) { + setMetricsTotalRetentionPeriod(currentTTLValues.metrics_ttl_duration_hrs); + setMetricsS3RetentionPeriod( + currentTTLValues.metrics_move_ttl_duration_hrs + ? currentTTLValues.metrics_move_ttl_duration_hrs + : null, + ); + setTracesTotalRetentionPeriod(currentTTLValues.traces_ttl_duration_hrs); + setTracesS3RetentionPeriod( + currentTTLValues.traces_move_ttl_duration_hrs + ? currentTTLValues.traces_move_ttl_duration_hrs + : null, + ); + } + }, [currentTTLValues]); const onModalToggleHandler = (): void => { setModal((modal) => !modal); @@ -47,142 +73,182 @@ function GeneralSettings(): JSX.Element { onModalToggleHandler(); }, []); - const { payload, loading, error, errorMessage } = useFetch< - PayloadProps, - undefined - >(getRetentionperoidApi, undefined); + const s3Enabled = useMemo( + () => !!find(availableDisks, (disks: IDiskType) => disks?.type === 's3'), + [availableDisks], + ); - const checkMetricTraceDefault = (trace: number, metric: number): void => { - if (metric === -1) { - setIsDefaultMetrics(true); - } else { - setIsDefaultMetrics(false); + const renderConfig = [ + { + name: 'Metrics', + retentionFields: [ + { + name: t('settings.total_retention_period'), + value: metricsTotalRetentionPeriod, + setValue: setMetricsTotalRetentionPeriod, + }, + { + name: t('settings.move_to_s3'), + value: metricsS3RetentionPeriod, + setValue: setMetricsS3RetentionPeriod, + hide: !s3Enabled, + }, + ], + }, + { + name: 'Traces', + retentionFields: [ + { + name: t('settings.total_retention_period'), + value: tracesTotalRetentionPeriod, + setValue: setTracesTotalRetentionPeriod, + }, + { + name: t('settings.move_to_s3'), + value: tracesS3RetentionPeriod, + setValue: setTracesS3RetentionPeriod, + hide: !s3Enabled, + }, + ], + }, + ].map((category): JSX.Element | null => { + if ( + Array.isArray(category.retentionFields) && + category.retentionFields.length > 0 + ) { + return ( + + {category.name} + + {category.retentionFields.map((retentionField) => ( + + ))} + + ); } - - if (trace === -1) { - setIsDefaultTrace(true); - } else { - setIsDefaultTrace(false); - } - }; - - 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]); + return null; + }); 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([ + const [metricsTTLApiResponse, tracesTTLApiResponse] = await Promise.all([ setRetentionApi({ - duration: `${convertIntoHr(retentionTraceValue, selectedTracePeroid)}h`, - type: 'traces', + type: 'metrics', + totalDuration: `${metricsTotalRetentionPeriod || -1}h`, + coldStorage: s3Enabled ? 's3' : null, + toColdDuration: `${metricsS3RetentionPeriod || -1}h`, }), setRetentionApi({ - duration: `${convertIntoHr( - retentionMetricsValue, - selectedMetricsPeroid, - )}h`, - type: 'metrics', + 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', - if ( - tracesResponse.statusCode === 200 && - metricsResponse.statusCode === 200 - ) { - notifications.success({ - message: 'Success!', - placement: 'topRight', - description: 'Congrats. The retention periods were updated correctly.', - }); - - checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue); - - onModalToggleHandler(); - } else { - notifications.error({ - message: 'Error', - description: - 'There was an issue in changing the retention period. Please try again or reach out to support@signoz.io', - placement: 'topRight', - }); - } + description: t('settings.retention_success_message', { name }), + }); + } else { + notifications.error({ + message: 'Error', + description: t('settings.retention_error_message', { name }), + placement: 'topRight', + }); + } + }); + onModalToggleHandler(); setPostApiLoading(false); } catch (error) { notifications.error({ message: 'Error', - description: - 'There was an issue in changing the retention period. Please try again or reach out to support@signoz.io', + description: t('settings.retention_failed_message'), placement: 'topRight', }); } + setModal(false); }; + const [isDisabled, errorText] = useMemo(() => { + // Various methods to return dynamic error message text. + const messages = { + compareError: (name: string | number): string => + t('settings.retention_comparison_error', { name }), + nullValueError: (name: string | number): string => + t('settings.retention_null_value_error', { name }), + }; + + // Defaults to button not disabled and empty error message text. + let isDisabled = false; + let errorText = ''; + + if (s3Enabled) { + if ( + (metricsTotalRetentionPeriod || metricsS3RetentionPeriod) && + Number(metricsTotalRetentionPeriod) <= Number(metricsS3RetentionPeriod) + ) { + isDisabled = true; + errorText = messages.compareError('metrics'); + } else if ( + (tracesTotalRetentionPeriod || tracesS3RetentionPeriod) && + Number(tracesTotalRetentionPeriod) <= Number(tracesS3RetentionPeriod) + ) { + isDisabled = true; + errorText = messages.compareError('traces'); + } + } + + if (!metricsTotalRetentionPeriod || !tracesTotalRetentionPeriod) { + isDisabled = true; + if (!metricsTotalRetentionPeriod && !tracesTotalRetentionPeriod) { + errorText = messages.nullValueError('metrics and traces'); + } else if (!metricsTotalRetentionPeriod) { + errorText = messages.nullValueError('metrics'); + } else if (!tracesTotalRetentionPeriod) { + errorText = messages.nullValueError('traces'); + } + } + return [isDisabled, errorText]; + }, [ + metricsS3RetentionPeriod, + metricsTotalRetentionPeriod, + s3Enabled, + t, + tracesS3RetentionPeriod, + tracesTotalRetentionPeriod, + ]); + if (error) { return {errorMessage}; } - if (loading || payload === undefined) { + if (loading || currentTTLValues === undefined) { 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 isDisabledHandler = (): boolean => { - return !!(retentionPeroidTrace === '' || retentionPeroidMetrics === ''); - }; - - const errorText = getErrorText(); - return ( - + {Element} - {errorText ? ( {errorText} @@ -204,25 +270,10 @@ function GeneralSettings(): JSX.Element { /> )} - - - - + {renderConfig} - - This will change the amount of storage needed for saving metrics & traces. - + {t('settings.retention_confirmation_description')} - - + ); } -export type SettingPeroid = 'hr' | 'day' | 'month'; +export type SettingPeriod = 'hr' | 'day' | 'month'; export default GeneralSettings; diff --git a/frontend/src/container/GeneralSettings/styles.ts b/frontend/src/container/GeneralSettings/styles.ts index 5233ce7e50..a9f8b0fc57 100644 --- a/frontend/src/container/GeneralSettings/styles.ts +++ b/frontend/src/container/GeneralSettings/styles.ts @@ -1,16 +1,13 @@ import { + Col, Dropdown as DropDownComponent, Input as InputComponent, Typography as TypographyComponent, } from 'antd'; import styled from 'styled-components'; -export const RetentionContainer = styled.div` - width: 50%; - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; +export const RetentionContainer = styled(Col)` + margin: 0.75rem 0; `; export const Input = styled(InputComponent)` @@ -37,13 +34,6 @@ export const ButtonContainer = styled.div` } `; -export const Container = styled.div` - &&& { - display: flex; - flex-direction: column; - } -`; - export const Dropdown = styled(DropDownComponent)` &&& { display: flex; @@ -90,3 +80,12 @@ export const ErrorText = styled(TypographyComponent)` font-style: italic; } `; + +export const RetentionFieldLabel = styled(TypographyComponent)` + vertical-align: middle; + white-space: pre-wrap; +`; + +export const RetentionFieldInputContainer = styled.div` + display: inline-flex; +`; diff --git a/frontend/src/container/GeneralSettings/utils.ts b/frontend/src/container/GeneralSettings/utils.ts new file mode 100644 index 0000000000..30efd6786a --- /dev/null +++ b/frontend/src/container/GeneralSettings/utils.ts @@ -0,0 +1,42 @@ +export type SettingPeriod = 'hr' | 'day' | 'month'; + +export interface ITimeUnit { + value: SettingPeriod; + key: string; + multiplier: number; +} +export const TimeUnits: ITimeUnit[] = [ + { + value: 'hr', + key: 'Hours', + multiplier: 1, + }, + { + value: 'day', + key: 'Days', + multiplier: 1 / 24, + }, + { + value: 'month', + key: 'Months', + multiplier: 1 / (24 * 30), + }, +]; + +export const convertHoursValueToRelevantUnit = ( + value: number, +): { value: number; timeUnitValue: SettingPeriod } => { + if (value) + for (let idx = TimeUnits.length - 1; idx >= 0; idx -= 1) { + const timeUnit = TimeUnits[idx]; + const convertedValue = timeUnit.multiplier * value; + + if ( + convertedValue >= 1 && + convertedValue === parseInt(`${convertedValue}`, 10) + ) { + return { value: convertedValue, timeUnitValue: timeUnit.value }; + } + } + return { value, timeUnitValue: TimeUnits[0].value }; +}; diff --git a/frontend/src/lib/convertIntoHr.ts b/frontend/src/lib/convertIntoHr.ts index cd2d059e94..f7e408c2b1 100644 --- a/frontend/src/lib/convertIntoHr.ts +++ b/frontend/src/lib/convertIntoHr.ts @@ -1,6 +1,6 @@ -import { SettingPeroid } from 'container/GeneralSettings'; +import { SettingPeriod } from 'container/GeneralSettings'; -const converIntoHr = (value: number, peroid: SettingPeroid): number => { +const converIntoHr = (value: number, peroid: SettingPeriod): number => { if (peroid === 'day') { return value * 24; } diff --git a/frontend/src/lib/getSettingsPeroid.ts b/frontend/src/lib/getSettingsPeroid.ts index 72da4c3abb..0ea60ca0d5 100644 --- a/frontend/src/lib/getSettingsPeroid.ts +++ b/frontend/src/lib/getSettingsPeroid.ts @@ -1,4 +1,4 @@ -import { SettingPeroid } from 'container/GeneralSettings'; +import { SettingPeriod } from 'container/GeneralSettings'; const getSettingsPeroid = (hr: number): PayloadProps => { if (hr <= 0) { @@ -30,7 +30,7 @@ const getSettingsPeroid = (hr: number): PayloadProps => { interface PayloadProps { value: number; - peroid: SettingPeroid; + peroid: SettingPeriod; } export default getSettingsPeroid; diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx index 59b2361cf8..ecc94247a4 100644 --- a/frontend/src/pages/AlertChannelCreate/index.tsx +++ b/frontend/src/pages/AlertChannelCreate/index.tsx @@ -5,29 +5,32 @@ import CreateAlertChannels from 'container/CreateAlertChannels'; import GeneralSettings from 'container/GeneralSettings'; import history from 'lib/history'; import React from 'react'; +import { useTranslation } from 'react-i18next'; function SettingsPage(): JSX.Element { const pathName = history.location.pathname; - + const { t } = useTranslation(); return ( { return ; }, - name: 'Alert Channels', + name: t('routes.alert_channels'), route: ROUTES.ALL_CHANNELS, }, ], activeKey: - pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels', + pathName === ROUTES.SETTINGS + ? t('routes.general') + : t('routes.alert_channels'), }} /> ); diff --git a/frontend/src/pages/AllAlertChannels/index.tsx b/frontend/src/pages/AllAlertChannels/index.tsx index 8e64751064..1ab97d0db1 100644 --- a/frontend/src/pages/AllAlertChannels/index.tsx +++ b/frontend/src/pages/AllAlertChannels/index.tsx @@ -4,27 +4,30 @@ import AlertChannels from 'container/AllAlertChannels'; import GeneralSettings from 'container/GeneralSettings'; import history from 'lib/history'; import React from 'react'; +import { useTranslation } from 'react-i18next'; function AllAlertChannels(): JSX.Element { const pathName = history.location.pathname; - + const { t } = useTranslation(); return ( ); diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx index e661fb6193..208fcde7c1 100644 --- a/frontend/src/pages/Settings/index.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -14,7 +14,7 @@ function SettingsPage(): JSX.Element { routes: [ { Component: GeneralSettings, - name: 'General Settings', + name: 'General', route: ROUTES.SETTINGS, }, { @@ -23,8 +23,7 @@ function SettingsPage(): JSX.Element { route: ROUTES.ALL_CHANNELS, }, ], - activeKey: - pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General Settings', + activeKey: pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General', }} /> ); diff --git a/frontend/src/types/api/disks/getDisks.ts b/frontend/src/types/api/disks/getDisks.ts new file mode 100644 index 0000000000..9e444df53d --- /dev/null +++ b/frontend/src/types/api/disks/getDisks.ts @@ -0,0 +1,5 @@ +export type PayloadProps = IDiskType[]; +export interface IDiskType { + name: string; + type: string; +} diff --git a/frontend/src/types/api/settings/getRetention.ts b/frontend/src/types/api/settings/getRetention.ts index e6fd1eae43..f8a2f8b1bc 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..134e409f18 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; + totalDuration: string; + coldStorage?: 's3' | null; + toColdDuration?: string; } export interface PayloadProps {