Revert "feat: react is updated to v18 (#1948)" (#1990)

This reverts commit 1c7202b.
SigNoz · Jan 6, 2023 · 1f6fcb9 · 1f6fcb9
1 parent 1c7202b
commit 1f6fcb9
Show file tree

Hide file tree

Showing 15 changed files with 529 additions and 596 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -70,8 +70,8 @@
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
 		"mini-css-extract-plugin": "2.4.5",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "17.0.0",
+		"react-dom": "17.0.0",
 		"react-force-graph": "^1.41.0",
 		"react-graph-vis": "^1.0.5",
 		"react-grid-layout": "^1.3.4",
@@ -132,8 +132,8 @@
 		"@types/lodash-es": "^4.17.4",
 		"@types/mini-css-extract-plugin": "^2.5.1",
 		"@types/node": "^16.10.3",
-		"@types/react": "18.0.0",
-		"@types/react-dom": "18.0.0",
+		"@types/react": "^17.0.0",
+		"@types/react-dom": "^16.9.9",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-router-dom": "^5.1.6",
@@ -186,7 +186,7 @@
 		]
 	},
 	"resolutions": {
-		"@types/react": "18.0.0",
-		"@types/react-dom": "18.0.0"
+		"@types/react": "17.0.0",
+		"@types/react-dom": "17.0.0"
 	}
 }
diff --git a/frontend/src/components/Logs/LogItem/index.tsx b/frontend/src/components/Logs/LogItem/index.tsx
@@ -14,7 +14,7 @@ import { ILogsReducer } from 'types/reducer/logs';
 
 import AddToQueryHOC from '../AddToQueryHOC';
 import CopyClipboardHOC from '../CopyClipboardHOC';
-import { Container, LogFieldContainer, Text, TextContainer } from './styles';
+import { Container, Text, TextContainer } from './styles';
 import { isValidLogField } from './util';
 
 interface LogFieldProps {
@@ -95,24 +95,22 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
 			<div style={{ maxWidth: '100%' }}>
 				<div>
 					{'{'}
-					<LogFieldContainer>
-						<>
+					<div style={{ marginLeft: '0.5rem' }}>
+						<LogGeneralField
+							fieldKey="log"
+							fieldValue={flattenLogData.body as never}
+						/>
+						{flattenLogData.stream && (
 							<LogGeneralField
-								fieldKey="log"
-								fieldValue={flattenLogData.body as never}
+								fieldKey="stream"
+								fieldValue={flattenLogData.stream as never}
 							/>
-							{flattenLogData.stream && (
-								<LogGeneralField
-									fieldKey="stream"
-									fieldValue={flattenLogData.stream as never}
-								/>
-							)}
-							<LogGeneralField
-								fieldKey="timestamp"
-								fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
-							/>
-						</>
-					</LogFieldContainer>
+						)}
+						<LogGeneralField
+							fieldKey="timestamp"
+							fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
+						/>
+					</div>
 					{'}'}
 				</div>
 				<div>

diff --git a/frontend/src/components/Logs/LogItem/styles.ts b/frontend/src/components/Logs/LogItem/styles.ts
@@ -29,7 +29,3 @@ export const TextContainer = styled.div`
 	overflow: hidden;
 	width: 100%;
 `;
-
-export const LogFieldContainer = styled.div`
-	margin-left: 0.5rem;
-`;
diff --git a/frontend/src/container/AllAlertChannels/index.tsx b/frontend/src/container/AllAlertChannels/index.tsx
@@ -5,10 +5,10 @@ import Spinner from 'components/Spinner';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
+import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
@@ -29,13 +29,13 @@ function AlertChannels(): JSX.Element {
 		history.push(ROUTES.CHANNELS_NEW);
 	}, []);
 
-	const { isLoading, data, isError } = useQuery('channels', getAll);
+	const { loading, payload, error, errorMessage } = useFetch(getAll);
 
-	if (isError || data?.error) {
-		return <Typography>{data?.error || 'Something went wrong'}</Typography>;
+	if (error) {
+		return <Typography>{errorMessage}</Typography>;
 	}
 
-	if (isLoading || data?.payload === undefined || data.payload === null) {
+	if (loading || payload === undefined) {
 		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
 	}
 
@@ -60,7 +60,7 @@ function AlertChannels(): JSX.Element {
 				</RightActionContainer>
 			</ButtonContainer>
 
-			<AlertChannelsComponent allChannels={data.payload} />
+			<AlertChannelsComponent allChannels={payload} />
 		</>
 	);
 }

diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx
@@ -10,8 +10,7 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { ColumnType, TablePaginationConfig } from 'antd/es/table';
-import { FilterValue, SorterResult } from 'antd/es/table/interface';
+import { ColumnType } from 'antd/es/table';
 import { ColumnsType } from 'antd/lib/table';
 import { FilterConfirmProps } from 'antd/lib/table/interface';
 import getAll from 'api/errors/getAll';
@@ -31,7 +30,6 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { FilterDropdownExtendsProps } from './types';
 import {
 	extractFilterValues,
 	getDefaultFilterValue,
@@ -178,13 +176,7 @@ function AllErrors(): JSX.Element {
 	);
 
 	const filterDropdownWrapper = useCallback(
-		({
-			setSelectedKeys,
-			selectedKeys,
-			confirm,
-			placeholder,
-			filterKey,
-		}: FilterDropdownExtendsProps) => {
+		({ setSelectedKeys, selectedKeys, confirm, placeholder, filterKey }) => {
 			return (
 				<Card size="small">
 					<Space align="start" direction="vertical">
@@ -200,11 +192,11 @@ function AllErrors(): JSX.Element {
 								getUpdatedServiceName,
 								getUpdatedExceptionType,
 							)}
-							onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
+							onPressEnter={handleSearch(confirm, selectedKeys[0], filterKey)}
 						/>
 						<Button
 							type="primary"
-							onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
+							onClick={handleSearch(confirm, selectedKeys[0], filterKey)}
 							icon={<SearchOutlined />}
 							size="small"
 						>
@@ -217,8 +209,8 @@ function AllErrors(): JSX.Element {
 		[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
 	);
 
-	const onExceptionTypeFilter: ColumnType<Exception>['onFilter'] = useCallback(
-		(value: unknown, record: Exception): boolean => {
+	const onExceptionTypeFilter = useCallback(
+		(value, record: Exception): boolean => {
 			if (record.exceptionType && typeof value === 'string') {
 				return record.exceptionType.toLowerCase().includes(value.toLowerCase());
 			}
@@ -228,7 +220,7 @@ function AllErrors(): JSX.Element {
 	);
 
 	const onApplicationTypeFilter = useCallback(
-		(value: unknown, record: Exception): boolean => {
+		(value, record: Exception): boolean => {
 			if (record.serviceName && typeof value === 'string') {
 				return record.serviceName.toLowerCase().includes(value.toLowerCase());
 			}
@@ -351,11 +343,7 @@ function AllErrors(): JSX.Element {
 	];
 
 	const onChangeHandler: TableProps<Exception>['onChange'] = useCallback(
-		(
-			paginations: TablePaginationConfig,
-			filters: Record<string, FilterValue | null>,
-			sorter: SorterResult<Exception>[] | SorterResult<Exception>,
-		) => {
+		(paginations, filters, sorter) => {
 			if (!Array.isArray(sorter)) {
 				const { pageSize = 0, current = 0 } = paginations;
 				const { columnKey = '', order } = sorter;

diff --git a/frontend/src/container/AllError/types.ts b/frontend/src/container/AllError/types.ts
diff --git a/frontend/src/container/GeneralSettings/GeneralSettings.tsx b/frontend/src/container/GeneralSettings/GeneralSettings.tsx
@@ -591,20 +591,18 @@ function GeneralSettings({
 
 	return (
 		<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
-			<>
-				{Element}
-				<ErrorTextContainer>
-					<TextToolTip
-						{...{
-							text: `More details on how to set retention period`,
-							url: 'https://signoz.io/docs/userguide/retention-period/',
-						}}
-					/>
-					{errorText && <ErrorText>{errorText}</ErrorText>}
-				</ErrorTextContainer>
-
-				<Row justify="start">{renderConfig}</Row>
-			</>
+			{Element}
+			<ErrorTextContainer>
+				<TextToolTip
+					{...{
+						text: `More details on how to set retention period`,
+						url: 'https://signoz.io/docs/userguide/retention-period/',
+					}}
+				/>
+				{errorText && <ErrorText>{errorText}</ErrorText>}
+			</ErrorTextContainer>
+
+			<Row justify="start">{renderConfig}</Row>
 		</Col>
 	);
 }

diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx
@@ -68,7 +68,7 @@ function SearchFilter({
 	);
 
 	const handleSearch = useCallback(
-		(customQuery: string) => {
+		(customQuery) => {
 			if (liveTail === 'PLAYING') {
 				dispatch({
 					type: TOGGLE_LIVE_TAIL,

diff --git a/frontend/src/container/LogsSearchFilter/useSearchParser.ts b/frontend/src/container/LogsSearchFilter/useSearchParser.ts
@@ -1,6 +1,5 @@
 import history from 'lib/history';
 import { parseQuery, reverseParser } from 'lib/logql';
-import { ILogQLParsedQueryItem } from 'lib/logql/types';
 import { isEqual } from 'lodash-es';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,21 +10,19 @@ import {
 } from 'types/actions/logs';
 import { ILogsReducer } from 'types/reducer/logs';
 
-export interface IUseSearchParser {
+export function useSearchParser(): {
 	queryString: string;
 	parsedQuery: unknown;
-	updateParsedQuery: (updatedParsedPayload: ILogQLParsedQueryItem[]) => void;
-	updateQueryString: (updatedQueryString: string) => void;
-}
-
-export function useSearchParser(): IUseSearchParser {
+	updateParsedQuery: (arg0: unknown) => void;
+	updateQueryString: (arg0: unknown) => void;
+} {
 	const dispatch = useDispatch();
 	const {
 		searchFilter: { parsedQuery, queryString },
 	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
 
 	const updateQueryString = useCallback(
-		(updatedQueryString: string) => {
+		(updatedQueryString) => {
 			history.replace({
 				pathname: history.location.pathname,
 				search: updatedQueryString ? `?q=${updatedQueryString}` : '',
@@ -51,7 +48,7 @@ export function useSearchParser(): IUseSearchParser {
 	}, [queryString, updateQueryString]);
 
 	const updateParsedQuery = useCallback(
-		(updatedParsedPayload: ILogQLParsedQueryItem[]) => {
+		(updatedParsedPayload) => {
 			dispatch({
 				type: SET_SEARCH_QUERY_PARSED_PAYLOAD,
 				payload: updatedParsedPayload,