chore: upgrade React 17 to React 18

package.json

@@ -85,12 +85,12 @@
     "pinyin-pro": "^3.20.4",
     "query-string": "^7.0.1",
     "re-resizable": "^6.9.9",
-    "react": "^17.0.0",
+    "react": "^18.3.1",
     "react-ace": "^10.1.0",
     "react-beforeunload": "^2.6.0",
     "react-color": "^2.19.3",
     "react-data-grid": "7.0.0-beta.16",
-    "react-dom": "^17.0.0",
+    "react-dom": "^18.3.1",
     "react-draggable": "^4.4.5",
     "react-fast-compare": "^3.2.0",
     "react-grid-layout": "^1.2.5",
@@ -126,8 +126,8 @@
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.19.100",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
     "@types/react-router-dom": "^5.1.7",
     "@types/spark-md5": "^3.0.5",
     "@vitejs/plugin-react": "^4.4.1",
@@ -151,7 +151,6 @@
     "vite-plugin-svgr": "^4.3.0"
   },
   "overrides": {
-    "@types/react": "^17.0.14",
     "@types/d3-dispatch": "3.0.6"
   }
-}
+}

src/components/ModalHOC.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import _ from 'lodash';
 import { ConfigProvider } from 'antd';
@@ -20,24 +20,24 @@ export default function ModalHOC<T>(Component: React.FC<T & ModalWrapProps>) {
     const div = document.createElement('div');
     document.body.appendChild(div);
     div.className = 'theme-dark';
+    const root: Root = createRoot(div);
 
     function destroy() {
-      const unmountResult = ReactDOM.unmountComponentAtNode(div);
-      if (unmountResult && div.parentNode) {
+      root.unmount();
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
 
     const language = config.language ? config.language : window.localStorage.getItem('language') || 'zh_CN';
 
     function render(props: any) {
-      ReactDOM.render(
+      root.render(
         <ConfigProvider locale={getAntdLocale(language)}>
           <Router>
             <Component {...props} />
           </Router>
         </ConfigProvider>,
-        div,
       );
     }
 

src/main.tsx

@@ -15,7 +15,7 @@
  *
  */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { i18nInit } from './i18n'; // loaded and initialized first
 import App from './App';
 import { I18nextProvider } from 'react-i18next';
@@ -28,9 +28,9 @@ initTheme();
 // 指向官网/Flashduty 的链接统一携带 from=n9e-user 渠道参数
 initFlashcatFrom();
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!);
+root.render(
   <I18nextProvider i18n={i18nInit}>
     <App />
   </I18nextProvider>,
-  document.getElementById('root'),
 );

src/pages/dashboard/Components/ModalHOC.tsx

@@ -15,7 +15,7 @@
  *
  */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import _ from 'lodash';
 import { BrowserRouter as Router } from 'react-router-dom';
 
@@ -32,20 +32,20 @@ export default function ModalHOC(Component: any) {
   return function ModalControl(config: any) {
     const div = document.createElement('div');
     document.body.appendChild(div);
+    const root: Root = createRoot(div);
 
     function destroy() {
-      const unmountResult = ReactDOM.unmountComponentAtNode(div);
-      if (unmountResult && div.parentNode) {
+      root.unmount();
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
 
     function render(props: any) {
-      ReactDOM.render(
+      root.render(
         <Router>
           <Component {...props} />
         </Router>,
-        div,
       );
     }
 

src/pages/dashboard/Renderer/Renderer/TimeSeriesNG/Main.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import { AlignedData, Options } from 'uplot';
 import _ from 'lodash';
 import moment from 'moment';
@@ -83,6 +83,7 @@ export default function index(props: Props) {
   const yScaleInitMinMaxRef = useRef<[number, number]>();
   const [showResetZoomBtn, setShowResetZoomBtn] = useState(false);
   const [annotationSettingUp, setAnnotationSettingUp] = useState(false);
+  const rootRefs = useRef<Map<HTMLElement, Root>>(new Map());
   const xMinMax = useMemo(() => {
     return getScalesXMinMax({ range, queryOptionsTime });
   }, [range, JSON.stringify(queryOptionsTime)]);
@@ -122,7 +123,12 @@ export default function index(props: Props) {
           graphTooltip: dashboardMeta.graphTooltip as any,
           timeZone: timezone,
           renderFooter: (domNode: HTMLDivElement, closeOverlay: () => void) => {
-            ReactDOM.render(
+            let root = rootRefs.current.get(domNode);
+            if (!root) {
+              root = createRoot(domNode);
+              rootRefs.current.set(domNode, root);
+            }
+            root.render(
               <AddAnnotationButton
                 panelID={id}
                 timeZone={timezone}
@@ -135,7 +141,6 @@ export default function index(props: Props) {
                   }
                 }}
               />,
-              domNode,
             );
           },
           pointNameformatter: (val, point) => {
@@ -174,7 +179,12 @@ export default function index(props: Props) {
         annotationsPlugin({
           annotations,
           renderMarkers: (xAxisEle) => {
-            ReactDOM.render(
+            let root = rootRefs.current.get(xAxisEle);
+            if (!root) {
+              root = createRoot(xAxisEle);
+              rootRefs.current.set(xAxisEle, root);
+            }
+            root.render(
               <AddAnnotatsMarkers
                 annotations={annotations}
                 uplotRef={uplotRef}
@@ -190,7 +200,6 @@ export default function index(props: Props) {
                   }
                 }}
               />,
-              xAxisEle,
             );
           },
         }),
@@ -354,6 +363,8 @@ export default function index(props: Props) {
           }}
           onDelete={(id) => {
             uplotsMap.delete(id);
+            rootRefs.current.forEach((r) => r.unmount());
+            rootRefs.current.clear();
           }}
         />
         {!hideResetBtn && (

src/pages/embeddedProduct/pages/List/index.tsx

@@ -22,7 +22,7 @@ import EmbeddedProductModal from '../../components/EmbeddedProductModal';
 
 import './style.less';
 
-const DragHandle = SortableHandle((props: { disabled?: boolean }) => {
+const DragHandle = SortableHandle<{ disabled?: boolean }>((props) => {
   return <Button type='text' size='small' icon={<MenuOutlined />} className='embedded-product-row-drag-handle' disabled={props.disabled} />;
 });
 

src/pages/explorer/Elasticsearch/QueryBuilder.tsx

@@ -279,7 +279,7 @@ export default function QueryBuilder(props: Props) {
                   return (
                     <span key={key}>
                       <span className='bg-[var(--fc-fill-1)] inline-block p-1 mr-1'>{t(`datasource:es.${key}`)}:</span>
-                      <span className='pr-1'>{key === 'syntax' ? _.find(SYNTAX_OPTIONS, { value: value as string })?.label ?? value : value}</span>
+                      <span className='pr-1'>{key === 'syntax' ? _.find(SYNTAX_OPTIONS, { value: value as string })?.label ?? String(value) : String(value)}</span>
                     </span>
                   );
                 })}

src/pages/explorer/Loki/component/context/index.tsx

@@ -61,7 +61,7 @@ function LogContext(props: IProps & ModalWrapProps) {
       const res2 = await getLogsQuery(datasourceValue, twoHoursLaterQueryParams);
       setData(_.concat(parseResponse(res2.result || []).dataRows, parseResponse(res1.result || []).dataRows));
     } catch (err) {
-      message.error(err);
+      message.error(err as string);
     } finally {
       setLoading(false);
     }

src/pages/explorer/Loki/index.tsx

@@ -185,7 +185,7 @@ export default function index(props: IProps) {
         }
       }
     } catch (err) {
-      message.error(err);
+      message.error(err as string);
     } finally {
       setLoading(false);
     }

src/pages/hosts/pages/List/OperationModal.tsx

@@ -281,14 +281,16 @@ export default function OperationModal(props: OperateionModalProps) {
           form.resetFields();
         }}
       >
-        {/* 基础展示表单项 */}
-        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
-          <Form.Item label={t('targets')} name='idents' rules={[{ required: true }]}>
-            <Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t('targets_placeholder')} onBlur={formatValue} />
-          </Form.Item>
-          {isFormItem && render()}
-        </Form>
-        {!isFormItem && render()}
+        <>
+          {/* 基础展示表单项 */}
+          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+            <Form.Item label={t('targets')} name='idents' rules={[{ required: true }]}>
+              <Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t('targets_placeholder')} onBlur={formatValue} />
+            </Form.Item>
+            {isFormItem ? render() ?? null : null}
+          </Form>
+          {!isFormItem ? render() ?? null : null}
+        </>
       </Modal>
       <Modal
         visible={errorModal.visible}

src/pages/log/IndexPatterns/index.tsx

@@ -34,7 +34,7 @@ import EditField from './EditField';
 import { useQuery } from '@/utils';
 import './style.less';
 
-const DragHandle = SortableHandle((props: { disabled?: boolean }) => {
+const DragHandle = SortableHandle<{ disabled?: boolean }>((props) => {
   return <Button type='text' size='small' icon={<MenuOutlined />} className='index-pattern-row-drag-handle' disabled={props.disabled} />;
 });
 

src/pages/logExplorer/components/LogsViewer/components/LogFieldValue/Token.tsx

@@ -122,9 +122,9 @@ function TokenWithContext(props: Props & { indexData: Field[] }) {
     setPopoverVisible(false);
   }, []);
 
-  const getPopupContainer = useCallback((triggerNode?: HTMLElement) => {
+  const getPopupContainer = useCallback((triggerNode: HTMLElement) => {
     const host = triggerNode || hostRef.current;
-    return host?.closest(`.${LOG_VIEWER_IGNORE_CLICK_AWAY_CLASS}`) || host?.closest('.ant-drawer-content') || document.body;
+    return (host?.closest(`.${LOG_VIEWER_IGNORE_CLICK_AWAY_CLASS}`) || host?.closest('.ant-drawer-content') || document.body) as HTMLElement;
   }, []);
 
   const handleTextSelectMouseDownCapture = useCallback(() => {

src/pages/targets/index.tsx

@@ -313,14 +313,16 @@ const OperationModal: React.FC<OperateionModalProps> = ({ operateType, setOperat
         form.resetFields();
       }}
     >
-      {/* 基础展示表单项 */}
-      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
-        <Form.Item label={t('targets')} name='idents' rules={[{ required: true }]}>
-          <TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t('targets_placeholder')} onBlur={formatValue} />
-        </Form.Item>
-        {isFormItem && render()}
-      </Form>
-      {!isFormItem && render()}
+      <>
+        {/* 基础展示表单项 */}
+        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+          <Form.Item label={t('targets')} name='idents' rules={[{ required: true }]}>
+            <TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t('targets_placeholder')} onBlur={formatValue} />
+          </Form.Item>
+          {isFormItem ? render() ?? null : null}
+        </Form>
+        {!isFormItem ? render() ?? null : null}
+      </>
     </Modal>
   );
 };

src/pages/taskOutput/host.jsx

@@ -20,11 +20,6 @@ export default class index extends Component {
     document.body.style.color = '#000';
   };
 
-  componentWillMount = () => {
-    document.body.style.backgroundColor = '#f0f2f5';
-    document.body.style.color = 'rgba(0, 0, 0, 0.65)';
-  };
-
   fetchData() {
     const busiId = _.get(this.props, 'match.params.busiId');
     const taskId = _.get(this.props, 'match.params.taskId');

src/pages/taskOutput/index.jsx

@@ -20,11 +20,6 @@ export default class index extends Component {
     document.body.style.color = '#000';
   };
 
-  componentWillMount = () => {
-    document.body.style.backgroundColor = '#f0f2f5';
-    document.body.style.color = 'rgba(0, 0, 0, 0.65)';
-  };
-
   fetchData() {
     const busiId = _.get(this.props, 'match.params.busiId');
     const taskId = _.get(this.props, 'match.params.taskId');

src/pages/user/component/businessForm/index.tsx

@@ -24,7 +24,7 @@ import { debounce } from 'lodash';
 import { CommonStateContext } from '@/App';
 
 const { Option } = Select;
-const TeamForm = React.forwardRef<ReactNode, TeamProps>((props, ref) => {
+const TeamForm = React.forwardRef<any, TeamProps>((props, ref) => {
   const { siteInfo } = useContext(CommonStateContext);
   const { t } = useTranslation('user');
   const { businessId, action } = props;

src/pages/user/component/passwordForm/index.tsx

@@ -18,7 +18,7 @@ import React, { useImperativeHandle, ReactNode } from 'react';
 import { Form, Input } from 'antd';
 import { UserAndPasswordFormProps } from '@/store/manageInterface';
 import { useTranslation } from 'react-i18next';
-const PasswordForm = React.forwardRef<ReactNode, UserAndPasswordFormProps>((props, ref) => {
+const PasswordForm = React.forwardRef<any, UserAndPasswordFormProps>((props, ref) => {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   useImperativeHandle(ref, () => ({

src/pages/user/component/teamForm/index.tsx

@@ -21,7 +21,7 @@ import { TeamProps, Team, TeamInfo } from '@/store/manageInterface';
 import { useTranslation, Trans } from 'react-i18next';
 import { CommonStateContext } from '@/App';
 
-const TeamForm = React.forwardRef<ReactNode, TeamProps>((props, ref) => {
+const TeamForm = React.forwardRef<any, TeamProps>((props, ref) => {
   const { siteInfo } = useContext(CommonStateContext);
   const { t } = useTranslation('user');
   const { teamId } = props;

src/pages/user/component/userForm/index.tsx

@@ -26,7 +26,7 @@ import ContactDrawer from '@/components/Contacts';
 import { CommonStateContext } from '@/App';
 
 const { Option } = Select;
-const UserForm = React.forwardRef<ReactNode, UserAndPasswordFormProps>((props, ref) => {
+const UserForm = React.forwardRef<any, UserAndPasswordFormProps>((props, ref) => {
   const { t } = useTranslation();
   const { profile } = useContext(CommonStateContext);
   const { userId } = props;

src/plugins/clickHouse/Explorer/Table.tsx

@@ -50,7 +50,7 @@ export default function TableCpt(props: Props) {
   });
   const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({
     columns: useMemo(() => columns, [columnsKeys]),
-    tooltipRender: (props) => <Tooltip {...props} />,
+    tooltipRender: (props: any) => <Tooltip {...props} />,
     defaultWidth: 150,
   });
 

src/plugins/doris/Explorer/Query/index.tsx

@@ -193,7 +193,7 @@ export default function index(props: Props) {
                   return (
                     <span key={key} className='whitespace-nowrap'>
                       <span className='bg-[var(--fc-fill-1)] inline-block p-1 mr-1'>{t(`query.${key}`)}:</span>
-                      <span className='pr-1'>{value}</span>
+                      <span className='pr-1'>{String(value)}</span>
                     </span>
                   );
                 })}

src/plugins/doris/ExplorerNG/components/QueryInputAddonAfter.tsx

@@ -43,7 +43,7 @@ export default function QueryInputAddonAfter(props: Props) {
                 return (
                   <span key={key} className='whitespace-nowrap'>
                     <span className='bg-[var(--fc-fill-1)] inline-block p-1 mr-1'>{t(`query.${key}`)}:</span>
-                    <span className='pr-1'>{value}</span>
+                    <span className='pr-1'>{String(value)}</span>
                   </span>
                 );
               })}

src/plugins/elasticsearch/ExplorerNG/components/QueryInputAddonAfter.tsx

@@ -69,7 +69,7 @@ export default function QueryInputAddonAfter(props: Props) {
               return (
                 <span key={key} className='whitespace-nowrap'>
                   <span className='bg-[var(--fc-fill-1)] inline-block p-1 mr-1'>{t(`query.${key}`)}:</span>
-                  <span className='pr-1'>{displayValue}</span>
+                  <span className='pr-1'>{String(displayValue)}</span>
                 </span>
               );
             })}