From 44c5c0eff67baab3c576799bae853b1d8d2d227f Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 11 Apr 2024 14:24:33 +0800 Subject: [PATCH 1/3] move LOG OUT button to MenuSide --- xinference/web/ui/src/components/MenuSide.js | 198 +++++++++++-------- xinference/web/ui/src/components/Title.js | 25 --- 2 files changed, 113 insertions(+), 110 deletions(-) diff --git a/xinference/web/ui/src/components/MenuSide.js b/xinference/web/ui/src/components/MenuSide.js index 429f454032..5968ab5575 100644 --- a/xinference/web/ui/src/components/MenuSide.js +++ b/xinference/web/ui/src/components/MenuSide.js @@ -6,6 +6,7 @@ import { RocketLaunchOutlined, SmartToyOutlined, } from '@mui/icons-material' +import ExitToAppIcon from '@mui/icons-material/ExitToApp' import { Box, Drawer, @@ -17,10 +18,13 @@ import { Typography, useTheme, } from '@mui/material' +import Button from '@mui/material/Button' import { useEffect, useState } from 'react' +import { useCookies } from 'react-cookie' import { useLocation, useNavigate } from 'react-router-dom' import icon from '../media/icon.webp' +import { isValidBearerToken } from './utils' const navItems = [ { @@ -54,6 +58,12 @@ const MenuSide = () => { `${Math.min(Math.max(window.innerWidth * 0.2, 287), 320)}px` ) + const [cookie, removeCookie] = useCookies(['token']) + const handleLogout = () => { + removeCookie('token', { path: '/' }) + navigate('/login', { replace: true }) + } + useEffect(() => { setActive(pathname.substring(1)) }, [pathname]) @@ -92,101 +102,119 @@ const MenuSide = () => { }, }} > - {/* Title */} - - - + + {/* Title */} + + - - - {'Xinference'} - + display="flex" + justifyContent="space-between" + alignItems="center" + textTransform="none" + > + + + + {'Xinference'} + + - - - - - - {navItems.map(({ text, icon }) => { - if (!icon) { - return ( - - {text} - - ) - } + + + + + {navItems.map(({ text, icon }) => { + if (!icon) { + return ( + + {text} + + ) + } - const link = text.toLowerCase().replace(' ', '_') + const link = text.toLowerCase().replace(' ', '_') - return ( - - { - if (link === 'contact_us') { - window.open( - 'https://github.com/xorbitsai/inference', - '_blank', - 'noreferrer' - ) - } else if (link === 'launch_model') { - sessionStorage.setItem('modelType', '/launch_model/llm') - navigate('/launch_model/llm') - setActive(link) - console.log(active) - } else if (link === 'cluster_information') { - navigate('/cluster_info') - setActive(link) - } else if (link === 'running_models') { - navigate('/running_models/LLM') - sessionStorage.setItem( - 'runningModelType', - '/running_models/LLM' - ) - setActive(link) - console.log(active) - } else { - navigate(`/${link}`) - setActive(link) - console.log(active) - } - }} - > - + { + if (link === 'contact_us') { + window.open( + 'https://github.com/xorbitsai/inference', + '_blank', + 'noreferrer' + ) + } else if (link === 'launch_model') { + sessionStorage.setItem( + 'modelType', + '/launch_model/llm' + ) + navigate('/launch_model/llm') + setActive(link) + console.log(active) + } else if (link === 'cluster_information') { + navigate('/cluster_info') + setActive(link) + } else if (link === 'running_models') { + navigate('/running_models/LLM') + sessionStorage.setItem( + 'runningModelType', + '/running_models/LLM' + ) + setActive(link) + console.log(active) + } else { + navigate(`/${link}`) + setActive(link) + console.log(active) + } }} > - {icon} - - - - - - ) - })} - + + {icon} + + + + + + ) + })} + + + + + {isValidBearerToken(cookie.token) && ( + + )} ) diff --git a/xinference/web/ui/src/components/Title.js b/xinference/web/ui/src/components/Title.js index c622c7e46e..15dd2190c9 100644 --- a/xinference/web/ui/src/components/Title.js +++ b/xinference/web/ui/src/components/Title.js @@ -1,21 +1,6 @@ -import ExitToAppIcon from '@mui/icons-material/ExitToApp' import { Box, Stack, Typography } from '@mui/material' -import Button from '@mui/material/Button' -import { useCookies } from 'react-cookie' -import { useNavigate } from 'react-router-dom' - -import { isValidBearerToken } from './utils' const Title = ({ title }) => { - const [cookie, , removeCookie] = useCookies(['token']) - const navigate = useNavigate() - - const handleLogout = () => { - removeCookie('token', { path: '/' }) - sessionStorage.removeItem('token') - navigate('/login', { replace: true }) - } - return ( @@ -27,16 +12,6 @@ const Title = ({ title }) => { > {title} - {isValidBearerToken(cookie.token) && ( - - )} ) From 0622ed6aa621141f9ebb174186e7ddb2fa5425f5 Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 11 Apr 2024 14:52:31 +0800 Subject: [PATCH 2/3] refractor nav items --- xinference/web/ui/src/components/MenuSide.js | 50 ++++++++------------ 1 file changed, 20 insertions(+), 30 deletions(-) diff --git a/xinference/web/ui/src/components/MenuSide.js b/xinference/web/ui/src/components/MenuSide.js index 5968ab5575..0d74b7fc10 100644 --- a/xinference/web/ui/src/components/MenuSide.js +++ b/xinference/web/ui/src/components/MenuSide.js @@ -30,22 +30,29 @@ const navItems = [ { text: 'Launch Model', icon: , + link: '/launch_model/llm', + sessionKey: 'modelType', }, { text: 'Running Models', icon: , + link: '/running_models/LLM', + sessionKey: 'runningModelType', }, { text: 'Register Model', icon: , + link: '/register_model', }, { text: 'Cluster Information', icon: , + link: '/cluster_info', }, { text: 'Contact Us', icon: , + link: 'https://github.com/xorbitsai/inference', }, ] @@ -66,6 +73,11 @@ const MenuSide = () => { useEffect(() => { setActive(pathname.substring(1)) + console.log( + '【Debug】选择：', + pathname.split('/').filter((p) => p), + 'index: ' + ) }, [pathname]) useEffect(() => { @@ -139,7 +151,7 @@ const MenuSide = () => { - {navItems.map(({ text, icon }) => { + {navItems.map(({ text, icon, link, sessionKey }) => { if (!icon) { return ( @@ -148,41 +160,19 @@ const MenuSide = () => { ) } - const link = text.toLowerCase().replace(' ', '_') - return ( { - if (link === 'contact_us') { - window.open( - 'https://github.com/xorbitsai/inference', - '_blank', - 'noreferrer' - ) - } else if (link === 'launch_model') { - sessionStorage.setItem( - 'modelType', - '/launch_model/llm' - ) - navigate('/launch_model/llm') - setActive(link) - console.log(active) - } else if (link === 'cluster_information') { - navigate('/cluster_info') - setActive(link) - } else if (link === 'running_models') { - navigate('/running_models/LLM') - sessionStorage.setItem( - 'runningModelType', - '/running_models/LLM' - ) - setActive(link) - console.log(active) + if (link.toLowerCase().startsWith('http')) { + window.open(link, '_blank', 'noreferrer') } else { - navigate(`/${link}`) - setActive(link) + navigate(link) + setActive(link.substring(1)) console.log(active) + if (sessionKey) { + sessionStorage.setItem(sessionKey, link) + } } }} > From 4657857c09c461f928ee3b27a9fab27960d1d53d Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 11 Apr 2024 15:03:08 +0800 Subject: [PATCH 3/3] highlighting current nav button --- xinference/web/ui/src/components/MenuSide.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/xinference/web/ui/src/components/MenuSide.js b/xinference/web/ui/src/components/MenuSide.js index 0d74b7fc10..447fc7edf7 100644 --- a/xinference/web/ui/src/components/MenuSide.js +++ b/xinference/web/ui/src/components/MenuSide.js @@ -71,13 +71,17 @@ const MenuSide = () => { navigate('/login', { replace: true }) } + const [selectedIndex, setSelectedIndex] = useState(-1) + useEffect(() => { setActive(pathname.substring(1)) - console.log( - '【Debug】选择：', - pathname.split('/').filter((p) => p), - 'index: ' + const pathFirst = pathname.split('/').filter((p) => p)[0] + const idx = navItems.findIndex( + (item) => item.link.split('/').filter((p) => p)[0] === pathFirst ) + if (idx > -1) { + setSelectedIndex(idx) + } }, [pathname]) useEffect(() => { @@ -151,7 +155,7 @@ const MenuSide = () => { - {navItems.map(({ text, icon, link, sessionKey }) => { + {navItems.map(({ text, icon, link, sessionKey }, index) => { if (!icon) { return ( @@ -175,6 +179,7 @@ const MenuSide = () => { } } }} + selected={selectedIndex === index} >