[bug fix] Experiment list could not open experiment with prefix (#4511)

nni/experiment/launcher.py

@@ -104,6 +104,7 @@ def start_experiment(action, exp_id, config, port, debug, run_mode, url_prefix):
             pid=proc.pid,
             logDir=config.experiment_working_directory,
             tag=[],
+            prefixUrl=url_prefix
         )
 
         _logger.info('Setting up...')

ts/webui/src/components/managementExp/ExperimentManager.tsx

@@ -7,7 +7,7 @@ import MessageInfo from '../modals/MessageInfo';
 import { compareDate, filterByStatusOrPlatform, getSortedSource } from './expFunction';
 import { MAXSCREENCOLUMNWIDHT, MINSCREENCOLUMNWIDHT } from './experimentConst';
 import { Hearder } from './Header';
-import NameColumn from './TrialIdColumn';
+import TrialIdColumn from './TrialIdColumn';
 import FilterBtns from './FilterBtns';
 import { TitleContext } from '../overview/TitleContext';
 import { Title } from '../overview/Title';
@@ -194,7 +194,7 @@ class Experiment extends React.Component<{}, ExpListState> {
             className: 'tableHead leftTitle',
             data: 'string',
             onColumnClick: this.onColumnClick,
-            onRender: (item: any): React.ReactNode => <NameColumn port={item.port} status={item.status} id={item.id} />
+            onRender: (item: any): React.ReactNode => <TrialIdColumn item={item} />
         },
         {
             name: 'Status',

ts/webui/src/components/managementExp/TrialIdColumn.tsx

 import * as React from 'react';
 import { Stack } from '@fluentui/react';
+import { AllExperimentList } from '../../static/interface';
 import CopyButton from '../public-child/CopyButton';
 
 interface TrialIdColumnProps {
-    port: number;
-    id: string;
-    status: string;
+    item: AllExperimentList;
 }
 
 class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
@@ -14,14 +13,17 @@ class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
     }
 
     render(): React.ReactNode {
-        const { port, id, status } = this.props;
+        const { item } = this.props;
         const hostname = window.location.hostname;
         const protocol = window.location.protocol;
-        const webuiPortal = `${protocol}//${hostname}:${port}/oview`;
+        const webuiPortal =
+            item.prefixUrl === null
+                ? `${protocol}//${hostname}:${item.port}/oview`
+                : `${protocol}//${hostname}:${item.port}/${this.formatPrefix(item.prefixUrl)}/oview`;
         return (
             <Stack horizontal className='ellipsis idCopy'>
-                {status === 'STOPPED' ? (
-                    <div className='idColor'>{id}</div>
+                {item.status === 'STOPPED' ? (
+                    <div className='idColor'>{item.id}</div>
                 ) : (
                     <a
                         href={webuiPortal}
@@ -29,13 +31,25 @@ class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
                         target='_blank'
                         rel='noopener noreferrer'
                     >
-                        {id}
+                        {item.id}
                     </a>
                 )}
-                <CopyButton value={id} />
+                <CopyButton value={item.id} />
             </Stack>
         );
     }
+
+    private formatPrefix(prefix): string {
+        if (prefix.startsWith('/')) {
+            prefix = prefix.slice(1);
+        }
+
+        if (prefix.endsWith('/')) {
+            prefix = prefix.slice(0, prefix.length - 1);
+        }
+
+        return prefix;
+    }
 }
 
 export default TrialIdColumn;

ts/webui/src/static/interface.ts

@@ -207,6 +207,7 @@ interface AllExperimentList {
     pid: number;
     webuiUrl: string[];
     logDir: string[];
+    prefixUrl: string;
 }
 
 interface Tensorboard {