Skip to content

GitLab

"src/webui/git@developer.sourcefind.cn:OpenDAS/nni.git" did not exist on "ebff6778ca5e83845d83e0cf755247fe04a60b18"
Commit 8f778aa5 authored by Lijiao's avatar Lijiao Committed by chicm-ms
Browse files

fix some bugs about webui (#1632)

parent fc7ddcd0
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 65 deletions
src/webui/src/components/Modal/Compare.tsx
View file @ 8f778aa5
...@@ -125,6 +125,11 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -125,6 +125,11 @@ class Compare extends React.Component<CompareProps, {}> {
durationList.push(temp.duration); durationList.push(temp.duration);
parameterList.push(temp.description.parameters); parameterList.push(temp.description.parameters);
}); });
let isComplexSearchSpace;
if (parameterList.length > 0) {
isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object')
? true : false;
}
return ( return (
<table className="compare"> <table className="compare">
<tbody> <tbody>
...@@ -164,22 +169,26 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -164,22 +169,26 @@ class Compare extends React.Component<CompareProps, {}> {
})} })}
</tr> </tr>
{ {
Object.keys(parameterKeys).map(index => { isComplexSearchSpace
return ( ?
<tr key={index}> null
<td className="column" key={index}>{parameterKeys[index]}</td> :
{ Object.keys(parameterKeys).map(index => {
Object.keys(parameterList).map(key => { return (
return ( <tr key={index}>
<td key={key} className="value"> <td className="column" key={index}>{parameterKeys[index]}</td>
{parameterList[key][parameterKeys[index]]} {
</td> Object.keys(parameterList).map(key => {
); return (
}) <td key={key} className="value">
} {parameterList[key][parameterKeys[index]]}
</tr> </td>
); );
}) })
}
</tr>
);
})
} }
</tbody> </tbody>
</table> </table>
......
src/webui/src/components/Modal/ExperimentDrawer.tsx
View file @ 8f778aa5
...@@ -14,6 +14,7 @@ interface ExpDrawerProps { ...@@ -14,6 +14,7 @@ interface ExpDrawerProps {
interface ExpDrawerState { interface ExpDrawerState {
experiment: string; experiment: string;
expDrawerHeight: number;
} }
class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
...@@ -23,7 +24,8 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -23,7 +24,8 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
super(props); super(props);
this.state = { this.state = {
experiment: '' experiment: '',
expDrawerHeight: window.innerHeight - 48
}; };
} }
...@@ -69,9 +71,14 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -69,9 +71,14 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
downFile(experiment, 'experiment.json'); downFile(experiment, 'experiment.json');
} }
onWindowResize = () => {
this.setState(() => ({expDrawerHeight: window.innerHeight - 48}));
}
componentDidMount() { componentDidMount() {
this._isCompareMount = true; this._isCompareMount = true;
this.getExperimentContent(); this.getExperimentContent();
window.addEventListener('resize', this.onWindowResize);
} }
componentWillReceiveProps(nextProps: ExpDrawerProps) { componentWillReceiveProps(nextProps: ExpDrawerProps) {
...@@ -83,12 +90,12 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -83,12 +90,12 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
componentWillUnmount() { componentWillUnmount() {
this._isCompareMount = false; this._isCompareMount = false;
window.removeEventListener('resize', this.onWindowResize);
} }
render() { render() {
const { isVisble, closeExpDrawer } = this.props; const { isVisble, closeExpDrawer } = this.props;
const { experiment } = this.state; const { experiment, expDrawerHeight } = this.state;
const heights: number = window.innerHeight - 48;
return ( return (
<Row className="logDrawer"> <Row className="logDrawer">
<Drawer <Drawer
...@@ -99,15 +106,16 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -99,15 +106,16 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
onClose={closeExpDrawer} onClose={closeExpDrawer}
visible={isVisble} visible={isVisble}
width="54%" width="54%"
height={heights} height={expDrawerHeight}
> >
<div className="card-container log-tab-body" style={{ height: heights }}> {/* 104: tabHeight(40) + tabMarginBottom(16) + buttonHeight(32) + buttonMarginTop(16) */}
<Tabs type="card" style={{ height: heights + 19 }}> <div className="card-container log-tab-body">
<Tabs type="card" style={{ height: expDrawerHeight, minHeight: 190 }}>
<TabPane tab="Experiment Parameters" key="Experiment"> <TabPane tab="Experiment Parameters" key="Experiment">
<div className="just-for-log"> <div className="just-for-log">
<MonacoEditor <MonacoEditor
width="100%" width="100%"
height={heights * 0.9} height={expDrawerHeight - 104}
language="json" language="json"
value={experiment} value={experiment}
options={DRAWEROPTION} options={DRAWEROPTION}
......
src/webui/src/components/Modal/LogDrawer.tsx
View file @ 8f778aa5
...@@ -16,6 +16,7 @@ interface LogDrawerState { ...@@ -16,6 +16,7 @@ interface LogDrawerState {
nniManagerLogStr: string | null; nniManagerLogStr: string | null;
dispatcherLogStr: string | null; dispatcherLogStr: string | null;
isLoading: boolean; isLoading: boolean;
logDrawerHeight: number;
} }
class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
...@@ -28,6 +29,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -28,6 +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
}; };
} }
...@@ -63,18 +65,23 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -63,18 +65,23 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
); );
} }
setLogDrawerHeight = () => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
}
async componentDidMount() { async componentDidMount() {
this.refresh(); this.refresh();
window.addEventListener('resize', this.setLogDrawerHeight);
} }
componentWillUnmount() { componentWillUnmount() {
window.clearTimeout(this.timerId); window.clearTimeout(this.timerId);
window.removeEventListener('resize', this.setLogDrawerHeight);
} }
render() { render() {
const { closeDrawer, activeTab } = this.props; const { closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoading } = this.state; const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
const heights: number = window.innerHeight - 48; // padding top and bottom
return ( return (
<Row> <Row>
<Drawer <Drawer
...@@ -84,16 +91,24 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -84,16 +91,24 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
onClose={closeDrawer} onClose={closeDrawer}
visible={true} visible={true}
width="76%" width="76%"
height={heights} height={logDrawerHeight}
// className="logDrawer" // className="logDrawer"
> >
<div className="card-container log-tab-body" style={{ height: heights }}> <div className="card-container log-tab-body">
<Tabs type="card" defaultActiveKey={activeTab} style={{ height: heights + 19 }}> <Tabs
type="card"
defaultActiveKey={activeTab}
style={{ height: logDrawerHeight, minHeight: 190 }}
>
{/* <Tabs type="card" onTabClick={this.selectwhichLog} defaultActiveKey={activeTab}> */} {/* <Tabs type="card" onTabClick={this.selectwhichLog} defaultActiveKey={activeTab}> */}
{/* <TabPane tab="Dispatcher Log" key="dispatcher"> */} {/* <TabPane tab="Dispatcher Log" key="dispatcher"> */}
<TabPane tab={this.dispatcherHTML()} key="dispatcher"> <TabPane tab={this.dispatcherHTML()} key="dispatcher">
<div> <div>
<MonacoHTML content={dispatcherLogStr || 'Loading...'} loading={isLoading} /> <MonacoHTML
content={dispatcherLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 104}
/>
</div> </div>
<Row className="buttons"> <Row className="buttons">
<Col span={12} className="download"> <Col span={12} className="download">
...@@ -117,7 +132,11 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -117,7 +132,11 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
<TabPane tab={this.nnimanagerHTML()} key="nnimanager"> <TabPane tab={this.nnimanagerHTML()} key="nnimanager">
{/* <TabPane tab="NNImanager Log" key="nnimanager"> */} {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
<div> <div>
<MonacoHTML content={nniManagerLogStr || 'Loading...'} loading={isLoading} /> <MonacoHTML
content={nniManagerLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 104}
/>
</div> </div>
<Row className="buttons"> <Row className="buttons">
<Col span={12} className="download"> <Col span={12} className="download">
...@@ -159,7 +178,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -159,7 +178,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
this.setState({ nniManagerLogStr: res.data }); this.setState({ nniManagerLogStr: res.data });
} }
}); });
Promise.all([ dispatcherPromise, nniManagerPromise ]).then(() => { Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
this.timerId = window.setTimeout(this.refresh, 300); this.timerId = window.setTimeout(this.refresh, 300);
}); });
......
src/webui/src/components/SlideBar.tsx
View file @ 8f778aa5
...@@ -214,7 +214,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> { ...@@ -214,7 +214,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
type="ghost" type="ghost"
> >
<a target="_blank" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html"> <a target="_blank" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html">
<Icon type="question" /><span>Help</span> <img
src={require('../static/img/icon/ques.png')}
alt="question"
className="question"
/>
<span>Help</span>
</a> </a>
</Button> </Button>
</span> </span>
...@@ -329,8 +334,8 @@ class SlideBar extends React.Component<SliderProps, SliderState> { ...@@ -329,8 +334,8 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
render() { render() {
const mobile = (<MediaQuery maxWidth={884}>{this.mobileHTML()}</MediaQuery>); const mobile = (<MediaQuery maxWidth={884}>{this.mobileHTML()}</MediaQuery>);
const tablet = (<MediaQuery minWidth={885} maxWidth={1241}>{this.tabeltHTML()}</MediaQuery>); const tablet = (<MediaQuery minWidth={885} maxWidth={1281}>{this.tabeltHTML()}</MediaQuery>);
const desktop = (<MediaQuery minWidth={1242}>{this.desktopHTML()}</MediaQuery>); const desktop = (<MediaQuery minWidth={1282}>{this.desktopHTML()}</MediaQuery>);
const { isvisibleLogDrawer, activeKey, isvisibleExperimentDrawer } = this.state; const { isvisibleLogDrawer, activeKey, isvisibleExperimentDrawer } = this.state;
return ( return (
<div> <div>
......
src/webui/src/components/public-child/MonacoEditor.tsx
View file @ 8f778aa5
...@@ -6,6 +6,7 @@ import MonacoEditor from 'react-monaco-editor'; ...@@ -6,6 +6,7 @@ import MonacoEditor from 'react-monaco-editor';
interface MonacoEditorProps { interface MonacoEditorProps {
content: string; content: string;
loading: boolean; loading: boolean;
height: number;
} }
class MonacoHTML extends React.Component<MonacoEditorProps, {}> { class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
...@@ -25,18 +26,17 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> { ...@@ -25,18 +26,17 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
} }
render() { render() {
const { content, loading } = this.props; const { content, loading, height } = this.props;
const heights: number = window.innerHeight - 48;
return ( return (
<div className="just-for-log"> <div className="just-for-log">
<Spin <Spin
// tip="Loading..." // tip="Loading..."
style={{ width: '100%', height: heights * 0.9 }} style={{ width: '100%', height: height }}
spinning={loading} spinning={loading}
> >
<MonacoEditor <MonacoEditor
width="100%" width="100%"
height={heights * 0.9} height={height}
language="json" language="json"
value={content} value={content}
options={DRAWEROPTION} options={DRAWEROPTION}
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ 8f778aa5
...@@ -135,17 +135,17 @@ function generateScatterSeries(trials: Trial[]) { ...@@ -135,17 +135,17 @@ function generateScatterSeries(trials: Trial[]) {
function generateBestCurveSeries(trials: Trial[]) { function generateBestCurveSeries(trials: Trial[]) {
let best = trials[0]; let best = trials[0];
const data = [[ best.sequenceId, best.accuracy, best.info.hyperParameters ]]; const data = [[ best.sequenceId, best.accuracy, best.description.parameters ]];
for (let i = 1; i < trials.length; i++) { for (let i = 1; i < trials.length; i++) {
const trial = trials[i]; const trial = trials[i];
const delta = trial.accuracy! - best.accuracy!; const delta = trial.accuracy! - best.accuracy!;
const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0); const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
if (better) { if (better) {
data.push([ trial.sequenceId, trial.accuracy, trial.info.hyperParameters ]); data.push([ trial.sequenceId, trial.accuracy, trial.description.parameters ]);
best = trial; best = trial;
} else { } else {
data.push([ trial.sequenceId, best.accuracy, trial.info.hyperParameters ]); data.push([ trial.sequenceId, best.accuracy, trial.description.parameters ]);
} }
} }
......
src/webui/src/components/trial-detail/Intermediate.tsx
View file @ 8f778aa5
...@@ -262,16 +262,10 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -262,16 +262,10 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<div> <div>
{/* style in para.scss */} {/* style in para.scss */}
<Row className="meline intermediate"> <Row className="meline intermediate">
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
{ {
isFilter isFilter
? ?
<span> <span style={{marginRight: 15}}>
<span className="filter-x"># Intermediate result</span> <span className="filter-x"># Intermediate result</span>
<input <input
// placeholder="point" // placeholder="point"
...@@ -300,6 +294,12 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -300,6 +294,12 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
: :
null null
} }
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
</Row> </Row>
<Row className="intermediate-graph"> <Row className="intermediate-graph">
<ReactEcharts <ReactEcharts
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 8f778aa5
...@@ -332,20 +332,35 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -332,20 +332,35 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Icon type="line-chart" /> <Icon type="line-chart" />
</Button> </Button>
{/* kill job */} {/* kill job */}
<Popconfirm {
title="Are you sure to cancel this trial?" flag
onConfirm={killJob. ?
bind(this, record.key, record.id, record.status)} <Button
> type="default"
<Button disabled={true}
type="default" className="margin-mediate special"
disabled={flag} title="kill"
className="margin-mediate special" >
title="kill" <Icon type="stop" />
> </Button>
<Icon type="stop" /> :
</Button> <Popconfirm
</Popconfirm> title="Are you sure to cancel this trial?"
okText="Yes"
cancelText="No"
onConfirm={killJob.
bind(this, record.key, record.id, record.status)}
>
<Button
type="default"
disabled={false}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
</Popconfirm>
}
</Row> </Row>
); );
}, },
......
src/webui/src/static/style/button.scss
View file @ 8f778aa5
...@@ -6,7 +6,7 @@ Button.tableButton{ ...@@ -6,7 +6,7 @@ Button.tableButton{
border-color: $btnBgcolor; border-color: $btnBgcolor;
height: 26px; height: 26px;
font-size: 14px; font-size: 14px;
margin-top: 2px; margin-top: 4px;
border-radius: 0; border-radius: 0;
} }
......
src/webui/src/static/style/logDrawer.scss
View file @ 8f778aa5
...@@ -25,8 +25,9 @@ ...@@ -25,8 +25,9 @@
height: 100%; height: 100%;
} }
/* log drawer download & close button's row */
.buttons{ .buttons{
margin-top: 11px; margin-top: 16px;
.close{ .close{
text-align: right; text-align: right;
} }
......
src/webui/src/static/style/slideBar.scss
View file @ 8f778aa5
...@@ -21,7 +21,7 @@ $drowHoverBgColor: #e2e2e2; ...@@ -21,7 +21,7 @@ $drowHoverBgColor: #e2e2e2;
padding-bottom: 14px; padding-bottom: 14px;
.down-icon{ .down-icon{
font-size: 20px !important; font-size: 20px !important;
padding-right: 2px; padding-right: 6px;
} }
} }
...@@ -186,6 +186,11 @@ $drowHoverBgColor: #e2e2e2; ...@@ -186,6 +186,11 @@ $drowHoverBgColor: #e2e2e2;
width: 20px; width: 20px;
margin-right: 8px; margin-right: 8px;
} }
/* ? icon style */
.question{
width: 14px;
margin-right: 4px;
}
.feedback{ .feedback{
font-size: 16px; font-size: 16px;
margin: 0 20px; margin: 0 20px;
......
src/webui/src/static/style/trialsDetail.scss
View file @ 8f778aa5
...@@ -15,10 +15,12 @@ ...@@ -15,10 +15,12 @@
.ant-tabs-tab-active{ .ant-tabs-tab-active{
.panelTitle{ .panelTitle{
background-color: #999; background-color: #999;
/*
span{ span{
color: #fff; color: #fff;
font-weight: normal; font-weight: normal;
} }
*/
} }
} }
.panelTitle{ .panelTitle{
......
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