diff --git a/frontend/package.json b/frontend/package.json index 7078500fbf..af2bc52a6b 100644 --- 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 index 1ecaac1080..618248c755 100644 --- 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 {
{'{'} - - <> +
+ + {flattenLogData.stream && ( - {flattenLogData.stream && ( - - )} - - - + )} + +
{'}'}
diff --git a/frontend/src/components/Logs/LogItem/styles.ts b/frontend/src/components/Logs/LogItem/styles.ts index a20910f42f..9d884272c3 100644 --- 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 index a686764440..99636806ea 100644 --- 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 {data?.error || 'Something went wrong'}; + if (error) { + return {errorMessage}; } - if (isLoading || data?.payload === undefined || data.payload === null) { + if (loading || payload === undefined) { return ; } @@ -60,7 +60,7 @@ function AlertChannels(): JSX.Element { - + ); } diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index afb7517ae3..e7f2e64bcc 100644 --- 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 ( @@ -200,11 +192,11 @@ function AllErrors(): JSX.Element { getUpdatedServiceName, getUpdatedExceptionType, )} - onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)} + onPressEnter={handleSearch(confirm, selectedKeys[0], filterKey)} />