From 20e924b116030ff48c30e714b53a6d86fb54c646 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Fri, 1 Apr 2022 15:12:30 +0530
Subject: [PATCH 01/11] feat: S3 TTL support

---
 frontend/src/api/disks/getDisks.ts            |  24 +++
 .../container/GeneralSettings/Retention.tsx   | 142 +++++++++---------
 .../src/container/GeneralSettings/index.tsx   | 113 +++++++++++---
 .../src/container/GeneralSettings/styles.ts   |  16 +-
 .../src/container/GeneralSettings/utils.ts    |  41 +++++
 frontend/src/lib/convertIntoHr.ts             |   4 +-
 frontend/src/lib/getSettingsPeroid.ts         |   4 +-
 .../src/pages/AlertChannelCreate/index.tsx    |   4 +-
 frontend/src/pages/AllAlertChannels/index.tsx |   5 +-
 frontend/src/pages/Settings/index.tsx         |   4 +-
 frontend/src/types/api/disks/getDisks.ts      |   4 +
 11 files changed, 241 insertions(+), 120 deletions(-)
 create mode 100644 frontend/src/api/disks/getDisks.ts
 create mode 100644 frontend/src/container/GeneralSettings/utils.ts
 create mode 100644 frontend/src/types/api/disks/getDisks.ts

diff --git a/frontend/src/api/disks/getDisks.ts b/frontend/src/api/disks/getDisks.ts
new file mode 100644
index 0000000000..70da1bddc9
--- /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 { IDiskType } from 'types/api/disks/getDisks';
+
+const getDisks = async (): Promise<
+	SuccessResponse<IDiskType[]> | 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/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx
index b2f5cb5a09..64591b9b59 100644
--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -1,108 +1,108 @@
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Menu } from 'antd';
-import React from 'react';
+import { Button, Col, Menu, Row, Select } from 'antd';
+import { find } from 'lodash-es';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { SettingPeroid } from '.';
+import { Dropdown, Input, RetentionContainer, Typography } from './styles';
 import {
-	Dropdown,
-	Input,
-	RetentionContainer,
-	TextContainer,
-	Typography,
-} from './styles';
+	convertHoursValueToRelevantUnit,
+	ITimeUnit,
+	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<React.SetStateAction<SettingPeroid>>,
-	): void => {
-		const selected = e.key as SettingPeroid;
-		func(selected);
-	};
-
-	const menu = (
-		<Menu onClick={(e): void => onClickHandler(e, setSelectedRetentionPeroid)}>
-			{options.map((option) => (
-				<Menu.Item key={option.key}>{option.value}</Menu.Item>
-			))}
-		</Menu>
+	const {
+		value: initialValue,
+		timeUnitValue: initialTimeUnitValue,
+	} = convertHoursValueToRelevantUnit(retentionValue);
+	const [selectedTimeUnit, setSelectTimeUnit] = useState(initialTimeUnitValue);
+	const [selectedValue, setSelectedValue] = useState<number | null>(
+		initialValue,
 	);
 
-	const currentSelectedOption = (option: SettingPeroid): string | undefined => {
-		return options.find((e) => e.key === option)?.value;
+	const menuItems = TimeUnits.map((option) => (
+		<Option key={option.value} value={option.value}>
+			{option.key}
+		</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 && inverseMultiplier) {
+			setRetentionValue(selectedValue * (1 / inverseMultiplier));
+		}
+	}, [selectedTimeUnit, selectedValue, setRetentionValue]);
+
 	const onChangeHandler = (
 		e: React.ChangeEvent<HTMLInputElement>,
-		func: React.Dispatch<React.SetStateAction<string>>,
+		func: React.Dispatch<React.SetStateAction<number | null>>,
 	): void => {
 		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);
 		}
 	};
 
 	return (
 		<RetentionContainer>
-			<TextContainer>
-				<Typography>{text}</Typography>
-			</TextContainer>
-
-			<Input
-				value={retentionValue}
-				onChange={(e): void => onChangeHandler(e, setRentionValue)}
-			/>
-
-			<Dropdown overlay={menu}>
-				<Button>
-					{currentSelectedOption(selectedRetentionPeroid)} <DownOutlined />
-				</Button>
-			</Dropdown>
+			<Row justify="space-between">
+				<Col flex={1} style={{ display: 'flex' }}>
+					<Typography
+						style={{
+							verticalAlign: 'middle',
+							whiteSpace: 'pre-wrap',
+						}}
+					>
+						{text}
+					</Typography>
+				</Col>
+				<Col flex="150px">
+					<div style={{ display: 'inline-flex' }}>
+						<Input
+							value={selectedValue >= 0 ? selectedValue : ''}
+							onChange={(e): void => onChangeHandler(e, setSelectedValue)}
+							style={{ width: 75 }}
+						/>
+						<Select
+							defaultValue={selectedTimeUnit}
+							onChange={currentSelectedOption}
+							style={{ width: 100 }}
+						>
+							{menuItems}
+						</Select>
+					</div>
+				</Col>
+			</Row>
 		</RetentionContainer>
 	);
 }
 
-interface Option {
-	key: SettingPeroid;
-	value: string;
-}
-
 interface RetentionProps {
-	retentionValue: string;
+	retentionValue: number;
 	text: string;
-	setRentionValue: React.Dispatch<React.SetStateAction<string>>;
-	selectedRetentionPeroid: SettingPeroid;
-	setSelectedRetentionPeroid: React.Dispatch<
-		React.SetStateAction<SettingPeroid>
-	>;
+	setRetentionValue: React.Dispatch<React.SetStateAction<number | null>>;
 }
 
 export default Retention;
diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index e741e81886..7796e38d5f 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -1,4 +1,5 @@
-import { Button, Modal, notification, Typography } from 'antd';
+import { Button, Col, Modal, notification, Row, Typography } from 'antd';
+import getDisks from 'api/disks/getDisks';
 import getRetentionperoidApi from 'api/settings/getRetention';
 import setRetentionApi from 'api/settings/setRetention';
 import Spinner from 'components/Spinner';
@@ -12,7 +13,6 @@ import { PayloadProps } from 'types/api/settings/getRetention';
 import Retention from './Retention';
 import {
 	ButtonContainer,
-	Container,
 	ErrorText,
 	ErrorTextContainer,
 	ToolTipContainer,
@@ -22,16 +22,15 @@ function GeneralSettings(): JSX.Element {
 	const [
 		selectedMetricsPeroid,
 		setSelectedMetricsPeroid,
-	] = useState<SettingPeroid>('month');
+	] = useState<SettingPeriod>('month');
 	const [notifications, Element] = notification.useNotification();
-
 	const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<string>(
 		'',
 	);
 	const [modal, setModal] = useState<boolean>(false);
 	const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
 
-	const [selectedTracePeroid, setSelectedTracePeroid] = useState<SettingPeroid>(
+	const [selectedTracePeroid, setSelectedTracePeroid] = useState<SettingPeriod>(
 		'hr',
 	);
 
@@ -39,6 +38,30 @@ function GeneralSettings(): JSX.Element {
 	const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
 	const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
 
+	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,
+	};
+	const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState<
+		number | null
+	>(currentTTLValues.metrics_ttl_duration_hrs);
+	const [metricsS3RetentionPeriod, setMetricsS3RetentionPeriod] = useState<
+		number | null
+	>(currentTTLValues.metrics_move_ttl_duration_hrs);
+	const [tracesTotalRetentionPeriod, setTracesTotalRetentionPeriod] = useState<
+		number | null
+	>(currentTTLValues.traces_ttl_duration_hrs);
+	const [tracesS3RetentionPeriod, setTracesS3RetentionPeriod] = useState<
+		number | null
+	>(currentTTLValues.traces_move_ttl_duration_hrs);
+
 	const onModalToggleHandler = (): void => {
 		setModal((modal) => !modal);
 	};
@@ -65,6 +88,39 @@ function GeneralSettings(): JSX.Element {
 			setIsDefaultTrace(false);
 		}
 	};
+	// 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) {
@@ -96,7 +152,7 @@ function GeneralSettings(): JSX.Element {
 
 			const retentionMetricsValue =
 				retentionPeroidMetrics === '0' &&
-				(payload?.metrics_ttl_duration_hrs || 0) < 0
+					(payload?.metrics_ttl_duration_hrs || 0) < 0
 					? payload?.metrics_ttl_duration_hrs || 0
 					: parseInt(retentionPeroidMetrics, 10);
 
@@ -180,9 +236,8 @@ function GeneralSettings(): JSX.Element {
 	const errorText = getErrorText();
 
 	return (
-		<Container>
+		<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 			{Element}
-
 			{errorText ? (
 				<ErrorTextContainer>
 					<ErrorText>{errorText}</ErrorText>
@@ -204,22 +259,30 @@ function GeneralSettings(): JSX.Element {
 					/>
 				</ToolTipContainer>
 			)}
+			<Row justify="space-around">
+				{renderConfig.map((category): JSX.Element | null => {
+					if (
+						Array.isArray(category.retentionFields) &&
+						category.retentionFields.length > 0
+					) {
+						return (
+							<Col flex="48%" style={{ minWidth: 500 }} key={category.name}>
+								<Typography.Title level={3}>{category.name}</Typography.Title>
 
-			<Retention
-				text="Retention Period for Metrics"
-				selectedRetentionPeroid={selectedMetricsPeroid}
-				setRentionValue={setRetentionPeroidMetrics}
-				retentionValue={retentionPeroidMetrics}
-				setSelectedRetentionPeroid={setSelectedMetricsPeroid}
-			/>
-
-			<Retention
-				text="Retention Period for Traces"
-				selectedRetentionPeroid={selectedTracePeroid}
-				setRentionValue={setRetentionPeroidTrace}
-				retentionValue={retentionPeroidTrace}
-				setSelectedRetentionPeroid={setSelectedTracePeroid}
-			/>
+								{category.retentionFields.map((retentionField) => (
+									<Retention
+										key={retentionField.name}
+										text={retentionField.name}
+										retentionValue={retentionField.value}
+										setRetentionValue={retentionField.setValue}
+									/>
+								))}
+							</Col>
+						);
+					}
+					return null;
+				})}
+			</Row>
 
 			<Modal
 				title="Are you sure you want to change the retention period?"
@@ -247,10 +310,10 @@ function GeneralSettings(): JSX.Element {
 					Save
 				</Button>
 			</ButtonContainer>
-		</Container>
+		</Col>
 	);
 }
 
-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..417fdb894e 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;
diff --git a/frontend/src/container/GeneralSettings/utils.ts b/frontend/src/container/GeneralSettings/utils.ts
new file mode 100644
index 0000000000..caf0502d85
--- /dev/null
+++ b/frontend/src/container/GeneralSettings/utils.ts
@@ -0,0 +1,41 @@
+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 } => {
+	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..1f316fe860 100644
--- a/frontend/src/pages/AlertChannelCreate/index.tsx
+++ b/frontend/src/pages/AlertChannelCreate/index.tsx
@@ -15,7 +15,7 @@ function SettingsPage(): JSX.Element {
 				routes: [
 					{
 						Component: GeneralSettings,
-						name: 'General Settings',
+						name: 'General',
 						route: ROUTES.SETTINGS,
 					},
 					{
@@ -27,7 +27,7 @@ function SettingsPage(): JSX.Element {
 					},
 				],
 				activeKey:
-					pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels',
+					pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
 			}}
 		/>
 	);
diff --git a/frontend/src/pages/AllAlertChannels/index.tsx b/frontend/src/pages/AllAlertChannels/index.tsx
index 8e64751064..b1d3820f66 100644
--- a/frontend/src/pages/AllAlertChannels/index.tsx
+++ b/frontend/src/pages/AllAlertChannels/index.tsx
@@ -14,7 +14,7 @@ function AllAlertChannels(): JSX.Element {
 				routes: [
 					{
 						Component: GeneralSettings,
-						name: 'General Settings',
+						name: 'General',
 						route: ROUTES.SETTINGS,
 					},
 					{
@@ -23,8 +23,7 @@ function AllAlertChannels(): JSX.Element {
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey:
-					pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels',
+				activeKey: pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
 			}}
 		/>
 	);
diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx
index e661fb6193..2b23cec2ec 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,
 					},
 					{
@@ -24,7 +24,7 @@ function SettingsPage(): JSX.Element {
 					},
 				],
 				activeKey:
-					pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General Settings',
+					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..fc917db7d9
--- /dev/null
+++ b/frontend/src/types/api/disks/getDisks.ts
@@ -0,0 +1,4 @@
+export interface IDiskType {
+	name: string;
+	type: string;
+}

From 8064ae1f37679b521aad3d84c33c7e6005605df5 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Mon, 4 Apr 2022 15:06:06 +0530
Subject: [PATCH 02/11] feat: ttl api integration

---
 frontend/src/api/settings/setRetention.ts     |   6 +-
 .../container/GeneralSettings/Retention.tsx   |   6 +-
 .../src/container/GeneralSettings/index.tsx   | 198 ++++++++----------
 .../src/types/api/settings/getRetention.ts    |   2 +
 .../src/types/api/settings/setRetention.ts    |   6 +-
 5 files changed, 98 insertions(+), 120 deletions(-)

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<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>(
-			`/settings/ttl?duration=${props.duration}&type=${props.type}`,
-		);
+		const response = await axios.post<PayloadProps>(`/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 (
 		<RetentionContainer>
 			<Row justify="space-between">
@@ -103,6 +106,7 @@ interface RetentionProps {
 	retentionValue: number;
 	text: string;
 	setRetentionValue: React.Dispatch<React.SetStateAction<number | null>>;
+	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<SettingPeriod>('month');
 	const [notifications, Element] = notification.useNotification();
-	const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<string>(
-		'',
-	);
+
 	const [modal, setModal] = useState<boolean>(false);
 	const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
 
-	const [selectedTracePeroid, setSelectedTracePeroid] = useState<SettingPeriod>(
-		'hr',
-	);
-
-	const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<string>('');
 	const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
 	const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
 
-	const [availableDisks, setAvailableDisks] = useState(null);
+	const [availableDisks, setAvailableDisks] = useState<IDiskType | null>(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<void> => {
 		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 <Typography>{errorMessage}</Typography>;
 	}
 
-	if (loading || payload === undefined) {
+	if (loading || currentTTLValues === undefined) {
 		return <Spinner tip="Loading.." height="70vh" />;
 	}
 
@@ -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}
 									/>
 								))}
 							</Col>
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 {

From 5be1eb58b22962aadbb303349e918696470c002d Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Mon, 4 Apr 2022 15:26:29 +0530
Subject: [PATCH 03/11] feat: ttl api integration

---
 frontend/src/api/settings/setRetention.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/api/settings/setRetention.ts b/frontend/src/api/settings/setRetention.ts
index da8fdf515b..6cb8c436a2 100644
--- a/frontend/src/api/settings/setRetention.ts
+++ b/frontend/src/api/settings/setRetention.ts
@@ -8,9 +8,7 @@ const setRetention = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>(`/settings/ttl`, {
-			props,
-		});
+		const response = await axios.post<PayloadProps>(`/settings/ttl`, props);
 
 		return {
 			statusCode: 200,

From 24d6a1e7b2133354a475cbfa5252ad745d609b4f Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Mon, 4 Apr 2022 19:38:23 +0530
Subject: [PATCH 04/11] feat: s3 ttl validation

---
 frontend/src/api/settings/setRetention.ts     |   8 +-
 .../container/GeneralSettings/Retention.tsx   |  19 +-
 .../src/container/GeneralSettings/index.tsx   | 277 +++++++++++-------
 .../src/types/api/settings/setRetention.ts    |   8 +-
 4 files changed, 195 insertions(+), 117 deletions(-)

diff --git a/frontend/src/api/settings/setRetention.ts b/frontend/src/api/settings/setRetention.ts
index 6cb8c436a2..62aa3559e5 100644
--- a/frontend/src/api/settings/setRetention.ts
+++ b/frontend/src/api/settings/setRetention.ts
@@ -8,7 +8,13 @@ const setRetention = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>(`/settings/ttl`, props);
+		const response = await axios.post<PayloadProps>(
+			`/settings/ttl?duration=${props.totalDuration}&type=${props.type}${
+				props.coldStorage
+					? `&coldStorage=${props.coldStorage};toColdDuration=${props.toColdDuration}`
+					: ''
+			}`,
+		);
 
 		return {
 			statusCode: 200,
diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx
index 653597c3f7..e6cef0383d 100644
--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -24,9 +24,17 @@ function Retention({
 		timeUnitValue: initialTimeUnitValue,
 	} = convertHoursValueToRelevantUnit(retentionValue);
 	const [selectedTimeUnit, setSelectTimeUnit] = useState(initialTimeUnitValue);
-	const [selectedValue, setSelectedValue] = useState<number | null>(
-		initialValue,
-	);
+	const [selectedValue, setSelectedValue] = useState<number | null>(null);
+
+	useEffect(() => {
+		setSelectedValue(initialValue);
+	}, [initialValue]);
+
+
+	useEffect(() => {
+		setSelectTimeUnit(initialTimeUnitValue);
+	}, [initialTimeUnitValue]);
+
 
 	const menuItems = TimeUnits.map((option) => (
 		<Option key={option.value} value={option.value}>
@@ -44,6 +52,7 @@ function Retention({
 			TimeUnits,
 			(timeUnit) => timeUnit.value === selectedTimeUnit,
 		)?.multiplier;
+		if (!selectedValue) setRetentionValue(null);
 		if (selectedValue && inverseMultiplier) {
 			setRetentionValue(selectedValue * (1 / inverseMultiplier));
 		}
@@ -89,7 +98,7 @@ function Retention({
 							style={{ width: 75 }}
 						/>
 						<Select
-							defaultValue={selectedTimeUnit}
+							value={selectedTimeUnit}
 							onChange={currentSelectedOption}
 							style={{ width: 100 }}
 						>
@@ -103,7 +112,7 @@ function Retention({
 }
 
 interface RetentionProps {
-	retentionValue: number;
+	retentionValue: number | null;
 	text: string;
 	setRetentionValue: React.Dispatch<React.SetStateAction<number | null>>;
 	hide: boolean;
diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index db2c4f3ec8..fa1a04dd56 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -36,26 +36,35 @@ function GeneralSettings(): JSX.Element {
 	const [availableDisks, setAvailableDisks] = useState<IDiskType | null>(null);
 
 	useEffect(() => {
-		getDisks().then((response) => setAvailableDisks(response));
+		getDisks().then((response) => setAvailableDisks(response.payload));
 	}, []);
 
 	const { payload: currentTTLValues, loading, error, errorMessage } = useFetch<
 		PayloadProps,
 		undefined
 	>(getRetentionPeriodApi, undefined);
-
 	const [metricsTotalRetentionPeriod, setMetricsTotalRetentionPeriod] = useState<
 		number | null
-	>(currentTTLValues?.metrics_ttl_duration_hrs);
+	>(null);
 	const [metricsS3RetentionPeriod, setMetricsS3RetentionPeriod] = useState<
 		number | null
-	>(currentTTLValues?.metrics_move_ttl_duration_hrs);
+	>(null);
 	const [tracesTotalRetentionPeriod, setTracesTotalRetentionPeriod] = useState<
 		number | null
-	>(currentTTLValues?.traces_ttl_duration_hrs);
+	>(null);
 	const [tracesS3RetentionPeriod, setTracesS3RetentionPeriod] = useState<
 		number | null
-	>(currentTTLValues?.traces_move_ttl_duration_hrs);
+	>(null);
+
+	useEffect(() => {
+		if (currentTTLValues) {
+			setMetricsTotalRetentionPeriod(currentTTLValues.metrics_ttl_duration_hrs);
+			setMetricsS3RetentionPeriod(currentTTLValues.metrics_move_ttl_duration_hrs);
+			setTracesTotalRetentionPeriod(currentTTLValues.traces_ttl_duration_hrs);
+			setTracesS3RetentionPeriod(currentTTLValues.traces_move_ttl_duration_hrs);
+			console.log({ currentTTLValues });
+		}
+	}, [currentTTLValues]);
 
 	const onModalToggleHandler = (): void => {
 		setModal((modal) => !modal);
@@ -79,52 +88,67 @@ function GeneralSettings(): JSX.Element {
 		}
 	};
 	// const retentionRenderConfig = () => { };
-	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 s3Enabled = useMemo(
+		() => !!find(availableDisks, (disks: IDiskType) => disks?.type === 's3'),
+		[availableDisks],
+	);
+
+	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,
+					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,
+				},
+			],
+		},
+	].map((category): JSX.Element | null => {
+		if (
+			Array.isArray(category.retentionFields) &&
+			category.retentionFields.length > 0
+		) {
+			return (
+				<Col flex="40%" style={{ minWidth: 475 }} key={category.name}>
+					<Typography.Title level={3}>{category.name}</Typography.Title>
+
+					{category.retentionFields.map((retentionField) => (
+						<Retention
+							key={retentionField.name}
+							text={retentionField.name}
+							retentionValue={retentionField.value}
+							setRetentionValue={retentionField.setValue}
+							hide={!!retentionField.hide}
+						/>
+					))}
+				</Col>
+			);
+		}
+		return null;
+	});
 
 	const onOkHandler = async (): Promise<void> => {
 		try {
@@ -138,28 +162,46 @@ function GeneralSettings(): JSX.Element {
 			// 		(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,
+			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: `Congrats. The retention periods for ${name} has been updated successfully.`,
+					});
+					// checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue);
+					onModalToggleHandler();
+				} else {
+					notifications.error({
+						message: 'Error',
+						description: `There was an issue in changing the retention period for ${name}. Please try again or reach out to support@signoz.io`,
+						placement: 'topRight',
+					});
+				}
 			});
-			if (apiResponse.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',
-				});
-			}
 			setPostApiLoading(false);
 		} catch (error) {
 			notifications.error({
@@ -169,8 +211,57 @@ function GeneralSettings(): JSX.Element {
 				placement: 'topRight',
 			});
 		}
+		setModal(false);
 	};
 
+	const [isDisabled, errorText] = useMemo(() => {
+		// Various methods to return dynamic error message text.
+		const messages = {
+			compareError: (value: string | number): string =>
+				`Total retention period for ${value} can’t be lower than period after which data is moved to s3`,
+			nullValueError: (value: string | number): string =>
+				`Retention Peroid for ${value} is not set yet. Please set by choosing below`,
+		};
+
+		// 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,
+		tracesS3RetentionPeriod,
+		tracesTotalRetentionPeriod,
+	]);
+
 	if (error) {
 		return <Typography>{errorMessage}</Typography>;
 	}
@@ -179,31 +270,6 @@ function 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 isDisabledHandler = (): boolean => {
-		return false;
-	};
-
-	const errorText = getErrorText();
-
 	return (
 		<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 			{Element}
@@ -228,14 +294,14 @@ function GeneralSettings(): JSX.Element {
 					/>
 				</ToolTipContainer>
 			)}
-			<Row justify="space-around">
-				{renderConfig.map((category): JSX.Element | null => {
+			<Row justify="space-around" style={{ gap: '4%' }}>
+				{/* {renderConfig.map((category): JSX.Element | null => {
 					if (
 						Array.isArray(category.retentionFields) &&
 						category.retentionFields.length > 0
 					) {
 						return (
-							<Col flex="48%" style={{ minWidth: 500 }} key={category.name}>
+							<Col flex="40%" style={{ minWidth: 475 }} key={category.name}>
 								<Typography.Title level={3}>{category.name}</Typography.Title>
 
 								{category.retentionFields.map((retentionField) => (
@@ -251,7 +317,8 @@ function GeneralSettings(): JSX.Element {
 						);
 					}
 					return null;
-				})}
+				})} */}
+				{renderConfig}
 			</Row>
 
 			<Modal
@@ -272,11 +339,7 @@ function GeneralSettings(): JSX.Element {
 			</Modal>
 
 			<ButtonContainer>
-				<Button
-					onClick={onClickSaveHandler}
-					disabled={isDisabledHandler()}
-					type="primary"
-				>
+				<Button onClick={onClickSaveHandler} disabled={isDisabled} type="primary">
 					Save
 				</Button>
 			</ButtonContainer>
diff --git a/frontend/src/types/api/settings/setRetention.ts b/frontend/src/types/api/settings/setRetention.ts
index 9c2ced48f8..134e409f18 100644
--- a/frontend/src/types/api/settings/setRetention.ts
+++ b/frontend/src/types/api/settings/setRetention.ts
@@ -1,8 +1,8 @@
 export interface Props {
-	metrics_ttl_duration_hrs: number;
-	metrics_move_ttl_duration_hrs: number;
-	traces_ttl_duration_hrs: number;
-	traces_move_ttl_duration_hrs: number;
+	type: 'metrics' | 'traces';
+	totalDuration: string;
+	coldStorage?: 's3' | null;
+	toColdDuration?: string;
 }
 
 export interface PayloadProps {

From c9e02a8b257a3d26aff5131dd34771dcbf8b798d Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 00:06:13 +0530
Subject: [PATCH 05/11] feat: final touches to the ttl

---
 .../container/GeneralSettings/Retention.tsx   | 23 +++----
 .../src/container/GeneralSettings/index.tsx   | 65 +------------------
 .../src/container/GeneralSettings/utils.ts    | 19 +++---
 .../src/pages/AlertChannelCreate/index.tsx    |  3 +-
 frontend/src/pages/Settings/index.tsx         |  3 +-
 5 files changed, 25 insertions(+), 88 deletions(-)

diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx
index e6cef0383d..03af1aeb5e 100644
--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -1,12 +1,10 @@
-import { DownOutlined } from '@ant-design/icons';
-import { Button, Col, Menu, Row, Select } from 'antd';
+import { Col, Row, Select } from 'antd';
 import { find } from 'lodash-es';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
-import { Dropdown, Input, RetentionContainer, Typography } from './styles';
+import { Input, RetentionContainer, Typography } from './styles';
 import {
 	convertHoursValueToRelevantUnit,
-	ITimeUnit,
 	SettingPeriod,
 	TimeUnits,
 } from './utils';
@@ -18,24 +16,22 @@ function Retention({
 	setRetentionValue,
 	text,
 	hide,
-}: RetentionProps): JSX.Element {
+}: RetentionProps): JSX.Element | null {
 	const {
 		value: initialValue,
 		timeUnitValue: initialTimeUnitValue,
-	} = convertHoursValueToRelevantUnit(retentionValue);
+	} = convertHoursValueToRelevantUnit(Number(retentionValue));
 	const [selectedTimeUnit, setSelectTimeUnit] = useState(initialTimeUnitValue);
 	const [selectedValue, setSelectedValue] = useState<number | null>(null);
-
+	const interacted = useRef(false);
 	useEffect(() => {
-		setSelectedValue(initialValue);
+		if (!interacted.current) setSelectedValue(initialValue);
 	}, [initialValue]);
 
-
 	useEffect(() => {
-		setSelectTimeUnit(initialTimeUnitValue);
+		if (!interacted.current) setSelectTimeUnit(initialTimeUnitValue);
 	}, [initialTimeUnitValue]);
 
-
 	const menuItems = TimeUnits.map((option) => (
 		<Option key={option.value} value={option.value}>
 			{option.key}
@@ -62,6 +58,7 @@ function Retention({
 		e: React.ChangeEvent<HTMLInputElement>,
 		func: React.Dispatch<React.SetStateAction<number | null>>,
 	): void => {
+		interacted.current = true;
 		const { value } = e.target;
 		const integerValue = parseInt(value, 10);
 
@@ -93,7 +90,7 @@ function Retention({
 				<Col flex="150px">
 					<div style={{ display: 'inline-flex' }}>
 						<Input
-							value={selectedValue >= 0 ? selectedValue : ''}
+							value={selectedValue && selectedValue >= 0 ? selectedValue : ''}
 							onChange={(e): void => onChangeHandler(e, setSelectedValue)}
 							style={{ width: 75 }}
 						/>
diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index fa1a04dd56..b72a7e0320 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -5,8 +5,6 @@ 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 { find } from 'lodash-es';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { IDiskType } from 'types/api/disks/getDisks';
@@ -21,19 +19,12 @@ import {
 } from './styles';
 
 function GeneralSettings(): JSX.Element {
-	const [
-		selectedMetricsPeroid,
-		setSelectedMetricsPeroid,
-	] = useState<SettingPeriod>('month');
 	const [notifications, Element] = notification.useNotification();
 
 	const [modal, setModal] = useState<boolean>(false);
 	const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
 
-	const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
-	const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
-
-	const [availableDisks, setAvailableDisks] = useState<IDiskType | null>(null);
+	const [availableDisks, setAvailableDisks] = useState<IDiskType[] | null>(null);
 
 	useEffect(() => {
 		getDisks().then((response) => setAvailableDisks(response.payload));
@@ -62,7 +53,6 @@ function GeneralSettings(): JSX.Element {
 			setMetricsS3RetentionPeriod(currentTTLValues.metrics_move_ttl_duration_hrs);
 			setTracesTotalRetentionPeriod(currentTTLValues.traces_ttl_duration_hrs);
 			setTracesS3RetentionPeriod(currentTTLValues.traces_move_ttl_duration_hrs);
-			console.log({ currentTTLValues });
 		}
 	}, [currentTTLValues]);
 
@@ -74,20 +64,6 @@ function GeneralSettings(): JSX.Element {
 		onModalToggleHandler();
 	}, []);
 
-	const checkMetricTraceDefault = (trace: number, metric: number): void => {
-		if (metric === -1) {
-			setIsDefaultMetrics(true);
-		} else {
-			setIsDefaultMetrics(false);
-		}
-
-		if (trace === -1) {
-			setIsDefaultTrace(true);
-		} else {
-			setIsDefaultTrace(false);
-		}
-	};
-	// const retentionRenderConfig = () => { };
 	const s3Enabled = useMemo(
 		() => !!find(availableDisks, (disks: IDiskType) => disks?.type === 's3'),
 		[availableDisks],
@@ -153,15 +129,6 @@ function 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
-			// 		: parseInt(retentionPeroidTrace, 10);
-			// const retentionMetricsValue =
-			// 	retentionPeroidMetrics === '0' &&
-			// 		(payload?.metrics_ttl_duration_hrs || 0) < 0
-			// 		? payload?.metrics_ttl_duration_hrs || 0
-			// 		: parseInt(retentionPeroidMetrics, 10);
 			const [metricsTTLApiResponse, tracesTTLApiResponse] = await Promise.all([
 				setRetentionApi({
 					type: 'metrics',
@@ -192,8 +159,6 @@ function GeneralSettings(): JSX.Element {
 						placement: 'topRight',
 						description: `Congrats. The retention periods for ${name} has been updated successfully.`,
 					});
-					// checkMetricTraceDefault(retentionTraceValue, retentionMetricsValue);
-					onModalToggleHandler();
 				} else {
 					notifications.error({
 						message: 'Error',
@@ -202,6 +167,7 @@ function GeneralSettings(): JSX.Element {
 					});
 				}
 			});
+			onModalToggleHandler();
 			setPostApiLoading(false);
 		} catch (error) {
 			notifications.error({
@@ -294,32 +260,7 @@ function GeneralSettings(): JSX.Element {
 					/>
 				</ToolTipContainer>
 			)}
-			<Row justify="space-around" style={{ gap: '4%' }}>
-				{/* {renderConfig.map((category): JSX.Element | null => {
-					if (
-						Array.isArray(category.retentionFields) &&
-						category.retentionFields.length > 0
-					) {
-						return (
-							<Col flex="40%" style={{ minWidth: 475 }} key={category.name}>
-								<Typography.Title level={3}>{category.name}</Typography.Title>
-
-								{category.retentionFields.map((retentionField) => (
-									<Retention
-										key={retentionField.name}
-										text={retentionField.name}
-										retentionValue={retentionField.value}
-										setRetentionValue={retentionField.setValue}
-										hide={!!retentionField.hide}
-									/>
-								))}
-							</Col>
-						);
-					}
-					return null;
-				})} */}
-				{renderConfig}
-			</Row>
+			<Row justify="space-around">{renderConfig}</Row>
 
 			<Modal
 				title="Are you sure you want to change the retention period?"
diff --git a/frontend/src/container/GeneralSettings/utils.ts b/frontend/src/container/GeneralSettings/utils.ts
index caf0502d85..30efd6786a 100644
--- a/frontend/src/container/GeneralSettings/utils.ts
+++ b/frontend/src/container/GeneralSettings/utils.ts
@@ -26,16 +26,17 @@ export const TimeUnits: ITimeUnit[] = [
 export const convertHoursValueToRelevantUnit = (
 	value: number,
 ): { value: number; timeUnitValue: SettingPeriod } => {
-	for (let idx = TimeUnits.length - 1; idx >= 0; idx -= 1) {
-		const timeUnit = TimeUnits[idx];
-		const convertedValue = timeUnit.multiplier * value;
+	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 };
+			if (
+				convertedValue >= 1 &&
+				convertedValue === parseInt(`${convertedValue}`, 10)
+			) {
+				return { value: convertedValue, timeUnitValue: timeUnit.value };
+			}
 		}
-	}
 	return { value, timeUnitValue: TimeUnits[0].value };
 };
diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx
index 1f316fe860..3de6ce9986 100644
--- a/frontend/src/pages/AlertChannelCreate/index.tsx
+++ b/frontend/src/pages/AlertChannelCreate/index.tsx
@@ -26,8 +26,7 @@ function SettingsPage(): JSX.Element {
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey:
-					pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
+				activeKey: pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
 			}}
 		/>
 	);
diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx
index 2b23cec2ec..208fcde7c1 100644
--- a/frontend/src/pages/Settings/index.tsx
+++ b/frontend/src/pages/Settings/index.tsx
@@ -23,8 +23,7 @@ function SettingsPage(): JSX.Element {
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey:
-					pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General',
+				activeKey: pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General',
 			}}
 		/>
 	);

From 76fccbbba49820d995f3277603fefaa96c1b7c9b Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 12:19:54 +0530
Subject: [PATCH 06/11] fix: styling changes

---
 .../container/GeneralSettings/Retention.tsx   | 24 +++++++++----------
 .../src/container/GeneralSettings/styles.ts   |  9 +++++++
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx
index 03af1aeb5e..54fb89a394 100644
--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -2,7 +2,12 @@ import { Col, Row, Select } from 'antd';
 import { find } from 'lodash-es';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Input, RetentionContainer, Typography } from './styles';
+import {
+	Input,
+	RetentionContainer,
+	RetentionFieldInputContainer,
+	RetentionFieldLabel,
+} from './styles';
 import {
 	convertHoursValueToRelevantUnit,
 	SettingPeriod,
@@ -22,7 +27,9 @@ function Retention({
 		timeUnitValue: initialTimeUnitValue,
 	} = convertHoursValueToRelevantUnit(Number(retentionValue));
 	const [selectedTimeUnit, setSelectTimeUnit] = useState(initialTimeUnitValue);
-	const [selectedValue, setSelectedValue] = useState<number | null>(null);
+	const [selectedValue, setSelectedValue] = useState<number | null>(
+		initialValue,
+	);
 	const interacted = useRef(false);
 	useEffect(() => {
 		if (!interacted.current) setSelectedValue(initialValue);
@@ -78,17 +85,10 @@ function Retention({
 		<RetentionContainer>
 			<Row justify="space-between">
 				<Col flex={1} style={{ display: 'flex' }}>
-					<Typography
-						style={{
-							verticalAlign: 'middle',
-							whiteSpace: 'pre-wrap',
-						}}
-					>
-						{text}
-					</Typography>
+					<RetentionFieldLabel>{text}</RetentionFieldLabel>
 				</Col>
 				<Col flex="150px">
-					<div style={{ display: 'inline-flex' }}>
+					<RetentionFieldInputContainer>
 						<Input
 							value={selectedValue && selectedValue >= 0 ? selectedValue : ''}
 							onChange={(e): void => onChangeHandler(e, setSelectedValue)}
@@ -101,7 +101,7 @@ function Retention({
 						>
 							{menuItems}
 						</Select>
-					</div>
+					</RetentionFieldInputContainer>
 				</Col>
 			</Row>
 		</RetentionContainer>
diff --git a/frontend/src/container/GeneralSettings/styles.ts b/frontend/src/container/GeneralSettings/styles.ts
index 417fdb894e..a9f8b0fc57 100644
--- a/frontend/src/container/GeneralSettings/styles.ts
+++ b/frontend/src/container/GeneralSettings/styles.ts
@@ -80,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;
+`;

From 170609a81f1f7ce2a05fc4bc68be3c558e0c4b04 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 12:26:43 +0530
Subject: [PATCH 07/11] chore: type changes

---
 frontend/src/container/GeneralSettings/index.tsx | 12 ++++++++++--
 frontend/src/types/api/settings/getRetention.ts  |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index b72a7e0320..a38d7e6c81 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -50,9 +50,17 @@ function GeneralSettings(): JSX.Element {
 	useEffect(() => {
 		if (currentTTLValues) {
 			setMetricsTotalRetentionPeriod(currentTTLValues.metrics_ttl_duration_hrs);
-			setMetricsS3RetentionPeriod(currentTTLValues.metrics_move_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);
+			setTracesS3RetentionPeriod(
+				currentTTLValues.traces_move_ttl_duration_hrs
+					? currentTTLValues.traces_move_ttl_duration_hrs
+					: null,
+			);
 		}
 	}, [currentTTLValues]);
 
diff --git a/frontend/src/types/api/settings/getRetention.ts b/frontend/src/types/api/settings/getRetention.ts
index f3ba539416..f8a2f8b1bc 100644
--- a/frontend/src/types/api/settings/getRetention.ts
+++ b/frontend/src/types/api/settings/getRetention.ts
@@ -1,6 +1,6 @@
 export interface PayloadProps {
 	metrics_ttl_duration_hrs: number;
-	metrics_move_ttl_duration_hrs: number;
+	metrics_move_ttl_duration_hrs?: number;
 	traces_ttl_duration_hrs: number;
-	traces_move_ttl_duration_hrs: number;
+	traces_move_ttl_duration_hrs?: number;
 }

From 95f8dfb4bc8a2fd079ff0e8f2cf187cb9bfdc1eb Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 15:44:01 +0530
Subject: [PATCH 08/11] feat: i18n support for settings page

---
 frontend/public/locales/en/translation.json   | 13 ++++++-
 .../src/container/GeneralSettings/index.tsx   | 34 +++++++++----------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index e63d6d083e..e18493e548 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -1,3 +1,14 @@
 {
-	"monitor_signup": "Monitor your applications. Find what is causing issues."
+	"monitor_signup": "Monitor your applications. Find what is causing issues.",
+	"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 than 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/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index a38d7e6c81..b812ae9132 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -7,6 +7,7 @@ import TextToolTip from 'components/TextToolTip';
 import useFetch from 'hooks/useFetch';
 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';
 
@@ -19,8 +20,8 @@ import {
 } from './styles';
 
 function GeneralSettings(): JSX.Element {
+	const { t } = useTranslation();
 	const [notifications, Element] = notification.useNotification();
-
 	const [modal, setModal] = useState<boolean>(false);
 	const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
 
@@ -82,12 +83,12 @@ function GeneralSettings(): JSX.Element {
 			name: 'Metrics',
 			retentionFields: [
 				{
-					name: 'Total Retention Period',
+					name: t('settings.total_retention_period'),
 					value: metricsTotalRetentionPeriod,
 					setValue: setMetricsTotalRetentionPeriod,
 				},
 				{
-					name: `Move to S3\n(should be lower than total retention period)`,
+					name: t('settings.move_to_s3'),
 					value: metricsS3RetentionPeriod,
 					setValue: setMetricsS3RetentionPeriod,
 					hide: !s3Enabled,
@@ -98,12 +99,12 @@ function GeneralSettings(): JSX.Element {
 			name: 'Traces',
 			retentionFields: [
 				{
-					name: 'Total Retention Period',
+					name: t('settings.total_retention_period'),
 					value: tracesTotalRetentionPeriod,
 					setValue: setTracesTotalRetentionPeriod,
 				},
 				{
-					name: `Move to S3\n(should be lower than total retention period)`,
+					name: t('settings.move_to_s3'),
 					value: tracesS3RetentionPeriod,
 					setValue: setTracesS3RetentionPeriod,
 					hide: !s3Enabled,
@@ -165,12 +166,13 @@ function GeneralSettings(): JSX.Element {
 					notifications.success({
 						message: 'Success!',
 						placement: 'topRight',
-						description: `Congrats. The retention periods for ${name} has been updated successfully.`,
+
+						description: t('settings.retention_success_message', { name }),
 					});
 				} else {
 					notifications.error({
 						message: 'Error',
-						description: `There was an issue in changing the retention period for ${name}. Please try again or reach out to support@signoz.io`,
+						description: t('settings.retention_error_message', { name }),
 						placement: 'topRight',
 					});
 				}
@@ -180,8 +182,7 @@ function GeneralSettings(): JSX.Element {
 		} 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',
 			});
 		}
@@ -191,10 +192,10 @@ function GeneralSettings(): JSX.Element {
 	const [isDisabled, errorText] = useMemo(() => {
 		// Various methods to return dynamic error message text.
 		const messages = {
-			compareError: (value: string | number): string =>
-				`Total retention period for ${value} can’t be lower than period after which data is moved to s3`,
-			nullValueError: (value: string | number): string =>
-				`Retention Peroid for ${value} is not set yet. Please set by choosing below`,
+			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.
@@ -232,6 +233,7 @@ function GeneralSettings(): JSX.Element {
 		metricsS3RetentionPeriod,
 		metricsTotalRetentionPeriod,
 		s3Enabled,
+		t,
 		tracesS3RetentionPeriod,
 		tracesTotalRetentionPeriod,
 	]);
@@ -271,7 +273,7 @@ function GeneralSettings(): JSX.Element {
 			<Row justify="space-around">{renderConfig}</Row>
 
 			<Modal
-				title="Are you sure you want to change the retention period?"
+				title={t('settings.retention_confirmation')}
 				focusTriggerAfterClose
 				forceRender
 				destroyOnClose
@@ -282,9 +284,7 @@ function GeneralSettings(): JSX.Element {
 				visible={modal}
 				confirmLoading={postApiLoading}
 			>
-				<Typography>
-					This will change the amount of storage needed for saving metrics & traces.
-				</Typography>
+				<Typography>{t('settings.retention_confirmation_description')}</Typography>
 			</Modal>
 
 			<ButtonContainer>

From 42842b6b17d495e2c43bd6a7f3bc839e52305491 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 15:51:38 +0530
Subject: [PATCH 09/11] feat: i18n support for setting route names

---
 frontend/public/locales/en/translation.json     |  4 ++++
 frontend/src/pages/AlertChannelCreate/index.tsx | 12 ++++++++----
 frontend/src/pages/AllAlertChannels/index.tsx   | 12 ++++++++----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index e18493e548..1b90499381 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -1,5 +1,9 @@
 {
 	"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)",
diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx
index 3de6ce9986..ecc94247a4 100644
--- a/frontend/src/pages/AlertChannelCreate/index.tsx
+++ b/frontend/src/pages/AlertChannelCreate/index.tsx
@@ -5,28 +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 (
 		<RouteTab
 			{...{
 				routes: [
 					{
 						Component: GeneralSettings,
-						name: 'General',
+						name: t('routes.general'),
 						route: ROUTES.SETTINGS,
 					},
 					{
 						Component: (): JSX.Element => {
 							return <CreateAlertChannels preType="slack" />;
 						},
-						name: 'Alert Channels',
+						name: t('routes.alert_channels'),
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey: pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
+				activeKey:
+					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 b1d3820f66..1ab97d0db1 100644
--- a/frontend/src/pages/AllAlertChannels/index.tsx
+++ b/frontend/src/pages/AllAlertChannels/index.tsx
@@ -4,26 +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 (
 		<RouteTab
 			{...{
 				routes: [
 					{
 						Component: GeneralSettings,
-						name: 'General',
+						name: t('routes.general'),
 						route: ROUTES.SETTINGS,
 					},
 					{
 						Component: AlertChannels,
-						name: 'Alert Channels',
+						name: t('routes.alert_channels'),
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey: pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
+				activeKey:
+					pathName === ROUTES.SETTINGS
+						? t('routes.general')
+						: t('routes.alert_channels'),
 			}}
 		/>
 	);

From eae53d9effff47ba97caef604d6ff7d5af8a4e8e Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 16:05:46 +0530
Subject: [PATCH 10/11] feat: condition changes

---
 frontend/public/locales/en/translation.json      | 2 +-
 frontend/src/container/GeneralSettings/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 1b90499381..571ac5e43a 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -10,7 +10,7 @@
 		"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 than period after which data is moved to s3",
+		"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/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index b812ae9132..73d61550a9 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -205,13 +205,13 @@ function GeneralSettings(): JSX.Element {
 		if (s3Enabled) {
 			if (
 				(metricsTotalRetentionPeriod || metricsS3RetentionPeriod) &&
-				Number(metricsTotalRetentionPeriod) < Number(metricsS3RetentionPeriod)
+				Number(metricsTotalRetentionPeriod) <= Number(metricsS3RetentionPeriod)
 			) {
 				isDisabled = true;
 				errorText = messages.compareError('metrics');
 			} else if (
 				(tracesTotalRetentionPeriod || tracesS3RetentionPeriod) &&
-				Number(tracesTotalRetentionPeriod) < Number(tracesS3RetentionPeriod)
+				Number(tracesTotalRetentionPeriod) <= Number(tracesS3RetentionPeriod)
 			) {
 				isDisabled = true;
 				errorText = messages.compareError('traces');

From 3b3fd2b3a90277d3c9b0d44b7dce137f08f73a62 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 16:09:04 +0530
Subject: [PATCH 11/11] chore: update type

---
 frontend/src/api/disks/getDisks.ts       | 4 ++--
 frontend/src/types/api/disks/getDisks.ts | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/api/disks/getDisks.ts b/frontend/src/api/disks/getDisks.ts
index 70da1bddc9..9dced1b0fd 100644
--- a/frontend/src/api/disks/getDisks.ts
+++ b/frontend/src/api/disks/getDisks.ts
@@ -2,10 +2,10 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { IDiskType } from 'types/api/disks/getDisks';
+import { PayloadProps } from 'types/api/disks/getDisks';
 
 const getDisks = async (): Promise<
-	SuccessResponse<IDiskType[]> | ErrorResponse
+	SuccessResponse<PayloadProps> | ErrorResponse
 > => {
 	try {
 		const response = await axios.get(`/disks`);
diff --git a/frontend/src/types/api/disks/getDisks.ts b/frontend/src/types/api/disks/getDisks.ts
index fc917db7d9..9e444df53d 100644
--- a/frontend/src/types/api/disks/getDisks.ts
+++ b/frontend/src/types/api/disks/getDisks.ts
@@ -1,3 +1,4 @@
+export type PayloadProps = IDiskType[];
 export interface IDiskType {
 	name: string;
 	type: string;