From 07fc848814527584910c87f5c0675bc9bffb6ee8 Mon Sep 17 00:00:00 2001 From: RotPublic <63988781+xiaoyixin-cmd@users.noreply.github.com> Date: Fri, 18 Nov 2022 14:46:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=20=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E6=A8=A1=E5=9D=97=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=20(#1159)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * routeChange * 11-17 * 11-17 02 * 11-17 04 * routechange2 * 11-18 * 11-18 2 * 112 * x2paddle * x2paddle * x2paddles * x2paddles --- frontend/packages/core/src/App.tsx | 13 +-- .../packages/core/src/components/Navbar.tsx | 101 +++++++++++++++++- frontend/packages/core/src/routes/index.ts | 4 +- .../packages/mock/data/app/component_tabs.js | 33 ++++++ 4 files changed, 136 insertions(+), 15 deletions(-) create mode 100644 frontend/packages/mock/data/app/component_tabs.js diff --git a/frontend/packages/core/src/App.tsx b/frontend/packages/core/src/App.tsx index 6cd54d8d..79403418 100644 --- a/frontend/packages/core/src/App.tsx +++ b/frontend/packages/core/src/App.tsx @@ -16,13 +16,12 @@ // cSpell:words pageview inited import 'antd/dist/antd.css'; -import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo} from 'react'; -import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom'; +import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react'; +import {Redirect, Route, BrowserRouter as Router, Switch, useLocation, useHistory} from 'react-router-dom'; import {THEME, matchMedia} from '~/utils/theme'; import {actions, selectors} from '~/store'; import {headerHeight, position, size, zIndexes, setRem} from '~/utils/style'; import {useDispatch, useSelector} from 'react-redux'; - import ErrorBoundary from '~/components/ErrorBoundary'; import ErrorPage from '~/pages/error'; import {Helmet} from 'react-helmet'; @@ -33,7 +32,7 @@ import {ToastContainer} from 'react-toastify'; import {fetcher} from '~/utils/fetch'; import routes from '~/routes'; import styled from 'styled-components'; -import {useTranslation} from 'react-i18next'; +import {setDefaults, useTranslation} from 'react-i18next'; const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI; @@ -48,7 +47,6 @@ const Header = styled.header` ${position('fixed', 0, 0, null, 0)} `; -const defaultRoute = routes.find(route => route.default); const routers = routes.reduce[]>((m, route) => { if (route.children) { m.push(...route.children); @@ -79,7 +77,7 @@ const Telemetry: FunctionComponent = () => { const App: FunctionComponent = () => { const {t, i18n} = useTranslation('errors'); - + const [defaultRoute, setDefaultRoute] = useState(''); const dir = useMemo(() => (i18n.language ? i18n.dir(i18n.language) : ''), [i18n]); const dispatch = useDispatch(); @@ -107,7 +105,6 @@ const App: FunctionComponent = () => { }; } }, [toggleTheme]); - return (
@@ -129,7 +126,7 @@ const App: FunctionComponent = () => { }> }> - + {routers.map(route => ( ))} diff --git a/frontend/packages/core/src/components/Navbar.tsx b/frontend/packages/core/src/components/Navbar.tsx index dd3637ff..c3cf7a0b 100644 --- a/frontend/packages/core/src/components/Navbar.tsx +++ b/frontend/packages/core/src/components/Navbar.tsx @@ -17,6 +17,7 @@ // cspell:words cimode import {Link, LinkProps, useLocation} from 'react-router-dom'; +import {useHistory} from 'react-router-dom'; import React, {FunctionComponent, useCallback, useEffect, useMemo, useState} from 'react'; import {border, borderRadius, rem, size, transitionProps, triangle} from '~/utils/style'; @@ -26,6 +27,7 @@ import type {Route} from '~/routes'; import ThemeToggle from '~/components/ThemeToggle'; import Tippy from '@tippyjs/react'; import ee from '~/utils/event'; +import routes from '~/routes'; import {getApiToken} from '~/utils/fetch'; import logo from '~/assets/images/logo.svg'; import queryString from 'query-string'; @@ -33,6 +35,8 @@ import styled from 'styled-components'; import useClassNames from '~/hooks/useClassNames'; import useComponents from '~/hooks/useComponents'; import {useTranslation} from 'react-i18next'; +import {fetcher} from '~/utils/fetch'; +import {Child} from './ProfilerPage/OperatorView/type'; const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI; const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH; @@ -261,9 +265,10 @@ const SubNav: FunctionComponent<{ ); const Navbar: FunctionComponent = () => { + const history = useHistory(); const {t, i18n} = useTranslation('common'); const {pathname} = useLocation(); - + const [navList, setNavlist] = useState([]); const changeLanguage = useCallback(() => { const language = i18n.language; const allLanguages = (i18n.options.supportedLngs || []).filter(lng => lng !== 'cimode'); @@ -271,13 +276,68 @@ const Navbar: FunctionComponent = () => { const nextLanguage = index < 0 || index >= allLanguages.length - 1 ? allLanguages[0] : allLanguages[index + 1]; i18n.changeLanguage(nextLanguage); }, [i18n]); - + const routeEm: any = useMemo(() => { + return { + scalar: 'scalar', + histogram: 'histogram', + image: 'image', + audio: 'audio', + text: 'text', + graphStatic: 'dynamic_graph', + graphDynamic: 'dynamic_graph', + 'high-dimensional': 'embeddings', + 'pr-curve': 'pr_curve', + 'roc-curve': 'roc_curve', + profiler: 'profiler', + 'hyper-parameter': 'hyper_parameters', + x2paddle: 'x2paddle', + fastdeploy_server: 'fastdeploy_server' + }; + }, []); const currentPath = useMemo(() => pathname.replace(BASE_URI, ''), [pathname]); const [components] = useComponents(); + const routePush = (route: any, Components: any[]) => { + if (navList.includes(routeEm[route.id])) { + // debugger; - const componentsInNavbar = useMemo(() => components.slice(0, MAX_ITEM_COUNT_IN_NAVBAR), [components]); - const flattenMoreComponents = useMemo(() => flatten(components.slice(MAX_ITEM_COUNT_IN_NAVBAR)), [components]); + return true; + // setDefaultRoute(route.id); + } + if (route.children) { + for (const Route of route.children) { + routePush(Route, Components); + } + } + }; + const newcomponents = useMemo(() => { + const Components = []; + const parent: any[] = []; + if (navList.length > 0) { + for (const item of components) { + // debugger; + // const Id: any = item.id; + if (navList.includes(routeEm[item.id])) { + Components.push(item); + } + if (item.children) { + for (const Route of item.children) { + const flag = routePush(Route, Components); + if (flag && !parent.includes(item.id)) { + parent.push(item.id); + Components.push(item); + } + } + } + } + } + return Components; + }, [components, navList]); + const componentsInNavbar = useMemo(() => newcomponents.slice(0, MAX_ITEM_COUNT_IN_NAVBAR), [newcomponents]); + const flattenMoreComponents = useMemo( + () => flatten(newcomponents.slice(MAX_ITEM_COUNT_IN_NAVBAR)), + [newcomponents] + ); const componentsInMoreMenu = useMemo( () => flattenMoreComponents.map(item => ({ @@ -287,6 +347,36 @@ const Navbar: FunctionComponent = () => { [currentPath, flattenMoreComponents] ); const [navItemsInNavbar, setNavItemsInNavbar] = useState([]); + const routesChange = (route: any) => { + if (navList.includes(routeEm[route.id])) { + // debugger; + history.push(`/${route.id}`); + return true; + // setDefaultRoute(route.id); + } + if (route.Children) { + for (const Route of route.Children) { + routesChange(Route); + } + } + }; + useEffect(() => { + // setLoading(true); + fetcher('/component_tabs').then((res: any) => { + setNavlist(res); + }); + }, []); + useEffect(() => { + // const defaultRoute = routes; + if (navList.length > 0) { + for (const route of routes) { + const flag = routesChange(route); + if (flag) { + return; + } + } + } + }, [navList]); useEffect(() => { setNavItemsInNavbar(oldItems => componentsInNavbar.map(item => { @@ -325,7 +415,8 @@ const Navbar: FunctionComponent = () => { }; }) ); - }, [componentsInNavbar, currentPath]); + }, [componentsInNavbar, currentPath, navList]); + console.log('componentsInNavbar', componentsInNavbar); return (