From 03305a1bf054a88235256db7a66117f466481e86 Mon Sep 17 00:00:00 2001 From: "ruiyi.jiang" Date: Tue, 8 Nov 2022 21:43:23 +0800 Subject: [PATCH 1/4] temp --- client/package.json | 12 +- .../components/customInput/SearchInput.tsx | 25 +-- client/src/components/layout/Header.tsx | 6 +- client/src/components/layout/Layout.tsx | 14 +- client/src/index.tsx | 12 +- client/src/pages/collections/Collection.tsx | 6 +- client/src/pages/connect/AuthForm.tsx | 8 +- .../collectionCard/CollectionCard.tsx | 11 +- client/yarn.lock | 164 +++++++----------- 9 files changed, 109 insertions(+), 149 deletions(-) diff --git a/client/package.json b/client/package.json index 641da983..e66a81b5 100644 --- a/client/package.json +++ b/client/package.json @@ -20,11 +20,11 @@ "file-saver": "^2.0.5", "i18next": "^20.3.1", "papaparse": "^5.3.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-highlight-words": "^0.17.0", "react-i18next": "^12.0.0", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.4.3", "react-syntax-highlighter": "^15.4.4", "set-value": "^4.1.0", "socket.io-client": "^4.1.3", @@ -42,10 +42,10 @@ "@types/loadable__component": "^5.13.4", "@types/node": "^12.0.0", "@types/papaparse": "^5.2.6", - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", + "@types/react": "^18.0.25", + "@types/react-dom": "^18.0.8", "@types/react-highlight-words": "^0.16.2", - "@types/react-router-dom": "^5.1.7", + "@types/react-router-dom": "^5.3.3", "@types/react-syntax-highlighter": "^13.5.2", "@types/webpack-env": "^1.16.3", "@vitest/coverage-c8": "^0.25.0", diff --git a/client/src/components/customInput/SearchInput.tsx b/client/src/components/customInput/SearchInput.tsx index 40032043..f0709b21 100644 --- a/client/src/components/customInput/SearchInput.tsx +++ b/client/src/components/customInput/SearchInput.tsx @@ -1,7 +1,7 @@ import { InputAdornment, makeStyles, TextField } from '@material-ui/core'; import { useRef, FC, useState, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import Icons from '../icons/Icons'; import { SearchType } from './Types'; @@ -93,7 +93,8 @@ const SearchInput: FC = props => { const classes = useSearchStyles({ searched }); const { t: commonTrans } = useTranslation(); - const history = useHistory(); + const navigate = useNavigate(); + const params = useParams(); const inputRef = useRef(null); @@ -108,16 +109,16 @@ const SearchInput: FC = props => { } if (searchValue !== null && !isInit) { timer = setTimeout(() => { - // save other params data and remove last time search info - const location = history.location; - const params = new URLSearchParams(location.search); - params.delete('search'); - - if (searchValue) { - params.append('search', searchValue); - } - // add search value in url - history.push({ search: params.toString() }); + // // save other params data and remove last time search info + // const location = navigate.location; + // const params = new URLSearchParams(location.search); + // params.delete('search'); + + // if (searchValue) { + // params.append('search', searchValue); + // } + // // add search value in url + // history.push({ search: params.toString() }); savedSearchFn.current(searchValue); }, 300); diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx index dcf13b2b..9edc5732 100644 --- a/client/src/components/layout/Header.tsx +++ b/client/src/components/layout/Header.tsx @@ -3,7 +3,7 @@ import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core'; import { HeaderType } from './Types'; import { navContext } from '../../context/Navigation'; import icons from '../icons/Icons'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { authContext } from '../../context/Auth'; import { useTranslation } from 'react-i18next'; import { MILVUS_ADDRESS } from '../../consts/Localstorage'; @@ -60,14 +60,14 @@ const Header: FC = props => { const classes = useStyles(); const { navInfo } = useContext(navContext); const { address, setAddress, setIsAuth } = useContext(authContext); - const history = useHistory(); + const navigate = useNavigate(); const { t: commonTrans } = useTranslation(); const statusTrans = commonTrans('status'); const BackIcon = icons.back; const LogoutIcon = icons.logout; const handleBack = (path: string) => { - history.push(path); + navigate(-1); }; const handleLogout = () => { diff --git a/client/src/components/layout/Layout.tsx b/client/src/components/layout/Layout.tsx index 1f076f43..346c84f0 100644 --- a/client/src/components/layout/Layout.tsx +++ b/client/src/components/layout/Layout.tsx @@ -6,7 +6,7 @@ import { NavMenuItem } from '../menu/Types'; import { useContext, useMemo } from 'react'; import icons from '../icons/Icons'; import { useTranslation } from 'react-i18next'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import { authContext } from '../../context/Auth'; import { rootContext } from '../../context/Root'; import { IconsType } from '../icons/Types'; @@ -43,7 +43,7 @@ const useStyles = makeStyles((theme: Theme) => ); const Layout = (props: any) => { - const history = useHistory(); + const navigate = useNavigate(); const { isAuth } = useContext(authContext); const { versionInfo } = useContext(rootContext); @@ -74,22 +74,22 @@ const Layout = (props: any) => { { icon: icons.navOverview, label: navTrans('overview'), - onClick: () => history.push('/'), + onClick: () => navigate('/'), }, { icon: icons.navCollection, label: navTrans('collection'), - onClick: () => history.push('/collections'), + onClick: () => navigate('/collections'), }, { icon: icons.navPerson, label: navTrans('user'), - onClick: () => history.push('/users'), + onClick: () => navigate('/users'), }, // { // icon: icons.navSearch, // label: navTrans('search'), - // onClick: () => history.push('/search'), + // onClick: () => navigate('/search'), // iconActiveClass: 'activeSearchIcon', // iconNormalClass: 'normalSearchIcon', // }, @@ -105,7 +105,7 @@ const Layout = (props: any) => { icon: icons.navOverview, label: content.client?.label || 'PLGUIN', }; - result.onClick = () => history.push(`/${pathName}`); + result.onClick = () => navigate(`/${pathName}`); const iconName: IconsType = content.client?.iconName; if (iconName) { result.icon = icons[iconName]; diff --git a/client/src/index.tsx b/client/src/index.tsx index 9dcc2c42..c3a2dc02 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -1,16 +1,12 @@ -import { StrictMode } from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import './index.css'; import './i18n'; import App from './App'; import reportWebVitals from './reportWebVitals'; -ReactDOM.render( - - - , - document.getElementById('root') -); +const container = document.getElementById('root'); +const root = createRoot(container!); // createRoot(container!) if you use TypeScript +root.render(); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) diff --git a/client/src/pages/collections/Collection.tsx b/client/src/pages/collections/Collection.tsx index 76bb6b58..3f6dc505 100644 --- a/client/src/pages/collections/Collection.tsx +++ b/client/src/pages/collections/Collection.tsx @@ -4,7 +4,7 @@ import { ALL_ROUTER_TYPES } from '../../router/Types'; import CustomTabList from '../../components/customTabList/CustomTabList'; import { ITab } from '../../components/customTabList/Types'; import Partitions from '../partitions/Partitions'; -import { useHistory, useLocation, useParams } from 'react-router-dom'; +import { useNavigate, useLocation, useParams } from 'react-router-dom'; import { useMemo } from 'react'; import { parseLocationSearch } from '../../utils/Format'; import Schema from '../schema/Schema'; @@ -22,7 +22,7 @@ const Collection = () => { useNavigationHook(ALL_ROUTER_TYPES.COLLECTION_DETAIL, { collectionName }); - const history = useHistory(); + const navigate = useNavigate(); const location = useLocation(); const { t: collectionTrans } = useTranslation('collection'); @@ -36,7 +36,7 @@ const Collection = () => { const handleTabChange = (activeIndex: number) => { const path = location.pathname; - history.push(`${path}?activeIndex=${activeIndex}`); + navigate(`${path}?activeIndex=${activeIndex}`); }; const tabs: ITab[] = [ diff --git a/client/src/pages/connect/AuthForm.tsx b/client/src/pages/connect/AuthForm.tsx index 6507a2c2..ab35709c 100644 --- a/client/src/pages/connect/AuthForm.tsx +++ b/client/src/pages/connect/AuthForm.tsx @@ -10,7 +10,7 @@ import { useFormValidation } from '../../hooks/Form'; import { formatForm } from '../../utils/Form'; import { MilvusHttp } from '../../http/Milvus'; import { formatAddress } from '../../utils/Format'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { rootContext } from '../../context/Root'; import { authContext } from '../../context/Auth'; import { MILVUS_ADDRESS } from '../../consts/Localstorage'; @@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) => ({ width: '42px', height: 'auto', marginBottom: '8px', - display: 'block' + display: 'block', }, input: { margin: theme.spacing(3, 0, 0.5), @@ -54,7 +54,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); export const AuthForm = (props: any) => { - const history = useHistory(); + const navigate = useNavigate(); const classes = useStyles(); const { openSnackBar } = useContext(rootContext); @@ -161,7 +161,7 @@ export const AuthForm = (props: any) => { openSnackBar(successTrans('connect')); window.localStorage.setItem(MILVUS_ADDRESS, address); - history.push('/'); + navigate('/'); } catch (error: any) { if (error?.response?.status === CODE_STATUS.UNAUTHORIZED) { showAuthForm diff --git a/client/src/pages/overview/collectionCard/CollectionCard.tsx b/client/src/pages/overview/collectionCard/CollectionCard.tsx index da56d29f..91e097c0 100644 --- a/client/src/pages/overview/collectionCard/CollectionCard.tsx +++ b/client/src/pages/overview/collectionCard/CollectionCard.tsx @@ -7,7 +7,7 @@ import CustomToolTip from '../../../components/customToolTip/CustomToolTip'; import { CollectionCardProps } from './Types'; import { useTranslation } from 'react-i18next'; import CustomIconButton from '../../../components/customButton/CustomIconButton'; -import { useHistory, Link } from 'react-router-dom'; +import { useNavigate, Link } from 'react-router-dom'; import { LOADING_STATE } from '../../../consts/Milvus'; const useStyles = makeStyles((theme: Theme) => ({ @@ -84,7 +84,7 @@ const CollectionCard: FC = ({ _rowCount: rowCount, _loadedPercentage, } = data; - const history = useHistory(); + const navigate = useNavigate(); // icons const RightArrowIcon = icons.rightArrow; const InfoIcon = icons.info; @@ -99,13 +99,14 @@ const CollectionCard: FC = ({ }; const onVectorSearchClick = () => { - history.push({ pathname: '/search', search: `?collectionName=${name}` }); + navigate({ pathname: '/search', search: `?collectionName=${name}` }); }; return (
diff --git a/client/yarn.lock b/client/yarn.lock index e47d29ad..c84ec556 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -378,7 +378,7 @@ "@babel/plugin-syntax-jsx" "^7.18.6" "@babel/types" "^7.19.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b" integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw== @@ -692,6 +692,11 @@ prop-types "^15.7.2" reselect "^4.0.0" +"@remix-run/router@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.3.tgz#953b88c20ea00d0eddaffdc1b115c08474aa295d" + integrity sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q== + "@rollup/pluginutils@^4.1.1": version "4.2.1" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d" @@ -884,6 +889,11 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724" integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ== +"@types/history@^4.7.11": + version "4.7.11" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" + integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762" @@ -950,13 +960,20 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== -"@types/react-dom@>=16.9.0", "@types/react-dom@^17.0.0": +"@types/react-dom@>=16.9.0": version "17.0.11" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466" integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q== dependencies: "@types/react" "*" +"@types/react-dom@^18.0.8": + version "18.0.8" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.8.tgz#d2606d855186cd42cc1b11e63a71c39525441685" + integrity sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw== + dependencies: + "@types/react" "*" + "@types/react-highlight-words@^0.16.2": version "0.16.3" resolved "https://registry.yarnpkg.com/@types/react-highlight-words/-/react-highlight-words-0.16.3.tgz#a62e8d31197a33559c38fcbe4c7c1e10d3f78cd8" @@ -971,12 +988,12 @@ dependencies: "@types/react" "*" -"@types/react-router-dom@^5.1.7": - version "5.3.2" - resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.2.tgz#ebd8e145cf056db5c66eb1dac63c72f52e8542ee" - integrity sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ== +"@types/react-router-dom@^5.3.3": + version "5.3.3" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" + integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== dependencies: - "@types/history" "*" + "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router" "*" @@ -1009,7 +1026,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@>=16.9.0", "@types/react@^17.0.0": +"@types/react@*", "@types/react@>=16.9.0": version "17.0.34" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102" integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg== @@ -1018,6 +1035,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@^18.0.25": + version "18.0.25" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.25.tgz#8b1dcd7e56fe7315535a4af25435e0bb55c8ae44" + integrity sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/scheduler@*": version "0.16.2" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" @@ -2030,19 +2056,7 @@ highlight.js@^10.4.1, highlight.js@~10.7.0: resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== -history@^4.9.0: - version "4.10.1" - resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" - integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== - dependencies: - "@babel/runtime" "^7.1.2" - loose-envify "^1.2.0" - resolve-pathname "^3.0.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" - value-equal "^1.0.1" - -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -2295,11 +2309,6 @@ is-weakset@^2.0.1: call-bind "^1.0.2" get-intrinsic "^1.1.1" -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" - integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= - isarray@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" @@ -2548,7 +2557,7 @@ lodash@^4.17.15: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -2619,14 +2628,6 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-create-react-context@^0.4.0: - version "0.4.1" - resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e" - integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ== - dependencies: - "@babel/runtime" "^7.12.1" - tiny-warning "^1.0.3" - minimatch@^3.0.4, minimatch@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" @@ -2801,13 +2802,6 @@ path-parse@^1.0.7: resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== -path-to-regexp@^1.7.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a" - integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA== - dependencies: - isarray "0.0.1" - path-type@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" @@ -2906,14 +2900,13 @@ querystringify@^2.1.1: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== -react-dom@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.23.0" react-error-boundary@^3.1.0: version "3.1.4" @@ -2939,7 +2932,7 @@ react-i18next@^12.0.0: "@babel/runtime" "^7.14.5" html-parse-stringify "^3.0.1" -react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -2964,34 +2957,20 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== -react-router-dom@^5.2.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363" - integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ== +react-router-dom@^6.4.3: + version "6.4.3" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.3.tgz#70093b5f65f85f1df9e5d4182eb7ff3a08299275" + integrity sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ== dependencies: - "@babel/runtime" "^7.12.13" - history "^4.9.0" - loose-envify "^1.3.1" - prop-types "^15.6.2" - react-router "5.2.1" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" + "@remix-run/router" "1.0.3" + react-router "6.4.3" -react-router@5.2.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d" - integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ== - dependencies: - "@babel/runtime" "^7.12.13" - history "^4.9.0" - hoist-non-react-statics "^3.1.0" - loose-envify "^1.3.1" - mini-create-react-context "^0.4.0" - path-to-regexp "^1.7.0" - prop-types "^15.6.2" - react-is "^16.6.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" +react-router@6.4.3: + version "6.4.3" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.3.tgz#9ed3ee4d6e95889e9b075a5d63e29acc7def0d49" + integrity sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA== + dependencies: + "@remix-run/router" "1.0.3" react-syntax-highlighter@^15.4.4: version "15.4.4" @@ -3014,13 +2993,12 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" redent@^3.0.0: version "3.0.0" @@ -3078,11 +3056,6 @@ resolve-from@^4.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== -resolve-pathname@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" - integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== - resolve@^1.22.1: version "1.22.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" @@ -3130,13 +3103,12 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" semver@^6.0.0, semver@^6.3.0: version "6.3.0" @@ -3302,12 +3274,7 @@ test-exclude@^6.0.0: glob "^7.1.4" minimatch "^3.0.4" -tiny-invariant@^1.0.2: - version "1.2.0" - resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" - integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== - -tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3: +tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -3403,11 +3370,6 @@ v8-to-istanbul@^9.0.0: "@types/istanbul-lib-coverage" "^2.0.1" convert-source-map "^1.6.0" -value-equal@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" - integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== - vite-plugin-svgr@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-0.3.0.tgz#c81ac7541df98d361249f9ac06b901ae22744a1b" From a7d74c10185cf41605d71d288aafafb2025c7aa6 Mon Sep 17 00:00:00 2001 From: "ruiyi.jiang" Date: Sat, 12 Nov 2022 17:33:33 +0800 Subject: [PATCH 2/4] uprade to react 18 and react-router-dom v6, discard plugins --- client/src/components/menu/Types.ts | 3 +- client/src/pages/connect/Connect.tsx | 14 ++- client/src/pages/connect/ConnectContainer.tsx | 2 +- .../layout/Layout.tsx => pages/index.tsx} | 107 ++++++++---------- .../{plugins => pages}/search/Constants.ts | 0 .../search/SearchParams.tsx | 0 .../src/{plugins => pages}/search/Styles.ts | 0 client/src/{plugins => pages}/search/Types.ts | 4 +- .../search/VectorSearch.tsx | 2 +- .../{plugins => pages}/system/BaseCard.tsx | 0 .../{plugins => pages}/system/DataCard.tsx | 0 .../system/LineChartCard.tsx | 0 .../system/MiniTopology.tsx | 0 .../system/NodeListView.tsx | 0 .../{plugins => pages}/system/Progress.tsx | 0 .../system/ProgressCard.tsx | 0 .../{plugins => pages}/system/SystemView.tsx | 0 .../{plugins => pages}/system/Topology.tsx | 0 client/src/{plugins => pages}/system/Types.ts | 0 client/src/plugins/search/config.json | 13 --- client/src/plugins/system/config.json | 11 -- client/src/router/Config.ts | 58 ---------- client/src/router/Router.tsx | 72 ++++-------- client/src/router/Types.ts | 6 - 24 files changed, 83 insertions(+), 209 deletions(-) rename client/src/{components/layout/Layout.tsx => pages/index.tsx} (51%) rename client/src/{plugins => pages}/search/Constants.ts (100%) rename client/src/{plugins => pages}/search/SearchParams.tsx (100%) rename client/src/{plugins => pages}/search/Styles.ts (100%) rename client/src/{plugins => pages}/search/Types.ts (95%) rename client/src/{plugins => pages}/search/VectorSearch.tsx (99%) rename client/src/{plugins => pages}/system/BaseCard.tsx (100%) rename client/src/{plugins => pages}/system/DataCard.tsx (100%) rename client/src/{plugins => pages}/system/LineChartCard.tsx (100%) rename client/src/{plugins => pages}/system/MiniTopology.tsx (100%) rename client/src/{plugins => pages}/system/NodeListView.tsx (100%) rename client/src/{plugins => pages}/system/Progress.tsx (100%) rename client/src/{plugins => pages}/system/ProgressCard.tsx (100%) rename client/src/{plugins => pages}/system/SystemView.tsx (100%) rename client/src/{plugins => pages}/system/Topology.tsx (100%) rename client/src/{plugins => pages}/system/Types.ts (100%) delete mode 100644 client/src/plugins/search/config.json delete mode 100644 client/src/plugins/system/config.json delete mode 100644 client/src/router/Config.ts diff --git a/client/src/components/menu/Types.ts b/client/src/components/menu/Types.ts index c818f2c2..b11b56c3 100644 --- a/client/src/components/menu/Types.ts +++ b/client/src/components/menu/Types.ts @@ -1,6 +1,5 @@ import { ButtonProps } from '@material-ui/core/Button'; import { ReactElement } from 'react'; -import { LoadableClassComponent } from '@loadable/component'; export type SimpleMenuType = { label: string; @@ -20,7 +19,7 @@ type CustomIcon = ( ) => React.ReactElement>; export type NavMenuItem = { - icon: CustomIcon | LoadableClassComponent; + icon: CustomIcon; iconActiveClass?: string; iconNormalClass?: string; label: string; diff --git a/client/src/pages/connect/Connect.tsx b/client/src/pages/connect/Connect.tsx index 5a9d7b2c..3537d41b 100644 --- a/client/src/pages/connect/Connect.tsx +++ b/client/src/pages/connect/Connect.tsx @@ -1,11 +1,19 @@ +import { useContext } from 'react'; +import { Navigate } from 'react-router-dom'; import ConnectContainer from './ConnectContainer'; import { AuthForm } from './AuthForm'; +import { authContext } from '../../context/Auth'; const Connect = () => { + const { isAuth } = useContext(authContext); + return ( - - - + <> + {isAuth && } + + + + ); }; diff --git a/client/src/pages/connect/ConnectContainer.tsx b/client/src/pages/connect/ConnectContainer.tsx index 1b2197b2..5cdd091c 100644 --- a/client/src/pages/connect/ConnectContainer.tsx +++ b/client/src/pages/connect/ConnectContainer.tsx @@ -4,7 +4,7 @@ import { ReactElement } from 'react'; const getContainerStyles = makeStyles((theme: Theme) => ({ wrapper: { width: '100%', - height: '90%', + height: '100vh', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', }, diff --git a/client/src/components/layout/Layout.tsx b/client/src/pages/index.tsx similarity index 51% rename from client/src/components/layout/Layout.tsx rename to client/src/pages/index.tsx index 346c84f0..af33fe0c 100644 --- a/client/src/components/layout/Layout.tsx +++ b/client/src/pages/index.tsx @@ -1,15 +1,15 @@ -import GlobalEffect from './GlobalEffect'; -import Header from './Header'; -import { makeStyles, Theme, createStyles } from '@material-ui/core'; -import NavMenu from '../menu/NavMenu'; -import { NavMenuItem } from '../menu/Types'; -import { useContext, useMemo } from 'react'; -import icons from '../icons/Icons'; +import { useMemo, useContext } from 'react'; +import { Outlet, useNavigate, useLocation, Navigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { useNavigate, useLocation } from 'react-router-dom'; -import { authContext } from '../../context/Auth'; -import { rootContext } from '../../context/Root'; -import { IconsType } from '../icons/Types'; +import { makeStyles, Theme, createStyles } from '@material-ui/core'; +import GlobalEffect from '../components/layout/GlobalEffect'; +import Header from '../components/layout/Header'; +import NavMenu from '../components/menu/NavMenu'; +import { NavMenuItem } from '../components/menu/Types'; +import icons from '../components/icons/Icons'; +import { authContext } from '../context/Auth'; +import { rootContext } from '../context/Root'; +import Overview from '../pages/overview/Overview'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -20,13 +20,13 @@ const useStyles = makeStyles((theme: Theme) => content: { display: 'flex', - '& .normalSearchIcon': { + '& .active': { '& path': { fill: theme.palette.attuGrey.dark, }, }, - '& .activeSearchIcon': { + '& .normal': { '& path': { fill: theme.palette.primary.main, }, @@ -42,14 +42,14 @@ const useStyles = makeStyles((theme: Theme) => }) ); -const Layout = (props: any) => { +function Index() { const navigate = useNavigate(); const { isAuth } = useContext(authContext); const { versionInfo } = useContext(rootContext); - const { t: navTrans } = useTranslation('nav'); const classes = useStyles(); const location = useLocation(); + const isIndex = location.pathname === '/'; const defaultActive = useMemo(() => { if (location.pathname.includes('collection')) { return navTrans('collection'); @@ -81,54 +81,37 @@ const Layout = (props: any) => { label: navTrans('collection'), onClick: () => navigate('/collections'), }, + { + icon: icons.navSearch, + label: navTrans('search'), + onClick: () => navigate('/search'), + iconActiveClass: 'normal', + iconNormalClass: 'active', + }, + { + icon: icons.navSystem, + label: navTrans('system'), + onClick: () => navigate('/system'), + iconActiveClass: 'normal', + iconNormalClass: 'active', + }, { icon: icons.navPerson, label: navTrans('user'), onClick: () => navigate('/users'), }, - // { - // icon: icons.navSearch, - // label: navTrans('search'), - // onClick: () => navigate('/search'), - // iconActiveClass: 'activeSearchIcon', - // iconNormalClass: 'normalSearchIcon', - // }, ]; - function importAll(r: any) { - Object.keys(r).forEach((key: any) => { - const content = r[key]; - const pathName = content.client?.path; - - if (!pathName) return; - const result: NavMenuItem = { - icon: icons.navOverview, - label: content.client?.label || 'PLGUIN', - }; - result.onClick = () => navigate(`/${pathName}`); - const iconName: IconsType = content.client?.iconName; - if (iconName) { - result.icon = icons[iconName]; - } - content.client?.iconActiveClass && - (result.iconActiveClass = content.client?.iconActiveClass); - content.client?.iconNormalClass && - (result.iconNormalClass = content.client?.iconNormalClass); - - menuItems.push(result); - }); + // check if is connected + if (!isAuth) { + return ; } - const pluginConfigs = import.meta.glob(`../../plugins/**/config.json`, { - eager: true, - }); - - importAll(pluginConfigs); return ( -
- -
- {isAuth && ( + <> +
+ +
{ defaultOpen={{ [navTrans('overview')]: true }} versionInfo={versionInfo} /> - )} -
- {isAuth &&
} - {props.children} +
+
+ {isIndex ? : } +
-
- -
+ +
+ ); -}; +} -export default Layout; +export default Index; diff --git a/client/src/plugins/search/Constants.ts b/client/src/pages/search/Constants.ts similarity index 100% rename from client/src/plugins/search/Constants.ts rename to client/src/pages/search/Constants.ts diff --git a/client/src/plugins/search/SearchParams.tsx b/client/src/pages/search/SearchParams.tsx similarity index 100% rename from client/src/plugins/search/SearchParams.tsx rename to client/src/pages/search/SearchParams.tsx diff --git a/client/src/plugins/search/Styles.ts b/client/src/pages/search/Styles.ts similarity index 100% rename from client/src/plugins/search/Styles.ts rename to client/src/pages/search/Styles.ts diff --git a/client/src/plugins/search/Types.ts b/client/src/pages/search/Types.ts similarity index 95% rename from client/src/plugins/search/Types.ts rename to client/src/pages/search/Types.ts index 992398f4..3865179c 100644 --- a/client/src/plugins/search/Types.ts +++ b/client/src/pages/search/Types.ts @@ -3,8 +3,8 @@ import { searchKeywordsType } from '../../consts/Milvus'; import { DataTypeEnum, DataTypeStringEnum, -} from '../../pages/collections/Types'; -import { IndexView } from '../../pages/schema/Types'; +} from '../collections/Types'; +import { IndexView } from '../schema/Types'; export interface SearchParamsProps { // if user created index, pass metric type choosed when creating diff --git a/client/src/plugins/search/VectorSearch.tsx b/client/src/pages/search/VectorSearch.tsx similarity index 99% rename from client/src/plugins/search/VectorSearch.tsx rename to client/src/pages/search/VectorSearch.tsx index d6126d00..4432176e 100644 --- a/client/src/plugins/search/VectorSearch.tsx +++ b/client/src/pages/search/VectorSearch.tsx @@ -16,7 +16,7 @@ import SimpleMenu from '../../components/menu/SimpleMenu'; import { TOP_K_OPTIONS } from './Constants'; import { Option } from '../../components/customSelector/Types'; import { CollectionHttp } from '../../http/Collection'; -import { CollectionData, DataTypeEnum } from '../../pages/collections/Types'; +import { CollectionData, DataTypeEnum } from '../collections/Types'; import { IndexHttp } from '../../http/Index'; import { getVectorSearchStyles } from './Styles'; import { parseValue } from '../../utils/Insert'; diff --git a/client/src/plugins/system/BaseCard.tsx b/client/src/pages/system/BaseCard.tsx similarity index 100% rename from client/src/plugins/system/BaseCard.tsx rename to client/src/pages/system/BaseCard.tsx diff --git a/client/src/plugins/system/DataCard.tsx b/client/src/pages/system/DataCard.tsx similarity index 100% rename from client/src/plugins/system/DataCard.tsx rename to client/src/pages/system/DataCard.tsx diff --git a/client/src/plugins/system/LineChartCard.tsx b/client/src/pages/system/LineChartCard.tsx similarity index 100% rename from client/src/plugins/system/LineChartCard.tsx rename to client/src/pages/system/LineChartCard.tsx diff --git a/client/src/plugins/system/MiniTopology.tsx b/client/src/pages/system/MiniTopology.tsx similarity index 100% rename from client/src/plugins/system/MiniTopology.tsx rename to client/src/pages/system/MiniTopology.tsx diff --git a/client/src/plugins/system/NodeListView.tsx b/client/src/pages/system/NodeListView.tsx similarity index 100% rename from client/src/plugins/system/NodeListView.tsx rename to client/src/pages/system/NodeListView.tsx diff --git a/client/src/plugins/system/Progress.tsx b/client/src/pages/system/Progress.tsx similarity index 100% rename from client/src/plugins/system/Progress.tsx rename to client/src/pages/system/Progress.tsx diff --git a/client/src/plugins/system/ProgressCard.tsx b/client/src/pages/system/ProgressCard.tsx similarity index 100% rename from client/src/plugins/system/ProgressCard.tsx rename to client/src/pages/system/ProgressCard.tsx diff --git a/client/src/plugins/system/SystemView.tsx b/client/src/pages/system/SystemView.tsx similarity index 100% rename from client/src/plugins/system/SystemView.tsx rename to client/src/pages/system/SystemView.tsx diff --git a/client/src/plugins/system/Topology.tsx b/client/src/pages/system/Topology.tsx similarity index 100% rename from client/src/plugins/system/Topology.tsx rename to client/src/pages/system/Topology.tsx diff --git a/client/src/plugins/system/Types.ts b/client/src/pages/system/Types.ts similarity index 100% rename from client/src/plugins/system/Types.ts rename to client/src/pages/system/Types.ts diff --git a/client/src/plugins/search/config.json b/client/src/plugins/search/config.json deleted file mode 100644 index 046519f6..00000000 --- a/client/src/plugins/search/config.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "search", - "version": "0.1.0", - "client": { - "path": "search", - "entry": "VectorSearch", - "label": "Vector Search", - "iconName": "navSearch", - "auth": true, - "iconActiveClass": "activeSearchIcon", - "iconNormalClass": "normalSearchIcon" - } -} diff --git a/client/src/plugins/system/config.json b/client/src/plugins/system/config.json deleted file mode 100644 index 494ce769..00000000 --- a/client/src/plugins/system/config.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "system-view", - "version": "0.1.0", - "client": { - "path": "system", - "entry": "SystemView", - "label": "System View", - "iconName": "navSystem", - "auth": true - } -} \ No newline at end of file diff --git a/client/src/router/Config.ts b/client/src/router/Config.ts deleted file mode 100644 index 435a1bc0..00000000 --- a/client/src/router/Config.ts +++ /dev/null @@ -1,58 +0,0 @@ -import Collection from '../pages/collections/Collection'; -import Collections from '../pages/collections/Collections'; -import Connect from '../pages/connect/Connect'; -import Overview from '../pages/overview/Overview'; -// import VectorSearch from '../pages/seach/VectorSearch'; -import { RouterConfigType } from './Types'; -import loadable from '@loadable/component'; -import Users from '../pages/user/User'; - -const RouterConfig: RouterConfigType[] = [ - { - path: '/', - component: Overview, - auth: true, - }, - { - path: '/connect', - component: Connect, - auth: false, - }, - { - path: '/collections', - component: Collections, - auth: true, - }, - { - path: '/collections/:collectionName', - component: Collection, - auth: true, - }, - { path: '/users', component: Users, auth: true }, -]; - -async function importAll(r: any) { - Object.keys(r).forEach((key: any) => { - const content = r[key]; - const dirName = key.split('/config.json').shift().split('/')[1]; - const pathName = content.client?.path; - const fileEntry = content.client?.entry; - if (!pathName || !fileEntry) return; - const auth = content.client?.auth || false; - const OtherComponent = loadable( - () => import(`../${dirName}/${pathName}/${fileEntry}.tsx`) - ); - RouterConfig.push({ - path: `/${pathName}`, - component: OtherComponent, - auth, - }); - }); -} - -const pluginConfigs = import.meta.glob(`../plugins/**/config.json`, { - eager: true, -}); -importAll(pluginConfigs); - -export default RouterConfig; diff --git a/client/src/router/Router.tsx b/client/src/router/Router.tsx index 689fbc36..e92a9cf9 100644 --- a/client/src/router/Router.tsx +++ b/client/src/router/Router.tsx @@ -1,54 +1,26 @@ -import { Switch, Route, Redirect, HashRouter } from 'react-router-dom'; -import routerConfig from './Config'; -import Layout from '../components/layout/Layout'; -import { useContext } from 'react'; -import { authContext } from '../context/Auth'; -/** - * Global responsible for global effect - * Layout responsible for ui view - * - */ -const RouterWrapper = () => { - const { isAuth } = useContext(authContext); +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Collection from '../pages/collections/Collection'; +import Collections from '../pages/collections/Collections'; +import Connect from '../pages/connect/Connect'; +import Users from '../pages/user/User'; +import Index from '../pages/index'; +import Search from '../pages/search/VectorSearch'; +import System from '../pages/system/SystemView'; +const Router = () => { return ( - - - - {routerConfig.map(v => ( - { - const Page = v.component; - return isAuth || !v.auth ? ( - - ) : ( - - ); - }} - /> - ))} - - { - return ( - - ); - }} - > - - - + + + }> + } /> + } /> + } /> + } /> + } /> + + } /> + + ); }; -export default RouterWrapper; +export default Router; diff --git a/client/src/router/Types.ts b/client/src/router/Types.ts index 600de527..65e77eb3 100644 --- a/client/src/router/Types.ts +++ b/client/src/router/Types.ts @@ -18,9 +18,3 @@ export type NavInfo = { navTitle: string; backPath: string; }; - -export type RouterConfigType = { - path: string; - component: any; - auth: boolean; -}; From 748263dcf9c15fe1716f7e05547a28210c01bff3 Mon Sep 17 00:00:00 2001 From: "ruiyi.jiang" Date: Sat, 19 Nov 2022 11:09:12 +0800 Subject: [PATCH 3/4] fix broken filter on collections and partitions --- .../components/customInput/SearchInput.tsx | 65 ++--------- client/src/pages/collections/Collections.tsx | 83 +++++++------- client/src/pages/partitions/Partitions.tsx | 102 +++++++----------- client/src/router/Router.tsx | 53 ++++++--- 4 files changed, 129 insertions(+), 174 deletions(-) diff --git a/client/src/components/customInput/SearchInput.tsx b/client/src/components/customInput/SearchInput.tsx index f0709b21..5fd10e27 100644 --- a/client/src/components/customInput/SearchInput.tsx +++ b/client/src/components/customInput/SearchInput.tsx @@ -1,7 +1,7 @@ import { InputAdornment, makeStyles, TextField } from '@material-ui/core'; import { useRef, FC, useState, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import Icons from '../icons/Icons'; import { SearchType } from './Types'; @@ -75,65 +75,24 @@ const useSearchStyles = makeStyles(theme => ({ }, })); -let timer: NodeJS.Timeout | null = null; - const SearchInput: FC = props => { const { searchText = '', onClear = () => {}, onSearch = () => {} } = props; - const [searchValue, setSearchValue] = useState( - searchText || null - ); - - const [isInit, setIsInit] = useState(true); - - const searched = useMemo( - () => searchValue !== '' && searchValue !== null, - [searchValue] - ); - + const [searchParams, setSearchParams] = useSearchParams(); + const [searchValue, setSearchValue] = useState(searchText || ''); + const searched = useMemo(() => searchValue !== '', [searchValue]); const classes = useSearchStyles({ searched }); const { t: commonTrans } = useTranslation(); - - const navigate = useNavigate(); - const params = useParams(); - const inputRef = useRef(null); - const savedSearchFn = useRef<(value: string) => void>(() => {}); - useEffect(() => { - savedSearchFn.current = onSearch; - }, [onSearch]); + const handleSearch = (value: string) => { + onSearch(value); + }; useEffect(() => { - if (timer) { - clearTimeout(timer); - } - if (searchValue !== null && !isInit) { - timer = setTimeout(() => { - // // save other params data and remove last time search info - // const location = navigate.location; - // const params = new URLSearchParams(location.search); - // params.delete('search'); - - // if (searchValue) { - // params.append('search', searchValue); - // } - // // add search value in url - // history.push({ search: params.toString() }); - - savedSearchFn.current(searchValue); - }, 300); - } - - return () => { - timer && clearTimeout(timer); - }; - }, [searchValue, history, isInit]); - - const handleSearch = (value: string | null) => { - if (value !== null) { - onSearch(value); - } - }; + searchParams[searchValue ? 'set' : 'delete']('search', searchValue); + setSearchParams(searchParams); + handleSearch(searchValue); + }, [searchValue]); return (
@@ -151,7 +110,6 @@ const SearchInput: FC = props => { className={`flex-center ${classes.iconWrapper}`} onClick={e => { setSearchValue(''); - setIsInit(false); inputRef.current.focus(); onClear(); }} @@ -174,7 +132,6 @@ const SearchInput: FC = props => { onChange={e => { const value = e.target.value.trim(); setSearchValue(value); - setIsInit(false); if (value === '') { onClear(); } diff --git a/client/src/pages/collections/Collections.tsx b/client/src/pages/collections/Collections.tsx index e81a894c..1962b31c 100644 --- a/client/src/pages/collections/Collections.tsx +++ b/client/src/pages/collections/Collections.tsx @@ -1,5 +1,5 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useSearchParams } from 'react-router-dom'; import { useNavigationHook } from '../../hooks/Navigation'; import { ALL_ROUTER_TYPES } from '../../router/Types'; import AttuGrid from '../../components/grid/Grid'; @@ -30,7 +30,6 @@ import { useLoadAndReleaseDialogHook, } from '../../hooks/Dialog'; import Highlighter from 'react-highlight-words'; -import { parseLocationSearch } from '../../utils/Format'; import InsertContainer from '../../components/insert/Container'; import ImportSample from '../../components/insert/ImportSample'; import { MilvusHttp } from '../../http/Milvus'; @@ -63,16 +62,14 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -let timer: NodeJS.Timeout | null = null; -// get init search value from url -const { urlSearch = '' } = parseLocationSearch(window.location.search); - const Collections = () => { useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS); const { handleAction } = useLoadAndReleaseDialogHook({ type: 'collection' }); const { handleInsertDialog } = useInsertDialogHook(); - - const [search, setSearch] = useState(urlSearch); + const [searchParams] = useSearchParams(); + const [search, setSearch] = useState( + (searchParams.get('search') as string) || '' + ); const [loading, setLoading] = useState(false); const [selectedCollections, setSelectedCollections] = useState< CollectionView[] @@ -92,13 +89,38 @@ const Collections = () => { const InfoIcon = icons.info; const SourceIcon = icons.source; - const searchedCollections = useMemo( - () => collections.filter(collection => collection._name.includes(search)), - [collections, search] - ); + const fetchData = useCallback(async () => { + try { + setLoading(true); + const res = await CollectionHttp.getCollections(); + const hasLoadingOrBuildingCollection = res.some( + v => checkLoading(v) || checkIndexBuilding(v) + ); + + // if some collection is building index or loading, start pulling data + if (hasLoadingOrBuildingCollection) { + MilvusHttp.triggerCron({ + name: WS_EVENTS.COLLECTION, + type: WS_EVENTS_TYPE.START, + }); + } + + setCollections(res); + } finally { + setLoading(false); + } + }, [setCollections]); + + useEffect(() => { + fetchData(); + }, [fetchData]); const formatCollections = useMemo(() => { - const data = searchedCollections.map(v => { + const filteredCollections = search + ? collections.filter(collection => collection._name.includes(search)) + : collections; + + const data = filteredCollections.map(v => { // const indexStatus = statusRes.find(item => item._name === v._name); Object.assign(v, { nameElement: ( @@ -117,11 +139,13 @@ const Collections = () => { ), }); - return v; }); + return data; - }, [classes.highlight, classes.link, search, searchedCollections]); + }, [search, collections]); + + console.log('render collections'); const { pageSize, @@ -135,32 +159,6 @@ const Collections = () => { orderBy, } = usePaginationHook(formatCollections); - const fetchData = useCallback(async () => { - try { - setLoading(true); - const res = await CollectionHttp.getCollections(); - const hasLoadingOrBuildingCollection = res.some( - v => checkLoading(v) || checkIndexBuilding(v) - ); - - // if some collection is building index or loading, start pulling data - if (hasLoadingOrBuildingCollection) { - MilvusHttp.triggerCron({ - name: WS_EVENTS.COLLECTION, - type: WS_EVENTS_TYPE.START, - }); - } - - setCollections(res); - } finally { - setLoading(false); - } - }, [setCollections]); - - useEffect(() => { - fetchData(); - }, [fetchData]); - const handleInsert = async ( collectionName: string, partitionName: string, @@ -271,9 +269,6 @@ const Collections = () => { }; const handleSearch = (value: string) => { - if (timer) { - clearTimeout(timer); - } setSearch(value); }; diff --git a/client/src/pages/partitions/Partitions.tsx b/client/src/pages/partitions/Partitions.tsx index ae2e8b43..545bcde7 100644 --- a/client/src/pages/partitions/Partitions.tsx +++ b/client/src/pages/partitions/Partitions.tsx @@ -1,10 +1,7 @@ import { makeStyles, Theme } from '@material-ui/core'; -import { FC, useCallback, useContext, useEffect, useState } from 'react'; -import { - PartitionManageParam, - // PartitionParam, - PartitionView, -} from './Types'; +import { FC, useContext, useEffect, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { PartitionManageParam, PartitionView } from './Types'; import AttuGrid from '../../components/grid/Grid'; import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types'; import { useTranslation } from 'react-i18next'; @@ -14,13 +11,9 @@ import CustomToolTip from '../../components/customToolTip/CustomToolTip'; import { rootContext } from '../../context/Root'; import CreatePartition from './Create'; import { PartitionHttp } from '../../http/Partition'; -import Status from '../../components/status/Status'; import { ManageRequestMethods } from '../../types/Common'; -// import { StatusEnum } from '../../components/status/Types'; -// import { useDialogHook } from '../../hooks/Dialog'; import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate'; import Highlighter from 'react-highlight-words'; -import { parseLocationSearch } from '../../utils/Format'; import { useInsertDialogHook } from '../../hooks/Dialog'; import InsertContainer from '../../components/insert/Container'; import { CollectionHttp } from '../../http/Collection'; @@ -45,8 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({ let timer: NodeJS.Timeout | null = null; // get init search value from url -const { search = '' } = parseLocationSearch(window.location.search); - +// const { search = '' } = parseLocationSearch(window.location.search); const Partitions: FC<{ collectionName: string; }> = ({ collectionName }) => { @@ -55,6 +47,10 @@ const Partitions: FC<{ const { t: successTrans } = useTranslation('success'); const { t: btnTrans } = useTranslation('btn'); const { t: dialogTrans } = useTranslation('dialog'); + const [searchParams] = useSearchParams(); + const [search, setSearch] = useState( + (searchParams.get('search') as string) || '' + ); const InfoIcon = icons.info; const { handleInsertDialog } = useInsertDialogHook(); @@ -81,35 +77,15 @@ const Partitions: FC<{ const { setDialog, handleCloseDialog, openSnackBar } = useContext(rootContext); - const fetchPartitions = useCallback( - async (collectionName: string) => { - try { - const res = await PartitionHttp.getPartitions(collectionName); - - const partitions: PartitionView[] = res.map(p => - Object.assign(p, { - _nameElement: ( - - ), - _statusElement: , - }) - ); - const filteredPartitions = partitions.filter(p => - p._formatName.includes(search) - ); - setLoading(false); - setPartitions(partitions); - setSearchedPartitions(filteredPartitions); - } catch (err) { - setLoading(false); - } - }, - [classes.highlight] - ); + const fetchPartitions = async (collectionName: string) => { + try { + const res = await PartitionHttp.getPartitions(collectionName); + setLoading(false); + setPartitions(res); + } catch (err) { + setLoading(false); + } + }; const fetchCollectionDetail = async (name: string) => { const res = await CollectionHttp.getCollection(name); @@ -118,33 +94,18 @@ const Partitions: FC<{ useEffect(() => { fetchPartitions(collectionName); - }, [collectionName, fetchPartitions]); - - const handleDelete = async () => { - for (const partition of selectedPartitions) { - const param: PartitionManageParam = { - partitionName: partition._name, - collectionName, - type: ManageRequestMethods.DELETE, - }; - await PartitionHttp.managePartition(param); - } - - openSnackBar(successTrans('delete', { name: t('partition') })); - fetchPartitions(collectionName); - handleCloseDialog(); - }; + }, [collectionName]); - const handleSearch = (value: string) => { + useEffect(() => { if (timer) { clearTimeout(timer); } // add loading manually setLoading(true); timer = setTimeout(() => { - const searchWords = [value]; - const list = value - ? partitions.filter(p => p._formatName.includes(value)) + const searchWords = [search]; + const list = search + ? partitions.filter(p => p._formatName.includes(search)) : partitions; const highlightList = list.map(c => { @@ -162,6 +123,25 @@ const Partitions: FC<{ setLoading(false); setSearchedPartitions(highlightList); }, 300); + }, [search, partitions]); + + const handleDelete = async () => { + for (const partition of selectedPartitions) { + const param: PartitionManageParam = { + partitionName: partition._name, + collectionName, + type: ManageRequestMethods.DELETE, + }; + await PartitionHttp.managePartition(param); + } + + openSnackBar(successTrans('delete', { name: t('partition') })); + fetchPartitions(collectionName); + handleCloseDialog(); + }; + + const handleSearch = (value: string) => { + setSearch(value); }; const handleInsert = async ( diff --git a/client/src/router/Router.tsx b/client/src/router/Router.tsx index e92a9cf9..116e4688 100644 --- a/client/src/router/Router.tsx +++ b/client/src/router/Router.tsx @@ -1,4 +1,10 @@ -import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { + BrowserRouter, + Routes, + Route, + createBrowserRouter, + RouterProvider, +} from 'react-router-dom'; import Collection from '../pages/collections/Collection'; import Collections from '../pages/collections/Collections'; import Connect from '../pages/connect/Connect'; @@ -7,20 +13,37 @@ import Index from '../pages/index'; import Search from '../pages/search/VectorSearch'; import System from '../pages/system/SystemView'; +const router = createBrowserRouter([ + { + path: '/', + element: , + children: [ + { + path: '/collections', + element: , + }, + { + path: '/collections/:collectionName', + element: , + }, + { + path: '/users', + element: , + }, + { + path: '/search', + element: , + }, + { + path: '/system', + element: , + }, + ], + }, + { path: '/connect', element: }, +]); + const Router = () => { - return ( - - - }> - } /> - } /> - } /> - } /> - } /> - - } /> - - - ); + return ; }; export default Router; From b523692685dec5d9a6d482ed31ee5f407825b8bf Mon Sep 17 00:00:00 2001 From: shanghaikid Date: Tue, 22 Nov 2022 14:16:26 +0800 Subject: [PATCH 4/4] remove console --- client/src/pages/collections/Collections.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/src/pages/collections/Collections.tsx b/client/src/pages/collections/Collections.tsx index 1962b31c..2581d984 100644 --- a/client/src/pages/collections/Collections.tsx +++ b/client/src/pages/collections/Collections.tsx @@ -145,8 +145,6 @@ const Collections = () => { return data; }, [search, collections]); - console.log('render collections'); - const { pageSize, handlePageSize,