Skip to content

GitLab

"docs/git@developer.sourcefind.cn:OpenDAS/nni.git" did not exist on "482c70d1ea57dc88c6e354248fc9fc65d0d7841f"
Commit 744885eb authored by Lijiao's avatar Lijiao Committed by chicm-ms
Browse files

Update WebUI (#295)

parent c5c0fa2e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1010 additions and 436 deletions
src/webui/config-overrides.js
View file @ 744885eb
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
module.exports = function override(config, env) { module.exports = function override(config, env) {
const tsLoader = getLoader(
config.module.rules,
rule =>
rule.loader &&
typeof rule.loader === 'string' &&
rule.loader.includes('ts-loader')
);
tsLoader.options = {
getCustomTransformers: () => ({
before: [ tsImportPluginFactory({
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}) ]
})
};
return config; return config;
} };
\ No newline at end of file \ No newline at end of file
src/webui/images.d.ts 0 → 100644
View file @ 744885eb
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
src/webui/package-lock.json deleted 100644 → 0
View file @ c5c0fa2e
{
"name": "my-app",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
},
"base16": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
"integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
},
"core-js": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
},
"encoding": {
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
"integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
"requires": {
"iconv-lite": "0.4.21"
}
},
"fbemitter": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-2.1.1.tgz",
"integrity": "sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=",
"requires": {
"fbjs": "0.8.16"
}
},
"fbjs": {
"version": "0.8.16",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
"integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
"requires": {
"core-js": "1.2.7",
"isomorphic-fetch": "2.2.1",
"loose-envify": "1.3.1",
"object-assign": "4.1.1",
"promise": "7.3.1",
"setimmediate": "1.0.5",
"ua-parser-js": "0.7.17"
}
},
"flux": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/flux/-/flux-3.1.3.tgz",
"integrity": "sha1-0jvtUVp5oi2TOrU6tK2hnQWy8Io=",
"requires": {
"fbemitter": "2.1.1",
"fbjs": "0.8.16"
}
},
"iconv-lite": {
"version": "0.4.21",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
"integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
"requires": {
"safer-buffer": "2.1.2"
}
},
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
},
"isomorphic-fetch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
"requires": {
"node-fetch": "1.7.3",
"whatwg-fetch": "2.0.4"
}
},
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
},
"lodash.curry": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
"integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
},
"lodash.flow": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
"integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
},
"loose-envify": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
"integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
"requires": {
"js-tokens": "3.0.2"
}
},
"node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
"requires": {
"encoding": "0.1.12",
"is-stream": "1.1.0"
}
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"requires": {
"asap": "2.0.6"
}
},
"prop-types": {
"version": "15.6.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
"integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
"requires": {
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
"object-assign": "4.1.1"
}
},
"pure-color": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
"integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
},
"react-base16-styling": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz",
"integrity": "sha1-OFjyTpxN2MvT9wLz901YHKKRcmk=",
"requires": {
"base16": "1.0.0",
"lodash.curry": "4.1.1",
"lodash.flow": "3.5.0",
"pure-color": "1.3.0"
}
},
"react-json-view": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.16.1.tgz",
"integrity": "sha512-9gx2S+b9+LHbjnIzIXrcDU14YI5KP3hhDgNHrQiLsV3dtnzoT8m6j37h7dpCaO1hPLZEc3Q/6VS1QjiLi0HT/w==",
"requires": {
"flux": "3.1.3",
"react-base16-styling": "0.5.3",
"react-textarea-autosize": "5.2.1"
}
},
"react-textarea-autosize": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-5.2.1.tgz",
"integrity": "sha512-bx6z2I35aapr71ggw2yZIA4qhmqeTa4ZVsSaTeFvtf9kfcZppDBh2PbMt8lvbdmzEk7qbSFhAxR9vxEVm6oiMg==",
"requires": {
"prop-types": "15.6.1"
}
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
},
"ua-parser-js": {
"version": "0.7.17",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz",
"integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g=="
},
"whatwg-fetch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
}
}
}
src/webui/package.json
View file @ 744885eb
...@@ -9,24 +9,24 @@ ...@@ -9,24 +9,24 @@
"echarts": "^4.1.0", "echarts": "^4.1.0",
"echarts-for-react": "^2.0.14", "echarts-for-react": "^2.0.14",
"react": "^16.4.2", "react": "^16.4.2",
"react-app-rewired": "^1.5.2",
"react-dom": "^16.4.2", "react-dom": "^16.4.2",
"react-json-tree": "^0.11.0", "react-json-tree": "^0.11.0",
"react-router": "3.2.1" "react-router": "3.2.1",
"react-scripts-ts-antd": "2.17.0"
}, },
"scripts": { "scripts": {
"start": "react-app-rewired start --scripts-version react-scripts-ts", "start": "react-scripts-ts-antd start",
"build": "react-app-rewired build --scripts-version react-scripts-ts", "build": "react-scripts-ts-antd build",
"test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts", "test": "react-scripts-ts-antd test --env=jsdom",
"eject": "react-scripts-ts eject" "eject": "react-scripts-ts-antd eject"
}, },
"devDependencies": { "devDependencies": {
"@types/jest": "^23.3.5",
"@types/node": "^10.7.0", "@types/node": "^10.7.0",
"@types/react-router": "3.0.15", "@types/react": "^16.4.17",
"@types/react-json-tree": "^0.6.8",
"@types/react-dom": "^16.0.7", "@types/react-dom": "^16.0.7",
"react-scripts-ts": "^2.17.0", "@types/react-json-tree": "^0.6.8",
"ts-import-plugin": "^1.5.4", "@types/react-router": "3.0.15",
"typescript": "^3.0.1" "typescript": "^3.0.1"
} }
} }
\ No newline at end of file
src/webui/public/index.html
View file @ 744885eb
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Neural Network Intelligence</title> <title>Neural Network Intelligence</title>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/icon.png">
</head> </head>
<body> <body>
......
src/webui/public/manifest.json 0 → 100644
View file @ 744885eb
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
\ No newline at end of file
src/webui/src/App.css
View file @ 744885eb
.header_title{ .nni{
width: 100%; font-family: 'Segoe';
height: 60px; color: #212121;
line-height: 60px; font-size: 14px;
font-size: 24px; }
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white; .header{
background-color: rgb(60,141,188) ;
user-select: none;
text-align: center;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 999; width: 100%;
height: 80px;
background: #0071BC;
border-right: 1px solid #ccc;
z-index: 1000;
} }
.header_title img{ .headerCon{
height: 60px; min-width: 600px
} }
.right{ .content{
position: absolute; width: 86%;
left: 250px; min-width: 1024px;
top: 50px; margin: 0 auto;
width: calc(100% - 250px); margin-top: 90px;
/* padding-left: 20px; */ margin-bottom: 30px;
/* background: rgb(236,240,245); */
} }
src/webui/src/App.tsx
View file @ 744885eb
import * as React from 'react'; import * as React from 'react';
import { Row, Col } from 'antd';
import './App.css'; import './App.css';
import SlideBar from './components/SlideBar'; import SlideBar from './components/SlideBar';
class App extends React.Component<{}, {}> { class App extends React.Component<{}, {}> {
render () { render() {
return ( return (
<div className="App"> <Row className="nni">
{/* <header className="header_title"><img src={require('./logo.jpg')} alt=""/></header> */} <Row className="header">
<header className="header_title">Neural Network Intelligence</header> <Col span={2} />
<div className="content"> <Col className="headerCon" span={22}>
<SlideBar /> <SlideBar />
<div className="right">{this.props.children}</div> </Col>
</div> </Row>
</div> <Row className="content">
{this.props.children}
</Row>
</Row>
); );
} }
} }
......
src/webui/src/components/Accuracy.tsx deleted 100644 → 0
View file @ c5c0fa2e
import * as React from 'react';
import axios from 'axios';
import { MANAGER_IP } from '../const';
import ReactEcharts from 'echarts-for-react';
const echarts = require('echarts/lib/echarts');
echarts.registerTheme('my_theme', {
color: '#3c8dbc'
});
require('echarts/lib/chart/scatter');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('../style/accuracy.css');
const accStyle = {
width: '100%',
height: 600,
margin: '0 auto'
};
interface ChartState {
option: object;
accNodata: string;
}
interface AccurPoint {
yAxis: Array<number>;
}
class Accuracy extends React.Component<{}, ChartState> {
public _isMounted = false;
public intervalID = 0;
constructor(props: {}) {
super(props);
this.state = {
option: {},
accNodata: ''
};
}
getOption = (dataObj: AccurPoint) => {
const yAxis = dataObj.yAxis;
const xAxis: Array<number> = [];
for (let i = 1; i <= yAxis.length; i++) {
xAxis.push(i);
}
return {
tooltip: {
trigger: 'item'
},
xAxis: {
name: 'Trial',
type: 'category',
data: xAxis
},
yAxis: {
name: 'Accuracy',
type: 'value',
data: yAxis
},
series: [{
symbolSize: 6,
type: 'scatter',
data: yAxis
}]
};
}
drawPointGraph = () => {
axios(`${MANAGER_IP}/trial-jobs`, {
method: 'GET'
})
.then(res => {
if (res.status === 200 && this._isMounted) {
const accData = res.data;
const accArr: Array<number> = [];
const accY: Array<AccurPoint> = [];
Object.keys(accData).map(item => {
if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
accArr.push(parseFloat(accData[item].finalMetricData.data));
}
});
accY.push({ yAxis: accArr });
let optionObj = this.getOption(accY[0]);
this.setState({ option: optionObj }, () => {
if (accArr.length === 0) {
this.setState({
accNodata: 'No data'
});
} else {
this.setState({
accNodata: ''
});
}
});
}
});
}
componentDidMount() {
this._isMounted = true;
this.drawPointGraph();
this.intervalID = window.setInterval(this.drawPointGraph, 10000);
}
componentWillUnmount() {
this._isMounted = false;
window.clearInterval(this.intervalID);
}
render() {
const { accNodata, option } = this.state;
return (
<div className="graph">
<div className="trial">
<div className="title">
<div>Trial Accuracy</div>
</div>
<div>
<ReactEcharts
option={option}
style={accStyle}
theme="my_theme"
/>
<div className="showMess">{accNodata}</div>
</div>
</div>
</div>
);
}
}
export default Accuracy;
\ No newline at end of file
src/webui/src/components/Control.tsx
View file @ 744885eb
import * as React from 'react'; import * as React from 'react';
import { Input, Button, message } from 'antd'; import { Input, Button, message } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { MANAGER_IP, CONTROLTYPE } from '../const'; import { MANAGER_IP, CONTROLTYPE } from '../static/const';
const { TextArea } = Input; const { TextArea } = Input;
import '../style/control.css'; import '../static/style/control.scss';
interface ExperimentParams { interface ExperimentParams {
authorName: string; authorName: string;
......
src/webui/src/components/SlideBar.tsx
View file @ 744885eb
import * as React from 'react'; import * as React from 'react';
import { Link, IndexLink } from 'react-router'; import { Link } from 'react-router';
import { Icon } from 'antd'; import '../static/style/slideBar.scss';
import '../style/slideBar.css';
class SlideBar extends React.Component<{}, {}> { class SlideBar extends React.Component<{}, {}> {
render() { render() {
return ( return (
<div className="slider"> <ul className="nav">
<ul className="nav"> <li className="logo">
<li> <img src={require('../static/img/logo.png')} style={{ width: 156 }} alt="NNI logo" />
<IndexLink to={'/oview'} activeClassName="high"> </li>
<Icon className="icon" type="home" />Overview <li className="tab">
<Icon className="floicon" type="right" /> <Link to={'/oview'} activeClassName="high">
</IndexLink> Overview
</li>
<li>
<Link to={'/all'} activeClassName="high">
<Icon className="icon" type="dot-chart" />Optimization Progress
<Icon className="floicon" type="right" />
</Link> </Link>
</li> </li>
<li> <li className="tab">
<Link to={'/hyper'} activeClassName="high"> <Link to={'/detail'} activeClassName="high">
<Icon className="icon" type="rocket" />Hyper Parameter Trials Detail
<Icon className="floicon" type="right" />
</Link> </Link>
</li> </li>
<li> </ul>
<Link to={'/trastaus'} activeClassName="high">
<Icon className="icon" type="bar-chart" />Trial Status
<Icon className="floicon" type="right" />
</Link>
</li>
<li>
<Link to={'/control'} activeClassName="high">
<Icon className="icon" type="form" />Control
<Icon className="floicon" type="right" />
</Link>
</li>
<li>
<a href="https://github.com/Microsoft/nni/issues" target="_blank">
<Icon className="icon" type="smile" />Feedback
</a>
</li>
</ul>
</div>
); );
} }
} }
......
src/webui/src/components/Tensor.tsx
View file @ 744885eb
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import { message } from 'antd'; import { message } from 'antd';
import { MANAGER_IP } from '../const'; import { MANAGER_IP } from '../static/const';
import '../style/tensor.css'; import '../static/style/tensor.scss';
interface TensorState { interface TensorState {
urlTensor: string; urlTensor: string;
......
src/webui/src/components/TrialsDetail.tsx 0 → 100644
View file @ 744885eb
import * as React from 'react';
import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import { Row, Tabs } from 'antd';
import { getAccuracyData } from '../static/function';
import { TableObj, Parameters, AccurPoint } from '../static/interface';
import Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration';
import Title1 from './overview/Title1';
import Para from './trial-detail/Para';
import TableList from './trial-detail/TableList';
const TabPane = Tabs.TabPane;
import '../static/style/trialsDetail.scss';
interface TrialDetailState {
accSource: object;
accNodata: string;
tableListSource: Array<TableObj>;
}
class TrialsDetail extends React.Component<{}, TrialDetailState> {
public _isMounted = false;
public interAccuracy = 0;
public interTableList = 1;
constructor(props: {}) {
super(props);
this.state = {
accSource: {},
accNodata: '',
tableListSource: []
};
}
// trial accuracy graph
drawPointGraph = () => {
axios(`${MANAGER_IP}/trial-jobs`, {
method: 'GET'
})
.then(res => {
if (res.status === 200 && this._isMounted) {
const accData = res.data;
const accArr: Array<number> = [];
const accY: Array<AccurPoint> = [];
Object.keys(accData).map(item => {
if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
accArr.push(parseFloat(accData[item].finalMetricData.data));
}
});
accY.push({ yAxis: accArr });
const optionObj = getAccuracyData(accY[0]);
this.setState({ accSource: optionObj }, () => {
if (accArr.length === 0) {
this.setState({
accNodata: 'No data'
});
} else {
this.setState({
accNodata: ''
});
}
});
}
});
}
drawTableList = () => {
axios(`${MANAGER_IP}/trial-jobs`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
const trialJobs = res.data;
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
parameters: {}
};
let acc = 0;
let duration = 0;
const id = trialJobs[item].id !== undefined
? trialJobs[item].id
: '';
const status = trialJobs[item].status !== undefined
? trialJobs[item].status
: '';
const begin = trialJobs[item].startTime;
const end = trialJobs[item].endTime;
if (begin) {
if (end) {
duration = (end - begin) / 1000;
} else {
duration = (new Date().getTime() - begin) / 1000;
}
}
if (trialJobs[item].hyperParameters !== undefined) {
desc.parameters = JSON.parse(trialJobs[item].hyperParameters).parameters;
} else {
desc.parameters = { error: 'This trial\'s parameters are not available.' };
}
if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath;
const isHyperLink = /^http/gi.test(trialJobs[item].logPath);
if (isHyperLink) {
desc.isLink = true;
}
}
if (trialJobs[item].finalMetricData !== undefined) {
acc = parseFloat(trialJobs[item].finalMetricData.data);
}
trialTable.push({
key: trialTable.length,
sequenceId: trialJobs[item].sequenceId,
id: id,
status: status,
duration: duration,
acc: acc,
description: desc
});
});
if (this._isMounted) {
this.setState(() => ({
tableListSource: trialTable
}));
}
}
});
}
callback = (key: string) => {
switch (key) {
case '1':
window.clearInterval(Para.intervalIDPara);
window.clearInterval(Duration.intervalDuration);
this.drawPointGraph();
this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
break;
case '2':
window.clearInterval(this.interAccuracy);
window.clearInterval(Duration.intervalDuration);
break;
case '3':
window.clearInterval(this.interAccuracy);
window.clearInterval(Para.intervalIDPara);
break;
default:
}
}
componentDidMount() {
this._isMounted = true;
this.drawPointGraph();
this.drawTableList();
this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
this.interTableList = window.setInterval(this.drawTableList, 10000);
}
componentWillUnmount() {
this._isMounted = false;
window.clearInterval(this.interTableList);
window.clearInterval(this.interAccuracy);
}
render() {
const {
accSource, accNodata,
tableListSource
} = this.state;
const titleOfacc = (
<Title1 text="Trial Accuracy" icon="3.png" />
);
const titleOfhyper = (
<Title1 text="Hyper Parameter" icon="1.png" />
);
const titleOfDuration = (
<Title1 text="Trial Duration" icon="2.png" />
);
return (
<div>
<div className="trial" id="tabsty">
<Tabs onChange={this.callback} type="card">
<TabPane tab={titleOfacc} key="1">
<Row className="graph">
<Accuracy
height={432}
accuracyData={accSource}
accNodata={accNodata}
/>
</Row>
</TabPane>
<TabPane tab={titleOfhyper} key="2">
<Row className="graph"><Para /></Row>
</TabPane>
<TabPane tab={titleOfDuration} key="3">
<Duration />
</TabPane>
</Tabs>
</div>
{/* trial table list */}
<TableList
tableSource={tableListSource}
updateList={this.drawTableList}
/>
</div>
);
}
}
export default TrialsDetail;
\ No newline at end of file
src/webui/src/components/overview/Accuracy.tsx 0 → 100644
View file @ 744885eb
import * as React from 'react';
import ReactEcharts from 'echarts-for-react';
const echarts = require('echarts/lib/echarts');
echarts.registerTheme('my_theme', {
color: '#3c8dbc'
});
require('echarts/lib/chart/scatter');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
interface AccuracyProps {
accuracyData: object;
accNodata: string;
height: number;
}
class Accuracy extends React.Component<AccuracyProps, {}> {
constructor(props: AccuracyProps) {
super(props);
}
render() {
const { accNodata, accuracyData, height } = this.props;
return (
<div>
<ReactEcharts
option={accuracyData}
style={{
width: '100%',
height: height,
margin: '0 auto',
}}
theme="my_theme"
/>
<div className="showMess">{accNodata}</div>
</div>
);
}
}
export default Accuracy;
\ No newline at end of file
src/webui/src/components/overview/BasicInfo.tsx 0 → 100644
View file @ 744885eb
import * as React from 'react';
import {
Row, Col,
Tooltip
} from 'antd';
import { Experiment } from '../../static/interface';
interface BasicInfoProps {
trialProfile: Experiment;
status: string;
}
class BasicInfo extends React.Component<BasicInfoProps, {}> {
constructor(props: BasicInfoProps) {
super(props);
}
render() {
const { trialProfile,
// status
} = this.props;
return (
<Row className="main">
<Col span={8} className="padItem basic">
<p>Name</p>
<div>{trialProfile.experName}</div>
<p>ID</p>
<div>{trialProfile.id}</div>
</Col>
<Col span={8} className="padItem basic">
<Row>
<Col span={18}>
<p>Start Time</p>
<div className="nowrap">
{new Date(trialProfile.startTime).toLocaleString('en-US')}
</div>
<p>End Time</p>
<div className="nowrap">
{
trialProfile.endTime
?
new Date(trialProfile.endTime).toLocaleString('en-US')
:
'none'
}
</div>
</Col>
</Row>
</Col>
<Col span={8} className="padItem basic">
<p>LogPath</p>
<div className="logPath">
<Tooltip placement="top" title={trialProfile.logDir}>
{trialProfile.logDir}
</Tooltip>
</div>
<p>TrainingPlatform</p>
<div className="nowrap">
{
trialProfile.trainingServicePlatform
?
trialProfile.trainingServicePlatform
:
'none'
}
</div>
</Col>
</Row>
);
}
}
export default BasicInfo;
\ No newline at end of file
src/webui/src/components/overview/Progress.tsx 0 → 100644
View file @ 744885eb
import * as React from 'react';
import {
Row,
Col,
} from 'antd';
import { Experiment, TrialNumber } from '../../static/interface';
import { convertTime } from '../../static/function';
import ProgressBar from './ProgressItem';
import '../../static/style/progress.scss';
interface ProgressProps {
trialProfile: Experiment;
trialNumber: TrialNumber;
bestAccuracy: string;
status: string;
}
class Progressed extends React.Component<ProgressProps, {}> {
constructor(props: ProgressProps) {
super(props);
}
render() {
const { trialProfile,
trialNumber, bestAccuracy,
status
} = this.props;
// remaining time
const bar2 = trialNumber.totalCurrentTrial - trialNumber.waitTrial - trialNumber.unknowTrial;
const bar2Percent = (bar2 / trialProfile.MaxTrialNum) * 100;
const percent = (trialProfile.execDuration / trialProfile.maxDuration) * 100;
const runDuration = convertTime(trialProfile.execDuration);
const remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
return (
<Row className="progress">
<Row className="basic">
<p>Status</p>
<div className="status">{status}</div>
</Row>
<ProgressBar
who="Duration"
percent={percent}
description={runDuration}
maxString={`MaxDuration: ${convertTime(trialProfile.maxDuration)}`}
/>
<ProgressBar
who="TrialNum"
percent={bar2Percent}
description={bar2.toString()}
maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
/>
<Row className="basic colorOfbasic mess">
<p>Best Accuracy</p>
<div>{bestAccuracy}</div>
</Row>
<Row className="mess">
<Col span={8}>
<Row className="basic colorOfbasic">
<p>Time Spent</p>
<div>{convertTime(trialProfile.execDuration)}</div>
</Row>
</Col>
<Col span={9}>
<Row className="basic colorOfbasic">
<p>Remaining Time</p>
<div>{remaining}</div>
</Row>
</Col>
<Col span={7}>
<Row className="basic colorOfbasic">
<p>Duration</p>
<div>{convertTime(trialProfile.maxDuration)}</div>
</Row>
</Col>
</Row>
<Row className="mess">
<Col span={8}>
<Row className="basic colorOfbasic">
<p>Succeed Trial</p>
<div>{trialNumber.succTrial}</div>
</Row>
</Col>
<Col span={9}>
<Row className="basic">
<p>Stopped Trial</p>
<div>{trialNumber.stopTrial}</div>
</Row>
</Col>
<Col span={7}>
<Row className="basic">
<p>Failed Trial</p>
<div>{trialNumber.failTrial}</div>
</Row>
</Col>
</Row>
</Row>
);
}
}
export default Progressed;
\ No newline at end of file
src/webui/src/components/overview/ProgressItem.tsx 0 → 100644
View file @ 744885eb
import * as React from 'react';
import { Row, Col, Progress } from 'antd';
interface ProItemProps {
who: string;
percent: number;
description: string;
maxString: string;
}
class ProgressBar extends React.Component<ProItemProps, {}> {
constructor(props: ProItemProps) {
super(props);
}
render() {
const { who, percent, description, maxString } = this.props;
return (
<div>
<Row className="probar">
<Col span={6}>
<div className="name">{who}</div>
</Col>
<Col span={17} className="bar">
<div className="showProgress">
<Progress
percent={percent}
strokeWidth={30}
// strokeLinecap={'square'}
format={() => description}
/>
</div>
<Row className="description">
<Col span={12}>0</Col>
<Col className="right" span={12}>{maxString}</Col>
</Row>
</Col>
</Row>
<br/>
</div>
);
}
}
export default ProgressBar;
\ No newline at end of file
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