[webui v1.9 bug bash] fix bugs in v1.9 (microsoft#2989)

src/webui/src/App.scss

@@ -53,7 +53,7 @@
 .ms-Callout-main {
     p {
         font-weight: 500;
-        color: #333;
+        color: #fff;
     }
 }
 

src/webui/src/App.tsx

@@ -12,6 +12,7 @@ interface AppState {
     columnList: string[];
     experimentUpdateBroadcast: number;
     trialsUpdateBroadcast: number;
+    maxDurationUnit: string;
     metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
     isillegalFinal: boolean;
     expWarningMessage: string;
@@ -26,11 +27,14 @@ export const AppContext = React.createContext({
     trialsUpdateBroadcast: 0,
     metricGraphMode: 'max',
     bestTrialEntries: '10',
+    maxDurationUnit: 'm',
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     changeColumn: (val: string[]) => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     changeMetricGraphMode: (val: 'max' | 'min') => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeMaxDurationUnit: (val: string) => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     changeEntries: (val: string) => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     updateOverviewPage: () => {}
@@ -47,6 +51,7 @@ class App extends React.Component<{}, AppState> {
             experimentUpdateBroadcast: 0,
             trialsUpdateBroadcast: 0,
             metricGraphMode: 'max',
+            maxDurationUnit: 'm',
             isillegalFinal: false,
             expWarningMessage: '',
             bestTrialEntries: '10',
@@ -91,6 +96,11 @@ class App extends React.Component<{}, AppState> {
         this.setState({ bestTrialEntries: entries });
     };
 
+    // overview max duration unit
+    changeMaxDurationUnit = (unit: string): void => {
+        this.setState({ maxDurationUnit: unit });
+    };
+
     updateOverviewPage = (): void => {
         this.setState(state => ({
             experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1
@@ -114,7 +124,8 @@ class App extends React.Component<{}, AppState> {
             metricGraphMode,
             isillegalFinal,
             expWarningMessage,
-            bestTrialEntries
+            bestTrialEntries,
+            maxDurationUnit
         } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
             return null; // TODO: render a loading page
@@ -137,7 +148,24 @@ class App extends React.Component<{}, AppState> {
                 <Stack className='contentBox'>
                     <Stack className='content'>
                         {/* search space & config */}
-                        <TrialConfigButton />
+                        <AppContext.Provider
+                            value={{
+                                interval,
+                                columnList,
+                                changeColumn: this.changeColumn,
+                                experimentUpdateBroadcast,
+                                trialsUpdateBroadcast,
+                                metricGraphMode,
+                                maxDurationUnit,
+                                changeMaxDurationUnit: this.changeMaxDurationUnit,
+                                changeMetricGraphMode: this.changeMetricGraphMode,
+                                bestTrialEntries,
+                                changeEntries: this.changeEntries,
+                                updateOverviewPage: this.updateOverviewPage
+                            }}
+                        >
+                            <TrialConfigButton />
+                        </AppContext.Provider>
                         {/* if api has error field, show error message */}
                         {errorList.map(
                             (item, key) =>
@@ -160,6 +188,8 @@ class App extends React.Component<{}, AppState> {
                                 experimentUpdateBroadcast,
                                 trialsUpdateBroadcast,
                                 metricGraphMode,
+                                maxDurationUnit,
+                                changeMaxDurationUnit: this.changeMaxDurationUnit,
                                 changeMetricGraphMode: this.changeMetricGraphMode,
                                 bestTrialEntries,
                                 changeEntries: this.changeEntries,

src/webui/src/components/Overview.tsx

@@ -10,7 +10,8 @@ import { ReBasicInfo } from './overview/experiment/BasicInfo';
 import { ExpDuration } from './overview/count/ExpDuration';
 import { ExpDurationContext } from './overview/count/ExpDurationContext';
 import { TrialCount } from './overview/count/TrialCount';
-import { Command } from './overview/experiment/Command';
+import { Command1 } from './overview/command/Command1';
+import { Command2 } from './overview/command/Command2';
 import { TitleContext } from './overview/TitleContext';
 import { itemStyle1, itemStyleSucceed, itemStyle2, entriesOption } from './overview/overviewConst';
 import '../static/style/overview/overview.scss';
@@ -66,7 +67,13 @@ class Overview extends React.Component<{}, OverviewState> {
         return (
             <AppContext.Consumer>
                 {(value): React.ReactNode => {
-                    const { metricGraphMode, bestTrialEntries, updateOverviewPage } = value;
+                    const {
+                        metricGraphMode,
+                        bestTrialEntries,
+                        maxDurationUnit,
+                        updateOverviewPage,
+                        changeMaxDurationUnit
+                    } = value;
                     const maxActive = metricGraphMode === 'max' ? 'active' : '';
                     const minActive = metricGraphMode === 'min' ? 'active' : '';
                     return (
@@ -88,18 +95,29 @@ class Overview extends React.Component<{}, OverviewState> {
                                             <Title />
                                         </TitleContext.Provider>
                                         <ExpDurationContext.Provider
-                                            value={{ maxExecDuration, execDuration, updateOverviewPage }}
+                                            value={{
+                                                maxExecDuration,
+                                                execDuration,
+                                                updateOverviewPage,
+                                                maxDurationUnit,
+                                                changeMaxDurationUnit
+                                            }}
                                         >
                                             <ExpDuration />
                                         </ExpDurationContext.Provider>
                                     </div>
-                                    <div className='empty' />
                                     <div className='trialCount'>
                                         <TitleContext.Provider value={{ text: 'Trial numbers', icon: 'NumberSymbol' }}>
                                             <Title />
                                         </TitleContext.Provider>
                                         <ExpDurationContext.Provider
-                                            value={{ maxExecDuration, execDuration, updateOverviewPage }}
+                                            value={{
+                                                maxExecDuration,
+                                                execDuration,
+                                                updateOverviewPage,
+                                                maxDurationUnit,
+                                                changeMaxDurationUnit
+                                            }}
                                         >
                                             <TrialCount />
                                         </ExpDurationContext.Provider>
@@ -114,7 +132,6 @@ class Overview extends React.Component<{}, OverviewState> {
                                             </TitleContext.Provider>
                                         </div>
                                         <div className='topTrialTitle'>
-                                            {/* <Stack horizontal horizontalAlign='space-between'> */}
                                             <Stack horizontal horizontalAlign='end'>
                                                 <DefaultButton
                                                     onClick={this.clickMaxTop}
@@ -152,8 +169,11 @@ class Overview extends React.Component<{}, OverviewState> {
                                     </Stack>
                                     <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
                                 </div>
-                                <div className='overviewCommand'>
-                                    <Command />
+                                <div className='overviewCommand1'>
+                                    <Command1 />
+                                </div>
+                                <div className='overviewCommand2'>
+                                    <Command2 />
                                 </div>
                                 <div className='overviewChart'>
                                     <Stack horizontal>

src/webui/src/components/TrialsDetail.tsx

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

src/webui/src/components/modals/Killjob.tsx

@@ -112,11 +112,15 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
                             setInitialFocus={true}
                         >
                             <div className={styles.header}>
-                                <p className={styles.title}>Kill trial</p>
+                                <p className={styles.title} style={{ color: '#333' }}>
+                                    Kill trial
+                                </p>
                             </div>
                             <div className={styles.inner}>
                                 <div>
-                                    <p className={styles.subtext}>{prompString}</p>
+                                    <p className={styles.subtext} style={{ color: '#333' }}>
+                                        {prompString}
+                                    </p>
                                 </div>
                             </div>
                             <FocusZone>

src/webui/src/components/overview/experiment/Command.tsx → src/webui/src/components/overview/command/Command1.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
-import { TooltipHost, Stack } from '@fluentui/react';
 import { EXPERIMENT } from '../../../static/datamodel';
 import '../../../static/style/overview/command.scss';
 
-export const Command = (): any => {
-    const clusterMetaData = EXPERIMENT.profile.params.clusterMetaData;
+export const Command1 = (): any => {
     const tuner = EXPERIMENT.profile.params.tuner;
     const advisor = EXPERIMENT.profile.params.advisor;
     const assessor = EXPERIMENT.profile.params.assessor;
     let title = '';
     let builtinName = '';
-    let trialCommand = 'unknown';
     if (tuner !== undefined) {
         title = title.concat('Tuner');
         if (tuner.builtinTunerName !== undefined) {
@@ -29,35 +26,15 @@ export const Command = (): any => {
             builtinName = builtinName.concat(assessor.builtinAssessorName);
         }
     }
-    if (clusterMetaData !== undefined) {
-        for (const item of clusterMetaData) {
-            if (item.key === 'command') {
-                trialCommand = item.value;
-            }
-        }
-    }
+
     return (
         <div className='command basic'>
-            <div className='command1'>
+            <div>
                 <p>Training platform</p>
                 <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
                 <p className='lineMargin'>{title}</p>
                 <div className='nowrap'>{builtinName}</div>
             </div>
-            <Stack className='command2'>
-                <p>Log directory</p>
-                <div className='nowrap'>
-                    <TooltipHost content={EXPERIMENT.profile.logDir || 'unknown'} className='nowrap'>
-                        {EXPERIMENT.profile.logDir || 'unknown'}
-                    </TooltipHost>
-                </div>
-                <p className='lineMargin'>Trial command</p>
-                <div className='nowrap'>
-                    <TooltipHost content={trialCommand || 'unknown'} className='nowrap'>
-                        {trialCommand || 'unknown'}
-                    </TooltipHost>
-                </div>
-            </Stack>
         </div>
     );
 };

src/webui/src/components/overview/command/Command2.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { TooltipHost, DirectionalHint } from '@fluentui/react';
+import { EXPERIMENT } from '../../../static/datamodel';
+import { TOOLTIP_BACKGROUND_COLOR } from '../../../static/const';
+import '../../../static/style/overview/command.scss';
+
+export const Command2 = (): any => {
+    const clusterMetaData = EXPERIMENT.profile.params.clusterMetaData;
+    let trialCommand = 'unknown';
+
+    if (clusterMetaData !== undefined) {
+        for (const item of clusterMetaData) {
+            if (item.key === 'command') {
+                trialCommand = item.value;
+            }
+        }
+    }
+    return (
+        <div className='command basic'>
+            <p>Log directory</p>
+            <div className='nowrap'>
+                <TooltipHost
+                    content={EXPERIMENT.profile.logDir || 'unknown'}
+                    className='nowrap'
+                    directionalHint={DirectionalHint.bottomCenter}
+                    tooltipProps={{
+                        calloutProps: {
+                            styles: {
+                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
+                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
+                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
+                            }
+                        }
+                    }}
+                >
+                    {EXPERIMENT.profile.logDir || 'unknown'}
+                </TooltipHost>
+            </div>
+            <p className='lineMargin'>Trial command</p>
+            <div className='nowrap'>
+                <TooltipHost
+                    content={trialCommand || 'unknown'}
+                    className='nowrap'
+                    directionalHint={DirectionalHint.bottomCenter}
+                    tooltipProps={{
+                        calloutProps: {
+                            styles: {
+                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
+                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
+                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
+                            }
+                        }
+                    }}
+                >
+                    {trialCommand || 'unknown'}
+                </TooltipHost>
+            </div>
+        </div>
+    );
+};