BUG: Fix authority and jump issue (#1276)

xinference/web/ui/src/App.js

@@ -2,18 +2,13 @@ import { CssBaseline, ThemeProvider } from '@mui/material'
 import Snackbar from '@mui/material/Snackbar'
 import React, { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
-import { HashRouter, Route, Routes } from 'react-router-dom'
+import { HashRouter } from 'react-router-dom'
 
 import { Alert } from './components/alertComponent'
 import { ApiContextProvider } from './components/apiContext'
 import AuthAlertDialog from './components/authAlertDialog'
-import { getEndpoint, isValidBearerToken } from './components/utils'
-import Layout from './scenes/_layout'
-import ClusterInfo from './scenes/cluster_info'
-import LaunchModel from './scenes/launch_model'
-import Login from './scenes/login/login'
-import RegisterModel from './scenes/register_model'
-import RunningModels from './scenes/running_models'
+import { getEndpoint } from './components/utils'
+import WraperRoutes from './router/index'
 import { useMode } from './theme'
 
 function App() {
@@ -23,10 +18,6 @@ function App() {
 
   const endPoint = getEndpoint()
 
-  const removeToken = () => {
-    removeCookie('token', { path: '/' })
-  }
-
   useEffect(() => {
     // token possible value: no_auth / need_auth / <real bearer token>
     fetch(endPoint + '/v1/cluster/auth', {
@@ -45,27 +36,14 @@ function App() {
         })
       } else {
         res.json().then((data) => {
-          if (data['auth'] === false) {
-            if (cookie.token !== 'no_auth') {
-              setCookie('token', 'no_auth', { path: '/' })
-            }
-          } else {
-            // TODO: validate bearer token
-            if (
-              cookie.token === undefined ||
-              !isValidBearerToken(cookie.token)
-            ) {
-              // not a bearer token, need a bearer token here
-              setCookie('token', 'need_auth', { path: '/' })
-            }
+          if (!data.auth && cookie.token !== 'no_auth') {
+            setCookie('token', 'no_auth', { path: '/' })
+          } else if (data.auth && !sessionStorage.getItem('token')) {
+            removeCookie('token', { path: '/' })
           }
         })
       }
     })
-    // return a function in useEffect means doing something on component unmount
-    return () => {
-      removeToken()
-    }
   }, [])
 
   const handleClose = (event, reason) => {
@@ -92,15 +70,7 @@ function App() {
           <ApiContextProvider>
             <CssBaseline />
             <AuthAlertDialog />
-            <Routes>
-              <Route path="/login" element={<Login />} />
-              <Route element={<Layout />}>
-                <Route path="/" element={<LaunchModel />} />
-                <Route path="/running_models" element={<RunningModels />} />
-                <Route path="/register_model" element={<RegisterModel />} />
-                <Route path="/cluster_info" element={<ClusterInfo />} />
-              </Route>
-            </Routes>
+            <WraperRoutes />
           </ApiContextProvider>
         </ThemeProvider>
       </HashRouter>

xinference/web/ui/src/components/MenuSide.js

@@ -138,7 +138,6 @@ const MenuSide = () => {
               }
 
               const link = text.toLowerCase().replace(' ', '_')
-              console.log(link)
 
               return (
                 <ListItem key={text}>
@@ -151,11 +150,19 @@ const MenuSide = () => {
                           'noreferrer'
                         )
                       } else if (link === 'launch_model') {
-                        navigate(`/`)
+                        sessionStorage.setItem('modelType', '/launch_model/llm')
+                        navigate('/launch_model/llm')
                         setActive(link)
                         console.log(active)
                       } else if (link === 'cluster_information') {
-                        navigate(`/cluster_info`)
+                        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 {

xinference/web/ui/src/components/Title.js

@@ -12,6 +12,7 @@ const Title = ({ title }) => {
 
   const handleLogout = () => {
     removeCookie('token', { path: '/' })
+    sessionStorage.removeItem('token')
     navigate('/login', { replace: true })
   }
 

xinference/web/ui/src/components/authAlertDialog.js

@@ -1,9 +1,11 @@
-import Button from '@mui/material/Button'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogContentText from '@mui/material/DialogContentText'
-import DialogTitle from '@mui/material/DialogTitle'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'

xinference/web/ui/src/components/fetcher.js

@@ -1,15 +1,13 @@
 import { Cookies } from 'react-cookie'
 
-import { isValidBearerToken } from './utils'
-
 const cookies = new Cookies()
 
 const updateOptions = (url, options) => {
   const update = { ...options }
   if (cookies.get('token') !== 'no_auth') {
     update.headers = {
       ...update.headers,
-      Authorization: 'Bearer ' + cookies.get('token'),
+      Authorization: 'Bearer ' + sessionStorage.getItem('token'),
     }
   }
   return update
@@ -19,16 +17,15 @@ export default function fetcher(url, options) {
   return fetch(url, updateOptions(url, options)).then((res) => {
     // For the situation that server has already been restarted, the current token may become invalid,
     // which leads to UI hangs.
-    if (res.status === 401 && isValidBearerToken(cookies.get('token'))) {
-      if (localStorage.getItem('authStatus') !== '401') {
-        localStorage.setItem('authStatus', '401')
-        window.dispatchEvent(new Event('auth-status'))
-      }
-    } else if (res.status === 403 && isValidBearerToken(cookies.get('token'))) {
-      if (localStorage.getItem('authStatus') !== '403') {
-        localStorage.setItem('authStatus', '403')
-        window.dispatchEvent(new Event('auth-status'))
-      }
+    if (res.status == 401 && localStorage.getItem('authStatus') !== '401') {
+      localStorage.setItem('authStatus', '401')
+      window.dispatchEvent(new Event('auth-status'))
+    } else if (
+      res.status == 403 &&
+      localStorage.getItem('authStatus') !== '403'
+    ) {
+      localStorage.setItem('authStatus', '403')
+      window.dispatchEvent(new Event('auth-status'))
     } else {
       return res
     }

xinference/web/ui/src/router/index.js

@@ -0,0 +1,51 @@
+import { Navigate, useRoutes } from 'react-router-dom'
+
+import Layout from '../scenes/_layout'
+import ClusterInfo from '../scenes/cluster_info'
+import LaunchModel from '../scenes/launch_model'
+import Login from '../scenes/login/login'
+import RegisterModel from '../scenes/register_model'
+import RunningModels from '../scenes/running_models'
+
+const routes = [
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      {
+        path: '/',
+        element: <Navigate to="launch_model/llm" replace />,
+      },
+      {
+        path: 'launch_model/:Modeltype/:subType?',
+        element: <LaunchModel />,
+      },
+      {
+        path: 'running_models/:runningModelType',
+        element: <RunningModels />,
+      },
+      {
+        path: 'register_model',
+        element: <RegisterModel />,
+      },
+      {
+        path: 'cluster_info',
+        element: <ClusterInfo />,
+      },
+    ],
+  },
+  {
+    path: '/login',
+    element: <Login />,
+  },
+  {
+    path: '*',
+    element: <Navigate to="launch_model/llm" replace />,
+  },
+]
+const WraperRoutes = () => {
+  let element = useRoutes(routes)
+  return element
+}
+
+export default WraperRoutes

xinference/web/ui/src/scenes/launch_model/index.js

@@ -13,7 +13,11 @@ import LaunchModelComponent from './LaunchModelComponent'
 
 const LaunchModel = () => {
   let endPoint = useContext(ApiContext).endPoint
-  const [value, setValue] = React.useState('1')
+  const [value, setValue] = React.useState(
+    sessionStorage.getItem('modelType')
+      ? sessionStorage.getItem('modelType')
+      : '/launch_model/llm'
+  )
   const [gpuAvailable, setGPUAvailable] = useState(-1)
 
   const { setErrorMsg } = useContext(ApiContext)
@@ -22,13 +26,18 @@ const LaunchModel = () => {
 
   const handleTabChange = (event, newValue) => {
     setValue(newValue)
+    navigate(newValue)
+    sessionStorage.setItem('modelType', newValue)
+    newValue === '/launch_model/custom/llm'
+      ? sessionStorage.setItem('subType', newValue)
+      : ''
   }
 
   useEffect(() => {
     if (cookie.token === '' || cookie.token === undefined) {
       return
     }
-    if (cookie.token === 'need_auth') {
+    if (cookie.token !== 'no_auth' && !sessionStorage.getItem('token')) {
       navigate('/login', { replace: true })
       return
     }
@@ -58,37 +67,38 @@ const LaunchModel = () => {
     }
   }, [cookie.token])
 
+  useEffect(() => {})
   return (
     <Box m="20px">
       <Title title="Launch Model" />
       <ErrorMessageSnackBar />
       <TabContext value={value}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <TabList value={value} onChange={handleTabChange} aria-label="tabs">
-            <Tab label="Language Models" value="1" />
-            <Tab label="Embedding Models" value="2" />
-            <Tab label="Rerank Models" value="3" />
-            <Tab label="Image Models" value="4" />
-            <Tab label="Audio Models" value="5" />
-            <Tab label="Custom Models" value="6" />
+            <Tab label="Language Models" value="/launch_model/llm" />
+            <Tab label="Embedding Models" value="/launch_model/embedding" />
+            <Tab label="Rerank Models" value="/launch_model/rerank" />
+            <Tab label="Image Models" value="/launch_model/image" />
+            <Tab label="Audio Models" value="/launch_model/audio" />
+            <Tab label="Custom Models" value="/launch_model/custom/llm" />
           </TabList>
         </Box>
-        <TabPanel value="1" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/llm" sx={{ padding: 0 }}>
           <LaunchLLM gpuAvailable={gpuAvailable} />
         </TabPanel>
-        <TabPanel value="2" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/embedding" sx={{ padding: 0 }}>
           <LaunchModelComponent modelType={'embedding'} />
         </TabPanel>
-        <TabPanel value="3" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/rerank" sx={{ padding: 0 }}>
           <LaunchModelComponent modelType={'rerank'} />
         </TabPanel>
-        <TabPanel value="4" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/image" sx={{ padding: 0 }}>
           <LaunchModelComponent modelType={'image'} />
         </TabPanel>
-        <TabPanel value="5" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/audio" sx={{ padding: 0 }}>
           <LaunchModelComponent modelType={'audio'} />
         </TabPanel>
-        <TabPanel value="6" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/custom/llm" sx={{ padding: 0 }}>
           <LaunchCustom gpuAvailable={gpuAvailable} />
         </TabPanel>
       </TabContext>

xinference/web/ui/src/scenes/launch_model/launchCustom.js

@@ -1,6 +1,7 @@
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { Box, FormControl, Tab, TextField } from '@mui/material'
 import React, { useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import { ApiContext } from '../../components/apiContext'
 import fetcher from '../../components/fetcher'
@@ -14,11 +15,14 @@ const LaunchCustom = ({ gpuAvailable }) => {
 
   // States used for filtering
   const [searchTerm, setSearchTerm] = useState('')
-  const [value, setValue] = useState('1')
+  const [value, setValue] = useState(sessionStorage.getItem('subType'))
 
+  const navigate = useNavigate()
   const handleTabChange = (event, newValue) => {
     setValue(newValue)
     update()
+    navigate(newValue)
+    sessionStorage.setItem('subType', newValue)
   }
 
   const handleChange = (event) => {
@@ -148,12 +152,15 @@ const LaunchCustom = ({ gpuAvailable }) => {
       <TabContext value={value}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <TabList value={value} onChange={handleTabChange} aria-label="tabs">
-            <Tab label="Language Models" value="1" />
-            <Tab label="Embedding Models" value="2" />
-            <Tab label="Rerank Models" value="3" />
+            <Tab label="Language Models" value="/launch_model/custom/llm" />
+            <Tab
+              label="Embedding Models"
+              value="/launch_model/custom/embedding"
+            />
+            <Tab label="Rerank Models" value="/launch_model/custom/rerank" />
           </TabList>
         </Box>
-        <TabPanel value="1" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/custom/llm" sx={{ padding: 0 }}>
           <div
             style={{
               display: 'grid',
@@ -200,7 +207,7 @@ const LaunchCustom = ({ gpuAvailable }) => {
               })}
           </div>
         </TabPanel>
-        <TabPanel value="2" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/custom/embedding" sx={{ padding: 0 }}>
           <div
             style={{
               display: 'grid',
@@ -240,7 +247,7 @@ const LaunchCustom = ({ gpuAvailable }) => {
               })}
           </div>
         </TabPanel>
-        <TabPanel value="3" sx={{ padding: 0 }}>
+        <TabPanel value="/launch_model/custom/rerank" sx={{ padding: 0 }}>
           <div
             style={{
               display: 'grid',

xinference/web/ui/src/scenes/launch_model/launchLLM.js

@@ -60,9 +60,7 @@ const LaunchLLM = ({ gpuAvailable }) => {
     if (
       isCallingApi ||
       isUpdatingModel ||
-      cookie.token === '' ||
-      cookie.token === undefined ||
-      cookie.token === 'need_auth'
+      (cookie.token !== 'no_auth' && !sessionStorage.getItem('token'))
     )
       return