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

@@ -1,8 +1,9 @@
 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,41 +89,31 @@ 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'>
-                                <MonacoEditor
-                                    width='100%'
-                                    // 92 + marginTop[16]
-                                    height={expDrawerHeight - 108}
-                                    language='json'
-                                    value={experiment}
-                                    options={DRAWEROPTION}
-                                />
-                            </div>
-                            <Stack horizontal className='buttons'>
-                                <StackItem grow={50} className='download'>
-                                    <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
-                                </StackItem>
-                                <StackItem grow={50} className='close'>
-                                    <DefaultButton text='Close' onClick={closeExpDrawer} />
-                                </StackItem>
-                            </Stack>
-                        </PivotItem>
-                    </Pivot>
-                </Panel>
-            </Stack>
+            <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}>
+                <div className='panel'>
+                    <div className='panelName'>Experiment summary</div>
+                    <MonacoEditor
+                        width='100%'
+                        height={monacoEditorHeight}
+                        language='json'
+                        value={experiment}
+                        options={DRAWEROPTION}
+                    />
+                    <Stack horizontal className='buttons'>
+                        <StackItem grow={50} className='download'>
+                            <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
+                        </StackItem>
+                        <StackItem grow={50} className='close'>
+                            <DefaultButton text='Close' onClick={closeExpDrawer} />
+                        </StackItem>
+                    </Stack>
+                </div>
+            </Panel>
         );
     }
 }
 
-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> */}
-                            <PivotItem headerText='Dispatcher log' key='dispatcher'>
+                    <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>
-                            </PivotItem>
-                            <PivotItem headerText='NNIManager log' key='nnimanager'>
-                                {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
+                            </div>
+                        </PivotItem>
+                        <PivotItem headerText='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>
-                            </PivotItem>
-                        </Pivot>
-                    </div>
+                            </div>
+                        </PivotItem>
+                    </Pivot>
                 </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

@@ -0,0 +1,29 @@
+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;