Skip to content

ENH: MenuSide: log_out button and highlighting selected nav item #1285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

ENH: MenuSide: log_out button and highlighting selected nav item #1285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
44c5c0e
move LOG OUT button to MenuSide
Minamiyama Apr 11, 2024
0622ed6
refractor nav items
Minamiyama Apr 11, 2024
4657857
highlighting current nav button
Minamiyama Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 109 additions & 86 deletions xinference/web/ui/src/components/MenuSide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
RocketLaunchOutlined,
SmartToyOutlined,
} from '@mui/icons-material'
import ExitToAppIcon from '@mui/icons-material/ExitToApp'
import {
Box,
Drawer,
Expand All @@ -17,31 +18,41 @@ 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 = [
{
text: 'Launch Model',
icon: <RocketLaunchOutlined />,
link: '/launch_model/llm',
sessionKey: 'modelType',
},
{
text: 'Running Models',
icon: <SmartToyOutlined />,
link: '/running_models/LLM',
sessionKey: 'runningModelType',
},
{
text: 'Register Model',
icon: <AddBoxOutlined />,
link: '/register_model',
},
{
text: 'Cluster Information',
icon: <DnsOutlined />,
link: '/cluster_info',
},
{
text: 'Contact Us',
icon: <GitHub />,
link: 'https://github.com/xorbitsai/inference',
},
]

Expand All @@ -54,8 +65,23 @@ 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 })
}

const [selectedIndex, setSelectedIndex] = useState(-1)

useEffect(() => {
setActive(pathname.substring(1))
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(() => {
Expand Down Expand Up @@ -92,101 +118,98 @@ const MenuSide = () => {
},
}}
>
{/* Title */}
<Box
display="flex"
justifyContent="center"
alignItems="center"
width="100%"
>
<Box display="flex" m="2rem 1rem 0rem 1rem" width="217px">
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
textTransform="none"
>
<Box flex="1" display="flex" flexDirection="column">
{/* Title */}
<Box
display="flex"
justifyContent="center"
alignItems="center"
width="100%"
>
<Box display="flex" m="2rem 1rem 0rem 1rem" width="217px">
<Box
component="img"
alt="profile"
src={icon}
height="60px"
width="60px"
borderRadius="50%"
sx={{ objectFit: 'cover', mr: 1.5 }}
/>
<Box textAlign="left">
<Typography fontWeight="bold" fontSize="1.7rem">
{'Xinference'}
</Typography>
display="flex"
justifyContent="space-between"
alignItems="center"
textTransform="none"
>
<Box
component="img"
alt="profile"
src={icon}
height="60px"
width="60px"
borderRadius="50%"
sx={{ objectFit: 'cover', mr: 1.5 }}
/>
<Box textAlign="left">
<Typography fontWeight="bold" fontSize="1.7rem">
{'Xinference'}
</Typography>
</Box>
</Box>
</Box>
</Box>
</Box>

<Box>
<Box width="100%">
<Box m="1.5rem 2rem 2rem 3rem"></Box>
<List>
{navItems.map(({ text, icon }) => {
if (!icon) {
return (
<Typography key={text} sx={{ m: '2.25rem 0 1rem 3rem' }}>
{text}
</Typography>
)
}
<Box>
<Box width="100%">
<Box m="1.5rem 2rem 2rem 3rem"></Box>
<List>
{navItems.map(({ text, icon, link, sessionKey }, index) => {
if (!icon) {
return (
<Typography key={text} sx={{ m: '2.25rem 0 1rem 3rem' }}>
{text}
</Typography>
)
}

const link = text.toLowerCase().replace(' ', '_')

return (
<ListItem key={text}>
<ListItemButton
onClick={() => {
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)
}
}}
>
<ListItemIcon
sx={{
ml: '2rem',
return (
<ListItem key={text}>
<ListItemButton
onClick={() => {
if (link.toLowerCase().startsWith('http')) {
window.open(link, '_blank', 'noreferrer')
} else {
navigate(link)
setActive(link.substring(1))
console.log(active)
if (sessionKey) {
sessionStorage.setItem(sessionKey, link)
}
}
}}
selected={selectedIndex === index}
>
{icon}
</ListItemIcon>
<ListItemText primary={text} />
<ChevronRightOutlined sx={{ ml: 'auto' }} />
</ListItemButton>
</ListItem>
)
})}
</List>
<ListItemIcon
sx={{
ml: '2rem',
}}
>
{icon}
</ListItemIcon>
<ListItemText primary={text} />
<ChevronRightOutlined sx={{ ml: 'auto' }} />
</ListItemButton>
</ListItem>
)
})}
</List>
</Box>
</Box>

<Box flexGrow={1}></Box>
{isValidBearerToken(cookie.token) && (
<Button
variant="outlined"
size="large"
onClick={handleLogout}
startIcon={<ExitToAppIcon />}
sx={{ m: '1rem', mt: 'auto' }} // 使用marginTop: 'auto'来推动按钮到底部，并添加一些外边距
>
LOG OUT
</Button>
)}
</Box>
</Drawer>
)
Expand Down
25 changes: 0 additions & 25 deletions xinference/web/ui/src/components/Title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Box mb="30px">
<Stack direction="row" alignItems="center" justifyContent="space-between">
Expand All @@ -27,16 +12,6 @@ const Title = ({ title }) => {
>
{title}
</Typography>
{isValidBearerToken(cookie.token) && (
<Button
variant="outlined"
size="large"
onClick={handleLogout}
startIcon={<ExitToAppIcon />}
>
LOG OUT
</Button>
)}
</Stack>
</Box>
)
Expand Down
Loading