Update right nav bar and log position (#3069)

ts/webui/src/App.tsx

@@ -4,7 +4,7 @@ import { COLUMN } from './static/const';
 import { EXPERIMENT, TRIALS } from './static/datamodel';
 import NavCon from './components/NavCon';
 import MessageInfo from './components/modals/MessageInfo';
-import { TrialConfigButton } from './components/public-child/config/TrialConfigButton';
+import { SlideNavBtns } from './components/slideNav/SlideNavBtns';
 import './App.scss';
 
 interface AppState {
@@ -164,7 +164,7 @@ class App extends React.Component<{}, AppState> {
                                 updateOverviewPage: this.updateOverviewPage
                             }}
                         >
-                            <TrialConfigButton />
+                            <SlideNavBtns />
                         </AppContext.Provider>
                         {/* if api has error field, show error message */}
                         {errorList.map(

ts/webui/src/components/NavCon.tsx

@@ -10,9 +10,8 @@ import {
     IStackTokens,
     IStackStyles
 } from '@fluentui/react';
-import LogPanel from './modals/LogPanel';
-import ExperimentPanel from './modals/ExperimentPanel';
-import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
+import ExperimentSummaryPanel from './modals/ExperimentSummaryPanel';
+import { infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
 import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
 import { EXPERIMENT } from '../static/datamodel';
 import '../static/style/nav/nav.scss';
@@ -36,7 +35,6 @@ interface NavState {
     menuVisible: boolean;
     navBarVisible: boolean;
     isdisabledFresh: boolean;
-    isvisibleLogDrawer: boolean;
     isvisibleExperimentDrawer: boolean;
     refreshText: string;
     refreshFrequency: number | string;
@@ -55,7 +53,6 @@ class NavCon extends React.Component<NavProps, NavState> {
             menuVisible: false,
             navBarVisible: false,
             isdisabledFresh: false,
-            isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer
             isvisibleExperimentDrawer: false,
             refreshText: 'Auto refresh',
             refreshFrequency: 10
@@ -67,16 +64,6 @@ class NavCon extends React.Component<NavProps, NavState> {
         this.setState({ isvisibleExperimentDrawer: true });
     };
 
-    // to see & download dispatcher | nnimanager log
-    showDispatcherLog = (): void => {
-        this.setState({ isvisibleLogDrawer: true });
-    };
-
-    // close log drawer (nnimanager.dispatcher)
-    closeLogDrawer = (): void => {
-        this.setState({ isvisibleLogDrawer: false });
-    };
-
     // close download experiment parameters drawer
     closeExpDrawer = (): void => {
         this.setState({ isvisibleExperimentDrawer: false });
@@ -121,7 +108,7 @@ class NavCon extends React.Component<NavProps, NavState> {
     }
 
     render(): React.ReactNode {
-        const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
+        const { isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
         const aboutProps: IContextualMenuProps = {
             items: [
                 {
@@ -168,38 +155,24 @@ class NavCon extends React.Component<NavProps, NavState> {
                             />
                             <div className='nav-refresh-num'>{refreshFrequency}</div>
                         </div>
-                        <CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
+                        <CommandBarButton
+                            iconProps={{ iconName: 'ShowResults' }}
+                            text='Experiment summary'
+                            onClick={this.showExpcontent}
+                        />
                         <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
                     </Stack>
                 </StackItem>
-                {/* the drawer for dispatcher & nnimanager log message */}
-                {isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
                 {isvisibleExperimentDrawer && (
-                    <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
+                    <ExperimentSummaryPanel
+                        closeExpDrawer={this.closeExpDrawer}
+                        experimentProfile={EXPERIMENT.profile}
+                    />
                 )}
             </Stack>
         );
     }
 
-    // view and download experiment [log & experiment result]
-    private menuProps: IContextualMenuProps = {
-        items: [
-            {
-                key: 'experiment',
-                text: 'Experiment summary',
-                iconProps: { iconName: 'ShowResults' },
-                onClick: this.showExpcontent
-            },
-            {
-                key: 'logfiles',
-                text: 'Log files',
-                iconProps: { iconName: 'FilePDB' },
-                onClick: this.showDispatcherLog
-            }
-        ],
-        directionalHintFixed: true
-    };
-
     private refreshProps: IContextualMenuProps = {
         items: [
             {

ts/webui/src/components/modals/ExperimentPanel.tsx → ts/webui/src/components/modals/ExperimentSummaryPanel.tsx

 import * as React from 'react';
 import { downFile } from '../../static/function';
-import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from '@fluentui/react';
+import { Stack, PrimaryButton, DefaultButton, Panel, StackItem } from '@fluentui/react';
 import { DRAWEROPTION } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
+import { caclMonacoEditorHeight } from '../../static/function';
 import MonacoEditor from 'react-monaco-editor';
 import '../../static/style/logDrawer.scss';
 
@@ -16,7 +17,7 @@ interface ExpDrawerState {
     expDrawerHeight: number;
 }
 
-class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
+class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerState> {
     public _isExperimentMount!: boolean;
     private refreshId!: number | undefined;
 
@@ -88,27 +89,19 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
     render(): React.ReactNode {
         const { closeExpDrawer } = this.props;
         const { experiment, expDrawerHeight } = this.state;
+        const monacoEditorHeight = caclMonacoEditorHeight(expDrawerHeight);
+
         return (
-            <Stack className='logDrawer'>
-                <Panel
-                    isOpen={true}
-                    hasCloseButton={false}
-                    isLightDismiss={true}
-                    onLightDismissClick={closeExpDrawer}
-                    styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
-                >
-                    <Pivot style={{ minHeight: 190 }} className='log-tab-body'>
-                        <PivotItem headerText='Experiment parameters'>
-                            <div className='just-for-log'>
+            <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}>
+                <div className='panel'>
+                    <div className='panelName'>Experiment summary</div>
                     <MonacoEditor
                         width='100%'
-                                    // 92 + marginTop[16]
-                                    height={expDrawerHeight - 108}
+                        height={monacoEditorHeight}
                         language='json'
                         value={experiment}
                         options={DRAWEROPTION}
                     />
-                            </div>
                     <Stack horizontal className='buttons'>
                         <StackItem grow={50} className='download'>
                             <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
@@ -117,12 +110,10 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
                             <DefaultButton text='Close' onClick={closeExpDrawer} />
                         </StackItem>
                     </Stack>
-                        </PivotItem>
-                    </Pivot>
+                </div>
             </Panel>
-            </Stack>
         );
     }
 }
 
-export default ExperimentDrawer;
+export default ExperimentSummaryPanel;

ts/webui/src/components/modals/LogPanel.tsx

@@ -29,7 +29,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
             nniManagerLogStr: null,
             dispatcherLogStr: null,
             isLoading: true,
-            logDrawerHeight: window.innerHeight - 48
+            logDrawerHeight: window.innerHeight
         };
     }
 
@@ -64,7 +64,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
     );
 
     setLogDrawerHeight = (): void => {
-        this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
+        this.setState(() => ({ logDrawerHeight: window.innerHeight }));
     };
 
     async componentDidMount(): Promise<void> {
@@ -80,7 +80,8 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
     render(): React.ReactNode {
         const { closeDrawer, activeTab } = this.props;
         const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
-
+        // tab[height: 56] + tab[margin-bottom: 20] + button[32] + button[margin-top: 45, -bottom: 7] + fluent-panel own paddingBottom[20] + title-border[2]
+        const monacoHeight = logDrawerHeight - 182;
         return (
             <Stack>
                 <Panel
@@ -90,15 +91,13 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                     isLightDismiss={true}
                     onLightDismissClick={closeDrawer}
                 >
-                    <div className='log-tab-body'>
-                        <Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
-                            {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
+                    <Pivot selectedKey={activeTab} style={{ minHeight: 190 }}>
                         <PivotItem headerText='Dispatcher log' key='dispatcher'>
+                            <div className='panel logMargin'>
                                 <MonacoHTML
                                     content={dispatcherLogStr || 'Loading...'}
                                     loading={isLoading}
-                                    // paddingTop[16] + tab[44] + button[32]
-                                    height={logDrawerHeight - 92}
+                                    height={monacoHeight}
                                 />
                                 <Stack horizontal className='buttons'>
                                     <StackItem grow={12} className='download'>
@@ -108,13 +107,14 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                                         <DefaultButton text='Close' onClick={closeDrawer} />
                                     </StackItem>
                                 </Stack>
+                            </div>
                         </PivotItem>
                         <PivotItem headerText='NNIManager log' key='nnimanager'>
-                                {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
+                            <div className='panel logMargin'>
                                 <MonacoHTML
                                     content={nniManagerLogStr || 'Loading...'}
                                     loading={isLoading}
-                                    height={logDrawerHeight - 92}
+                                    height={monacoHeight}
                                 />
                                 <Stack horizontal className='buttons'>
                                     <StackItem grow={12} className='download'>
@@ -124,9 +124,9 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                                         <DefaultButton text='Close' onClick={closeDrawer} />
                                     </StackItem>
                                 </Stack>
+                            </div>
                         </PivotItem>
                     </Pivot>
-                    </div>
                 </Panel>
             </Stack>
         );

ts/webui/src/components/public-child/MonacoEditor.tsx

@@ -27,7 +27,7 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
     render(): React.ReactNode {
         const { content, loading, height } = this.props;
         return (
-            <div className='just-for-log'>
+            <React.Fragment>
                 {loading ? (
                     <Spinner
                         label='Wait, wait...'
@@ -46,7 +46,7 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
                 ) : (
                     <MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
                 )}
-            </div>
+            </React.Fragment>
         );
     }
 }

ts/webui/src/components/slideNav/IconButtonTemplet.tsx

+import React from 'react';
+import { DefaultButton, Icon } from '@fluentui/react';
+
+interface ButtonProps {
+    icon: string;
+    btuName: string;
+    event: any;
+}
+class IconButtonTemplet extends React.Component<ButtonProps, {}> {
+    constructor(props: ButtonProps) {
+        super(props);
+    }
+
+    render(): React.ReactNode {
+        const { icon, btuName, event } = this.props;
+        return (
+            <div className='container'>
+                <DefaultButton className='icon'>
+                    <Icon iconName={icon} />
+                </DefaultButton>
+                <DefaultButton className='integralBtn' onClick={event}>
+                    <Icon iconName={icon} />
+                    <span className='margin'>{btuName}</span>
+                </DefaultButton>
+            </div>
+        );
+    }
+}
+export default IconButtonTemplet;

ts/webui/src/components/public-child/config/TrialConfigButton.tsx → ts/webui/src/components/slideNav/SlideNavBtns.tsx

 import React, { useState, useCallback } from 'react';
-import { DefaultButton, Stack } from '@fluentui/react';
+import { Stack } from '@fluentui/react';
 import TrialConfigPanel from './TrialConfigPanel';
-import '../../../static/style/overview/config.scss';
+import LogPanel from '../modals/LogPanel';
+import IconButtonTemplate from './IconButtonTemplet';
+import '../../static/style/overview/panel.scss';
 
-export const TrialConfigButton = (): any => {
+export const SlideNavBtns = (): any => {
     const [isShowConfigPanel, setShowConfigPanle] = useState(false);
-    const [activeTab, setActiveTab] = useState('1');
+    const [isShowLogPanel, setShowLogPanel] = useState(false);
+    const [panelName, setPanelName] = useState('');
     const hideConfigPanel = useCallback(() => setShowConfigPanle(false), []);
     const showTrialConfigpPanel = useCallback(() => {
         setShowConfigPanle(true);
-        setActiveTab('config');
+        setPanelName('config');
     }, []);
     const showSearchSpacePanel = useCallback(() => {
         setShowConfigPanle(true);
-        setActiveTab('search space');
+        setPanelName('search space');
+    }, []);
+    const showLogPanel = useCallback(() => {
+        setShowLogPanel(true);
+    }, []);
+    const hideLogPanel = useCallback(() => {
+        setShowLogPanel(false);
     }, []);
     return (
+        // right side nav buttons
         <React.Fragment>
             <Stack className='config'>
-                <DefaultButton text='Search space' onClick={showSearchSpacePanel} />
-                <DefaultButton text='Config' onClick={showTrialConfigpPanel} />
+                <IconButtonTemplate icon='DocumentSearch' btuName='Search space' event={showSearchSpacePanel} />
+                <IconButtonTemplate icon='Archive' btuName='Config' event={showTrialConfigpPanel} />
+                <IconButtonTemplate icon='FilePDB' btuName='Log files' event={showLogPanel} />
             </Stack>
-            {isShowConfigPanel && <TrialConfigPanel hideConfigPanel={hideConfigPanel} activeTab={activeTab} />}
+            {isShowConfigPanel && <TrialConfigPanel panelName={panelName} hideConfigPanel={hideConfigPanel} />}
+            {/* the panel for dispatcher & nnimanager log message */}
+            {isShowLogPanel && <LogPanel closeDrawer={hideLogPanel} />}
         </React.Fragment>
     );
 };

ts/webui/src/components/public-child/config/TrialConfigPanel.tsx → ts/webui/src/components/slideNav/TrialConfigPanel.tsx

 import * as React from 'react';
-import { Stack, Panel, Pivot, PivotItem, PrimaryButton } from '@fluentui/react';
-import { EXPERIMENT } from '../../../static/datamodel';
+import { Stack, Panel, PrimaryButton } from '@fluentui/react';
+import { EXPERIMENT } from '../../static/datamodel';
 import MonacoEditor from 'react-monaco-editor';
-import { MONACO } from '../../../static/const';
-import { AppContext } from '../../../App';
-import { convertDuration, convertTimeAsUnit } from '../../../static/function';
-import { prettyStringify } from '../../../static/json_util';
+import { MONACO } from '../../static/const';
+import { AppContext } from '../../App';
+import { convertDuration, convertTimeAsUnit, caclMonacoEditorHeight } from '../../static/function';
+import { prettyStringify } from '../../static/json_util';
 import lodash from 'lodash';
-import '../../../static/style/logDrawer.scss';
+import '../../static/style/logDrawer.scss';
 
 interface LogDrawerProps {
     hideConfigPanel: () => void;
-    activeTab?: string;
+    panelName: string;
 }
 
 interface LogDrawerState {
@@ -19,6 +19,12 @@ interface LogDrawerState {
     innerWidth: number;
 }
 
+/**
+ * search space
+ * config
+ * model
+ */
+
 class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
     constructor(props: LogDrawerProps) {
         super(props);
@@ -43,11 +49,9 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
     }
 
     render(): React.ReactNode {
-        const { hideConfigPanel, activeTab } = this.props;
+        const { hideConfigPanel, panelName } = this.props;
         const { panelInnerHeight, innerWidth } = this.state;
-        // [marginTop 16px] + [Search space 46px] +
-        // button[height: 32px, marginTop: 45px, marginBottom: 25px] + [padding-bottom: 20px]
-        const monacoEditorHeight = panelInnerHeight - 184;
+        const monacoEditorHeight = caclMonacoEditorHeight(panelInnerHeight);
         const blacklist = [
             'id',
             'logDir',
@@ -83,12 +87,10 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
                                 isLightDismiss={true}
                                 onLightDismissClick={hideConfigPanel}
                             >
-                                <div className='log-tab-body'>
-                                    <Pivot
-                                        initialSelectedKey={activeTab}
-                                        style={{ minHeight: 190, paddingTop: '16px' }}
-                                    >
-                                        <PivotItem headerText='Search space' itemKey='search space'>
+                                <div className='panel'>
+                                    {panelName === 'search space' ? (
+                                        <div>
+                                            <div className='panelName'>Search space</div>
                                             <MonacoEditor
                                                 height={monacoEditorHeight}
                                                 language='json'
@@ -96,9 +98,10 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
                                                 value={prettyStringify(EXPERIMENT.searchSpace, prettyWidth, 2)}
                                                 options={MONACO}
                                             />
-                                        </PivotItem>
-                                        <PivotItem headerText='Config' itemKey='config'>
+                                        </div>
+                                    ) : (
                                         <div className='profile'>
+                                            <div className='panelName'>Config</div>
                                             <MonacoEditor
                                                 width='100%'
                                                 height={monacoEditorHeight}
@@ -108,10 +111,9 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
                                                 options={MONACO}
                                             />
                                         </div>
-                                        </PivotItem>
-                                    </Pivot>
-                                </div>
+                                    )}
                                     <PrimaryButton text='Close' className='configClose' onClick={hideConfigPanel} />
+                                </div>
                             </Panel>
                         </Stack>
                     );

ts/webui/src/static/function.ts

@@ -262,6 +262,13 @@ function formatComplexTypeValue(value: any): string | number {
     }
 }
 
+function caclMonacoEditorHeight(height): number {
+    // [Search space 56px] + [marginBottom 18px] +
+    // button[height: 32px, marginTop: 45px, marginBottom: 7px]
+    // panel own padding-bottom: 20px;
+    return height - 178;
+}
+
 export {
     convertTime,
     convertDuration,
@@ -280,5 +287,6 @@ export {
     isArrayType,
     requestAxios,
     isNaNorInfinity,
-    formatComplexTypeValue
+    formatComplexTypeValue,
+    caclMonacoEditorHeight
 };

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

+$buttonsMarginTop: 45px;
+$buttonsMarginBottom: 7px;
+$navBarHeight: 56px;
+$navBarMarginBottom: 18px;
+
 .download {
     button,
     button:active,
@@ -7,22 +12,51 @@
     }
 }
 
-.log-tab-body {
-    .refresh {
-        margin-left: 10px;
-        display: none;
-    }
-}
-
 /* office-fabric-ui */
 .ms-Panel-main {
     width: 55%;
     background: #fff;
+
+    .ms-Panel-content {
+        padding: 0;
+    }
+
+    .ms-Pivot {
+        line-height: 56px;
+        padding: 0 38px;
+        background: #f2f2f2;
+
+        .ms-Pivot-linkContent:hover {
+            border-bottom: 2px solid #ccc;
+        }
+
+        .is-selected {
+            .ms-Pivot-linkContent:hover {
+                border: none;
+            }
+        }
+    }
+}
+
+.panel {
+    padding: 0 38px;
+}
+
+// for log panel editor
+.logMargin {
+    margin-top: 20px;
+}
+
+.panelName {
+    line-height: $navBarHeight;
+    font-size: 14px;
+    margin-bottom: $navBarMarginBottom;
+    font-weight: 500;
 }
 
 /* log drawer download & close button's row */
 .buttons {
-    margin-top: 16px;
+    margin: $buttonsMarginTop 0 $buttonsMarginBottom 0;
 
     .close {
         text-align: right;
@@ -30,5 +64,5 @@
 }
 
 .configClose {
-    margin: 45px 0 25px 0;
+    margin: $buttonsMarginTop 0 $buttonsMarginBottom 0;
 }

ts/webui/src/static/style/overview/config.scss → ts/webui/src/static/style/overview/panel.scss

+$buttonBorderRadius: 23px;
+
 .config {
     position: fixed;
     right: 0;
@@ -5,10 +7,10 @@
 
     .ms-Button--default {
         padding: 0 8px;
-        margin: 0 0 12px 0;
+        margin-bottom: 12px;
         border: none;
         box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-        border-radius: 18px 0 0 18px;
+        border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
         font-size: 12px;
         text-align: left;
 
@@ -17,9 +19,41 @@
         }
     }
 
-    .ms-Button--default:hover {
-        background-color: #0071bc;
+    .integralBtn {
+        display: none;
+    }
+
+    .margin {
+        margin-left: 10px;
+    }
+}
+
+.container {
+    text-align: right;
+
+    .icon {
+        min-width: 50px;
+
+        i {
+            font-size: 16px;
+        }
+    }
+
+    &:hover {
+        .icon {
+            display: none;
+        }
+
+        .integralBtn {
+            display: block;
             color: #fff;
+            border: 1px solid blue;
+            background-color: #0071bc;
+
+            i {
+                font-size: 14px;
+            }
+        }
     }
 }