[2.0a2] fix bugs of experiment managerment page on webui (#3230)

ts/webui/src/App.scss

@@ -36,7 +36,6 @@
 
     /* nav bar: 56 + marginTop: 24 */
     margin-top: 80px;
-    margin-bottom: 30px;
 }
 
 .bottomDiv {

ts/webui/src/components/NavCon.tsx

@@ -145,7 +145,7 @@ class NavCon extends React.Component<NavProps, NavState> {
                             <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
                             <Link to='/experiment' className='experiment'>
                                 <div className='expNavTitle'>
-                                    <span>All experiment</span>
+                                    <span>All experiments</span>
                                     {ChevronRightMed}
                                 </div>
                             </Link>

ts/webui/src/components/TrialsDetail.tsx

@@ -82,7 +82,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             </Pivot>
                         </div>
                         {/* trial table list */}
-                        <div style={{ backgroundColor: '#fff', marginTop: 10 }}>
+                        <div className='detailTable' style={{ marginTop: 10 }}>
                             <TableList
                                 tableSource={source}
                                 trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}

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

@@ -9,6 +9,8 @@ import { MAXSCREENCOLUMNWIDHT, MINSCREENCOLUMNWIDHT } from './experimentConst';
 import { Hearder } from './Header';
 import NameColumn from './TrialIdColumn';
 import FilterBtns from './FilterBtns';
+import { TitleContext } from '../overview/TitleContext';
+import { Title } from '../overview/Title';
 import '../../App.scss';
 import '../../static/style/nav/nav.scss';
 import '../../static/style/experiment/experiment.scss';
@@ -82,13 +84,17 @@ class Experiment extends React.Component<{}, ExpListState> {
                     </div>
                 ) : null}
                 <Stack className='contentBox expBackground'>
-                    <Stack className='content'>
+                    {/* 56px: navBarHeight; 48: marginTop & Bottom */}
+                    <Stack className='content' styles={{ root: { minHeight: window.innerHeight - 104 } }}>
                         <Stack className='experimentList'>
+                            <TitleContext.Provider value={{ text: 'All experiments', icon: 'CustomList' }}>
+                                <Title />
+                            </TitleContext.Provider>
                             <Stack className='box' horizontal>
                                 <div className='search'>
                                     <SearchBox
                                         className='search-input'
-                                        placeholder='Search the experiment by name and ID'
+                                        placeholder='Search the experiment by name or ID'
                                         onEscape={this.setOriginSource.bind(this)}
                                         onClear={this.setOriginSource.bind(this)}
                                         onChange={this.searchNameAndId.bind(this)}
@@ -126,6 +132,7 @@ class Experiment extends React.Component<{}, ExpListState> {
                                 compact={true}
                                 selectionMode={0} // close selector function
                                 className='table'
+                                onActiveItemChanged={this.experimentClicked}
                             />
                         </Stack>
                     </Stack>
@@ -251,6 +258,15 @@ class Experiment extends React.Component<{}, ExpListState> {
         }
     ];
 
+    private experimentClicked = (item?: any, _index?: number, _ev?: React.FocusEvent<HTMLElement>): void => {
+        if (item.status !== 'STOPPED' && item.port !== undefined) {
+            const hostname = window.location.hostname;
+            const protocol = window.location.protocol;
+            const webuiPortal = `${protocol}//${hostname}:${item.port}/oview`;
+            window.open(webuiPortal);
+        }
+    };
+
     private clickFilter(_e: any): void {
         const { hideFilter } = this.state;
         if (!hideFilter === true) {
@@ -277,10 +293,11 @@ class Experiment extends React.Component<{}, ExpListState> {
             if (newValue === '') {
                 this.setOriginSource();
             } else {
+                const searchInput = newValue.trim();
                 let result = originExperimentList.filter(
                     item =>
-                        item.experimentName.toLowerCase().includes(newValue.toLowerCase()) ||
-                        item.id.toLowerCase().includes(newValue.toLowerCase())
+                        item.experimentName.toLowerCase().includes(searchInput.toLowerCase()) ||
+                        item.id.toLowerCase().includes(searchInput.toLowerCase())
                 );
                 result = this.commonSelectString(result, '');
                 const sortedResult = getSortedSource(result, sortInfo);
@@ -290,7 +307,7 @@ class Experiment extends React.Component<{}, ExpListState> {
                 }));
             }
             this.setState(() => ({
-                searchInputVal: newValue
+                searchInputVal: newValue.trim()
             }));
         }
     }
@@ -414,7 +431,9 @@ class Experiment extends React.Component<{}, ExpListState> {
 
     // reset
     private setSearchSource(): void {
-        const { sortInfo, searchInputVal, originExperimentList } = this.state;
+        const { sortInfo, originExperimentList } = this.state;
+        let { searchInputVal } = this.state;
+        searchInputVal = searchInputVal.trim();
         // hert re-search data for fix this status: filter first -> searchBox search result null -> close filter
         const result = originExperimentList.filter(
             item =>

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

@@ -19,9 +19,14 @@ class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
         return (
             <div className='succeed-padding ellipsis'>
                 {status === 'STOPPED' ? (
-                    <div>{id}</div>
+                    <div className='idColor'>{id}</div>
                 ) : (
-                    <a href={webuiPortal} className='link' target='_blank' rel='noopener noreferrer'>
+                    <a
+                        href={webuiPortal}
+                        className='link toAnotherExp idColor'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                    >
                         {id}
                     </a>
                 )}

ts/webui/src/static/style/experiment/experiment.scss

+$pageMargin: 24px;
+
 .expBackground {
 	background: #f2f2f2;
 	height: 100%;
+
 	.content {
+		/* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
+		margin-top: 32px;
+		margin-bottom: $pageMargin;
 		background: #fff;
 	}
 }
 
 .experimentList {
-	padding: 42px;
+	padding: $pageMargin 42px;
 
 	.box {
+		margin-top: 20px;
+
 		.search {
 			width: 90%;
+
 			&-input {
 				width: 330px;
 			}
@@ -51,14 +60,22 @@
 		margin-left: 10px;
 	}
 
-	.tagContainer {
-		width: 100%;
+	.idColor {
+		color: #615f5d !important;
+	}
+
+	.toAnotherExp {
+
+		&:hover {
+			color: #333231 !important;
+		}
 
-		.tag {
-			font-weight: 500;
-			background: #f2f2f2;
-			margin: 0 4px;
-			padding: 0 6px;
+		&:hover {
+			color:  #615f5d !important;
 		}
 	}
+
+	.ms-DetailsRow:focus {
+		background: #e1dfdd;
+	}
 }

ts/webui/src/static/style/trialsDetail.scss

@@ -51,6 +51,11 @@
     }
 }
 
+.detailTable {
+    margin-bottom: 24px;
+    background: #fff;
+}
+
 .detailTabs {
     padding-left: 6px;
     padding-right: 18px;