[webui] update the layout of overview page (#3123)

Co-authored-by: Lijiao <Lijiaoa@outlook.com>
microsoft · Dec 7, 2020 · 78e874f · 78e874f
1 parent 580ce0a
commit 78e874f
Show file tree

Hide file tree

Showing 21 changed files with 407 additions and 327 deletions.
diff --git a/ts/webui/package.json b/ts/webui/package.json
@@ -47,6 +47,7 @@
     "react-monaco-editor": "^0.32.1",
     "react-paginate": "^6.3.2",
     "react-pagination": "^1.0.0",
+    "react-responsive": "^8.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-table": "^7.0.0-rc.15",

diff --git a/ts/webui/src/App.scss b/ts/webui/src/App.scss
@@ -18,6 +18,7 @@
 
 .headerCon {
     width: 90%;
+    max-width: 1490px;
     margin: 0 auto;
 }
 
@@ -29,9 +30,10 @@
     width: 87%;
     margin: 0 auto;
     min-width: 1200px;
+    max-width: 1490px;
 
-    /* nav bar: 56 + marginTop: 18 */
-    margin-top: 74px;
+    /* nav bar: 56 + marginTop: 24 */
+    margin-top: 80px;
     margin-bottom: 30px;
 }
 

diff --git a/ts/webui/src/components/NavCon.tsx b/ts/webui/src/components/NavCon.tsx
@@ -157,7 +157,7 @@ class NavCon extends React.Component<NavProps, NavState> {
                         </div>
                         <CommandBarButton
                             iconProps={{ iconName: 'ShowResults' }}
-                            text='Experiment summary'
+                            text='Summary'
                             onClick={this.showExpcontent}
                         />
                         <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />

diff --git a/ts/webui/src/components/Overview.tsx b/ts/webui/src/components/Overview.tsx
@@ -174,12 +174,10 @@ class Overview extends React.Component<{}, OverviewState> {
                                         />
                                     </div>
                                 </div>
-                                <div className='overviewCommand1'>
-                                    <Command1 />
-                                </div>
-                                <div className='overviewCommand2'>
+                                <Stack className='overviewCommand' horizontal>
                                     <Command2 />
-                                </div>
+                                    <Command1 />
+                                </Stack>
                             </div>
                         </div>
                     );

diff --git a/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx b/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx
@@ -39,7 +39,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
         const interResultList = TRIALS.getMetricsList();
         Object.keys(trialMessagesArr).map(item => {
             // not deal with trial's hyperParameters
-            const trialId = trialMessagesArr[item].jobId;
+            const trialId = trialMessagesArr[item].trialJobId;
             // add intermediate result message
             trialMessagesArr[item].intermediate = [];
             Object.keys(interResultList).map(key => {
@@ -94,7 +94,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
         return (
             <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}>
                 <div className='panel'>
-                    <div className='panelName'>Experiment summary</div>
+                    <div className='panelName'>Summary</div>
                     <MonacoEditor
                         width='100%'
                         height={monacoEditorHeight}

diff --git a/ts/webui/src/components/overview/command/Command1.tsx b/ts/webui/src/components/overview/command/Command1.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { EXPERIMENT } from '../../../static/datamodel';
+import { rightEidtParam } from '../count/commonStyle';
 import '../../../static/style/overview/command.scss';
 
 export const Command1 = (): any => {
@@ -33,7 +34,7 @@ export const Command1 = (): any => {
     }
 
     return (
-        <div className='basic'>
+        <div className='basic' style={rightEidtParam}>
             <div>
                 <p className='command'>Training platform</p>
                 <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>

diff --git a/ts/webui/src/components/overview/command/Command2.tsx b/ts/webui/src/components/overview/command/Command2.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { TooltipHost, DirectionalHint } from '@fluentui/react';
 import { EXPERIMENT } from '../../../static/datamodel';
+import { leftProgress } from '../count/commonStyle';
 import { TOOLTIP_BACKGROUND_COLOR } from '../../../static/const';
 import '../../../static/style/overview/command.scss';
 
@@ -21,7 +22,7 @@ export const Command2 = (): any => {
         }
     }
     return (
-        <div className='basic'>
+        <div className='basic' style={leftProgress}>
             <p className='command'>Log directory</p>
             <div className='nowrap'>
                 <TooltipHost

diff --git a/ts/webui/src/components/overview/count/EditExperimentParam.tsx b/ts/webui/src/components/overview/count/EditExperimentParam.tsx
@@ -168,7 +168,7 @@ export const EditExperimentParam = (): any => {
                             return (
                                 <React.Fragment>
                                     <div className={`${editClassName} editparam`}>
-                                        <span>{value.title}</span>
+                                        <div className='title'>{value.title}</div>
                                         <input
                                             className={`${value.field} editparam-Input`}
                                             ref={DurationInputRef}

diff --git a/ts/webui/src/components/overview/count/ExpDuration.tsx b/ts/webui/src/components/overview/count/ExpDuration.tsx
@@ -6,7 +6,7 @@ import { convertDuration, convertTimeAsUnit } from '../../../static/function';
 import { EditExperimentParam } from './EditExperimentParam';
 import { ExpDurationContext } from './ExpDurationContext';
 import { EditExpeParamContext } from './context';
-import { leftProgress, durationItem2, progressHeight } from './commonStyle';
+import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
 import '../../../static/style/overview/count.scss';
 
 export const ExpDuration = (): any => (
@@ -46,7 +46,7 @@ export const ExpDuration = (): any => (
                             <span>{`${maxExecDurationStr} ${maxDurationUnit}`}</span>
                         </div>
                     </div>
-                    <div style={durationItem2}>
+                    <div style={rightEidtParam}>
                         <EditExpeParamContext.Provider
                             value={{
                                 editType: CONTROLTYPE[0],

diff --git a/ts/webui/src/components/overview/count/TrialCount.tsx b/ts/webui/src/components/overview/count/TrialCount.tsx
@@ -5,7 +5,7 @@ import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '../../
 import { EditExperimentParam } from './EditExperimentParam';
 import { EditExpeParamContext } from './context';
 import { ExpDurationContext } from './ExpDurationContext';
-import { leftProgress, trialCountItem2, progressHeight } from './commonStyle';
+import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
 
 export const TrialCount = (): any => {
     const count = TRIALS.countStatus();
@@ -22,7 +22,7 @@ export const TrialCount = (): any => {
                 const { updateOverviewPage } = value;
                 return (
                     <React.Fragment>
-                        <Stack horizontal horizontalAlign='space-between' className='ExpDuration'>
+                        <Stack horizontal className='ExpDuration'>
                             <div style={leftProgress}>
                                 <TooltipHost
                                     content={`${bar2.toString()} trials`}
@@ -49,7 +49,36 @@ export const TrialCount = (): any => {
                                     <span>{maxTrialNum}</span>
                                 </div>
                             </div>
-                            <div style={trialCountItem2}>
+                        </Stack>
+                        <Stack horizontal className='marginTop'>
+                            <div style={leftProgress}>
+                                <Stack horizontal className='status-count' gap={60}>
+                                    <div>
+                                        <span>Running</span>
+                                        <p>{count.get('RUNNING')}</p>
+                                    </div>
+                                    <div>
+                                        <span>Succeeded</span>
+                                        <p>{count.get('SUCCEEDED')}</p>
+                                    </div>
+                                    <div>
+                                        <span>Stopped</span>
+                                        <p>{stoppedCount}</p>
+                                    </div>
+                                </Stack>
+                                <Stack horizontal className='status-count marginTop' gap={80}>
+                                    <div>
+                                        <span>Failed</span>
+                                        <p>{count.get('FAILED')}</p>
+                                    </div>
+                                    <div>
+                                        <span>Waiting</span>
+                                        <p>{count.get('WAITING')}</p>
+                                    </div>
+                                </Stack>
+                            </div>
+
+                            <div style={rightEidtParam}>
                                 <EditExpeParamContext.Provider
                                     value={{
                                         title: MAX_TRIAL_NUMBERS,
@@ -65,42 +94,22 @@ export const TrialCount = (): any => {
                                         <EditExperimentParam />
                                     </div>
                                 </EditExpeParamContext.Provider>
-                                <EditExpeParamContext.Provider
-                                    value={{
-                                        title: 'Concurrency',
-                                        field: 'trialConcurrency',
-                                        editType: CONTROLTYPE[2],
-                                        // maxExecDuration: EXPERIMENT.profile.params.maxExecDuration,
-                                        maxExecDuration: '',
-                                        maxTrialNum: EXPERIMENT.profile.params.maxTrialNum,
-                                        trialConcurrency: EXPERIMENT.profile.params.trialConcurrency,
-                                        updateOverviewPage
-                                    }}
-                                >
-                                    <EditExperimentParam />
-                                </EditExpeParamContext.Provider>
-                            </div>
-                        </Stack>
-                        <Stack horizontal horizontalAlign='space-between' className='trialStatus'>
-                            <div className='basic'>
-                                <p>Running</p>
-                                <div>{count.get('RUNNING')}</div>
-                            </div>
-                            <div className='basic'>
-                                <p>Succeeded</p>
-                                <div>{count.get('SUCCEEDED')}</div>
-                            </div>
-                            <div className='basic'>
-                                <p>Stopped</p>
-                                <div>{stoppedCount}</div>
-                            </div>
-                            <div className='basic'>
-                                <p>Failed</p>
-                                <div>{count.get('FAILED')}</div>
-                            </div>
-                            <div className='basic'>
-                                <p>Waiting</p>
-                                <div>{count.get('WAITING')}</div>
+                                <div className='concurrency'>
+                                    <EditExpeParamContext.Provider
+                                        value={{
+                                            title: 'Concurrency',
+                                            field: 'trialConcurrency',
+                                            editType: CONTROLTYPE[2],
+                                            // maxExecDuration: EXPERIMENT.profile.params.maxExecDuration,
+                                            maxExecDuration: '',
+                                            maxTrialNum: EXPERIMENT.profile.params.maxTrialNum,
+                                            trialConcurrency: EXPERIMENT.profile.params.trialConcurrency,
+                                            updateOverviewPage
+                                        }}
+                                    >
+                                        <EditExperimentParam />
+                                    </EditExpeParamContext.Provider>
+                                </div>
                             </div>
                         </Stack>
                     </React.Fragment>

diff --git a/ts/webui/src/components/overview/count/commonStyle.ts b/ts/webui/src/components/overview/count/commonStyle.ts
@@ -1,15 +1,12 @@
 const leftProgress: React.CSSProperties = {
-    width: '33%',
-    position: 'relative',
-    top: 6
+    width: '60%',
+    position: 'relative'
 };
-const durationItem2: React.CSSProperties = {
-    width: '51.5%',
-    paddingLeft: '15%'
+const rightEidtParam: React.CSSProperties = {
+    paddingLeft: '9%',
+    boxSizing: 'border-box'
 };
 
-const trialCountItem2: React.CSSProperties = {
-    width: '51.5%'
-};
 const progressHeight = 8;
-export { leftProgress, durationItem2, trialCountItem2, progressHeight };
+
+export { leftProgress, rightEidtParam, progressHeight };
diff --git a/ts/webui/src/components/overview/experiment/BasicInfo.tsx b/ts/webui/src/components/overview/experiment/BasicInfo.tsx
@@ -23,11 +23,11 @@ export const ReBasicInfo = (): any => {
 
     return (
         <div>
-            <Stack horizontal horizontalAlign='space-between' className='mess'>
+            <Stack horizontal horizontalAlign='space-between' className='marginTop'>
                 <div className='basic'>
                     <p>Name</p>
                     <div className='nowrap'>{EXPERIMENT.profile.params.experimentName}</div>
-                    <p className='margin'>ID</p>
+                    <p className='marginTop'>ID</p>
                     <div className='nowrap'>{EXPERIMENT.profile.id}</div>
                 </div>
                 <div className='basic'>
@@ -76,7 +76,7 @@ export const ReBasicInfo = (): any => {
                     <BestMetricContext.Consumer>
                         {(value): React.ReactNode => (
                             <Stack className='bestMetric'>
-                                <p className='margin'>Best metric</p>
+                                <p className='marginTop'>Best metric</p>
                                 <div className={EXPERIMENT.status}>
                                     {isNaN(value.bestAccuracy) ? 'N/A' : value.bestAccuracy.toFixed(6)}
                                 </div>
@@ -87,7 +87,7 @@ export const ReBasicInfo = (): any => {
                 <div className='basic'>
                     <p>Start time</p>
                     <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
-                    <p className='margin'>End time</p>
+                    <p className='marginTop'>End time</p>
                     <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
                 </div>
             </Stack>

diff --git a/ts/webui/src/components/overview/table/SuccessTable.tsx b/ts/webui/src/components/overview/table/SuccessTable.tsx
@@ -145,7 +145,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             key: 'id',
             fieldName: 'id',
             minWidth: 60,
-            maxWidth: 118,
+            maxWidth: 90,
             isResizable: true,
             className: 'tableHead leftTitle',
             data: 'string',
@@ -155,8 +155,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         {
             name: 'Duration',
             key: 'duration',
-            minWidth: 85,
-            maxWidth: 166,
+            minWidth: 80,
+            maxWidth: 120,
             isResizable: true,
             fieldName: 'duration',
             data: 'number',
@@ -170,8 +170,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         {
             name: 'Status',
             key: 'status',
-            minWidth: 98,
-            maxWidth: 160,
+            minWidth: 88,
+            maxWidth: 120,
             isResizable: true,
             fieldName: 'status',
             onRender: (item: any): React.ReactNode => (

diff --git a/ts/webui/src/components/slideNav/SlideNavBtns.tsx b/ts/webui/src/components/slideNav/SlideNavBtns.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { Stack } from '@fluentui/react';
+import { Stack, DefaultButton, Icon } from '@fluentui/react';
+import MediaQuery from 'react-responsive';
 import TrialConfigPanel from './TrialConfigPanel';
 import LogPanel from '../modals/LogPanel';
 import IconButtonTemplate from './IconButtonTemplet';
@@ -28,9 +29,31 @@ export const SlideNavBtns = (): any => {
         // right side nav buttons
         <React.Fragment>
             <Stack className='config'>
-                <IconButtonTemplate icon='DocumentSearch' btuName='Search space' event={showSearchSpacePanel} />
-                <IconButtonTemplate icon='Archive' btuName='Config' event={showTrialConfigpPanel} />
-                <IconButtonTemplate icon='FilePDB' btuName='Log files' event={showLogPanel} />
+                <MediaQuery maxWidth={1799}>
+                    <IconButtonTemplate icon='DocumentSearch' btuName='Search space' event={showSearchSpacePanel} />
+                    <IconButtonTemplate icon='Archive' btuName='Config' event={showTrialConfigpPanel} />
+                    <IconButtonTemplate icon='FilePDB' btuName='Log files' event={showLogPanel} />
+                </MediaQuery>
+                <MediaQuery minWidth={1798}>
+                    <div className='container'>
+                        <DefaultButton onClick={showSearchSpacePanel} className='maxScrBtn'>
+                            <Icon iconName='DocumentSearch' />
+                            <span className='margin'>Search space</span>
+                        </DefaultButton>
+                    </div>
+                    <div className='container'>
+                        <DefaultButton onClick={showTrialConfigpPanel} className='maxScrBtn configBtn'>
+                            <Icon iconName='Archive' />
+                            <span className='margin'>Config</span>
+                        </DefaultButton>
+                    </div>
+                    <div className='container'>
+                        <DefaultButton onClick={showLogPanel} className='maxScrBtn logBtn'>
+                            <Icon iconName='FilePDB' />
+                            <span className='margin'>Log files</span>
+                        </DefaultButton>
+                    </div>
+                </MediaQuery>
             </Stack>
             {isShowConfigPanel && <TrialConfigPanel panelName={panelName} hideConfigPanel={hideConfigPanel} />}
             {/* the panel for dispatcher & nnimanager log message */}

diff --git a/ts/webui/src/static/model/trialmanager.ts b/ts/webui/src/static/model/trialmanager.ts
@@ -171,6 +171,7 @@ class TrialManager {
         let updated = false;
         requestAxios(`${MANAGER_IP}/trial-jobs`)
             .then(data => {
+                this.trialJobList = data;
                 for (const trialInfo of data as TrialJobInfo[]) {
                     if (this.trials.has(trialInfo.trialJobId)) {
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

diff --git a/ts/webui/src/static/style/overview/command.scss b/ts/webui/src/static/style/overview/command.scss
@@ -8,7 +8,7 @@
 
 .basic {
     .lineMargin {
-        margin-top: 20px;
+        margin-top: 24px;
         font-weight: normal;
     }
 }