chore: Eslint fix config (#882)

* chore: eslint config is updated * chore: eslint auto fix is added
2025-12-23 18:36:16 +00:00 · 2022-03-22 12:10:31 +05:30 · 2022-03-22 12:10:31 +05:30 · f1f606844a
commit f1f606844a
parent 4e335054fb
170 changed files with 1299 additions and 1215 deletions
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@ -3,17 +3,23 @@ module.exports = {
 		browser: true,
 		es2021: true,
 		node: true,
+		'jest/globals': true,
 	},
 	extends: [
+		'airbnb',
+		'airbnb-typescript',
 		'eslint:recommended',
 		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
 		'plugin:@typescript-eslint/eslint-recommended',
 		'plugin:prettier/recommended',
 		'plugin:sonarjs/recommended',
+		'plugin:import/errors',
+		'plugin:import/warnings',
 	],
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
+		project: './tsconfig.json',
 		ecmaFeatures: {
 			jsx: true,
 		},
@ -26,10 +32,17 @@ module.exports = {
 		'simple-import-sort',
 		'react-hooks',
 		'prettier',
+		'jest',
 	],
 	settings: {
 		react: {
-			version: 'latest',
+			version: 'detect',
+		},
+		'import/resolver': {
+			node: {
+				paths: ['src'],
+				extensions: ['.js', '.jsx', '.ts', '.tsx'],
+			},
 		},
 	},
 	rules: {
@ -41,12 +54,13 @@ module.exports = {
 		],
 		'react/prop-types': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'error',
-		'@typescript-eslint/no-var-requires': 0,
-		'react/no-array-index-key': 2,
+		'@typescript-eslint/no-var-requires': 'error',
+		'react/no-array-index-key': 'error',
 		'linebreak-style': [
 			'error',
 			process.platform === 'win32' ? 'windows' : 'unix',
 		],
+		'@typescript-eslint/default-param-last': 'off',

 		// simple sort error
 		'simple-import-sort/imports': 'error',
@ -54,7 +68,29 @@ module.exports = {

 		// hooks
 		'react-hooks/rules-of-hooks': 'error',
-		'react-hooks/exhaustive-deps': 'warn',
+		'react-hooks/exhaustive-deps': 'error',
+
+		// airbnb
+		'no-underscore-dangle': 'off',
+		'no-console': 'off',
+		'import/prefer-default-export': 'off',
+		'import/extensions': [
+			'error',
+			'ignorePackages',
+			{
+				js: 'never',
+				jsx: 'never',
+				ts: 'never',
+				tsx: 'never',
+			},
+		],
+
+		// eslint rules need to remove
+		'no-shadow': 'off',
+		'@typescript-eslint/no-shadow': 'off',
+		'global-require': 'off',
+		'@typescript-eslint/no-var-requires': 'off',
+		'import/no-cycle': 'off',

 		'prettier/prettier': [
 			'error',
--- a/frontend/package.json
+++ b/frontend/package.json
@ -7,8 +7,8 @@
 		"dev": "cross-env NODE_ENV=development webpack serve --progress",
 		"build": "webpack --config=webpack.config.prod.js --progress",
 		"prettify": "prettier --write .",
-		"lint": "eslint . --debug",
-		"lint:fix": "eslint . --fix --debug",
+		"lint": "eslint ./src",
+		"lint:fix": "eslint ./src --fix",
 		"cypress:open": "cypress open",
 		"cypress:run": "cypress run",
 		"jest": "jest",
@ -22,11 +22,12 @@
 	"license": "ISC",
 	"dependencies": {
 		"@ant-design/icons": "^4.6.2",
-		"@monaco-editor/react": "^4.3.1",
 		"@grafana/data": "^8.4.3",
+		"@monaco-editor/react": "^4.3.1",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
+		"@welldone-software/why-did-you-render": "^6.2.1",
 		"antd": "4.19.2",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
@ -74,7 +75,9 @@
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "^5.23.0",
-		"webpack-dev-server": "^4.3.1"
+		"webpack-dev-server": "^4.3.1",
+		"cypress": "^8.3.0",
+		"lodash-es": "^4.17.21"
 	},
 	"browserslist": {
 		"production": [
@ -103,6 +106,7 @@
 		"@types/d3-tip": "^3.5.5",
 		"@types/jest": "^26.0.15",
 		"@types/lodash-es": "^4.17.4",
+		"@types/mini-css-extract-plugin": "^2.5.1",
 		"@types/node": "^16.10.3",
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^16.9.9",
@ -117,17 +121,19 @@
 		"@types/webpack-dev-server": "^4.3.0",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
 		"@typescript-eslint/parser": "^4.28.2",
-		"@welldone-software/why-did-you-render": "^6.2.1",
 		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "^9.0.0",
 		"copy-webpack-plugin": "^8.1.0",
 		"critters-webpack-plugin": "^3.0.1",
-		"cypress": "^8.3.0",
 		"eslint": "^7.30.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-airbnb-typescript": "^16.1.4",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-config-standard": "^16.0.3",
-		"eslint-plugin-import": "^2.23.4",
+		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-jest": "^26.1.2",
+		"eslint-plugin-jsx-a11y": "^6.5.1",
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-promise": "^5.1.0",
@ -138,7 +144,6 @@
 		"husky": "4.3.8",
 		"less-plugin-npm-import": "^2.1.0",
 		"lint-staged": "10.5.3",
-		"lodash-es": "^4.17.21",
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
 		"react-hot-loader": "^4.13.0",
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@ -11,7 +11,7 @@ import AppReducer from 'types/reducer/app';

 import routes from './routes';

-const App = (): JSX.Element => {
+function App(): JSX.Element {
 	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);

 	return (
@ -39,6 +39,6 @@ const App = (): JSX.Element => {
 			</AppLayout>
 		</Router>
 	);
-};
+}

 export default App;
--- a/frontend/src/api/ErrorResponseHandler.ts
+++ b/frontend/src/api/ErrorResponseHandler.ts
@ -2,7 +2,7 @@ import { AxiosError } from 'axios';
 import { ErrorResponse } from 'types/api';
 import { ErrorStatusCode } from 'types/common';

-export const ErrorResponseHandler = (error: AxiosError): ErrorResponse => {
+export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 	if (error.response) {
 		// client received an error response (5xx, 4xx)
 		// making the error status code as standard Error Status Code
@ -54,4 +54,4 @@ export const ErrorResponseHandler = (error: AxiosError): ErrorResponse => {
 		error: error.toString(),
 		message: null,
 	};
-};
+}
--- a/frontend/src/api/trace/getFilters.ts
+++ b/frontend/src/api/trace/getFilters.ts
@ -29,9 +29,9 @@ const getFilters = async (
 			end: props.end,
 			getFilters: props.getFilters,
 			...nonDuration,
-			maxDuration: String((duration['duration'] || [])[0] || ''),
-			minDuration: String((duration['duration'] || [])[1] || ''),
-			exclude: exclude,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
 		});

 		return {
--- a/frontend/src/api/trace/getSpans.ts
+++ b/frontend/src/api/trace/getSpans.ts
@ -39,8 +39,8 @@ const getSpans = async (
 				step: props.step,
 				tags: updatedSelectedTags,
 				...nonDuration,
-				maxDuration: String((duration['duration'] || [])[0] || ''),
-				minDuration: String((duration['duration'] || [])[1] || ''),
+				maxDuration: String((duration.duration || [])[0] || ''),
+				minDuration: String((duration.duration || [])[1] || ''),
 				exclude,
 			},
 		);
--- a/frontend/src/api/trace/getSpansAggregate.ts
+++ b/frontend/src/api/trace/getSpansAggregate.ts
@ -42,8 +42,8 @@ const getSpanAggregate = async (
 			...preProps,
 			tags: updatedSelectedTags,
 			...nonDuration,
-			maxDuration: String((duration['duration'] || [])[0] || ''),
-			minDuration: String((duration['duration'] || [])[1] || ''),
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
 		});

--- a/frontend/src/api/trace/getTagFilter.ts
+++ b/frontend/src/api/trace/getTagFilter.ts
@ -20,8 +20,8 @@ const getTagFilters = async (
 			start: String(props.start),
 			end: String(props.end),
 			...nonDuration,
-			maxDuration: String((duration['duration'] || [])[0] || ''),
-			minDuration: String((duration['duration'] || [])[1] || ''),
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
 		});

 		return {
--- a/frontend/src/assets/Dashboard/TimeSeries.tsx
+++ b/frontend/src/assets/Dashboard/TimeSeries.tsx
@ -1,7 +1,7 @@
 import React from 'react';

-const TimeSeries = (): JSX.Element => (
-	<React.Fragment>
+function TimeSeries(): JSX.Element {
+	return (
 		<svg
 			width="81"
 			height="46"
@ -31,7 +31,7 @@ const TimeSeries = (): JSX.Element => (
 				/>
 			</defs>
 		</svg>
-	</React.Fragment>
-);
+	);
+}

 export default TimeSeries;
--- a/frontend/src/assets/Dashboard/Value.tsx
+++ b/frontend/src/assets/Dashboard/Value.tsx
@ -1,8 +1,7 @@
 import React from 'react';

-const Value = (props: ValueProps): JSX.Element => {
+function Value(props: ValueProps): JSX.Element {
 	return (
-		<React.Fragment>
 		<svg
 			width="78"
 			height="32"
@ -15,9 +14,8 @@ const Value = (props: ValueProps): JSX.Element => {
 				fill={props.fillColor}
 			/>
 		</svg>
-		</React.Fragment>
 	);
-};
+}

 interface ValueProps {
 	fillColor: React.CSSProperties['color'];
--- a/frontend/src/assets/NotFound.tsx
+++ b/frontend/src/assets/NotFound.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-const NotFound = (): JSX.Element => {
+function NotFound(): JSX.Element {
 	return (
 		<svg
 			width="360"
@ -261,6 +261,6 @@ const NotFound = (): JSX.Element => {
 			</defs>
 		</svg>
 	);
-};
+}

 export default NotFound;
--- a/frontend/src/components/Editor/index.tsx
+++ b/frontend/src/components/Editor/index.tsx
@ -1,17 +1,17 @@
 import MEditor from '@monaco-editor/react';
 import React from 'react';

-const Editor = ({ value }: EditorProps): JSX.Element => {
+function Editor({ value }: EditorProps): JSX.Element {
 	return (
 		<MEditor
 			theme="vs-dark"
 			defaultLanguage="yaml"
 			value={value.current}
 			options={{ fontSize: 16, automaticLayout: true }}
-			height={'40vh'}
+			height="40vh"
 		/>
 	);
-};
+}

 interface EditorProps {
 	value: React.MutableRefObject<string>;
--- a/frontend/src/components/Graph/Plugin/Legend.ts
+++ b/frontend/src/components/Graph/Plugin/Legend.ts
@ -68,7 +68,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 				const boxSpan = document.createElement('span');
 				boxSpan.style.background = item.strokeStyle || colors[0];
 				boxSpan.style.borderColor = item?.strokeStyle;
-				boxSpan.style.borderWidth = item.lineWidth + 'px';
+				boxSpan.style.borderWidth = `${item.lineWidth}px`;
 				boxSpan.style.display = 'inline-block';
 				boxSpan.style.minHeight = '20px';
 				boxSpan.style.marginRight = '10px';
--- a/frontend/src/components/Graph/index.tsx
+++ b/frontend/src/components/Graph/index.tsx
@ -27,6 +27,8 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';

+import { legend } from './Plugin';
+import { LegendsContainer } from './styles';
 import { useXAxisTimeUnit } from './xAxisConfig';
 import { getYAxisFormattedValue } from './yAxisConfig';

@ -47,10 +49,8 @@ Chart.register(
 	BarController,
 	BarElement,
 );
-import { legend } from './Plugin';
-import { LegendsContainer } from './styles';

-const Graph = ({
+function Graph({
 	data,
 	type,
 	title,
@ -58,7 +58,7 @@ const Graph = ({
 	onClickHandler,
 	name,
 	yAxisUnit = 'short',
-}: GraphProps): JSX.Element => {
+}: GraphProps): JSX.Element {
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	const chartRef = useRef<HTMLCanvasElement>(null);
 	const currentTheme = isDarkMode ? 'dark' : 'light';
@ -94,7 +94,7 @@ const Graph = ({
 				},
 				plugins: {
 					title: {
-						display: title === undefined ? false : true,
+						display: title !== undefined,
 						text: title,
 					},
 					legend: {
@ -137,7 +137,7 @@ const Graph = ({
 						},
 						ticks: {
 							// Include a dollar sign in the ticks
-							callback: function (value, index, ticks) {
+							callback(value, index, ticks) {
 								return getYAxisFormattedValue(value, yAxisUnit);
 							},
 						},
@ -160,8 +160,8 @@ const Graph = ({
 			};

 			lineChartRef.current = new Chart(chartRef.current, {
-				type: type,
-				data: data,
+				type,
+				data,
 				options,
 				plugins: [legend(name, data.datasets.length > 3)],
 			});
@ -178,7 +178,7 @@ const Graph = ({
 			<LegendsContainer id={name} />
 		</div>
 	);
-};
+}

 interface GraphProps {
 	type: ChartType;
--- a/frontend/src/components/Graph/xAxisConfig.ts
+++ b/frontend/src/components/Graph/xAxisConfig.ts
@ -104,12 +104,11 @@ export const useXAxisTimeUnit = (data: Chart['data']): IAxisTimeConfig => {
 				minTime: localTime.minTime,
 				maxTime: localTime.maxTime,
 			};
-		} else {
+		}
 		return {
 			minTime: globalTime.minTime / 1e6,
 			maxTime: globalTime.maxTime / 1e6,
 		};
-		}
 	}, [globalTime, localTime]);

 	return convertTimeRange(minTime, maxTime);
--- a/frontend/src/components/Input/index.tsx
+++ b/frontend/src/components/Input/index.tsx
@ -1,7 +1,7 @@
 import { Form, Input, InputProps } from 'antd';
 import React from 'react';

-const InputComponent = ({
+function InputComponent({
 	value,
 	type = 'text',
 	onChangeHandler,
@ -14,7 +14,8 @@ const InputComponent = ({
 	labelOnTop,
 	addonBefore,
 	...props
-}: InputComponentProps): JSX.Element => (
+}: InputComponentProps): JSX.Element {
+	return (
 		<Form.Item labelCol={{ span: labelOnTop ? 24 : 4 }} label={label}>
 			<Input
 				placeholder={placeholder}
@ -29,7 +30,8 @@ const InputComponent = ({
 				{...props}
 			/>
 		</Form.Item>
-);
+	);
+}

 interface InputComponentProps extends InputProps {
 	value: InputProps['value'];
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@ -1,15 +1,14 @@
 import { Modal, ModalProps as Props } from 'antd';
 import React, { ReactElement } from 'react';

-const CustomModal = ({
+function CustomModal({
 	title,
 	children,
 	isModalVisible,
 	footer,
 	closable = true,
-}: ModalProps): JSX.Element => {
+}: ModalProps): JSX.Element {
 	return (
-		<>
 		<Modal
 			title={title}
 			visible={isModalVisible}
@ -18,9 +17,8 @@ const CustomModal = ({
 		>
 			{children}
 		</Modal>
-		</>
 	);
-};
+}

 interface ModalProps {
 	isModalVisible: boolean;
--- a/frontend/src/components/NotFound/index.tsx
+++ b/frontend/src/components/NotFound/index.tsx
@ -4,7 +4,7 @@ import React from 'react';

 import { Button, Container, Text, TextContainer } from './styles';

-const NotFound = (): JSX.Element => {
+function NotFound(): JSX.Element {
 	return (
 		<Container>
 			<NotFoundImage />
@ -19,6 +19,6 @@ const NotFound = (): JSX.Element => {
 			</Button>
 		</Container>
 	);
-};
+}

 export default NotFound;
--- a/frontend/src/components/RouteTab/index.tsx
+++ b/frontend/src/components/RouteTab/index.tsx
@ -1,15 +1,15 @@
 import { Tabs, TabsProps } from 'antd';
+import history from 'lib/history';
 import React from 'react';

 const { TabPane } = Tabs;
-import history from 'lib/history';

-const RouteTab = ({
+function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	...rest
-}: RouteTabProps & TabsProps): JSX.Element => {
+}: RouteTabProps & TabsProps): JSX.Element {
 	const onChange = (activeRoute: string) => {
 		onChangeHandler && onChangeHandler();

@ -36,7 +36,7 @@ const RouteTab = ({
 			)}
 		</Tabs>
 	);
-};
+}

 interface RouteTabProps {
 	routes: {
--- a/frontend/src/components/Spinner/index.tsx
+++ b/frontend/src/components/Spinner/index.tsx
@ -4,11 +4,13 @@ import React from 'react';

 import { SpinerStyle } from './styles';

-const Spinner = ({ size, tip, height }: SpinnerProps): JSX.Element => (
+function Spinner({ size, tip, height }: SpinnerProps): JSX.Element {
+	return (
 		<SpinerStyle height={height}>
 			<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />} />
 		</SpinerStyle>
-);
+	);
+}

 interface SpinnerProps {
 	size?: SpinProps['size'];
--- a/frontend/src/components/Styled/index.ts
+++ b/frontend/src/components/Styled/index.ts
@ -2,9 +2,7 @@ import * as AntD from 'antd';
 import { TextProps } from 'antd/lib/typography/Text';
 import { TitleProps } from 'antd/lib/typography/Title';
 import React from 'react';
-import styled, {
-	FlattenSimpleInterpolation,
-} from 'styled-components';
+import styled, { FlattenSimpleInterpolation } from 'styled-components';

 import { IStyledClass } from './types';

--- a/frontend/src/components/TextToolTip/index.tsx
+++ b/frontend/src/components/TextToolTip/index.tsx
@ -2,13 +2,14 @@ import { QuestionCircleFilled } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import React from 'react';

-const TextToolTip = ({ text, url }: TextToolTipProps) => (
+function TextToolTip({ text, url }: TextToolTipProps) {
+	return (
 		<Tooltip
 			overlay={() => {
 				return (
 					<div>
 						{`${text} `}
-					<a href={url} rel="noopener noreferrer" target={'_blank'}>
+						<a href={url} rel="noopener noreferrer" target="_blank">
 							here
 						</a>
 					</div>
@ -17,7 +18,8 @@ const TextToolTip = ({ text, url }: TextToolTipProps) => (
 		>
 			<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
 		</Tooltip>
-);
+	);
+}

 interface TextToolTipProps {
 	url: string;
--- a/frontend/src/components/TimePreferenceDropDown/index.tsx
+++ b/frontend/src/components/TimePreferenceDropDown/index.tsx
@ -7,10 +7,10 @@ import React, { useCallback } from 'react';

 import { TextContainer } from './styles';

-const TimePreference = ({
+function TimePreference({
 	setSelectedTime,
 	selectedTime,
-}: TimePreferenceDropDownProps): JSX.Element => {
+}: TimePreferenceDropDownProps): JSX.Element {
 	const timeMenuItemOnChangeHandler = useCallback(
 		(event: TimeMenuItemOnChangeHandlerEvent) => {
 			const selectedTime = timeItems.find((e) => e.enum === event.key);
@ -38,7 +38,7 @@ const TimePreference = ({
 			</Dropdown>
 		</TextContainer>
 	);
-};
+}

 interface TimeMenuItemOnChangeHandlerEvent {
 	key: timePreferenceType | string;
--- a/frontend/src/components/ValueGraph/index.tsx
+++ b/frontend/src/components/ValueGraph/index.tsx
@ -2,9 +2,9 @@ import React from 'react';

 import { Value } from './styles';

-const ValueGraph = ({ value }: ValueGraphProps): JSX.Element => (
-	<Value>{value}</Value>
-);
+function ValueGraph({ value }: ValueGraphProps): JSX.Element {
+	return <Value>{value}</Value>;
+}

 interface ValueGraphProps {
 	value: string;
--- a/frontend/src/container/AllAlertChannels/AlertChannels.tsx
+++ b/frontend/src/container/AllAlertChannels/AlertChannels.tsx
@ -9,7 +9,7 @@ import { Channels, PayloadProps } from 'types/api/channels/getAll';

 import Delete from './Delete';

-const AlertChannels = ({ allChannels }: AlertChannelsProps): JSX.Element => {
+function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const [notifications, Element] = notification.useNotification();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);

@ -55,7 +55,7 @@ const AlertChannels = ({ allChannels }: AlertChannelsProps): JSX.Element => {
 			<Table rowKey="id" dataSource={channels} columns={columns} />
 		</>
 	);
-};
+}

 interface AlertChannelsProps {
 	allChannels: PayloadProps;
--- a/frontend/src/container/AllAlertChannels/Delete.tsx
+++ b/frontend/src/container/AllAlertChannels/Delete.tsx
@ -4,11 +4,7 @@ import deleteAlert from 'api/channels/delete';
 import React, { useState } from 'react';
 import { Channels } from 'types/api/channels/getAll';

-const Delete = ({
-	notifications,
-	setChannels,
-	id,
-}: DeleteProps): JSX.Element => {
+function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 	const [loading, setLoading] = useState(false);

 	const onClickHandler = async (): Promise<void> => {
@ -50,7 +46,7 @@ const Delete = ({
 			Delete
 		</Button>
 	);
-};
+}

 interface DeleteProps {
 	notifications: NotificationInstance;
--- a/frontend/src/container/AllAlertChannels/index.tsx
+++ b/frontend/src/container/AllAlertChannels/index.tsx
@ -7,12 +7,13 @@ import ROUTES from 'constants/routes';
 import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import React, { useCallback } from 'react';
-const { Paragraph } = Typography;

 import AlertChannlesComponent from './AlertChannels';
 import { Button, ButtonContainer } from './styles';

-const AlertChannels = (): JSX.Element => {
+const { Paragraph } = Typography;
+
+function AlertChannels(): JSX.Element {
 	const onToggleHandler = useCallback(() => {
 		history.push(ROUTES.CHANNELS_NEW);
 	}, []);
@ -24,7 +25,7 @@ const AlertChannels = (): JSX.Element => {
 	}

 	if (loading || payload === undefined) {
-		return <Spinner tip="Loading Channels.." height={'90vh'} />;
+		return <Spinner tip="Loading Channels.." height="90vh" />;
 	}

 	return (
@ -36,7 +37,7 @@ const AlertChannels = (): JSX.Element => {

 				<div>
 					<TextToolTip
-						text={`More details on how to setting notification channels`}
+						text="More details on how to setting notification channels"
 						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>

@ -49,6 +50,6 @@ const AlertChannels = (): JSX.Element => {
 			<AlertChannlesComponent allChannels={payload} />
 		</>
 	);
-};
+}

 export default AlertChannels;
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@ -20,11 +20,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 		if (!isLoggedIn) {
 			setIsSignUpPage(true);
 			history.push(ROUTES.SIGN_UP);
-		} else {
-			if (isSignUpPage) {
+		} else if (isSignUpPage) {
 			setIsSignUpPage(false);
 		}
-		}
 	}, [isLoggedIn, isSignUpPage]);

 	return (
--- a/frontend/src/container/CreateAlertChannels/index.tsx
+++ b/frontend/src/container/CreateAlertChannels/index.tsx
@ -7,9 +7,9 @@ import React, { useCallback, useState } from 'react';

 import { ChannelType, SlackChannel } from './config';

-const CreateAlertChannels = ({
+function CreateAlertChannels({
 	preType = 'slack',
-}: CreateAlertChannelsProps): JSX.Element => {
+}: CreateAlertChannelsProps): JSX.Element {
 	const [formInstance] = Form.useForm();
 	const [selectedConfig, setSelectedConfig] = useState<Partial<SlackChannel>>({
 		text: ` {{ range .Alerts -}}
@ -87,7 +87,6 @@ const CreateAlertChannels = ({
 	);

 	return (
-		<>
 		<FormAlertChannels
 			{...{
 				formInstance,
@ -100,14 +99,13 @@ const CreateAlertChannels = ({
 				NotificationElement,
 				title: 'New Notification Channels',
 				initialValue: {
-						type: type,
+					type,
 					...selectedConfig,
 				},
 			}}
 		/>
-		</>
 	);
-};
+}

 interface CreateAlertChannelsProps {
 	preType?: ChannelType;
--- a/frontend/src/container/EditAlertChannels/index.tsx
+++ b/frontend/src/container/EditAlertChannels/index.tsx
@ -11,9 +11,9 @@ import { Store } from 'rc-field-form/lib/interface';
 import React, { useCallback, useState } from 'react';
 import { useParams } from 'react-router';

-const EditAlertChannels = ({
+function EditAlertChannels({
 	initialValue,
-}: EditAlertChannelsProps): JSX.Element => {
+}: EditAlertChannelsProps): JSX.Element {
 	const [formInstance] = Form.useForm();
 	const [selectedConfig, setSelectedConfig] = useState<Partial<SlackChannel>>({
 		...initialValue,
@ -72,7 +72,6 @@ const EditAlertChannels = ({
 	}, []);

 	return (
-		<>
 		<FormAlertChannels
 			{...{
 				formInstance,
@ -88,9 +87,8 @@ const EditAlertChannels = ({
 				nameDisable: true,
 			}}
 		/>
-		</>
 	);
-};
+}

 interface EditAlertChannelsProps {
 	initialValue: Store;
--- a/frontend/src/container/EditRules/index.tsx
+++ b/frontend/src/container/EditRules/index.tsx
@ -1,6 +1,5 @@
 import { SaveFilled } from '@ant-design/icons';
-import { Button } from 'antd';
-import { notification } from 'antd';
+import { Button, notification } from 'antd';
 import put from 'api/alerts/put';
 import Editor from 'components/Editor';
 import ROUTES from 'constants/routes';
@ -12,7 +11,7 @@ import { PayloadProps as PutPayloadProps } from 'types/api/alerts/put';

 import { ButtonContainer } from './styles';

-const EditRules = ({ initialData, ruleId }: EditRulesProps): JSX.Element => {
+function EditRules({ initialData, ruleId }: EditRulesProps): JSX.Element {
 	const value = useRef<string>(initialData);
 	const [notifications, Element] = notification.useNotification();
 	const [editButtonState, setEditButtonState] = useState<State<PutPayloadProps>>(
@ -93,7 +92,7 @@ const EditRules = ({ initialData, ruleId }: EditRulesProps): JSX.Element => {
 			</ButtonContainer>
 		</>
 	);
-};
+}

 interface EditRulesProps {
 	initialData: PayloadProps['data'];
--- a/frontend/src/container/FormAlertChannels/Settings/Slack.tsx
+++ b/frontend/src/container/FormAlertChannels/Settings/Slack.tsx
@ -6,7 +6,8 @@ import { SlackChannel } from '../../CreateAlertChannels/config';

 const { TextArea } = Input;

-const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (
+function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
+	return (
 		<>
 			<FormItem name="api_url" label="Webhook URL">
 				<Input
@ -21,9 +22,7 @@ const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (

 			<FormItem
 				name="channel"
-			help={
-				'Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace),'
-			}
+				help="Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace),"
 				label="Recipient"
 			>
 				<Input
@ -61,7 +60,8 @@ const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (
 				/>
 			</FormItem>
 		</>
-);
+	);
+}

 interface SlackProps {
 	setSelectedConfig: React.Dispatch<React.SetStateAction<Partial<SlackChannel>>>;
--- a/frontend/src/container/FormAlertChannels/index.tsx
+++ b/frontend/src/container/FormAlertChannels/index.tsx
@ -1,20 +1,21 @@
 import { Form, FormInstance, Input, Select, Typography } from 'antd';
 import FormItem from 'antd/lib/form/FormItem';
+import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	SlackChannel,
 } from 'container/CreateAlertChannels/config';
-import React from 'react';
-const { Option } = Select;
-const { Title } = Typography;
-import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Store } from 'rc-field-form/lib/interface';
+import React from 'react';

 import SlackSettings from './Settings/Slack';
 import { Button } from './styles';

-const FormAlertChannels = ({
+const { Option } = Select;
+const { Title } = Typography;
+
+function FormAlertChannels({
 	formInstance,
 	type,
 	setSelectedConfig,
@ -26,7 +27,7 @@ const FormAlertChannels = ({
 	title,
 	initialValue,
 	nameDisable = false,
-}: FormAlertChannelsProps): JSX.Element => {
+}: FormAlertChannelsProps): JSX.Element {
 	return (
 		<>
 			{NotificationElement}
@ -81,7 +82,7 @@ const FormAlertChannels = ({
 			</Form>
 		</>
 	);
-};
+}

 interface FormAlertChannelsProps {
 	formInstance: FormInstance;
--- a/frontend/src/container/GantChart/SpanLength/index.tsx
+++ b/frontend/src/container/GantChart/SpanLength/index.tsx
@ -8,6 +8,7 @@ import React from 'react';
 import { toFixed } from 'utils/toFixed';

 import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
+
 interface SpanLengthProps {
 	width: string;
 	leftOffset: string;
@ -18,7 +19,7 @@ interface SpanLengthProps {
 	intervalUnit: IIntervalUnit;
 }

-const SpanLength = (props: SpanLengthProps): JSX.Element => {
+function SpanLength(props: SpanLengthProps): JSX.Element {
 	const { width, leftOffset, bgColor, intervalUnit } = props;
 	const { isDarkMode } = useThemeMode();
 	return (
@ -31,6 +32,6 @@ const SpanLength = (props: SpanLengthProps): JSX.Element => {
 			)} ${intervalUnit.name}`}</SpanText>
 		</SpanWrapper>
 	);
-};
+}

 export default SpanLength;
--- a/frontend/src/container/GantChart/SpanName/index.tsx
+++ b/frontend/src/container/GantChart/SpanName/index.tsx
@ -9,10 +9,10 @@ import {
 	SpanWrapper,
 } from './styles';

-const SpanNameComponent = ({
+function SpanNameComponent({
 	name,
 	serviceName,
-}: SpanNameComponent): JSX.Element => {
+}: SpanNameComponent): JSX.Element {
 	return (
 		<Container title={`${name} ${serviceName}`}>
 			<SpanWrapper>
@ -21,7 +21,7 @@ const SpanNameComponent = ({
 			</SpanWrapper>
 		</Container>
 	);
-};
+}

 interface SpanNameComponent {
 	name: string;
--- a/frontend/src/container/GantChart/Trace/index.tsx
+++ b/frontend/src/container/GantChart/Trace/index.tsx
@ -20,7 +20,7 @@ import {
 	Wrapper,
 } from './styles';

-const Trace = (props: TraceProps): JSX.Element => {
+function Trace(props: TraceProps): JSX.Element {
 	const {
 		name,
 		activeHoverId,
@ -108,7 +108,6 @@ const Trace = (props: TraceProps): JSX.Element => {
 	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;

 	return (
-		<>
 		<Wrapper
 			onMouseEnter={onMouseEnterHandler}
 			onMouseLeave={onMouseLeaveHandler}
@ -140,7 +139,7 @@ const Trace = (props: TraceProps): JSX.Element => {
 						</Col>
 					</StyledRow>
 				</StyledCol>
-					<Col flex={'1'}>
+				<Col flex="1">
 					<SpanLength
 						leftOffset={nodeLeftOffset.toString()}
 						width={width.toString()}
@ -173,9 +172,8 @@ const Trace = (props: TraceProps): JSX.Element => {
 				</>
 			)}
 		</Wrapper>
-		</>
 	);
-};
+}

 interface ITraceGlobal {
 	globalSpread: ITraceMetaData['spread'];
--- a/frontend/src/container/GantChart/index.tsx
+++ b/frontend/src/container/GantChart/index.tsx
@ -7,7 +7,7 @@ import { CardContainer, CardWrapper, CollapseButton, Wrapper } from './styles';
 import Trace from './Trace';
 import { getSpanPath } from './utils';

-const GanttChart = (props: GanttChartProps): JSX.Element => {
+function GanttChart(props: GanttChartProps): JSX.Element {
 	const {
 		data,
 		traceMetaData,
@ -36,7 +36,6 @@ const GanttChart = (props: GanttChartProps): JSX.Element => {
 		setIsExpandAll((prev) => !prev);
 	};
 	return (
-		<>
 		<Wrapper>
 			<CardContainer>
 				<CollapseButton
@ -65,9 +64,8 @@ const GanttChart = (props: GanttChartProps): JSX.Element => {
 				</CardWrapper>
 			</CardContainer>
 		</Wrapper>
-		</>
 	);
-};
+}

 export interface ITraceMetaData {
 	globalEnd: number;
--- a/frontend/src/container/GantChart/utils.ts
+++ b/frontend/src/container/GantChart/utils.ts
@ -11,7 +11,7 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => {
 		}
 		totalSpans++;
 		levels = Math.max(levels, level);
-		const startTime = treeNode.startTime;
+		const { startTime } = treeNode;
 		const endTime = startTime + treeNode.value;
 		globalStart = Math.min(globalStart, startTime);
 		globalEnd = Math.max(globalEnd, endTime);
@ -22,8 +22,8 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => {
 	};
 	traverse(treeData, 1);

-	globalStart = globalStart * 1e6;
-	globalEnd = globalEnd * 1e6;
+	globalStart *= 1e6;
+	globalEnd *= 1e6;

 	return {
 		globalStart,
@ -37,7 +37,7 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => {
 export function getTopLeftFromBody(elem: HTMLElement) {
 	const box = elem.getBoundingClientRect();

-	const body = document.body;
+	const { body } = document;
 	const docEl = document.documentElement;

 	const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
@ -56,7 +56,7 @@ export const getNodeById = (
 	searchingId: string,
 	treeData: ITraceTree,
 ): ITraceTree | undefined => {
-	let foundNode: ITraceTree | undefined = undefined;
+	let foundNode: ITraceTree | undefined;
 	const traverse = (treeNode: ITraceTree, level = 0) => {
 		if (!treeNode) {
 			return;
--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@ -12,13 +12,13 @@ import {
 	Typography,
 } from './styles';

-const Retention = ({
+function Retention({
 	retentionValue,
 	setRentionValue,
 	selectedRetentionPeroid,
 	setSelectedRetentionPeroid,
 	text,
-}: RetentionProps): JSX.Element => {
+}: RetentionProps): JSX.Element {
 	const options: Option[] = [
 		{
 			key: 'hr',
@ -58,7 +58,7 @@ const Retention = ({
 		e: React.ChangeEvent<HTMLInputElement>,
 		func: React.Dispatch<React.SetStateAction<string>>,
 	): void => {
-		const value = e.target.value;
+		const { value } = e.target;
 		const integerValue = parseInt(value, 10);

 		if (value.length > 0 && integerValue.toString() === value) {
@ -89,7 +89,7 @@ const Retention = ({
 			</Dropdown>
 		</RetentionContainer>
 	);
-};
+}

 interface Option {
 	key: SettingPeroid;
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@ -18,7 +18,7 @@ import {
 	ToolTipContainer,
 } from './styles';

-const GeneralSettings = (): JSX.Element => {
+function GeneralSettings(): JSX.Element {
 	const [
 		selectedMetricsPeroid,
 		setSelectedMetricsPeroid,
@ -207,7 +207,7 @@ const GeneralSettings = (): JSX.Element => {
 			)}

 			<Retention
-				text={'Retention Period for Metrics'}
+				text="Retention Period for Metrics"
 				selectedRetentionPeroid={selectedMetricsPeroid}
 				setRentionValue={setRetentionPeroidMetrics}
 				retentionValue={retentionPeroidMetrics}
@ -215,7 +215,7 @@ const GeneralSettings = (): JSX.Element => {
 			/>

 			<Retention
-				text={'Retention Period for Traces'}
+				text="Retention Period for Traces"
 				selectedRetentionPeroid={selectedTracePeroid}
 				setRentionValue={setRetentionPeroidTrace}
 				retentionValue={retentionPeroidTrace}
@ -250,7 +250,7 @@ const GeneralSettings = (): JSX.Element => {
 			</ButtonContainer>
 		</Container>
 	);
-};
+}

 export type SettingPeroid = 'hr' | 'day' | 'month';

--- a/frontend/src/container/GridGraphComponent/index.tsx
+++ b/frontend/src/container/GridGraphComponent/index.tsx
@ -8,7 +8,7 @@ import React from 'react';

 import { TitleContainer, ValueContainer } from './styles';

-const GridGraphComponent = ({
+function GridGraphComponent({
 	GRAPH_TYPES,
 	data,
 	title,
@ -17,7 +17,7 @@ const GridGraphComponent = ({
 	onClickHandler,
 	name,
 	yAxisUnit,
-}: GridGraphComponentProps): JSX.Element | null => {
+}: GridGraphComponentProps): JSX.Element | null {
 	const location = history.location.pathname;

 	const isDashboardPage = location.split('/').length === 3;
@ -32,9 +32,9 @@ const GridGraphComponent = ({
 					isStacked,
 					opacity,
 					xAxisType: 'time',
-					onClickHandler: onClickHandler,
+					onClickHandler,
 					name,
-					yAxisUnit: yAxisUnit,
+					yAxisUnit,
 				}}
 			/>
 		);
@ -64,7 +64,7 @@ const GridGraphComponent = ({
 	}

 	return null;
-};
+}

 export interface GridGraphComponentProps {
 	GRAPH_TYPES: GRAPH_TYPES;
--- a/frontend/src/container/GridGraphLayout/AddWidget/index.tsx
+++ b/frontend/src/container/GridGraphLayout/AddWidget/index.tsx
@ -14,7 +14,7 @@ import DashboardReducer from 'types/reducer/dashboards';

 import { Button, Container } from './styles';

-const AddWidget = ({ toggleAddWidget }: Props): JSX.Element => {
+function AddWidget({ toggleAddWidget }: Props): JSX.Element {
 	const { isAddWidget } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -26,17 +26,15 @@ const AddWidget = ({ toggleAddWidget }: Props): JSX.Element => {
 	return (
 		<Container>
 			{!isAddWidget ? (
-				<>
 				<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
 					Add Widgets
 				</Button>
-				</>
 			) : (
 				<Typography>Click a widget icon to add it here</Typography>
 			)}
 		</Container>
 	);
-};
+}

 interface DispatchProps {
 	toggleAddWidget: (
--- a/frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx
@ -9,11 +9,11 @@ import { Widgets } from 'types/api/dashboard/getAll';

 import { Container } from './styles';

-const Bar = ({
+function Bar({
 	widget,
 	onViewFullScreenHandler,
 	onDeleteHandler,
-}: BarProps): JSX.Element => {
+}: BarProps): JSX.Element {
 	const { push } = useHistory();
 	const { pathname } = useLocation();

@ -29,7 +29,7 @@ const Bar = ({
 			<DeleteOutlined onClick={onDeleteHandler} />
 		</Container>
 	);
-};
+}

 interface BarProps {
 	widget: Widgets;
--- a/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx
@ -10,11 +10,11 @@ import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';

-const EmptyGraph = ({
+function EmptyGraph({
 	selectedTime,
 	widget,
 	onClickHandler,
-}: EmptyGraphProps): JSX.Element => {
+}: EmptyGraphProps): JSX.Element {
 	const { minTime, maxTime, loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@ -47,7 +47,7 @@ const EmptyGraph = ({
 			while (endDate >= startDate) {
 				const newDate = new Date(startDate);

-				startDate = startDate + 20000;
+				startDate += 20000;

 				dates.push(newDate);
 			}
@ -62,7 +62,7 @@ const EmptyGraph = ({
 		<Graph
 			{...{
 				type: 'line',
-				onClickHandler: onClickHandler,
+				onClickHandler,
 				data: {
 					datasets: [
 						{
@ -79,7 +79,7 @@ const EmptyGraph = ({
 			}}
 		/>
 	);
-};
+}

 interface EmptyGraphProps {
 	selectedTime: timePreferance;
--- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx
@ -26,14 +26,14 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import EmptyGraph from './EmptyGraph';
 import { NotFoundContainer, TimeContainer } from './styles';

-const FullView = ({
+function FullView({
 	widget,
 	fullViewOptions = true,
 	onClickHandler,
 	noDataGraph = false,
 	name,
 	yAxisUnit,
-}: FullViewProps): JSX.Element => {
+}: FullViewProps): JSX.Element {
 	const { minTime, maxTime, selectedTime: globalSelectedTime } = useSelector<
 		AppState,
 		GlobalReducer
@ -220,7 +220,7 @@ const FullView = ({
 					isStacked: widget.isStacked,
 					opacity: widget.opacity,
 					title: widget.title,
-					onClickHandler: onClickHandler,
+					onClickHandler,
 					name,
 					yAxisUnit,
 				}}
@ -228,7 +228,7 @@ const FullView = ({
 			{/* </GraphContainer> */}
 		</>
 	);
-};
+}

 interface FullViewState {
 	loading: boolean;
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@ -8,8 +8,7 @@ import getChartData from 'lib/getChartData';
 import GetMaxMinTime from 'lib/getMaxMinTime';
 import GetStartAndEndTime from 'lib/getStartAndEndTime';
 import React, { useCallback, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import {
@ -25,13 +24,13 @@ import Bar from './Bar';
 import FullView from './FullView';
 import { ErrorContainer, FullViewContainer, Modal } from './styles';

-const GridCardGraph = ({
+function GridCardGraph({
 	widget,
 	deleteWidget,
 	isDeleted,
 	name,
-	yAxisUnit
-}: GridCardGraphProps): JSX.Element => {
+	yAxisUnit,
+}: GridCardGraphProps): JSX.Element {
 	const [state, setState] = useState<GridCardGraphState>({
 		loading: true,
 		errorMessage: '',
@ -66,7 +65,7 @@ const GridCardGraph = ({
 							const result = await getQueryResult({
 								end,
 								query: query.query,
-								start: start,
+								start,
 								step: '60',
 							});

@ -150,7 +149,11 @@ const GridCardGraph = ({
 					destroyOnClose
 				>
 					<FullViewContainer>
-						<FullView name={name + 'expanded'} widget={widget} yAxisUnit={yAxisUnit} />
+						<FullView
+							name={`${name}expanded`}
+							widget={widget}
+							yAxisUnit={yAxisUnit}
+						/>
 					</FullViewContainer>
 				</Modal>
 			</>
@ -205,7 +208,7 @@ const GridCardGraph = ({
 			/>
 		</>
 	);
-};
+}

 interface GridCardGraphState {
 	loading: boolean;
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@ -22,7 +22,7 @@ import {
 } from './styles';
 import { updateDashboard } from './utils';

-const GridGraph = (): JSX.Element => {
+function GridGraph(): JSX.Element {
 	const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -59,7 +59,7 @@ const GridGraph = (): JSX.Element => {
 					x: (index % 2) * 6,
 					Component: (): JSX.Element => (
 						<Graph
-							name={e.id + index + 'non-expanded'}
+							name={`${e.id + index}non-expanded`}
 							isDeleted={isDeleted}
 							widget={widgets[index]}
 							yAxisUnit={e.yAxisUnit}
@ -67,7 +67,7 @@ const GridGraph = (): JSX.Element => {
 					),
 				};
 			});
-		} else {
+		}
 		return data.layout
 			.filter((_, index) => widgets[index])
 			.map((e, index) => ({
@ -86,7 +86,6 @@ const GridGraph = (): JSX.Element => {
 					return <></>;
 				},
 			}));
-		}
 	}, [widgets, data.layout]);

 	useEffect(() => {
@ -142,7 +141,7 @@ const GridGraph = (): JSX.Element => {
 						data,
 						generateWidgetId,
 						graphType,
-						selectedDashboard: selectedDashboard,
+						selectedDashboard,
 						layout: allLayouts
 							.map((e, index) => ({
 								...e,
@ -253,7 +252,7 @@ const GridGraph = (): JSX.Element => {
 			</ReactGridLayout>
 		</>
 	);
-};
+}

 interface LayoutProps extends Layout {
 	Component: () => JSX.Element;
--- a/frontend/src/container/GridGraphLayout/utils.ts
+++ b/frontend/src/container/GridGraphLayout/utils.ts
@ -43,7 +43,7 @@ export const updateDashboard = async ({
 				title: '',
 			},
 		],
-		layout: layout,
+		layout,
 	});

 	if (response.statusCode === 200) {
--- a/frontend/src/container/Header/Breadcrumbs/index.tsx
+++ b/frontend/src/container/Header/Breadcrumbs/index.tsx
@ -1,6 +1,7 @@
 import { Breadcrumb } from 'antd';
 import ROUTES from 'constants/routes';
 import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { Link } from 'react-router-dom';

 const breadcrumbNameMap = {
@ -13,9 +14,7 @@ const breadcrumbNameMap = {
 	[ROUTES.DASHBOARD]: 'Dashboard',
 };

-import { RouteComponentProps, withRouter } from 'react-router';
-
-const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => {
+function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element {
 	const pathArray = props.location.pathname.split('/').filter((i) => i);

 	const extraBreadcrumbItems = pathArray.map((_, index) => {
@ -27,13 +26,12 @@ const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => {
 					<Link to={url}>{url.split('/').slice(-1)[0]}</Link>
 				</Breadcrumb.Item>
 			);
-		} else {
+		}
 		return (
 			<Breadcrumb.Item key={url}>
 				<Link to={url}>{breadcrumbNameMap[url]}</Link>
 			</Breadcrumb.Item>
 		);
-		}
 	});

 	const breadcrumbItems = [
@ -43,6 +41,6 @@ const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => {
 	].concat(extraBreadcrumbItems);

 	return <Breadcrumb>{breadcrumbItems}</Breadcrumb>;
-};
+}

 export default withRouter(ShowBreadcrumbs);
--- a/frontend/src/container/Header/CustomDateTimeModal/index.tsx
+++ b/frontend/src/container/Header/CustomDateTimeModal/index.tsx
@ -1,16 +1,17 @@
 import { Modal } from 'antd';
-import React, { useState } from 'react';
-export type DateTimeRangeType = [Dayjs | null, Dayjs | null] | null;
 import DatePicker from 'components/DatePicker';
 import dayjs, { Dayjs } from 'dayjs';
+import React, { useState } from 'react';
+
+export type DateTimeRangeType = [Dayjs | null, Dayjs | null] | null;

 const { RangePicker } = DatePicker;

-const CustomDateTimeModal = ({
+function CustomDateTimeModal({
 	visible,
 	onCreate,
 	onCancel,
-}: CustomDateTimeModalProps): JSX.Element => {
+}: CustomDateTimeModalProps): JSX.Element {
 	const [
 		customDateTimeRange,
 		setCustomDateTimeRange,
@ -23,9 +24,8 @@ const CustomDateTimeModal = ({
 	function disabledDate(current: Dayjs): boolean {
 		if (current > dayjs()) {
 			return true;
-		} else {
-			return false;
 		}
+		return false;
 	}

 	return (
@ -36,7 +36,7 @@ const CustomDateTimeModal = ({
 			cancelText="Cancel"
 			onCancel={onCancel}
 			style={{ position: 'absolute', top: 60, right: 40 }}
-			onOk={(): void => onCreate(customDateTimeRange ? customDateTimeRange : null)}
+			onOk={(): void => onCreate(customDateTimeRange || null)}
 		>
 			<RangePicker
 				disabledDate={disabledDate}
@ -45,7 +45,7 @@ const CustomDateTimeModal = ({
 			/>
 		</Modal>
 	);
-};
+}

 interface CustomDateTimeModalProps {
 	visible: boolean;
--- a/frontend/src/container/Header/DateTimeSelection/Refresh.tsx
+++ b/frontend/src/container/Header/DateTimeSelection/Refresh.tsx
@ -2,9 +2,7 @@ import React, { useEffect, useState } from 'react';

 import { RefreshTextContainer, Typography } from './styles';

-const RefreshText = ({
-	onLastRefreshHandler,
-}: RefreshTextProps): JSX.Element => {
+function RefreshText({ onLastRefreshHandler }: RefreshTextProps): JSX.Element {
 	const [refreshText, setRefreshText] = useState<string>('');

 	// this is to update the refresh text
@ -25,7 +23,7 @@ const RefreshText = ({
 			<Typography>{refreshText}</Typography>
 		</RefreshTextContainer>
 	);
-};
+}

 interface RefreshTextProps {
 	onLastRefreshHandler: () => string;
--- a/frontend/src/container/Header/DateTimeSelection/index.tsx
+++ b/frontend/src/container/Header/DateTimeSelection/index.tsx
@ -1,14 +1,10 @@
 import { Button, Select as DefaultSelect } from 'antd';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { getDefaultOption, getOptions, Time } from './config';
-import { Container, Form, FormItem } from './styles';
-const { Option } = DefaultSelect;
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCAL_STORAGE } from 'constants/localStorage';
 import dayjs, { Dayjs } from 'dayjs';
 import getTimeString from 'lib/getTimeString';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { bindActionCreators, Dispatch } from 'redux';
@ -19,13 +15,17 @@ import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';

 import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal';
+import { getDefaultOption, getOptions, Time } from './config';
 import RefreshText from './Refresh';
+import { Container, Form, FormItem } from './styles';

-const DateTimeSelection = ({
+const { Option } = DefaultSelect;
+
+function DateTimeSelection({
 	location,
 	updateTimeInterval,
 	globalTimeLoading,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
 	const [form_dtselector] = Form.useForm();

 	const params = new URLSearchParams(location.search);
@ -290,7 +290,7 @@ const DateTimeSelection = ({
 			/>
 		</Container>
 	);
-};
+}

 interface DispatchProps {
 	updateTimeInterval: (
--- a/frontend/src/container/Header/index.tsx
+++ b/frontend/src/container/Header/index.tsx
@ -15,7 +15,7 @@ const routesToSkip = [
 	ROUTES.ALL_CHANNELS,
 ];

-const TopNav = (): JSX.Element | null => {
+function TopNav(): JSX.Element | null {
 	const { pathname } = useLocation();

 	if (history.location.pathname === ROUTES.SIGN_UP) {
@ -46,6 +46,6 @@ const TopNav = (): JSX.Element | null => {
 			)}
 		</Container>
 	);
-};
+}

 export default TopNav;
--- a/frontend/src/container/ListAlertRules/DeleteAlert.tsx
+++ b/frontend/src/container/ListAlertRules/DeleteAlert.tsx
@ -6,11 +6,11 @@ import React, { useState } from 'react';
 import { PayloadProps as DeleteAlertPayloadProps } from 'types/api/alerts/delete';
 import { Alerts } from 'types/api/alerts/getAll';

-const DeleteAlert = ({
+function DeleteAlert({
 	id,
 	setData,
 	notifications,
-}: DeleteAlertProps): JSX.Element => {
+}: DeleteAlertProps): JSX.Element {
 	const [deleteAlertState, setDeleteAlertState] = useState<
 		State<DeleteAlertPayloadProps>
 	>({
@ -70,7 +70,6 @@ const DeleteAlert = ({
 	};

 	return (
-		<>
 		<Button
 			disabled={deleteAlertState.loading || false}
 			loading={deleteAlertState.loading || false}
@ -79,9 +78,8 @@ const DeleteAlert = ({
 		>
 			Delete
 		</Button>
-		</>
 	);
-};
+}

 interface DeleteAlertProps {
 	id: Alerts['id'];
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@ -15,7 +15,7 @@ import DeleteAlert from './DeleteAlert';
 import { Button, ButtonContainer } from './styles';
 import Status from './TableComponents/Status';

-const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
+function ListAlert({ allAlertRules }: ListAlertProps): JSX.Element {
 	const [data, setData] = useState<Alerts[]>(allAlertRules || []);

 	useInterval(() => {
@ -62,7 +62,7 @@ const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
 			dataIndex: 'labels',
 			key: 'severity',
 			sorter: (a, b): number =>
-				a.labels['severity'].length - b.labels['severity'].length,
+				a.labels.severity.length - b.labels.severity.length,
 			render: (value): JSX.Element => {
 				const objectKeys = Object.keys(value);
 				const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
@ -144,7 +144,7 @@ const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
 			<Table rowKey="id" columns={columns} dataSource={data} />
 		</>
 	);
-};
+}

 interface ListAlertProps {
 	allAlertRules: Alerts[];
--- a/frontend/src/container/ListAlertRules/TableComponents/Status.tsx
+++ b/frontend/src/container/ListAlertRules/TableComponents/Status.tsx
@ -2,7 +2,7 @@ import { Tag } from 'antd';
 import React from 'react';
 import { Alerts } from 'types/api/alerts/getAll';

-const Status = ({ status }: StatusProps): JSX.Element => {
+function Status({ status }: StatusProps): JSX.Element {
 	switch (status) {
 		case 'inactive': {
 			return <Tag color="green">OK</Tag>;
@ -20,7 +20,7 @@ const Status = ({ status }: StatusProps): JSX.Element => {
 			return <Tag color="default">Unknown Status</Tag>;
 		}
 	}
-};
+}

 interface StatusProps {
 	status: Alerts['state'];
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@ -6,7 +6,7 @@ import { PayloadProps } from 'types/api/alerts/getAll';

 import ListAlert from './ListAlert';

-const ListAlertRules = (): JSX.Element => {
+function ListAlertRules(): JSX.Element {
 	const { loading, payload, error, errorMessage } = useFetch<
 		PayloadProps,
 		undefined
@ -27,6 +27,6 @@ const ListAlertRules = (): JSX.Element => {
 			}}
 		/>
 	);
-};
+}

 export default ListAlertRules;
--- a/frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx
@ -5,7 +5,7 @@ import React from 'react';

 import { Data } from '..';

-const Created = (createdBy: Data['createdBy']): JSX.Element => {
+function Created(createdBy: Data['createdBy']): JSX.Element {
 	const time = new Date(createdBy);

 	const date = getFormattedDate(time);
@ -13,6 +13,6 @@ const Created = (createdBy: Data['createdBy']): JSX.Element => {
 	const timeString = `${date} ${convertDateToAmAndPm(time)}`;

 	return <Typography>{`${timeString}`}</Typography>;
-};
+}

 export default Created;
--- a/frontend/src/container/ListOfDashboard/TableComponents/Date.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Date.tsx
@ -5,9 +5,7 @@ import React from 'react';

 import { Data } from '..';

-const DateComponent = (
-	lastUpdatedTime: Data['lastUpdatedTime'],
-): JSX.Element => {
+function DateComponent(lastUpdatedTime: Data['lastUpdatedTime']): JSX.Element {
 	const time = new Date(lastUpdatedTime);

 	const date = getFormattedDate(time);
@ -15,6 +13,6 @@ const DateComponent = (
 	const timeString = `${date} ${convertDateToAmAndPm(time)}`;

 	return <Typography>{timeString}</Typography>;
-};
+}

 export default DateComponent;
--- a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
@ -1,18 +1,14 @@
 import { Button } from 'antd';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { Dispatch } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { DeleteDashboard, DeleteDashboardProps } from 'store/actions';
 import AppActions from 'types/actions';

 import { Data } from '../index';

-const DeleteButton = ({
-	deleteDashboard,
-	id,
-}: DeleteButtonProps): JSX.Element => {
+function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
 	const onClickHandler = useCallback(() => {
 		deleteDashboard({
 			uuid: id,
@ -24,7 +20,7 @@ const DeleteButton = ({
 			Delete
 		</Button>
 	);
-};
+}

 interface DispatchProps {
 	deleteDashboard: ({
@ -43,7 +39,7 @@ type DeleteButtonProps = Data & DispatchProps;
 const WrapperDeleteButton = connect(null, mapDispatchToProps)(DeleteButton);

 // This is to avoid the type collision
-const Wrapper = (props: Data): JSX.Element => {
+function Wrapper(props: Data): JSX.Element {
 	return (
 		<WrapperDeleteButton
 			{...{
@ -51,6 +47,6 @@ const Wrapper = (props: Data): JSX.Element => {
 			}}
 		/>
 	);
-};
+}

 export default Wrapper;
--- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
@ -6,7 +6,7 @@ import { generatePath } from 'react-router-dom';

 import { Data } from '..';

-const Name = (name: Data['name'], data: Data): JSX.Element => {
+function Name(name: Data['name'], data: Data): JSX.Element {
 	const onClickHandler = () => {
 		history.push(
 			generatePath(ROUTES.DASHBOARD, {
@ -20,6 +20,6 @@ const Name = (name: Data['name'], data: Data): JSX.Element => {
 			{name}
 		</Button>
 	);
-};
+}

 export default Name;
--- a/frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx
@ -3,7 +3,7 @@ import React from 'react';

 import { Data } from '../index';

-const Tags = (props: Data['tags']): JSX.Element => {
+function Tags(props: Data['tags']): JSX.Element {
 	return (
 		<>
 			{props.map((e) => (
@ -11,6 +11,6 @@ const Tags = (props: Data['tags']): JSX.Element => {
 			))}
 		</>
 	);
-};
+}

 export default Tags;
--- a/frontend/src/container/ListOfDashboard/index.tsx
+++ b/frontend/src/container/ListOfDashboard/index.tsx
@ -18,7 +18,7 @@ import DeleteButton from './TableComponents/DeleteButton';
 import Name from './TableComponents/Name';
 import Tags from './TableComponents/Tags';

-const ListOfAllDashboard = (): JSX.Element => {
+function ListOfAllDashboard(): JSX.Element {
 	const { dashboards } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -179,7 +179,7 @@ const ListOfAllDashboard = (): JSX.Element => {
 			/>
 		</TableContainer>
 	);
-};
+}

 export interface Data {
 	key: React.Key;
--- a/frontend/src/container/MetricsApplication/Tabs/Application.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
@ -17,7 +17,7 @@ import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
 import TopEndpointsTable from '../TopEndpointsTable';
 import { Button } from './styles';

-const Application = ({ getWidget }: DashboardProps): JSX.Element => {
+function Application({ getWidget }: DashboardProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();
 	const selectedTimeStamp = useRef(0);

@ -34,7 +34,8 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());

 		history.replace(
-			`${ROUTES.TRACE
+			`${
+				ROUTES.TRACE
 			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["ok","error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
 		);
 	};
@ -70,12 +71,10 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 						selectedTimeStamp.current = time.getTime();
 					}
 				}
-			} else {
-				if (buttonElement && buttonElement.style.display === 'block') {
+			} else if (buttonElement && buttonElement.style.display === 'block') {
 				buttonElement.style.display = 'none';
 			}
 		}
-		}
 	};

 	const onErrorTrackHandler = (timestamp: number): void => {
@ -87,7 +86,8 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());

 		history.replace(
-			`${ROUTES.TRACE
+			`${
+				ROUTES.TRACE
 			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
 		);
 	};
@ -239,7 +239,7 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 			</Row>
 		</>
 	);
-};
+}

 interface DashboardProps {
 	getWidget: (query: Widgets['query']) => Widgets;
--- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
@ -6,11 +6,10 @@ import { Widgets } from 'types/api/dashboard/getAll';

 import { Card, GraphContainer, GraphTitle, Row } from '../styles';

-const DBCall = ({ getWidget }: DBCallProps): JSX.Element => {
+function DBCall({ getWidget }: DBCallProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();

 	return (
-		<>
 		<Row gutter={24}>
 			<Col span={12}>
 				<Card>
@ -52,9 +51,8 @@ const DBCall = ({ getWidget }: DBCallProps): JSX.Element => {
 				</Card>
 			</Col>
 		</Row>
-		</>
 	);
-};
+}

 interface DBCallProps {
 	getWidget: (query: Widgets['query']) => Widgets;
--- a/frontend/src/container/MetricsApplication/Tabs/External.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx
@ -6,7 +6,7 @@ import { Widgets } from 'types/api/dashboard/getAll';

 import { Card, GraphContainer, GraphTitle, Row } from '../styles';

-const External = ({ getWidget }: ExternalProps): JSX.Element => {
+function External({ getWidget }: ExternalProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();

 	return (
@ -96,7 +96,7 @@ const External = ({ getWidget }: ExternalProps): JSX.Element => {
 			</Row>
 		</>
 	);
-};
+}

 interface ExternalProps {
 	getWidget: (query: Widgets['query']) => Widgets;
--- a/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
@ -9,7 +9,7 @@ import { topEndpointListItem } from 'store/actions/MetricsActions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

-const TopEndpointsTable = (props: TopEndpointsTableProps): JSX.Element => {
+function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@ -97,7 +97,7 @@ const TopEndpointsTable = (props: TopEndpointsTableProps): JSX.Element => {
 			rowKey="name"
 		/>
 	);
-};
+}

 type DataProps = topEndpointListItem;

--- a/frontend/src/container/MetricsApplication/index.tsx
+++ b/frontend/src/container/MetricsApplication/index.tsx
@ -8,7 +8,7 @@ import External from './Tabs/External';

 const { TabPane } = Tabs;

-const ServiceMetrics = (): JSX.Element => {
+function ServiceMetrics(): JSX.Element {
 	const getWidget = (query: Widgets['query']): Widgets => {
 		return {
 			description: '',
@ -17,7 +17,7 @@ const ServiceMetrics = (): JSX.Element => {
 			nullZeroValues: '',
 			opacity: '0',
 			panelTypes: 'TIME_SERIES',
-			query: query,
+			query,
 			queryData: {
 				data: [],
 				error: false,
@ -45,6 +45,6 @@ const ServiceMetrics = (): JSX.Element => {
 			</TabPane>
 		</Tabs>
 	);
-};
+}

 export default ServiceMetrics;
--- a/frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx
+++ b/frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx
@ -2,11 +2,11 @@ import { Button, Typography } from 'antd';
 import Modal from 'components/Modal';
 import React from 'react';

-const SkipOnBoardingModal = ({ onContinueClick }: Props): JSX.Element => {
+function SkipOnBoardingModal({ onContinueClick }: Props): JSX.Element {
 	return (
 		<Modal
-			title={'Setup instrumentation'}
-			isModalVisible={true}
+			title="Setup instrumentation"
+			isModalVisible
 			closable={false}
 			footer={[
 				<Button key="submit" type="primary" onClick={onContinueClick}>
@ -22,14 +22,14 @@ const SkipOnBoardingModal = ({ onContinueClick }: Props): JSX.Element => {
 					frameBorder="0"
 					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 					allowFullScreen
-				></iframe>
+				/>
 				<div>
 					<Typography>No instrumentation data.</Typography>
 					<Typography>
 						Please instrument your application as mentioned&nbsp;
 						<a
-							href={'https://signoz.io/docs/instrumentation/overview'}
-							target={'_blank'}
+							href="https://signoz.io/docs/instrumentation/overview"
+							target="_blank"
 							rel="noreferrer"
 						>
 							here
@ -39,7 +39,7 @@ const SkipOnBoardingModal = ({ onContinueClick }: Props): JSX.Element => {
 			</>
 		</Modal>
 	);
-};
+}

 interface Props {
 	onContinueClick: () => void;
--- a/frontend/src/container/MetricsTable/index.tsx
+++ b/frontend/src/container/MetricsTable/index.tsx
@ -12,7 +12,7 @@ import MetricReducer from 'types/reducer/metrics';
 import SkipBoardModal from './SkipOnBoardModal';
 import { Container, Name } from './styles';

-const Metrics = (): JSX.Element => {
+function Metrics(): JSX.Element {
 	const [skipOnboarding, setSkipOnboarding] = useState(
 		localStorageGet(SKIP_ONBOARDING) === 'true',
 	);
@ -46,7 +46,7 @@ const Metrics = (): JSX.Element => {
 			key: 'serviceName',
 			// eslint-disable-next-line react/display-name
 			render: (text: string): JSX.Element => (
-				<div onClick={(): void => onClickHandler(ROUTES.APPLICATION + '/' + text)}>
+				<div onClick={(): void => onClickHandler(`${ROUTES.APPLICATION}/${text}`)}>
 					<Name>{text}</Name>
 				</div>
 			),
@ -85,7 +85,7 @@ const Metrics = (): JSX.Element => {
 			/>
 		</Container>
 	);
-};
+}

 type DataProps = servicesListItem;

--- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
@ -10,7 +10,7 @@ import { v4 } from 'uuid';
 import menuItems, { ITEMS } from './menuItems';
 import { Card, Container, Text } from './styles';

-const DashboardGraphSlider = (): JSX.Element => {
+function DashboardGraphSlider(): JSX.Element {
 	const { dashboards } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -81,7 +81,7 @@ const DashboardGraphSlider = (): JSX.Element => {
 			))}
 		</Container>
 	);
-};
+}

 export type GRAPH_TYPES = ITEMS;

--- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
@ -1,5 +1,6 @@
-import TimeSeries from 'assets/Dashboard/TimeSeries';
-import { TimeSeriesProps as IconProps } from 'assets/Dashboard/TimeSeries';
+import TimeSeries, {
+	TimeSeriesProps as IconProps,
+} from 'assets/Dashboard/TimeSeries';
 import ValueIcon from 'assets/Dashboard/Value';

 const Items: ItemsProps[] = [
--- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/AddTags/index.tsx
+++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/AddTags/index.tsx
@ -5,7 +5,7 @@ import React, { useState } from 'react';

 import { InputContainer, NewTagContainer, TagsContainer } from './styles';

-const AddTags = ({ tags, setTags }: AddTagsProps): JSX.Element => {
+function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [inputVisible, setInputVisible] = useState<boolean>(false);
 	const [editInputIndex, setEditInputIndex] = useState(-1);
@ -110,7 +110,7 @@ const AddTags = ({ tags, setTags }: AddTagsProps): JSX.Element => {
 			)}
 		</TagsContainer>
 	);
-};
+}

 interface AddTagsProps {
 	tags: string[];
--- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/Description/index.tsx
+++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/Description/index.tsx
@ -2,12 +2,13 @@ import { Input } from 'antd';
 import React, { useCallback } from 'react';

 import { Container } from './styles';
+
 const { TextArea } = Input;

-const Description = ({
+function Description({
 	description,
 	setDescription,
-}: DescriptionProps): JSX.Element => {
+}: DescriptionProps): JSX.Element {
 	const onChangeHandler = useCallback(
 		(e: React.ChangeEvent<HTMLTextAreaElement>) => {
 			setDescription(e.target.value);
@ -18,13 +19,13 @@ const Description = ({
 	return (
 		<Container>
 			<TextArea
-				placeholder={'Description of the dashboard'}
+				placeholder="Description of the dashboard"
 				onChange={onChangeHandler}
 				value={description}
-			></TextArea>
+			/>
 		</Container>
 	);
-};
+}

 interface DescriptionProps {
 	description: string;
--- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx
+++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx
@ -1,10 +1,10 @@
 import Input from 'components/Input';
 import React, { useCallback } from 'react';

-const NameOfTheDashboard = ({
+function NameOfTheDashboard({
 	setName,
 	name,
-}: NameOfTheDashboardProps): JSX.Element => {
+}: NameOfTheDashboardProps): JSX.Element {
 	const onChangeHandler = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
 			setName(e.target.value);
@ -20,7 +20,7 @@ const NameOfTheDashboard = ({
 			onChangeHandler={onChangeHandler}
 		/>
 	);
-};
+}

 interface NameOfTheDashboardProps {
 	name: string;
--- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
+++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
@ -18,19 +18,19 @@ import DashboardReducer from 'types/reducer/dashboards';
 import Description from './Description';
 import { Button, Container } from './styles';

-const DescriptionOfDashboard = ({
+function DescriptionOfDashboard({
 	updateDashboardTitleDescriptionTags,
 	toggleEditMode,
-}: DescriptionOfDashboardProps): JSX.Element => {
+}: DescriptionOfDashboardProps): JSX.Element {
 	const { dashboards, isEditMode } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);

 	const [selectedDashboard] = dashboards;
 	const selectedData = selectedDashboard.data;
-	const title = selectedData.title;
-	const tags = selectedData.tags;
-	const description = selectedData.description;
+	const { title } = selectedData;
+	const { tags } = selectedData;
+	const { description } = selectedData;

 	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
 	const [updatedTags, setUpdatedTags] = useState<string[]>(tags || []);
@ -67,11 +67,9 @@ const DescriptionOfDashboard = ({
 	]);

 	return (
-		<>
 		<Card>
 			<Row align="top" justify="space-between">
 				{!isEditMode ? (
-						<>
 					<Col>
 						<Typography>{title}</Typography>
 						<Container>
@ -83,7 +81,6 @@ const DescriptionOfDashboard = ({
 							<Typography>{description}</Typography>
 						</Container>
 					</Col>
-						</>
 				) : (
 					<Col lg={8}>
 						<NameOfTheDashboard name={updatedTitle} setName={setUpdatedTitle} />
@ -104,9 +101,8 @@ const DescriptionOfDashboard = ({
 				</Col>
 			</Row>
 		</Card>
-		</>
 	);
-};
+}

 interface DispatchProps {
 	updateDashboardTitleDescriptionTags: (
--- a/frontend/src/container/NewDashboard/GridGraphs/index.tsx
+++ b/frontend/src/container/NewDashboard/GridGraphs/index.tsx
@ -7,20 +7,18 @@ import DashboardReducer from 'types/reducer/dashboards';

 import { GridComponentSliderContainer } from './styles';

-const GridGraphs = (): JSX.Element => {
+function GridGraphs(): JSX.Element {
 	const { isAddWidget } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);

 	return (
-		<>
 		<GridComponentSliderContainer>
 			{isAddWidget && <ComponentsSlider />}

 			<GridGraphLayout />
 		</GridComponentSliderContainer>
-		</>
 	);
-};
+}

 export default GridGraphs;
--- a/frontend/src/container/NewDashboard/index.tsx
+++ b/frontend/src/container/NewDashboard/index.tsx
@ -3,13 +3,13 @@ import React from 'react';
 import Description from './DescriptionOfDashboard';
 import GridGraphs from './GridGraphs';

-const NewDashboard = (): JSX.Element => {
+function NewDashboard(): JSX.Element {
 	return (
 		<>
 			<Description />
 			<GridGraphs />
 		</>
 	);
-};
+}

 export default NewDashboard;
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx
@ -22,13 +22,13 @@ import {
 	QueryWrapper,
 } from './styles';

-const Query = ({
+function Query({
 	currentIndex,
 	preLegend,
 	preQuery,
 	updateQuery,
 	deleteQuery,
-}: QueryProps): JSX.Element => {
+}: QueryProps): JSX.Element {
 	const [promqlQuery, setPromqlQuery] = useState(preQuery);
 	const [legendFormat, setLegendFormat] = useState(preLegend);
 	const { search } = useLocation();
@ -54,7 +54,7 @@ const Query = ({

 	const onDeleteQueryHandler = (): void => {
 		deleteQuery({
-			widgetId: widgetId,
+			widgetId,
 			currentIndex,
 		});
 	};
@ -70,7 +70,7 @@ const Query = ({
 							}
 							size="middle"
 							value={promqlQuery}
-							addonBefore={'PromQL Query'}
+							addonBefore="PromQL Query"
 							onBlur={(): void => onBlurHandler()}
 						/>
 					</InputContainer>
@ -82,7 +82,7 @@ const Query = ({
 							}
 							size="middle"
 							value={legendFormat}
-							addonBefore={'Legend Format'}
+							addonBefore="Legend Format"
 							onBlur={(): void => onBlurHandler()}
 						/>
 					</InputContainer>
@ -102,7 +102,7 @@ const Query = ({
 			<Divider />
 		</>
 	);
-};
+}

 interface DispatchProps {
 	updateQuery: (
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@ -14,16 +14,13 @@ import DashboardReducer from 'types/reducer/dashboards';
 import Query from './Query';
 import { QueryButton } from './styles';

-const QuerySection = ({
-	selectedTime,
-	createQuery,
-}: QueryProps): JSX.Element => {
+function QuerySection({ selectedTime, createQuery }: QueryProps): JSX.Element {
 	const { dashboards } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
 	const [selectedDashboards] = dashboards;
 	const { search } = useLocation();
-	const widgets = selectedDashboards.data.widgets;
+	const { widgets } = selectedDashboards.data;

 	const urlQuery = useMemo(() => {
 		return new URLSearchParams(search);
@ -63,7 +60,7 @@ const QuerySection = ({
 			</QueryButton>
 		</>
 	);
-};
+}

 interface DispatchProps {
 	createQuery: ({
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx
@ -10,7 +10,10 @@ import DashboardReducer from 'types/reducer/dashboards';

 import { NotFoundContainer } from './styles';

-const WidgetGraph = ({ selectedGraph,yAxisUnit }: WidgetGraphProps): JSX.Element => {
+function WidgetGraph({
+	selectedGraph,
+	yAxisUnit,
+}: WidgetGraphProps): JSX.Element {
 	const { dashboards } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -54,7 +57,7 @@ const WidgetGraph = ({ selectedGraph,yAxisUnit }: WidgetGraphProps): JSX.Element
 			yAxisUnit={yAxisUnit}
 		/>
 	);
-};
+}

 type WidgetGraphProps = NewWidgetProps;

--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@ -11,7 +11,10 @@ import { NewWidgetProps } from '../../index';
 import { AlertIconContainer, Container, NotFoundContainer } from './styles';
 import WidgetGraphComponent from './WidgetGraph';

-const WidgetGraph = ({ selectedGraph, yAxisUnit }: WidgetGraphProps): JSX.Element => {
+function WidgetGraph({
+	selectedGraph,
+	yAxisUnit,
+}: WidgetGraphProps): JSX.Element {
 	const { dashboards, isQueryFired } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -47,10 +50,12 @@ const WidgetGraph = ({ selectedGraph, yAxisUnit }: WidgetGraphProps): JSX.Elemen
 				</NotFoundContainer>
 			)}

-			{isQueryFired && <WidgetGraphComponent selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />}
+			{isQueryFired && (
+				<WidgetGraphComponent selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />
+			)}
 		</Container>
 	);
-};
+}

 type WidgetGraphProps = NewWidgetProps;

--- a/frontend/src/container/NewWidget/LeftContainer/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@ -6,11 +6,11 @@ import QuerySection from './QuerySection';
 import { QueryContainer } from './styles';
 import WidgetGraph from './WidgetGraph';

-const LeftContainer = ({
+function LeftContainer({
 	selectedGraph,
 	selectedTime,
 	yAxisUnit,
-}: LeftContainerProps): JSX.Element => {
+}: LeftContainerProps): JSX.Element {
 	return (
 		<>
 			<WidgetGraph selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />
@ -20,7 +20,7 @@ const LeftContainer = ({
 			</QueryContainer>
 		</>
 	);
-};
+}

 interface LeftContainerProps extends NewWidgetProps {
 	selectedTime: timePreferance;
--- a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
@ -9,7 +9,7 @@ const findCategoryById = (searchValue) =>
 const findCategoryByName = (searchValue) =>
 	find(flattenedCategories, (option) => option.name == searchValue);

-const YAxisUnitSelector = ({ defaultValue, onSelect }): JSX.Element => {
+function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
 	const onSelectHandler = (selectedValue: string): void => {
 		onSelect(findCategoryByName(selectedValue)?.id);
 	};
@ -34,6 +34,6 @@ const YAxisUnitSelector = ({ defaultValue, onSelect }): JSX.Element => {
 			</AutoComplete>
 		</Col>
 	);
-};
+}

 export default YAxisUnitSelector;
--- a/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
+++ b/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
@ -382,7 +382,6 @@ export const dataTypeCategories = [
 	},
 ];

-
 export const flattenedCategories = flattenDeep(
 	dataTypeCategories.map((category) => {
 		return category.formats;
--- a/frontend/src/container/NewWidget/RightContainer/index.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/index.tsx
@ -6,25 +6,24 @@ import {
 	// Typography,
 } from 'antd';
 import InputComponent from 'components/Input';
+import TimePreference from 'components/TimePreferenceDropDown';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
 import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
 import React, { useCallback } from 'react';

 import { dataTypeCategories } from './dataFormatCategories';
-// import {ca} from '@grafana/data'
-import { timePreferance } from './timeItems';
-import YAxisUnitSelector from './YAxisUnitSelector';
-
-const { TextArea } = Input;
-import TimePreference from 'components/TimePreferenceDropDown';
-
 import {
 	Container,
 	// NullButtonContainer, TextContainer,
 	Title,
 } from './styles';
+// import {ca} from '@grafana/data'
+import { timePreferance } from './timeItems';
+import YAxisUnitSelector from './YAxisUnitSelector';

-const RightContainer = ({
+const { TextArea } = Input;
+
+function RightContainer({
 	description,
 	// opacity,
 	// selectedNullZeroValue,
@ -40,7 +39,7 @@ const RightContainer = ({
 	selectedTime,
 	yAxisUnit,
 	setYAxisUnit,
-}: RightContainerProps): JSX.Element => {
+}: RightContainerProps): JSX.Element {
 	const onChangeHandler = useCallback(
 		(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
 			setFunc(value);
@ -89,7 +88,7 @@ const RightContainer = ({
 				value={title}
 			/>

-			<Title light={'true'}>Description</Title>
+			<Title light="true">Description</Title>

 			<TextArea
 				placeholder="Write something describing the  panel"
@ -141,7 +140,7 @@ const RightContainer = ({
 				))}
 			</NullButtonContainer> */}

-			<Title light={'true'}>Panel Time Preference</Title>
+			<Title light="true">Panel Time Preference</Title>

 			<TimePreference
 				{...{
@ -152,7 +151,7 @@ const RightContainer = ({
 			<YAxisUnitSelector defaultValue={yAxisUnit} onSelect={setYAxisUnit} />
 		</Container>
 	);
-};
+}

 interface RightContainerProps {
 	title: string;
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@ -38,13 +38,13 @@ import {
 	RightContainerWrapper,
 } from './styles';

-const NewWidget = ({
+function NewWidget({
 	selectedGraph,
 	applySettingsToPanel,
 	saveSettingOfPanel,
 	getQueryResults,
 	updateQuery,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
 	const { dashboards } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
@ -55,7 +55,7 @@ const NewWidget = ({

 	const [selectedDashboard] = dashboards;

-	const widgets = selectedDashboard.data.widgets;
+	const { widgets } = selectedDashboard.data;

 	const { push } = useHistory();
 	const { search } = useLocation();
@ -114,7 +114,7 @@ const NewWidget = ({
 			title,
 			yAxisUnit,
 			widgetId: query.get('widgetId') || '',
-			dashboardId: dashboardId,
+			dashboardId,
 		});
 	}, [
 		opacity,
@ -221,7 +221,7 @@ const NewWidget = ({
 			</PanelContainer>
 		</Container>
 	);
-};
+}

 export interface NewWidgetProps {
 	selectedGraph: GRAPH_TYPES;
--- a/frontend/src/container/SideNav/Slack.tsx
+++ b/frontend/src/container/SideNav/Slack.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-const Slack = (): JSX.Element => {
+function Slack(): JSX.Element {
 	return (
 		<svg
 			width="28"
@ -43,6 +43,6 @@ const Slack = (): JSX.Element => {
 			/>
 		</svg>
 	);
-};
+}

 export default Slack;
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@ -4,8 +4,7 @@ import history from 'lib/history';
 import setTheme from 'lib/theme/setTheme';
 import React, { useCallback, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
-import { NavLink } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { ToggleDarkMode } from 'store/actions';
@ -15,10 +14,16 @@ import AppReducer from 'types/reducer/app';

 import menus from './menuItems';
 import Slack from './Slack';
-import { SlackButton, SlackMenuItemContainer, ToggleButton } from './styles';
-import { Logo, Sider, ThemeSwitcherWrapper } from './styles';
+import {
+	Logo,
+	Sider,
+	SlackButton,
+	SlackMenuItemContainer,
+	ThemeSwitcherWrapper,
+	ToggleButton,
+} from './styles';

-const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
+function SideNav({ toggleDarkMode }: Props): JSX.Element {
 	const [collapsed, setCollapsed] = useState<boolean>(false);
 	const { pathname } = useLocation();
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
@ -28,7 +33,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 		setTheme(preMode);

 		const id: appMode = preMode;
-		const head = document.head;
+		const { head } = document;
 		const link = document.createElement('link');
 		link.rel = 'stylesheet';
 		link.type = 'text/css';
@ -71,7 +76,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 				/>
 			</ThemeSwitcherWrapper>
 			<NavLink to={ROUTES.APPLICATION}>
-				<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} />
+				<Logo src="/signoz.svg" alt="SigNoz" collapsed={collapsed} />
 			</NavLink>

 			<Menu
@ -97,7 +102,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 			</Menu>
 		</Sider>
 	);
-};
+}

 type appMode = 'darkMode' | 'lightMode';

--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@ -1,5 +1,6 @@
 import { Layout, Menu, Switch, Typography } from 'antd';
 import styled, { css } from 'styled-components';
+
 const { Sider: SiderComponent } = Layout;

 export const ThemeSwitcherWrapper = styled.div`
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@ -11,11 +11,11 @@ import { getIntervals, getIntervalSpread } from './utils';
 const Timeline_Height = 22;
 const Timeline_H_Spacing = 0;

-const Timeline = ({
+function Timeline({
 	traceMetaData,
 	globalTraceMetadata,
 	setIntervalUnit,
-}: TimelineProps): JSX.Element => {
+}: TimelineProps): JSX.Element {
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const { isDarkMode } = useThemeMode();

@ -27,7 +27,7 @@ const Timeline = ({
 			baseSpread,
 			intervalSpreadNormalized,
 		} = getIntervalSpread({
-			globalTraceMetadata: globalTraceMetadata,
+			globalTraceMetadata,
 			localTraceMetaData: traceMetaData,
 		});

@ -90,7 +90,7 @@ const Timeline = ({
 			</Svg>
 		</StyledDiv>
 	);
-};
+}

 interface TimelineProps {
 	traceMetaData: {
--- a/frontend/src/container/Timeline/utils.ts
+++ b/frontend/src/container/Timeline/utils.ts
@ -32,9 +32,8 @@ export const getIntervalSpread = ({
 	const intervalSpreadNormalized =
 		intervalSpread < 1.0
 			? intervalSpread
-			: Math.floor(
-					Number(integerPartString) / Math.pow(10, integerPartLength - 1),
-			  ) * Math.pow(10, integerPartLength - 1);
+			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
+			  10 ** (integerPartLength - 1);
 	return {
 		baseInterval,
 		baseSpread,
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
@ -15,7 +15,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';

 import { CheckBoxContainer } from './styles';

-const CheckBoxComponent = (props: CheckBoxProps): JSX.Element => {
+function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 	const {
 		selectedFilter,
 		filterLoading,
@ -167,7 +167,7 @@ const CheckBoxComponent = (props: CheckBoxProps): JSX.Element => {
 			)}
 		</CheckBoxContainer>
 	);
-};
+}

 interface DispatchProps {
 	selectedTraceFilter: (props: {
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx
@ -5,7 +5,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';

 import CheckBoxComponent from '../Common/Checkbox';

-const CommonCheckBox = (props: CommonCheckBoxProps): JSX.Element => {
+function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element {
 	const { filter } = useSelector<AppState, TraceReducer>(
 		(state) => state.traces,
 	);
@ -28,7 +28,7 @@ const CommonCheckBox = (props: CommonCheckBoxProps): JSX.Element => {
 			))}
 		</>
 	);
-};
+}

 interface CommonCheckBoxProps {
 	name: TraceFilterEnum;
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
@ -26,7 +26,7 @@ const getMs = (value: string) => {
 		.format('SSS');
 };

-const Duration = (): JSX.Element => {
+function Duration(): JSX.Element {
 	const {
 		filter,
 		selectedFilter,
@ -57,8 +57,8 @@ const Duration = (): JSX.Element => {

 	const duration = getDuration();

-	const maxDuration = duration['maxDuration'] || '0';
-	const minDuration = duration['minDuration'] || '0';
+	const maxDuration = duration.maxDuration || '0';
+	const minDuration = duration.minDuration || '0';

 	const [localMax, setLocalMax] = useState<string>(maxDuration);
 	const [localMin, setLocalMin] = useState<string>(minDuration);
@ -134,7 +134,7 @@ const Duration = (): JSX.Element => {
 	const onChangeMaxHandler: React.ChangeEventHandler<HTMLInputElement> = (
 		event,
 	) => {
-		const value = event.target.value;
+		const { value } = event.target;
 		const min = parseFloat(localMin);
 		const max = parseFloat(value) * 1000000;

@ -147,7 +147,7 @@ const Duration = (): JSX.Element => {
 	const onChangeMinHandler: React.ChangeEventHandler<HTMLInputElement> = (
 		event,
 	) => {
-		const value = event.target.value;
+		const { value } = event.target;
 		const min = parseFloat(value) * 1000000;
 		const max = parseFloat(localMax);
 		onRangeSliderHandler([min, max]);
@ -184,8 +184,8 @@ const Duration = (): JSX.Element => {
 			<Container>
 				<Slider
 					defaultValue={[defaultValue[0], defaultValue[1]]}
-					min={parseFloat((filter.get('duration') || {})['minDuration'])}
-					max={parseFloat((filter.get('duration') || {})['maxDuration'])}
+					min={parseFloat((filter.get('duration') || {}).minDuration)}
+					max={parseFloat((filter.get('duration') || {}).maxDuration)}
 					range
 					tipFormatter={(value) => {
 						if (value === undefined) {
@ -207,6 +207,6 @@ const Duration = (): JSX.Element => {
 			</Container>
 		</div>
 	);
-};
+}

 export default Duration;
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx
@ -8,7 +8,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 import CommonCheckBox from './CommonCheckBox';
 import Duration from './Duration';

-const PanelBody = (props: PanelBodyProps): JSX.Element => {
+function PanelBody(props: PanelBodyProps): JSX.Element {
 	const { type } = props;

 	const { filterLoading } = useSelector<AppState, TraceReducer>(
@ -28,7 +28,7 @@ const PanelBody = (props: PanelBodyProps): JSX.Element => {
 			{type === 'duration' ? <Duration /> : <CommonCheckBox name={type} />}
 		</Card>
 	);
-};
+}

 interface PanelBodyProps {
 	type: TraceFilterEnum;
--- a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
@ -1,9 +1,20 @@
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { Card, Divider, notification, Typography } from 'antd';
+import getFilters from 'api/trace/getFilters';
+import { AxiosError } from 'axios';
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Dispatch } from 'redux';
+import { getFilter, updateURL } from 'store/actions/trace/util';
 import { AppState } from 'store/reducers';
-import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
+import AppActions from 'types/actions';
+import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import {
+	AllPanelHeading,
+	TraceFilterEnum,
+	TraceReducer,
+} from 'types/reducer/trace';

 import {
 	ButtonComponent,
@ -12,18 +23,10 @@ import {
 	IconContainer,
 	TextCotainer,
 } from './styles';
+
 const { Text } = Typography;

-import getFilters from 'api/trace/getFilters';
-import { AxiosError } from 'axios';
-import { Dispatch } from 'redux';
-import { getFilter, updateURL } from 'store/actions/trace/util';
-import AppActions from 'types/actions';
-import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { AllPanelHeading } from 'types/reducer/trace';
-
-const PanelHeading = (props: PanelHeadingProps): JSX.Element => {
+function PanelHeading(props: PanelHeadingProps): JSX.Element {
 	const {
 		filterLoading,
 		filterToFetchData,
@ -307,7 +310,7 @@ const PanelHeading = (props: PanelHeadingProps): JSX.Element => {
 			</Card>
 		</>
 	);
-};
+}

 interface PanelHeadingProps {
 	name: TraceFilterEnum;
--- a/frontend/src/container/Trace/Filters/Panel/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/index.tsx
@ -6,7 +6,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 import PanelBody from './PanelBody';
 import PanelHeading from './PanelHeading';

-const Panel = (props: PanelProps): JSX.Element => {
+function Panel(props: PanelProps): JSX.Element {
 	const traces = useSelector<AppState, TraceReducer>((state) => state.traces);

 	const isDefaultOpen =
@ -19,7 +19,7 @@ const Panel = (props: PanelProps): JSX.Element => {
 			{isDefaultOpen && <PanelBody type={props.name} />}
 		</>
 	);
-};
+}

 interface PanelProps {
 	name: TraceFilterEnum;
--- a/frontend/src/container/Trace/Filters/index.tsx
+++ b/frontend/src/container/Trace/Filters/index.tsx
@ -16,12 +16,14 @@ export const AllTraceFilterEnum: TraceFilterEnum[] = [
 	'httpUrl',
 ];

-const Filters = (): JSX.Element => (
-	<React.Fragment>
+function Filters(): JSX.Element {
+	return (
+		<>
 			{AllTraceFilterEnum.map((panelName) => (
 				<Panel key={panelName} name={panelName} />
 			))}
-	</React.Fragment>
-);
+		</>
+	);
+}

 export default Filters;
--- a/frontend/src/container/Trace/Graph/config.ts
+++ b/frontend/src/container/Trace/Graph/config.ts
@ -56,7 +56,7 @@ export const getChartData = (
 export const getChartDataforGroupBy = (
 	props: TraceReducer['spansGraph']['payload'],
 ): ChartData => {
-	const items = props.items;
+	const { items } = props;

 	const chartData: ChartData = {
 		datasets: [],
@ -68,7 +68,7 @@ export const getChartDataforGroupBy = (
 	const allGroupBy = Object.keys(items).map((e) => items[e].groupBy);

 	Object.keys(allGroupBy).map((e) => {
-		const length = Object.keys(allGroupBy[e]).length;
+		const { length } = Object.keys(allGroupBy[e]);

 		if (length >= max) {
 			max = length;
@ -90,7 +90,7 @@ export const getChartDataforGroupBy = (

 		chartData.labels?.push(date);

-		const groupBy = spanData.groupBy;
+		const { groupBy } = spanData;
 		const preData: number[] = [];

 		if (groupBy) {
--- a/Show More
+++ b/Show More