feat(UI): Eslint fixes (#418)

* chore(UI): port finder is removed

* chore(UI): webpack config is updated

* fix(UI): eslint error and fixes are updated

frontend/package.json

@@ -173,7 +173,6 @@
 		"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",
 		"react-is": "^17.0.1",

frontend/src/api/alerts/getGroup.ts

@@ -1,5 +1,4 @@
-import { apiV1, AxiosAlertManagerInstance } from 'api';
+import { AxiosAlertManagerInstance } from 'api';
-import { apiV2 } from 'api/apiV1';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';

frontend/src/components/Editor/index.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 
 import { Container } from './styles';
 
-const Editor = ({ value }: EditorProps) => {
+const Editor = ({ value }: EditorProps): JSX.Element => {
 	const divEl = useRef<HTMLDivElement>(null);
 	const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
 
@@ -28,7 +28,7 @@ const Editor = ({ value }: EditorProps) => {
 			value.current = editor?.getValue() || '';
 		});
 
-		return () => {
+		return (): void => {
 			if (editor) {
 				editor.dispose();
 			}

frontend/src/container/FormAlertChannels/index.tsx

@@ -19,7 +19,7 @@ const FormAlertChannels = ({
 	type,
 	setSelectedConfig,
 	onTypeChangeHandler,
-	onTestHandler,
+	// onTestHandler,
 	onSaveHandler,
 	savingState,
 	NotificationElement,
@@ -92,8 +92,8 @@ interface FormAlertChannelsProps {
 	onSaveHandler: (props: ChannelType) => void;
 	savingState: boolean;
 	NotificationElement: React.ReactElement<
-		any,
+		unknown,
-		string | React.JSXElementConstructor<any>
+		string | React.JSXElementConstructor<unknown>
 	>;
 	title: string;
 	initialValue: Store;

frontend/src/container/MapAlertChannels/index.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const MapAlertChannels = () => {
-	return <div>MapAlertChannels</div>;
-};
-
-export default MapAlertChannels;

frontend/src/container/TraceCustomVisualization/index.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { connect, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 const { Option } = Select;
+import { Store } from 'rc-field-form/lib/interface';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import {
@@ -33,7 +34,7 @@ const TraceCustomVisualisation = ({
 		return <Spinner tip="Loading..." height="40vh" />;
 	}
 
-	const handleFormValuesChange = (changedValues: any): void => {
+	const handleFormValuesChange = (changedValues: Store): void => {
 		const formFieldName = Object.keys(changedValues)[0];
 		if (formFieldName === 'entity') {
 			const temp_entity = aggregation_options.filter(

frontend/src/modules/Traces/SelectedSpanDetails.tsx

@@ -75,7 +75,7 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => {
 			<Tabs defaultActiveKey="1">
 				<TabPane tab="Tags" key="1">
 					{spanTags &&
-						spanTags.map((tags, index) => {
+						spanTags.map((tags) => {
 							return (
 								<>
 									{tags.value && (

frontend/src/modules/Usage/UsageExplorer.tsx

@@ -18,7 +18,7 @@ interface UsageExplorerProps {
 	getUsageData: (
 		minTime: number,
 		maxTime: number,
-		selectedInterval: any,
+		selectedInterval: number,
 		selectedService: string,
 	) => void;
 	getServicesList: ({

frontend/src/pages/CreateAlert/index.tsx

@@ -12,7 +12,7 @@ import { ButtonContainer, Title } from './styles';
 
 const CreateAlert = (): JSX.Element => {
 	const value = useRef<string>(
-		`\n        alert: <alert name>\n        expr: system_cpu_load_average_1m > 0.01\n        for: 0m\n        labels:\n            severity: warning\n        annotations:\n            summary: High CPU load\n            description: \"CPU load is > 0.01\n  VALUE = {{ $value }}\n LABELS = {{ $labels }}\"\n    `,
+		`\n        alert: <alert name>\n        expr: system_cpu_load_average_1m > 0.01\n        for: 0m\n        labels:\n            severity: warning\n        annotations:\n            summary: High CPU load\n            description: "CPU load is > 0.01\n  VALUE = {{ $value }}\n LABELS = {{ $labels }}"\n    `,
 	);
 
 	const [newAlertState, setNewAlertState] = useState<
@@ -85,7 +85,7 @@ const CreateAlert = (): JSX.Element => {
 					'Oops! Some issue occured in saving the alert please try again or contact support@signoz.io',
 			});
 		}
-	}, []);
+	}, [notifications]);
 
 	return (
 		<>

frontend/src/store/actions/traces.ts

@@ -1,5 +1,4 @@
 import api from 'api';
-import ROUTES from 'constants/routes';
 import { Dispatch } from 'redux';
 import { GlobalTime } from 'types/actions/globalTime';
 import { toUTCEpoch } from 'utils/timeUtils';
@@ -120,7 +119,7 @@ export interface FetchTraceItemAction {
 }
 
 export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
-	return async (dispatch: Dispatch): void => {
+	return async (dispatch: Dispatch): Promise<void> => {
 		if (globalTime) {
 			const request_string =
 				'/spans?limit=100&lookback=2d&start=' +

frontend/src/store/index.ts

@@ -4,7 +4,7 @@ import thunk, { ThunkMiddleware } from 'redux-thunk';
 import reducers, { AppState } from './reducers';
 
 const composeEnhancers =
-	(window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
+	(window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
 
 const store = createStore(
 	reducers,

frontend/src/typings/environment.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-namespace */
 declare global {
 	namespace NodeJS {
 		interface ProcessEnv {

frontend/src/typings/window.ts

@@ -1,10 +1,11 @@
 import Cypress from 'cypress';
-import { Store } from 'redux';
+import { compose, Store } from 'redux';
 
 declare global {
 	interface Window {
 		store: Store;
 		Cypress: typeof Cypress;
+		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
 	}
 }
 

frontend/webpack.config.js

@@ -19,7 +19,7 @@ const config = {
 		open: true,
 		hot: true,
 		liveReload: true,
-		port: portFinderSync.getPort(3000),
+		port: 3000,
 		static: {
 			directory: resolve(__dirname, 'public'),
 			publicPath: '/',

frontend/yarn.lock

@@ -11251,15 +11251,7 @@ polished@4:
   dependencies:
     "@babel/runtime" "^7.14.0"
 
-portfinder-sync@^0.0.2:
+portfinder@^1.0.28:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/portfinder-sync/-/portfinder-sync-0.0.2.tgz#6e3409a73a718436de053ac949385350caabd8a2"
-  integrity sha1-bjQJpzpxhDbeBTrJSThTUMqr2KI=
-  dependencies:
-    minimist "^1.2.0"
-    portfinder "^1.0.10"
-
-portfinder@^1.0.10, portfinder@^1.0.28:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
   integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==