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

[webui] UX refine based on v0.9 bug bash feedbacks #1221

Merged
merged 2 commits into from
Jun 28, 2019
Merged

[webui] UX refine based on v0.9 bug bash feedbacks #1221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed0827e
fix some comments
Jun 27, 2019
74d7d3c
update picture in webui document
Jun 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docs/img/webui-img/addColumn.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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