Skip to content

GitLab

Unverified Commit a3108caf authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Update right nav bar and log position (#3069)

parent 050ee2bb
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 137 deletions
ts/webui/src/App.tsx
View file @ a3108caf
...@@ -4,7 +4,7 @@ import { COLUMN } from './static/const'; ...@@ -4,7 +4,7 @@ import { COLUMN } from './static/const';
import { EXPERIMENT, TRIALS } from './static/datamodel'; import { EXPERIMENT, TRIALS } from './static/datamodel';
import NavCon from './components/NavCon'; import NavCon from './components/NavCon';
import MessageInfo from './components/modals/MessageInfo'; import MessageInfo from './components/modals/MessageInfo';
import { TrialConfigButton } from './components/public-child/config/TrialConfigButton'; import { SlideNavBtns } from './components/slideNav/SlideNavBtns';
import './App.scss'; import './App.scss';
interface AppState { interface AppState {
...@@ -164,7 +164,7 @@ class App extends React.Component<{}, AppState> { ...@@ -164,7 +164,7 @@ class App extends React.Component<{}, AppState> {
updateOverviewPage: this.updateOverviewPage updateOverviewPage: this.updateOverviewPage
}} }}
> >
<TrialConfigButton /> <SlideNavBtns />
</AppContext.Provider> </AppContext.Provider>
{/* if api has error field, show error message */} {/* if api has error field, show error message */}
{errorList.map( {errorList.map(
......
ts/webui/src/components/NavCon.tsx
View file @ a3108caf
...@@ -10,9 +10,8 @@ import { ...@@ -10,9 +10,8 @@ import {
IStackTokens, IStackTokens,
IStackStyles IStackStyles
} from '@fluentui/react'; } from '@fluentui/react';
import LogPanel from './modals/LogPanel'; import ExperimentSummaryPanel from './modals/ExperimentSummaryPanel';
import ExperimentPanel from './modals/ExperimentPanel'; import { infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs'; import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
import { EXPERIMENT } from '../static/datamodel'; import { EXPERIMENT } from '../static/datamodel';
import '../static/style/nav/nav.scss'; import '../static/style/nav/nav.scss';
...@@ -36,7 +35,6 @@ interface NavState { ...@@ -36,7 +35,6 @@ interface NavState {
menuVisible: boolean; menuVisible: boolean;
navBarVisible: boolean; navBarVisible: boolean;
isdisabledFresh: boolean; isdisabledFresh: boolean;
isvisibleLogDrawer: boolean;
isvisibleExperimentDrawer: boolean; isvisibleExperimentDrawer: boolean;
refreshText: string; refreshText: string;
refreshFrequency: number | string; refreshFrequency: number | string;
...@@ -55,7 +53,6 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -55,7 +53,6 @@ class NavCon extends React.Component<NavProps, NavState> {
menuVisible: false, menuVisible: false,
navBarVisible: false, navBarVisible: false,
isdisabledFresh: false, isdisabledFresh: false,
isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer
isvisibleExperimentDrawer: false, isvisibleExperimentDrawer: false,
refreshText: 'Auto refresh', refreshText: 'Auto refresh',
refreshFrequency: 10 refreshFrequency: 10
...@@ -67,16 +64,6 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -67,16 +64,6 @@ class NavCon extends React.Component<NavProps, NavState> {
this.setState({ isvisibleExperimentDrawer: true }); 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 // close download experiment parameters drawer
closeExpDrawer = (): void => { closeExpDrawer = (): void => {
this.setState({ isvisibleExperimentDrawer: false }); this.setState({ isvisibleExperimentDrawer: false });
...@@ -121,7 +108,7 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -121,7 +108,7 @@ class NavCon extends React.Component<NavProps, NavState> {
} }
render(): React.ReactNode { render(): React.ReactNode {
const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state; const { isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
const aboutProps: IContextualMenuProps = { const aboutProps: IContextualMenuProps = {
items: [ items: [
{ {
...@@ -168,38 +155,24 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -168,38 +155,24 @@ class NavCon extends React.Component<NavProps, NavState> {
/> />
<div className='nav-refresh-num'>{refreshFrequency}</div> <div className='nav-refresh-num'>{refreshFrequency}</div>
</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} /> <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
</Stack> </Stack>
</StackItem> </StackItem>
{/* the drawer for dispatcher & nnimanager log message */}
{isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
{isvisibleExperimentDrawer && ( {isvisibleExperimentDrawer && (
<ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} /> <ExperimentSummaryPanel
closeExpDrawer={this.closeExpDrawer}
experimentProfile={EXPERIMENT.profile}
/>
)} )}
</Stack> </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 = { private refreshProps: IContextualMenuProps = {
items: [ items: [
{ {
......
ts/webui/src/components/modals/ExperimentPanel.tsx → ts/webui/src/components/modals/ExperimentSummaryPanel.tsx
View file @ a3108caf
import * as React from 'react'; import * as React from 'react';
import { downFile } from '../../static/function'; 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 { DRAWEROPTION } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel'; import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { caclMonacoEditorHeight } from '../../static/function';
import MonacoEditor from 'react-monaco-editor'; import MonacoEditor from 'react-monaco-editor';
import '../../static/style/logDrawer.scss'; import '../../static/style/logDrawer.scss';
...@@ -16,7 +17,7 @@ interface ExpDrawerState { ...@@ -16,7 +17,7 @@ interface ExpDrawerState {
expDrawerHeight: number; expDrawerHeight: number;
} }
class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerState> {
public _isExperimentMount!: boolean; public _isExperimentMount!: boolean;
private refreshId!: number | undefined; private refreshId!: number | undefined;
...@@ -88,41 +89,31 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -88,41 +89,31 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
render(): React.ReactNode { render(): React.ReactNode {
const { closeExpDrawer } = this.props; const { closeExpDrawer } = this.props;
const { experiment, expDrawerHeight } = this.state; const { experiment, expDrawerHeight } = this.state;
const monacoEditorHeight = caclMonacoEditorHeight(expDrawerHeight);
return ( return (
<Stack className='logDrawer'> <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}>
<Panel <div className='panel'>
isOpen={true} <div className='panelName'>Experiment summary</div>
hasCloseButton={false} <MonacoEditor
isLightDismiss={true} width='100%'
onLightDismissClick={closeExpDrawer} height={monacoEditorHeight}
styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }} language='json'
> value={experiment}
<Pivot style={{ minHeight: 190 }} className='log-tab-body'> options={DRAWEROPTION}
<PivotItem headerText='Experiment parameters'> />
<div className='just-for-log'> <Stack horizontal className='buttons'>
<MonacoEditor <StackItem grow={50} className='download'>
width='100%' <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
// 92 + marginTop[16] </StackItem>
height={expDrawerHeight - 108} <StackItem grow={50} className='close'>
language='json' <DefaultButton text='Close' onClick={closeExpDrawer} />
value={experiment} </StackItem>
options={DRAWEROPTION} </Stack>
/> </div>
</div> </Panel>
<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>
); );
} }
} }
export default ExperimentDrawer; export default ExperimentSummaryPanel;
ts/webui/src/components/modals/LogPanel.tsx
View file @ a3108caf
...@@ -29,7 +29,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -29,7 +29,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
nniManagerLogStr: null, nniManagerLogStr: null,
dispatcherLogStr: null, dispatcherLogStr: null,
isLoading: true, isLoading: true,
logDrawerHeight: window.innerHeight - 48 logDrawerHeight: window.innerHeight
}; };
} }
...@@ -64,7 +64,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -64,7 +64,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
); );
setLogDrawerHeight = (): void => { setLogDrawerHeight = (): void => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 })); this.setState(() => ({ logDrawerHeight: window.innerHeight }));
}; };
async componentDidMount(): Promise<void> { async componentDidMount(): Promise<void> {
...@@ -80,7 +80,8 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -80,7 +80,8 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
render(): React.ReactNode { render(): React.ReactNode {
const { closeDrawer, activeTab } = this.props; const { closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state; 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 ( return (
<Stack> <Stack>
<Panel <Panel
...@@ -90,15 +91,13 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -90,15 +91,13 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
isLightDismiss={true} isLightDismiss={true}
onLightDismissClick={closeDrawer} onLightDismissClick={closeDrawer}
> >
<div className='log-tab-body'> <Pivot selectedKey={activeTab} style={{ minHeight: 190 }}>
<Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}> <PivotItem headerText='Dispatcher log' key='dispatcher'>
{/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */} <div className='panel logMargin'>
<PivotItem headerText='Dispatcher log' key='dispatcher'>
<MonacoHTML <MonacoHTML
content={dispatcherLogStr || 'Loading...'} content={dispatcherLogStr || 'Loading...'}
loading={isLoading} loading={isLoading}
// paddingTop[16] + tab[44] + button[32] height={monacoHeight}
height={logDrawerHeight - 92}
/> />
<Stack horizontal className='buttons'> <Stack horizontal className='buttons'>
<StackItem grow={12} className='download'> <StackItem grow={12} className='download'>
...@@ -108,13 +107,14 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -108,13 +107,14 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
<DefaultButton text='Close' onClick={closeDrawer} /> <DefaultButton text='Close' onClick={closeDrawer} />
</StackItem> </StackItem>
</Stack> </Stack>
</PivotItem> </div>
<PivotItem headerText='NNIManager log' key='nnimanager'> </PivotItem>
{/* <TabPane tab="NNImanager Log" key="nnimanager"> */} <PivotItem headerText='NNIManager log' key='nnimanager'>
<div className='panel logMargin'>
<MonacoHTML <MonacoHTML
content={nniManagerLogStr || 'Loading...'} content={nniManagerLogStr || 'Loading...'}
loading={isLoading} loading={isLoading}
height={logDrawerHeight - 92} height={monacoHeight}
/> />
<Stack horizontal className='buttons'> <Stack horizontal className='buttons'>
<StackItem grow={12} className='download'> <StackItem grow={12} className='download'>
...@@ -124,9 +124,9 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -124,9 +124,9 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
<DefaultButton text='Close' onClick={closeDrawer} /> <DefaultButton text='Close' onClick={closeDrawer} />
</StackItem> </StackItem>
</Stack> </Stack>
</PivotItem> </div>
</Pivot> </PivotItem>
</div> </Pivot>
</Panel> </Panel>
</Stack> </Stack>
); );
......
ts/webui/src/components/public-child/MonacoEditor.tsx
View file @ a3108caf
...@@ -27,7 +27,7 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> { ...@@ -27,7 +27,7 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
render(): React.ReactNode { render(): React.ReactNode {
const { content, loading, height } = this.props; const { content, loading, height } = this.props;
return ( return (
<div className='just-for-log'> <React.Fragment>
{loading ? ( {loading ? (
<Spinner <Spinner
label='Wait, wait...' label='Wait, wait...'
...@@ -46,7 +46,7 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> { ...@@ -46,7 +46,7 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
) : ( ) : (
<MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} /> <MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
)} )}
</div> </React.Fragment>
); );
} }
} }
......
ts/webui/src/components/slideNav/IconButtonTemplet.tsx 0 → 100644
View file @ a3108caf
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
View file @ a3108caf
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { DefaultButton, Stack } from '@fluentui/react'; import { Stack } from '@fluentui/react';
import TrialConfigPanel from './TrialConfigPanel'; 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 [isShowConfigPanel, setShowConfigPanle] = useState(false);
const [activeTab, setActiveTab] = useState('1'); const [isShowLogPanel, setShowLogPanel] = useState(false);
const [panelName, setPanelName] = useState('');
const hideConfigPanel = useCallback(() => setShowConfigPanle(false), []); const hideConfigPanel = useCallback(() => setShowConfigPanle(false), []);
const showTrialConfigpPanel = useCallback(() => { const showTrialConfigpPanel = useCallback(() => {
setShowConfigPanle(true); setShowConfigPanle(true);
setActiveTab('config'); setPanelName('config');
}, []); }, []);
const showSearchSpacePanel = useCallback(() => { const showSearchSpacePanel = useCallback(() => {
setShowConfigPanle(true); setShowConfigPanle(true);
setActiveTab('search space'); setPanelName('search space');
}, []);
const showLogPanel = useCallback(() => {
setShowLogPanel(true);
}, []);
const hideLogPanel = useCallback(() => {
setShowLogPanel(false);
}, []); }, []);
return ( return (
// right side nav buttons
<React.Fragment> <React.Fragment>
<Stack className='config'> <Stack className='config'>
<DefaultButton text='Search space' onClick={showSearchSpacePanel} /> <IconButtonTemplate icon='DocumentSearch' btuName='Search space' event={showSearchSpacePanel} />
<DefaultButton text='Config' onClick={showTrialConfigpPanel} /> <IconButtonTemplate icon='Archive' btuName='Config' event={showTrialConfigpPanel} />
<IconButtonTemplate icon='FilePDB' btuName='Log files' event={showLogPanel} />
</Stack> </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> </React.Fragment>
); );
}; };
ts/webui/src/components/public-child/config/TrialConfigPanel.tsx → ts/webui/src/components/slideNav/TrialConfigPanel.tsx
View file @ a3108caf
import * as React from 'react'; import * as React from 'react';
import { Stack, Panel, Pivot, PivotItem, PrimaryButton } from '@fluentui/react'; import { Stack, Panel, PrimaryButton } from '@fluentui/react';
import { EXPERIMENT } from '../../../static/datamodel'; import { EXPERIMENT } from '../../static/datamodel';
import MonacoEditor from 'react-monaco-editor'; import MonacoEditor from 'react-monaco-editor';
import { MONACO } from '../../../static/const'; import { MONACO } from '../../static/const';
import { AppContext } from '../../../App'; import { AppContext } from '../../App';
import { convertDuration, convertTimeAsUnit } from '../../../static/function'; import { convertDuration, convertTimeAsUnit, caclMonacoEditorHeight } from '../../static/function';
import { prettyStringify } from '../../../static/json_util'; import { prettyStringify } from '../../static/json_util';
import lodash from 'lodash'; import lodash from 'lodash';
import '../../../static/style/logDrawer.scss'; import '../../static/style/logDrawer.scss';
interface LogDrawerProps { interface LogDrawerProps {
hideConfigPanel: () => void; hideConfigPanel: () => void;
activeTab?: string; panelName: string;
} }
interface LogDrawerState { interface LogDrawerState {
...@@ -19,6 +19,12 @@ interface LogDrawerState { ...@@ -19,6 +19,12 @@ interface LogDrawerState {
innerWidth: number; innerWidth: number;
} }
/**
* search space
* config
* model
*/
class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> { class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
constructor(props: LogDrawerProps) { constructor(props: LogDrawerProps) {
super(props); super(props);
...@@ -43,11 +49,9 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -43,11 +49,9 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
} }
render(): React.ReactNode { render(): React.ReactNode {
const { hideConfigPanel, activeTab } = this.props; const { hideConfigPanel, panelName } = this.props;
const { panelInnerHeight, innerWidth } = this.state; const { panelInnerHeight, innerWidth } = this.state;
// [marginTop 16px] + [Search space 46px] + const monacoEditorHeight = caclMonacoEditorHeight(panelInnerHeight);
// button[height: 32px, marginTop: 45px, marginBottom: 25px] + [padding-bottom: 20px]
const monacoEditorHeight = panelInnerHeight - 184;
const blacklist = [ const blacklist = [
'id', 'id',
'logDir', 'logDir',
...@@ -83,12 +87,10 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -83,12 +87,10 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
isLightDismiss={true} isLightDismiss={true}
onLightDismissClick={hideConfigPanel} onLightDismissClick={hideConfigPanel}
> >
<div className='log-tab-body'> <div className='panel'>
<Pivot {panelName === 'search space' ? (
initialSelectedKey={activeTab} <div>
style={{ minHeight: 190, paddingTop: '16px' }} <div className='panelName'>Search space</div>
>
<PivotItem headerText='Search space' itemKey='search space'>
<MonacoEditor <MonacoEditor
height={monacoEditorHeight} height={monacoEditorHeight}
language='json' language='json'
...@@ -96,22 +98,22 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -96,22 +98,22 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
value={prettyStringify(EXPERIMENT.searchSpace, prettyWidth, 2)} value={prettyStringify(EXPERIMENT.searchSpace, prettyWidth, 2)}
options={MONACO} options={MONACO}
/> />
</PivotItem> </div>
<PivotItem headerText='Config' itemKey='config'> ) : (
<div className='profile'> <div className='profile'>
<MonacoEditor <div className='panelName'>Config</div>
width='100%' <MonacoEditor
height={monacoEditorHeight} width='100%'
language='json' height={monacoEditorHeight}
theme='vs-light' language='json'
value={showProfile} theme='vs-light'
options={MONACO} value={showProfile}
/> options={MONACO}
</div> />
</PivotItem> </div>
</Pivot> )}
<PrimaryButton text='Close' className='configClose' onClick={hideConfigPanel} />
</div> </div>
<PrimaryButton text='Close' className='configClose' onClick={hideConfigPanel} />
</Panel> </Panel>
</Stack> </Stack>
); );
......
ts/webui/src/static/function.ts
View file @ a3108caf
...@@ -262,6 +262,13 @@ function formatComplexTypeValue(value: any): string | number { ...@@ -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 { export {
convertTime, convertTime,
convertDuration, convertDuration,
...@@ -280,5 +287,6 @@ export { ...@@ -280,5 +287,6 @@ export {
isArrayType, isArrayType,
requestAxios, requestAxios,
isNaNorInfinity, isNaNorInfinity,
formatComplexTypeValue formatComplexTypeValue,
caclMonacoEditorHeight
}; };
ts/webui/src/static/style/logDrawer.scss
View file @ a3108caf
$buttonsMarginTop: 45px;
$buttonsMarginBottom: 7px;
$navBarHeight: 56px;
$navBarMarginBottom: 18px;
.download { .download {
button, button,
button:active, button:active,
...@@ -7,22 +12,51 @@ ...@@ -7,22 +12,51 @@
} }
} }
.log-tab-body {
.refresh {
margin-left: 10px;
display: none;
}
}
/* office-fabric-ui */ /* office-fabric-ui */
.ms-Panel-main { .ms-Panel-main {
width: 55%; width: 55%;
background: #fff; 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 */ /* log drawer download & close button's row */
.buttons { .buttons {
margin-top: 16px; margin: $buttonsMarginTop 0 $buttonsMarginBottom 0;
.close { .close {
text-align: right; text-align: right;
...@@ -30,5 +64,5 @@ ...@@ -30,5 +64,5 @@
} }
.configClose { .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
View file @ a3108caf
$buttonBorderRadius: 23px;
.config { .config {
position: fixed; position: fixed;
right: 0; right: 0;
...@@ -5,10 +7,10 @@ ...@@ -5,10 +7,10 @@
.ms-Button--default { .ms-Button--default {
padding: 0 8px; padding: 0 8px;
margin: 0 0 12px 0; margin-bottom: 12px;
border: none; border: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); 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; font-size: 12px;
text-align: left; text-align: left;
...@@ -17,9 +19,41 @@ ...@@ -17,9 +19,41 @@
} }
} }
.ms-Button--default:hover { .integralBtn {
background-color: #0071bc; display: none;
color: #fff; }
.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;
}
}
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment