[webui] add basename in router (#3625)

ts/webui/src/components/stateless-component/NNItabs.tsx

@@ -2,19 +2,19 @@ import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
 const OVERVIEWTABS = (
-    <NavLink to={'/oview'} activeClassName='selected' className='common-tabs'>
+    <NavLink to='/oview' activeClassName='selected' className='common-tabs'>
         Overview
     </NavLink>
 );
 
 const DETAILTABS = (
-    <NavLink to={'/detail'} activeClassName='selected' className='common-tabs'>
+    <NavLink to='/detail' activeClassName='selected' className='common-tabs'>
         Trials detail
     </NavLink>
 );
 
 const NNILOGO = (
-    <NavLink to={'/oview'}>
+    <NavLink to='/oview'>
         <img src={require('../../static/img/logo.png')} alt='NNI logo' style={{ height: 40 }} />
     </NavLink>
 );

ts/webui/src/index.tsx

 import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import { getPrefix } from './static/function';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 const Overview = lazy(() => import('./components/Overview'));
 const TrialsDetail = lazy(() => import('./components/TrialsDetail'));
@@ -9,8 +10,10 @@ import './index.css';
 import './static/style/loading.scss';
 import * as serviceWorker from './serviceWorker';
 
+const path = getPrefix();
+
 ReactDOM.render(
-    <Router>
+    <Router basename={path === undefined ? null : path}>
         <Suspense
             fallback={
                 <div className='loading'>

ts/webui/src/static/const.ts

+import { getPrefix } from './function';
+
 // when there are more trials than this threshold, metrics will be updated in group of this size to avoid freezing
 const METRIC_GROUP_UPDATE_THRESHOLD = 100;
 const METRIC_GROUP_UPDATE_SIZE = 20;
 
-const MANAGER_IP = `/api/v1/nni`;
+const prefix = getPrefix();
+
+const MANAGER_IP = prefix === undefined ? '/api/v1/nni' : `${prefix}`;
 const DOWNLOAD_IP = `/logs`;
+
 const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
+
 const trialJobStatus = [
     'UNKNOWN',
     'WAITING',

ts/webui/src/static/function.ts

@@ -4,6 +4,17 @@ import { IContextualMenuProps } from '@fluentui/react';
 import { MANAGER_IP } from './const';
 import { MetricDataRecord, FinalType, TableObj, Tensorboard } from './interface';
 
+function getPrefix(): string | undefined {
+    const pathName = window.location.pathname;
+    let newPathName = pathName;
+
+    if (pathName.endsWith('/oview') || pathName.endsWith('/detail') || pathName.endsWith('/experiment')) {
+        newPathName = pathName.replace('/oview' || '/detail' || '/experiment', '');
+    }
+
+    return newPathName === '' ? undefined : newPathName;
+}
+
 async function requestAxios(url: string): Promise<any> {
     const response = await axios.get(url);
     if (response.status === 200) {
@@ -346,6 +357,7 @@ function getTensorboardMenu(queryTensorboardList: Tensorboard[], stopFunc, seeDe
     return tensorboardMenu;
 }
 export {
+    getPrefix,
     convertTime,
     convertDuration,
     convertTimeAsUnit,