From 1c7202b5bfd5fa5930528008e43de63bb99ff5cb Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Wed, 4 Jan 2023 22:58:05 +0530 Subject: [PATCH] feat: react is updated to v18 (#1948) * feat: v5 is in progress * feat: antdv5 is updated * fix: build is fixed * fix: default config is over written by custom one * chore: onchange handler is updated * chore: overflow is hidden in the layout * feat: react is updated from v17 to v18 * feat: antdv5 is updated (#1880) * feat: v5 is in progress * feat: antdv5 is updated * fix: build is fixed * fix: default config is over written by custom one * chore: onchange handler is updated * chore: overflow is hidden in the layout * Update index.tsx * fix: import is fixed * chore: un used import is fixed * fix: dark mode is updated in service map * fix: config dropdown is updated * fix: logs types is updated * fix: copy clipboard notification is updated Co-authored-by: Pranay Prateek * chore: all channel is updated move from usefetch to usequery * fix: typescript is fixed Co-authored-by: Pranay Prateek Co-authored-by: Ankit Nayan --- frontend/package.json | 12 +- .../src/components/Logs/LogItem/index.tsx | 32 +- .../src/components/Logs/LogItem/styles.ts | 4 + .../src/container/AllAlertChannels/index.tsx | 12 +- frontend/src/container/AllError/index.tsx | 28 +- frontend/src/container/AllError/types.ts | 9 + .../GeneralSettings/GeneralSettings.tsx | 24 +- .../src/container/LogsSearchFilter/index.tsx | 2 +- .../LogsSearchFilter/useSearchParser.ts | 15 +- frontend/src/container/MetricsTable/index.tsx | 117 +-- .../EditMembersDetails/index.tsx | 9 +- .../Panel/PanelBody/Duration/index.tsx | 2 +- frontend/src/index.tsx | 37 +- frontend/src/pages/Trace/index.tsx | 2 +- frontend/yarn.lock | 818 +++++++++--------- 15 files changed, 595 insertions(+), 528 deletions(-) create mode 100644 frontend/src/container/AllError/types.ts diff --git a/frontend/package.json b/frontend/package.json index af2bc52a6b..7078500fbf 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": "17.0.0", - "react-dom": "17.0.0", + "react": "18.2.0", + "react-dom": "18.2.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": "^17.0.0", - "@types/react-dom": "^16.9.9", + "@types/react": "18.0.0", + "@types/react-dom": "18.0.0", "@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": "17.0.0", - "@types/react-dom": "17.0.0" + "@types/react": "18.0.0", + "@types/react-dom": "18.0.0" } } diff --git a/frontend/src/components/Logs/LogItem/index.tsx b/frontend/src/components/Logs/LogItem/index.tsx index 618248c755..1ecaac1080 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, Text, TextContainer } from './styles'; +import { Container, LogFieldContainer, Text, TextContainer } from './styles'; import { isValidLogField } from './util'; interface LogFieldProps { @@ -95,22 +95,24 @@ 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 9d884272c3..a20910f42f 100644 --- a/frontend/src/components/Logs/LogItem/styles.ts +++ b/frontend/src/components/Logs/LogItem/styles.ts @@ -29,3 +29,7 @@ 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 99636806ea..a686764440 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 { loading, payload, error, errorMessage } = useFetch(getAll); + const { isLoading, data, isError } = useQuery('channels', getAll); - if (error) { - return {errorMessage}; + if (isError || data?.error) { + return {data?.error || 'Something went wrong'}; } - if (loading || payload === undefined) { + if (isLoading || data?.payload === undefined || data.payload === null) { 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 e7f2e64bcc..afb7517ae3 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -10,7 +10,8 @@ import { Tooltip, Typography, } from 'antd'; -import { ColumnType } from 'antd/es/table'; +import { ColumnType, TablePaginationConfig } from 'antd/es/table'; +import { FilterValue, SorterResult } from 'antd/es/table/interface'; import { ColumnsType } from 'antd/lib/table'; import { FilterConfirmProps } from 'antd/lib/table/interface'; import getAll from 'api/errors/getAll'; @@ -30,6 +31,7 @@ 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, @@ -176,7 +178,13 @@ function AllErrors(): JSX.Element { ); const filterDropdownWrapper = useCallback( - ({ setSelectedKeys, selectedKeys, confirm, placeholder, filterKey }) => { + ({ + setSelectedKeys, + selectedKeys, + confirm, + placeholder, + filterKey, + }: FilterDropdownExtendsProps) => { return ( @@ -192,11 +200,11 @@ function AllErrors(): JSX.Element { getUpdatedServiceName, getUpdatedExceptionType, )} - onPressEnter={handleSearch(confirm, selectedKeys[0], filterKey)} + onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)} />