chore: Eslint fix config (#882)

* chore: eslint config is updated * chore: eslint auto fix is added
2025-12-17 23:47:12 +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,23 +1,21 @@
 import React from 'react';

-const Value = (props: ValueProps): JSX.Element => {
+function Value(props: ValueProps): JSX.Element {
 	return (
-		<React.Fragment>
-			<svg
-				width="78"
-				height="32"
-				viewBox="0 0 78 32"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M15.0215 17.875C14.2285 18.8184 13.2783 19.5771 12.1709 20.1514C11.0771 20.7256 9.87402 21.0127 8.56152 21.0127C6.83887 21.0127 5.33496 20.5889 4.0498 19.7412C2.77832 18.8936 1.79395 17.7041 1.09668 16.1729C0.399414 14.6279 0.0507812 12.9258 0.0507812 11.0664C0.0507812 9.07031 0.426758 7.27246 1.17871 5.67285C1.94434 4.07324 3.02441 2.84961 4.41895 2.00195C5.81348 1.1543 7.44043 0.730469 9.2998 0.730469C12.2529 0.730469 14.5771 1.83789 16.2725 4.05273C17.9814 6.25391 18.8359 9.26172 18.8359 13.0762V14.1836C18.8359 19.9941 17.6875 24.2393 15.3906 26.9189C13.0938 29.585 9.62793 30.9521 4.99316 31.0205H4.25488V27.8213H5.05469C8.18555 27.7666 10.5918 26.9531 12.2734 25.3809C13.9551 23.7949 14.8711 21.293 15.0215 17.875ZM9.17676 17.875C10.4482 17.875 11.6172 17.4854 12.6836 16.7061C13.7637 15.9268 14.5498 14.9629 15.042 13.8145V12.2969C15.042 9.80859 14.502 7.78516 13.4219 6.22656C12.3418 4.66797 10.9746 3.88867 9.32031 3.88867C7.65234 3.88867 6.3125 4.53125 5.30078 5.81641C4.28906 7.08789 3.7832 8.76953 3.7832 10.8613C3.7832 12.8984 4.26855 14.5801 5.23926 15.9062C6.22363 17.2188 7.53613 17.875 9.17676 17.875ZM24.5371 29.0107C24.5371 28.3545 24.7285 27.8076 25.1113 27.3701C25.5078 26.9326 26.0957 26.7139 26.875 26.7139C27.6543 26.7139 28.2422 26.9326 28.6387 27.3701C29.0488 27.8076 29.2539 28.3545 29.2539 29.0107C29.2539 29.6396 29.0488 30.166 28.6387 30.5898C28.2422 31.0137 27.6543 31.2256 26.875 31.2256C26.0957 31.2256 25.5078 31.0137 25.1113 30.5898C24.7285 30.166 24.5371 29.6396 24.5371 29.0107ZM51.1562 20.9717H55.2988V24.0684H51.1562V31H47.3418V24.0684H33.7451V21.833L47.1162 1.14062H51.1562V20.9717ZM38.0518 20.9717H47.3418V6.3291L46.8906 7.14941L38.0518 20.9717ZM73.6123 1.12012V4.33984H72.915C69.9619 4.39453 67.6104 5.26953 65.8604 6.96484C64.1104 8.66016 63.0986 11.0459 62.8252 14.1221C64.3975 12.3174 66.5439 11.415 69.2646 11.415C71.8623 11.415 73.9336 12.3311 75.4785 14.1631C77.0371 15.9951 77.8164 18.3604 77.8164 21.2588C77.8164 24.335 76.9756 26.7959 75.2939 28.6416C73.626 30.4873 71.3838 31.4102 68.5674 31.4102C65.71 31.4102 63.3926 30.3164 61.6152 28.1289C59.8379 25.9277 58.9492 23.0977 58.9492 19.6387V18.1826C58.9492 12.6865 60.1182 8.48926 62.4561 5.59082C64.8076 2.67871 68.3008 1.18848 72.9355 1.12012H73.6123ZM68.6289 14.5732C67.3301 14.5732 66.1338 14.9629 65.04 15.7422C63.9463 16.5215 63.1875 17.499 62.7637 18.6748V20.0693C62.7637 22.5303 63.3174 24.5127 64.4248 26.0166C65.5322 27.5205 66.9131 28.2725 68.5674 28.2725C70.2764 28.2725 71.6162 27.6436 72.5869 26.3857C73.5713 25.1279 74.0635 23.4805 74.0635 21.4434C74.0635 19.3926 73.5645 17.7383 72.5664 16.4805C71.582 15.209 70.2695 14.5732 68.6289 14.5732Z"
-					fill={props.fillColor}
-				/>
-			</svg>
-		</React.Fragment>
+		<svg
+			width="78"
+			height="32"
+			viewBox="0 0 78 32"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M15.0215 17.875C14.2285 18.8184 13.2783 19.5771 12.1709 20.1514C11.0771 20.7256 9.87402 21.0127 8.56152 21.0127C6.83887 21.0127 5.33496 20.5889 4.0498 19.7412C2.77832 18.8936 1.79395 17.7041 1.09668 16.1729C0.399414 14.6279 0.0507812 12.9258 0.0507812 11.0664C0.0507812 9.07031 0.426758 7.27246 1.17871 5.67285C1.94434 4.07324 3.02441 2.84961 4.41895 2.00195C5.81348 1.1543 7.44043 0.730469 9.2998 0.730469C12.2529 0.730469 14.5771 1.83789 16.2725 4.05273C17.9814 6.25391 18.8359 9.26172 18.8359 13.0762V14.1836C18.8359 19.9941 17.6875 24.2393 15.3906 26.9189C13.0938 29.585 9.62793 30.9521 4.99316 31.0205H4.25488V27.8213H5.05469C8.18555 27.7666 10.5918 26.9531 12.2734 25.3809C13.9551 23.7949 14.8711 21.293 15.0215 17.875ZM9.17676 17.875C10.4482 17.875 11.6172 17.4854 12.6836 16.7061C13.7637 15.9268 14.5498 14.9629 15.042 13.8145V12.2969C15.042 9.80859 14.502 7.78516 13.4219 6.22656C12.3418 4.66797 10.9746 3.88867 9.32031 3.88867C7.65234 3.88867 6.3125 4.53125 5.30078 5.81641C4.28906 7.08789 3.7832 8.76953 3.7832 10.8613C3.7832 12.8984 4.26855 14.5801 5.23926 15.9062C6.22363 17.2188 7.53613 17.875 9.17676 17.875ZM24.5371 29.0107C24.5371 28.3545 24.7285 27.8076 25.1113 27.3701C25.5078 26.9326 26.0957 26.7139 26.875 26.7139C27.6543 26.7139 28.2422 26.9326 28.6387 27.3701C29.0488 27.8076 29.2539 28.3545 29.2539 29.0107C29.2539 29.6396 29.0488 30.166 28.6387 30.5898C28.2422 31.0137 27.6543 31.2256 26.875 31.2256C26.0957 31.2256 25.5078 31.0137 25.1113 30.5898C24.7285 30.166 24.5371 29.6396 24.5371 29.0107ZM51.1562 20.9717H55.2988V24.0684H51.1562V31H47.3418V24.0684H33.7451V21.833L47.1162 1.14062H51.1562V20.9717ZM38.0518 20.9717H47.3418V6.3291L46.8906 7.14941L38.0518 20.9717ZM73.6123 1.12012V4.33984H72.915C69.9619 4.39453 67.6104 5.26953 65.8604 6.96484C64.1104 8.66016 63.0986 11.0459 62.8252 14.1221C64.3975 12.3174 66.5439 11.415 69.2646 11.415C71.8623 11.415 73.9336 12.3311 75.4785 14.1631C77.0371 15.9951 77.8164 18.3604 77.8164 21.2588C77.8164 24.335 76.9756 26.7959 75.2939 28.6416C73.626 30.4873 71.3838 31.4102 68.5674 31.4102C65.71 31.4102 63.3926 30.3164 61.6152 28.1289C59.8379 25.9277 58.9492 23.0977 58.9492 19.6387V18.1826C58.9492 12.6865 60.1182 8.48926 62.4561 5.59082C64.8076 2.67871 68.3008 1.18848 72.9355 1.12012H73.6123ZM68.6289 14.5732C67.3301 14.5732 66.1338 14.9629 65.04 15.7422C63.9463 16.5215 63.1875 17.499 62.7637 18.6748V20.0693C62.7637 22.5303 63.3174 24.5127 64.4248 26.0166C65.5322 27.5205 66.9131 28.2725 68.5674 28.2725C70.2764 28.2725 71.6162 27.6436 72.5869 26.3857C73.5713 25.1279 74.0635 23.4805 74.0635 21.4434C74.0635 19.3926 73.5645 17.7383 72.5664 16.4805C71.582 15.209 70.2695 14.5732 68.6289 14.5732Z"
+				fill={props.fillColor}
+			/>
+		</svg>
 	);
-};
+}

 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,
-			};
 		}
+		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,22 +14,24 @@ const InputComponent = ({
 	labelOnTop,
 	addonBefore,
 	...props
-}: InputComponentProps): JSX.Element => (
-	<Form.Item labelCol={{ span: labelOnTop ? 24 : 4 }} label={label}>
-		<Input
-			placeholder={placeholder}
-			type={type}
-			onChange={onChangeHandler}
-			value={value}
-			ref={ref}
-			size={size}
-			addonBefore={addonBefore}
-			onBlur={onBlurHandler}
-			onPressEnter={onPressEnterHandler}
-			{...props}
-		/>
-	</Form.Item>
-);
+}: InputComponentProps): JSX.Element {
+	return (
+		<Form.Item labelCol={{ span: labelOnTop ? 24 : 4 }} label={label}>
+			<Input
+				placeholder={placeholder}
+				type={type}
+				onChange={onChangeHandler}
+				value={value}
+				ref={ref}
+				size={size}
+				addonBefore={addonBefore}
+				onBlur={onBlurHandler}
+				onPressEnter={onPressEnterHandler}
+				{...props}
+			/>
+		</Form.Item>
+	);
+}

 interface InputComponentProps extends InputProps {
 	value: InputProps['value'];
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@ -1,26 +1,24 @@
 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}
-				footer={footer}
-				closable={closable}
-			>
-				{children}
-			</Modal>
-		</>
+		<Modal
+			title={title}
+			visible={isModalVisible}
+			footer={footer}
+			closable={closable}
+		>
+			{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 => (
-	<SpinerStyle height={height}>
-		<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />} />
-	</SpinerStyle>
-);
+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,22 +2,24 @@ import { QuestionCircleFilled } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import React from 'react';

-const TextToolTip = ({ text, url }: TextToolTipProps) => (
-	<Tooltip
-		overlay={() => {
-			return (
-				<div>
-					{`${text} `}
-					<a href={url} rel="noopener noreferrer" target={'_blank'}>
-						here
-					</a>
-				</div>
-			);
-		}}
-	>
-		<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
-	</Tooltip>
-);
+function TextToolTip({ text, url }: TextToolTipProps) {
+	return (
+		<Tooltip
+			overlay={() => {
+				return (
+					<div>
+						{`${text} `}
+						<a href={url} rel="noopener noreferrer" target="_blank">
+							here
+						</a>
+					</div>
+				);
+			}}
+		>
+			<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,10 +20,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 		if (!isLoggedIn) {
 			setIsSignUpPage(true);
 			history.push(ROUTES.SIGN_UP);
-		} else {
-			if (isSignUpPage) {
-				setIsSignUpPage(false);
-			}
+		} else if (isSignUpPage) {
+			setIsSignUpPage(false);
 		}
 	}, [isLoggedIn, isSignUpPage]);

--- 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,27 +87,25 @@ const CreateAlertChannels = ({
 	);

 	return (
-		<>
-			<FormAlertChannels
-				{...{
-					formInstance,
-					onTypeChangeHandler,
-					setSelectedConfig,
+		<FormAlertChannels
+			{...{
+				formInstance,
+				onTypeChangeHandler,
+				setSelectedConfig,
+				type,
+				onTestHandler,
+				onSaveHandler,
+				savingState,
+				NotificationElement,
+				title: 'New Notification Channels',
+				initialValue: {
 					type,
-					onTestHandler,
-					onSaveHandler,
-					savingState,
-					NotificationElement,
-					title: 'New Notification Channels',
-					initialValue: {
-						type: type,
-						...selectedConfig,
-					},
-				}}
-			/>
-		</>
+					...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,25 +72,23 @@ const EditAlertChannels = ({
 	}, []);

 	return (
-		<>
-			<FormAlertChannels
-				{...{
-					formInstance,
-					onTypeChangeHandler,
-					setSelectedConfig,
-					type,
-					onTestHandler,
-					onSaveHandler,
-					savingState,
-					NotificationElement,
-					title: 'Edit Notification Channels',
-					initialValue,
-					nameDisable: true,
-				}}
-			/>
-		</>
+		<FormAlertChannels
+			{...{
+				formInstance,
+				onTypeChangeHandler,
+				setSelectedConfig,
+				type,
+				onTestHandler,
+				onSaveHandler,
+				savingState,
+				NotificationElement,
+				title: 'Edit Notification Channels',
+				initialValue,
+				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,62 +6,62 @@ import { SlackChannel } from '../../CreateAlertChannels/config';

 const { TextArea } = Input;

-const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (
-	<>
-		<FormItem name="api_url" label="Webhook URL">
-			<Input
-				onChange={(event): void => {
-					setSelectedConfig((value) => ({
-						...value,
-						api_url: event.target.value,
-					}));
-				}}
-			/>
-		</FormItem>
+function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
+	return (
+		<>
+			<FormItem name="api_url" label="Webhook URL">
+				<Input
+					onChange={(event): void => {
+						setSelectedConfig((value) => ({
+							...value,
+							api_url: event.target.value,
+						}));
+					}}
+				/>
+			</FormItem>

-		<FormItem
-			name="channel"
-			help={
-				'Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace),'
-			}
-			label="Recipient"
-		>
-			<Input
-				onChange={(event): void =>
-					setSelectedConfig((value) => ({
-						...value,
-						channel: event.target.value,
-					}))
-				}
-			/>
-		</FormItem>
+			<FormItem
+				name="channel"
+				help="Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace),"
+				label="Recipient"
+			>
+				<Input
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							channel: event.target.value,
+						}))
+					}
+				/>
+			</FormItem>

-		<FormItem name="title" label="Title">
-			<TextArea
-				rows={4}
-				// value={`[{{ .Status | toUpper }}{{ if eq .Status \"firing\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\n{{- if gt (len .CommonLabels) (len .GroupLabels) -}}\n{{\" \"}}(\n{{- with .CommonLabels.Remove .GroupLabels.Names }}\n    {{- range $index, $label := .SortedPairs -}}\n    {{ if $index }}, {{ end }}\n    {{- $label.Name }}=\"{{ $label.Value -}}\"\n    {{- end }}\n{{- end -}}\n)\n{{- end }}`}
-				onChange={(event): void =>
-					setSelectedConfig((value) => ({
-						...value,
-						title: event.target.value,
-					}))
-				}
-			/>
-		</FormItem>
+			<FormItem name="title" label="Title">
+				<TextArea
+					rows={4}
+					// value={`[{{ .Status | toUpper }}{{ if eq .Status \"firing\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\n{{- if gt (len .CommonLabels) (len .GroupLabels) -}}\n{{\" \"}}(\n{{- with .CommonLabels.Remove .GroupLabels.Names }}\n    {{- range $index, $label := .SortedPairs -}}\n    {{ if $index }}, {{ end }}\n    {{- $label.Name }}=\"{{ $label.Value -}}\"\n    {{- end }}\n{{- end -}}\n)\n{{- end }}`}
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							title: event.target.value,
+						}))
+					}
+				/>
+			</FormItem>

-		<FormItem name="text" label="Description">
-			<TextArea
-				onChange={(event): void =>
-					setSelectedConfig((value) => ({
-						...value,
-						text: event.target.value,
-					}))
-				}
-				placeholder="description"
-			/>
-		</FormItem>
-	</>
-);
+			<FormItem name="text" label="Description">
+				<TextArea
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							text: event.target.value,
+						}))
+					}
+					placeholder="description"
+				/>
+			</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,74 +108,72 @@ const Trace = (props: TraceProps): JSX.Element => {
 	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;

 	return (
-		<>
-			<Wrapper
-				onMouseEnter={onMouseEnterHandler}
-				onMouseLeave={onMouseLeaveHandler}
-				isOnlyChild={isOnlyChild}
-				ref={ref}
-			>
-				<HoverCard
-					top={top}
-					isHovered={activeHoverId === id}
-					isSelected={activeSelectedId === id}
-					isDarkMode={isDarkMode}
-				/>
+		<Wrapper
+			onMouseEnter={onMouseEnterHandler}
+			onMouseLeave={onMouseLeaveHandler}
+			isOnlyChild={isOnlyChild}
+			ref={ref}
+		>
+			<HoverCard
+				top={top}
+				isHovered={activeHoverId === id}
+				isSelected={activeSelectedId === id}
+				isDarkMode={isDarkMode}
+			/>

-				<CardContainer onClick={onClick}>
-					<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
-						<StyledRow styledclass={[styles.flexNoWrap]}>
-							<Col>
-								{totalSpans !== 1 && (
-									<CardComponent isDarkMode={isDarkMode} onClick={onClickTreeExpansion}>
-										{totalSpans}
-										<CaretContainer>
-											{isOpen ? <CaretDownFilled /> : <CaretRightFilled />}
-										</CaretContainer>
-									</CardComponent>
-								)}
-							</Col>
-							<Col>
-								<SpanName name={name} serviceName={serviceName} />
-							</Col>
-						</StyledRow>
-					</StyledCol>
-					<Col flex={'1'}>
-						<SpanLength
-							leftOffset={nodeLeftOffset.toString()}
-							width={width.toString()}
-							bgColor={serviceColour}
-							id={id}
-							inMsCount={inMsCount / 1e6}
+			<CardContainer onClick={onClick}>
+				<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
+					<StyledRow styledclass={[styles.flexNoWrap]}>
+						<Col>
+							{totalSpans !== 1 && (
+								<CardComponent isDarkMode={isDarkMode} onClick={onClickTreeExpansion}>
+									{totalSpans}
+									<CaretContainer>
+										{isOpen ? <CaretDownFilled /> : <CaretRightFilled />}
+									</CaretContainer>
+								</CardComponent>
+							)}
+						</Col>
+						<Col>
+							<SpanName name={name} serviceName={serviceName} />
+						</Col>
+					</StyledRow>
+				</StyledCol>
+				<Col flex="1">
+					<SpanLength
+						leftOffset={nodeLeftOffset.toString()}
+						width={width.toString()}
+						bgColor={serviceColour}
+						id={id}
+						inMsCount={inMsCount / 1e6}
+						intervalUnit={intervalUnit}
+					/>
+				</Col>
+			</CardContainer>
+
+			{isOpen && (
+				<>
+					{props.children.map((child) => (
+						<Trace
+							key={child.id}
+							activeHoverId={props.activeHoverId}
+							setActiveHoverId={props.setActiveHoverId}
+							{...child}
+							globalSpread={globalSpread}
+							globalStart={globalStart}
+							setActiveSelectedId={setActiveSelectedId}
+							activeSelectedId={activeSelectedId}
+							level={level + 1}
+							activeSpanPath={activeSpanPath}
+							isExpandAll={isExpandAll}
 							intervalUnit={intervalUnit}
 						/>
-					</Col>
-				</CardContainer>
-
-				{isOpen && (
-					<>
-						{props.children.map((child) => (
-							<Trace
-								key={child.id}
-								activeHoverId={props.activeHoverId}
-								setActiveHoverId={props.setActiveHoverId}
-								{...child}
-								globalSpread={globalSpread}
-								globalStart={globalStart}
-								setActiveSelectedId={setActiveSelectedId}
-								activeSelectedId={activeSelectedId}
-								level={level + 1}
-								activeSpanPath={activeSpanPath}
-								isExpandAll={isExpandAll}
-								intervalUnit={intervalUnit}
-							/>
-						))}
-					</>
-				)}
-			</Wrapper>
-		</>
+					))}
+				</>
+			)}
+		</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,38 +36,36 @@ const GanttChart = (props: GanttChartProps): JSX.Element => {
 		setIsExpandAll((prev) => !prev);
 	};
 	return (
-		<>
-			<Wrapper>
-				<CardContainer>
-					<CollapseButton
-						onClick={handleCollapse}
-						title={isExpandAll ? 'Collapse All' : 'Expand All'}
-					>
-						{isExpandAll ? <MinusSquareOutlined /> : <PlusSquareOutlined />}
-					</CollapseButton>
-					<CardWrapper>
-						<Trace
-							activeHoverId={activeHoverId}
-							activeSpanPath={activeSpanPath}
-							setActiveHoverId={setActiveHoverId}
-							key={data.id}
-							{...{
-								...data,
-								globalSpread,
-								globalStart,
-								setActiveSelectedId,
-								activeSelectedId,
-							}}
-							level={0}
-							isExpandAll={isExpandAll}
-							intervalUnit={intervalUnit}
-						/>
-					</CardWrapper>
-				</CardContainer>
-			</Wrapper>
-		</>
+		<Wrapper>
+			<CardContainer>
+				<CollapseButton
+					onClick={handleCollapse}
+					title={isExpandAll ? 'Collapse All' : 'Expand All'}
+				>
+					{isExpandAll ? <MinusSquareOutlined /> : <PlusSquareOutlined />}
+				</CollapseButton>
+				<CardWrapper>
+					<Trace
+						activeHoverId={activeHoverId}
+						activeSpanPath={activeSpanPath}
+						setActiveHoverId={setActiveHoverId}
+						key={data.id}
+						{...{
+							...data,
+							globalSpread,
+							globalStart,
+							setActiveSelectedId,
+							activeSelectedId,
+						}}
+						level={0}
+						isExpandAll={isExpandAll}
+						intervalUnit={intervalUnit}
+					/>
+				</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>
-				</>
+				<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,26 +67,25 @@ const GridGraph = (): JSX.Element => {
 					),
 				};
 			});
-		} else {
-			return data.layout
-				.filter((_, index) => widgets[index])
-				.map((e, index) => ({
-					...e,
-					Component: (): JSX.Element => {
-						if (widgets[index]) {
-							return (
-								<Graph
-									name={e.i + index}
-									isDeleted={isDeleted}
-									widget={widgets[index]}
-									yAxisUnit={widgets[index].yAxisUnit}
-								/>
-							);
-						}
-						return <></>;
-					},
-				}));
 		}
+		return data.layout
+			.filter((_, index) => widgets[index])
+			.map((e, index) => ({
+				...e,
+				Component: (): JSX.Element => {
+					if (widgets[index]) {
+						return (
+							<Graph
+								name={e.i + index}
+								isDeleted={isDeleted}
+								widget={widgets[index]}
+								yAxisUnit={widgets[index].yAxisUnit}
+							/>
+						);
+					}
+					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>
-			);
 		}
+		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,18 +70,16 @@ const DeleteAlert = ({
 	};

 	return (
-		<>
-			<Button
-				disabled={deleteAlertState.loading || false}
-				loading={deleteAlertState.loading || false}
-				onClick={(): Promise<void> => onDeleteHandler(id)}
-				type="link"
-			>
-				Delete
-			</Button>
-		</>
+		<Button
+			disabled={deleteAlertState.loading || false}
+			loading={deleteAlertState.loading || false}
+			onClick={(): Promise<void> => onDeleteHandler(id)}
+			type="link"
+		>
+			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,10 +71,8 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 						selectedTimeStamp.current = time.getTime();
 					}
 				}
-			} else {
-				if (buttonElement && buttonElement.style.display === 'block') {
-					buttonElement.style.display = 'none';
-				}
+			} else if (buttonElement && buttonElement.style.display === 'block') {
+				buttonElement.style.display = 'none';
 			}
 		}
 	};
@ -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,55 +6,53 @@ 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>
-						<GraphTitle>Database Calls RPS</GraphTitle>
-						<GraphContainer>
-							<FullView
-								name="database_call_rps"
-								noDataGraph
-								fullViewOptions={false}
-								widget={getWidget([
-									{
-										query: `sum(rate(signoz_db_latency_count{service_name="${servicename}"}[1m])) by (db_system)`,
-										legend: '{{db_system}}',
-									},
-								])}
-								yAxisUnit="short"
-							/>
-						</GraphContainer>
-					</Card>
-				</Col>
+		<Row gutter={24}>
+			<Col span={12}>
+				<Card>
+					<GraphTitle>Database Calls RPS</GraphTitle>
+					<GraphContainer>
+						<FullView
+							name="database_call_rps"
+							noDataGraph
+							fullViewOptions={false}
+							widget={getWidget([
+								{
+									query: `sum(rate(signoz_db_latency_count{service_name="${servicename}"}[1m])) by (db_system)`,
+									legend: '{{db_system}}',
+								},
+							])}
+							yAxisUnit="short"
+						/>
+					</GraphContainer>
+				</Card>
+			</Col>

-				<Col span={12}>
-					<Card>
-						<GraphTitle>Database Calls Avg Duration (in ms)</GraphTitle>
-						<GraphContainer>
-							<FullView
-								name="database_call_avg_duration"
-								noDataGraph
-								fullViewOptions={false}
-								widget={getWidget([
-									{
-										query: `sum(rate(signoz_db_latency_sum{service_name="${servicename}"}[5m]))/sum(rate(signoz_db_latency_count{service_name="${servicename}"}[5m]))`,
-										legend: '',
-									},
-								])}
-								yAxisUnit="ms"
-							/>
-						</GraphContainer>
-					</Card>
-				</Col>
-			</Row>
-		</>
+			<Col span={12}>
+				<Card>
+					<GraphTitle>Database Calls Avg Duration (in ms)</GraphTitle>
+					<GraphContainer>
+						<FullView
+							name="database_call_avg_duration"
+							noDataGraph
+							fullViewOptions={false}
+							widget={getWidget([
+								{
+									query: `sum(rate(signoz_db_latency_sum{service_name="${servicename}"}[5m]))/sum(rate(signoz_db_latency_count{service_name="${servicename}"}[5m]))`,
+									legend: '',
+								},
+							])}
+							yAxisUnit="ms"
+						/>
+					</GraphContainer>
+				</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,46 +67,42 @@ const DescriptionOfDashboard = ({
 	]);

 	return (
-		<>
-			<Card>
-				<Row align="top" justify="space-between">
-					{!isEditMode ? (
-						<>
-							<Col>
-								<Typography>{title}</Typography>
-								<Container>
-									{tags?.map((e) => (
-										<Tag key={e}>{e}</Tag>
-									))}
-								</Container>
-								<Container>
-									<Typography>{description}</Typography>
-								</Container>
-							</Col>
-						</>
-					) : (
-						<Col lg={8}>
-							<NameOfTheDashboard name={updatedTitle} setName={setUpdatedTitle} />
-							<AddTags tags={updatedTags} setTags={setUpdatedTags} />
-							<Description
-								description={updatedDescription}
-								setDescription={setUpdtatedDescription}
-							/>
-						</Col>
-					)}
+		<Card>
+			<Row align="top" justify="space-between">
+				{!isEditMode ? (
 					<Col>
-						<Button
-							icon={!isEditMode ? <EditOutlined /> : <SaveOutlined />}
-							onClick={onClickEditHandler}
-						>
-							{isEditMode ? 'Save' : 'Edit'}
-						</Button>
+						<Typography>{title}</Typography>
+						<Container>
+							{tags?.map((e) => (
+								<Tag key={e}>{e}</Tag>
+							))}
+						</Container>
+						<Container>
+							<Typography>{description}</Typography>
+						</Container>
 					</Col>
-				</Row>
-			</Card>
-		</>
+				) : (
+					<Col lg={8}>
+						<NameOfTheDashboard name={updatedTitle} setName={setUpdatedTitle} />
+						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
+						<Description
+							description={updatedDescription}
+							setDescription={setUpdtatedDescription}
+						/>
+					</Col>
+				)}
+				<Col>
+					<Button
+						icon={!isEditMode ? <EditOutlined /> : <SaveOutlined />}
+						onClick={onClickEditHandler}
+					>
+						{isEditMode ? 'Save' : 'Edit'}
+					</Button>
+				</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 />}
+		<GridComponentSliderContainer>
+			{isAddWidget && <ComponentsSlider />}

-				<GridGraphLayout />
-			</GridComponentSliderContainer>
-		</>
+			<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>
-		{AllTraceFilterEnum.map((panelName) => (
-			<Panel key={panelName} name={panelName} />
-		))}
-	</React.Fragment>
-);
+function Filters(): JSX.Element {
+	return (
+		<>
+			{AllTraceFilterEnum.map((panelName) => (
+				<Panel key={panelName} name={panelName} />
+			))}
+		</>
+	);
+}

 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