Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

Commit

Permalink
[webui] UX refine based on v0.9 bug bash feedbacks (#1221)
Browse files Browse the repository at this point in the history 
* fix some comments

* update picture in webui document
  • Loading branch information
@lvybriage @leckie-chn
lvybriage authored and leckie-chn committed Jul 1, 2019
1 parent ec5c35d commit 2c1811b
Show file tree
Hide file tree
Showing 11 changed files with 170 additions and 127 deletions.
Binary file modified docs/img/webui-img/addColumn.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/img/webui-img/compare.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/img/webui-img/detail-local.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/webui/src/components/Modal/Compare.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ class Compare extends React.Component<CompareProps, {}> {
<td />
{Object.keys(idList).map(key => {
return (
<td className="value" key={key}>{idList[key]}</td>
<td className="value idList" key={key}>{idList[key]}</td>
);
})}
</tr>
Expand Down Expand Up @@ -193,6 +193,7 @@ class Compare extends React.Component<CompareProps, {}> {
destroyOnClose={true}
maskClosable={false}
width="90%"
// centered={true}
>
<Row>{this.intermediate()}</Row>
<Row>{this.initColumn()}</Row>
Expand Down
174 changes: 95 additions & 79 deletions src/webui/src/components/SlideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import MediaQuery from 'react-responsive';
import { DOWNLOAD_IP } from '../static/const';
import { Row, Col, Menu, Dropdown, Icon, Select } from 'antd';
import { Row, Col, Menu, Dropdown, Icon, Select, Button } from 'antd';
const { SubMenu } = Menu;
const { Option } = Select;
import '../static/style/slideBar.scss';
Expand All @@ -14,6 +14,7 @@ interface SliderState {
version: string;
menuVisible: boolean;
navBarVisible: boolean;
isdisabledFresh: boolean;
}

interface SliderProps {
Expand All @@ -37,6 +38,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
version: '',
menuVisible: false,
navBarVisible: false,
isdisabledFresh: false
};
}

Expand Down Expand Up @@ -224,9 +226,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
<Menu onClick={this.handleMenuClick} className="menuModal">
<Menu.Item key="overview"><Link to={'/oview'}>Overview</Link></Menu.Item>
<Menu.Item key="detail"><Link to={'/detail'}>Trials detail</Link></Menu.Item>
<Menu.Item key="fresh">
<span className="fresh" onClick={this.fresh}><span>Fresh</span></span>
</Menu.Item>
<Menu.Item key="feedback">
<a href={feedBackLink} target="_blank">Feedback</a>
</Menu.Item>
Expand All @@ -249,25 +248,41 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
}

select = () => {
const { isdisabledFresh } = this.state;
return (
<Select
onSelect={this.getInterval}
defaultValue="Refresh every 10s"
className="interval"
>
<Option value="close">Disable Auto Refresh</Option>
<Option value="10">Refresh every 10s</Option>
<Option value="20">Refresh every 20s</Option>
<Option value="30">Refresh every 30s</Option>
<Option value="60">Refresh every 1min</Option>
</Select>
<div className="interval">
<Button
className="fresh"
onClick={this.fresh}
type="ghost"
disabled={isdisabledFresh}
>
<Icon type="sync" /><span>Refresh</span>
</Button>
<Select
onSelect={this.getInterval}
defaultValue="Refresh every 10s"
>
<Option value="close">Disable Auto Refresh</Option>
<Option value="10">Refresh every 10s</Option>
<Option value="20">Refresh every 20s</Option>
<Option value="30">Refresh every 30s</Option>
<Option value="60">Refresh every 1min</Option>
</Select>
</div>
);
}

fresh = (event: React.SyntheticEvent<EventTarget>) => {
event.preventDefault();
const whichPage = window.location.pathname;
this.props.changeFresh(whichPage);
event.stopPropagation();
if (this._isMounted) {
this.setState({ isdisabledFresh: true }, () => {
const whichPage = window.location.pathname;
this.props.changeFresh(whichPage);
setTimeout(() => { this.setState(() => ({ isdisabledFresh: false })); }, 1000);
});
}
}

componentDidMount() {
Expand All @@ -284,74 +299,75 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
return (
<Row>
<MediaQuery query="(min-width: 1299px)">
<Row className="nav">
<ul className="link">
<li className="logo">
<Col span={18}>
<MediaQuery query="(min-width: 1299px)">
<Row className="nav">
<ul className="link">
<li className="logo">
<Link to={'/oview'}>
<img
src={require('../static/img/logo2.png')}
style={{ width: 88 }}
alt="NNI logo"
/>
</Link>
</li>
<li className="tab firstTab">
<Link to={'/oview'} activeClassName="high">
Overview
</Link>
</li>
<li className="tab">
<Link to={'/detail'} activeClassName="high">
Trials detail
</Link>
</li>
<li className="feedback">
<Dropdown
className="dropdown"
overlay={this.menu()}
onVisibleChange={this.handleVisibleChange}
visible={menuVisible}
trigger={['click']}
>
<a className="ant-dropdown-link" href="#">
Download <Icon type="down" />
</a>
</Dropdown>
<a href={feed} target="_blank">
<img
src={require('../static/img/icon/issue.png')}
alt="NNI github issue"
/>
Feedback
</a>
<span className="version">Version: {version}</span>
</li>
</ul>
</Row>
</MediaQuery>
</Col>
<Col span={18}>
<MediaQuery query="(max-width: 1299px)">
<Row className="little">
<Col span={1} className="menu">
<Dropdown overlay={this.navigationBar()} trigger={['click']}>
<Icon type="unordered-list" className="more" />
</Dropdown>
</Col>
<Col span={14} className="logo">
<Link to={'/oview'}>
<img
src={require('../static/img/logo2.png')}
style={{ width: 88 }}
style={{ width: 80 }}
alt="NNI logo"
/>
</Link>
</li>
<li className="tab firstTab">
<Link to={'/oview'} activeClassName="high">
Overview
</Link>
</li>
<li className="tab">
<Link to={'/detail'} activeClassName="high">
Trials detail
</Link>
</li>
<li className="feedback">
<span className="fresh" onClick={this.fresh}>
<Icon type="sync" /><span>Fresh</span>
</span>
<Dropdown
className="dropdown"
overlay={this.menu()}
onVisibleChange={this.handleVisibleChange}
visible={menuVisible}
trigger={['click']}
>
<a className="ant-dropdown-link" href="#">
Download <Icon type="down" />
</a>
</Dropdown>
<a href={feed} target="_blank">
<img
src={require('../static/img/icon/issue.png')}
alt="NNI github issue"
/>
Feedback
</a>
<span className="version">Version: {version}</span>
</li>
</ul>
</Row>
</MediaQuery>
<MediaQuery query="(max-width: 1299px)">
<Row className="little">
<Col span={6} className="menu">
<Dropdown overlay={this.navigationBar()} trigger={['click']}>
<Icon type="unordered-list" className="more" />
</Dropdown>
</Col>
<Col span={10} className="logo">
<Link to={'/oview'}>
<img
src={require('../static/img/logo2.png')}
style={{ width: 88 }}
alt="NNI logo"
/>
</Link>
</Col>
</Row>
</MediaQuery>
{this.select()}
</Col>
</Row>
</MediaQuery>
</Col>
<Col span={3}> {this.select()} </Col>
</Row>
);
}
Expand Down
6 changes: 2 additions & 4 deletions src/webui/src/components/TrialsDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,15 +394,13 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
</Col>
<Col span={14} className="right">
<Button
type="primary"
className="tableButton editStyle"
className="common"
onClick={this.tableList ? this.tableList.addColumn : this.test}
>
Add column
</Button>
<Button
type="primary"
className="tableButton editStyle mediateBtn"
className="mediateBtn common"
// use child-component tableList's function, the function is in child-component.
onClick={this.tableList ? this.tableList.compareBtn : this.test}
>
Expand Down
17 changes: 9 additions & 8 deletions src/webui/src/components/trial-detail/Duration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,9 @@ class Duration extends React.Component<DurationProps, DurationState> {
}

shouldComponentUpdate(nextProps: DurationProps, nextState: DurationState) {

const { whichGraph, source } = nextProps;
if (whichGraph === '3') {
if (whichGraph === '3') {
const beforeSource = this.props.source;
if (whichGraph !== this.props.whichGraph) {
return true;
Expand All @@ -174,13 +174,14 @@ class Duration extends React.Component<DurationProps, DurationState> {
if (source.length !== beforeSource.length) {
return true;
}

if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
return true;
}

if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
return true;
if (beforeSource[beforeSource.length - 1] !== undefined) {
if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
return true;
}
if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
return true;
}
}
}
return false;
Expand Down
37 changes: 20 additions & 17 deletions src/webui/src/components/trial-detail/Intermeidate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface IntermediateState {
eachIntermediateNum: number; // trial's intermediate number count
isLoadconfirmBtn: boolean;
isFilter: boolean;
length: number;
length: number;
clickCounts: number; // user filter intermediate click confirm btn's counts
}

Expand Down Expand Up @@ -136,7 +136,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
},
yAxis: {
type: 'value',
name: 'Scape'
name: 'metric'
}
};
if (this._isMounted) {
Expand Down Expand Up @@ -209,7 +209,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
componentWillReceiveProps(nextProps: IntermediateProps, nextState: IntermediateState) {
const { isFilter, filterSource } = nextState;
const { whichGraph, source } = nextProps;

if (whichGraph === '4') {
if (isFilter === true) {
const pointVal = this.pointInput !== null ? this.pointInput.value : '';
Expand All @@ -226,40 +226,43 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
}

shouldComponentUpdate(nextProps: IntermediateProps, nextState: IntermediateState) {
const { whichGraph } = nextProps;
const { whichGraph, source } = nextProps;
const beforeGraph = this.props.whichGraph;
if (whichGraph === '4') {

const { source } = nextProps;
const { isFilter, length, clickCounts } = nextState;
const beforeLength = this.state.length;
const beforeSource = this.state.detailSource;
const beforeSource = this.props.source;
const beforeClickCounts = this.state.clickCounts;

if (isFilter !== this.state.isFilter) {
return true;
}

if (clickCounts !== beforeClickCounts) {
return true;
}

if (isFilter === false) {
if (whichGraph !== beforeGraph) {
return true;
}
if (length !== beforeLength) {
return true;
}
if (source[source.length - 1].description.intermediate.length !==
beforeSource[beforeSource.length - 1].description.intermediate.length) {
if (beforeSource.length !== source.length) {
return true;
}
if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
return true;
}
if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
return true;
if (beforeSource[beforeSource.length - 1] !== undefined) {
if (source[source.length - 1].description.intermediate.length !==
beforeSource[beforeSource.length - 1].description.intermediate.length) {
return true;
}
if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
return true;
}
if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
return true;
}
}
}
}
Expand Down Expand Up @@ -291,7 +294,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
?
<div>
<Col span={3}>
<span>Scape</span>
<span>Step</span>
<input
placeholder="point"
ref={input => this.pointInput = input}
Expand Down
Loading

0 comments on commit 2c1811b

Please sign in to comment.