Skip to content

GitLab

Unverified Commit 66677498 authored by liuzhe-lz's avatar liuzhe-lz Committed by GitHub
Browse files

Merge v1.1 back to master 

Merge v1.1 back to master
parents d6b61e2f 5557a2e4
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 157 deletions
src/webui/src/components/Modal/LogDrawer.tsx
View file @ 66677498
......@@ -8,89 +8,48 @@ import MonacoHTML from '../public-child/MonacoEditor';
import '../../static/style/logDrawer.scss';
interface LogDrawerProps {
isVisble: boolean;
closeDrawer: () => void;
activeTab?: string;
}
interface LogDrawerState {
nniManagerLogStr: string;
dispatcherLogStr: string;
nniManagerLogStr: string | null;
dispatcherLogStr: string | null;
isLoading: boolean;
isLoadispatcher: boolean;
logDrawerHeight: number;
}
class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
private timerId: number | undefined;
public _isLogDrawer: boolean;
constructor(props: LogDrawerProps) {
super(props);
this.state = {
nniManagerLogStr: 'nnimanager',
dispatcherLogStr: 'dispatcher',
isLoading: false,
isLoadispatcher: false
nniManagerLogStr: null,
dispatcherLogStr: null,
isLoading: true,
logDrawerHeight: window.innerHeight - 48
};
}
getNNImanagerLogmessage = () => {
if (this._isLogDrawer === true) {
this.setState({ isLoading: true }, () => {
axios(`${DOWNLOAD_IP}/nnimanager.log`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
setTimeout(() => { this.setNNImanager(res.data); }, 300);
}
});
});
}
}
setDispatcher = (value: string) => {
if (this._isLogDrawer === true) {
this.setState({ isLoadispatcher: false, dispatcherLogStr: value });
}
}
setNNImanager = (val: string) => {
if (this._isLogDrawer === true) {
this.setState({ isLoading: false, nniManagerLogStr: val });
}
}
getdispatcherLogmessage = () => {
if (this._isLogDrawer === true) {
this.setState({ isLoadispatcher: true }, () => {
axios(`${DOWNLOAD_IP}/dispatcher.log`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
setTimeout(() => { this.setDispatcher(res.data); }, 300);
}
});
});
}
}
downloadNNImanager = () => {
const { nniManagerLogStr } = this.state;
downFile(nniManagerLogStr, 'nnimanager.log');
if (this.state.nniManagerLogStr !== null) {
downFile(this.state.nniManagerLogStr, 'nnimanager.log');
}
}
downloadDispatcher = () => {
const { dispatcherLogStr } = this.state;
downFile(dispatcherLogStr, 'dispatcher.log');
if (this.state.dispatcherLogStr !== null) {
downFile(this.state.dispatcherLogStr, 'dispatcher.log');
}
}
dispatcherHTML = () => {
return (
<div>
<span>Dispatcher Log</span>
<span className="refresh" onClick={this.getdispatcherLogmessage}>
<span className="refresh" onClick={this.manualRefresh}>
<Icon type="sync" />
</span>
</div>
......@@ -101,37 +60,28 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
return (
<div>
<span>NNImanager Log</span>
<span className="refresh" onClick={this.getNNImanagerLogmessage}><Icon type="sync" /></span>
<span className="refresh" onClick={this.manualRefresh}><Icon type="sync" /></span>
</div>
);
}
componentDidMount() {
this._isLogDrawer = true;
this.getNNImanagerLogmessage();
this.getdispatcherLogmessage();
setLogDrawerHeight = () => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
}
componentWillReceiveProps(nextProps: LogDrawerProps) {
const { isVisble, activeTab } = nextProps;
if (isVisble === true) {
if (activeTab === 'nnimanager') {
this.getNNImanagerLogmessage();
}
if (activeTab === 'dispatcher') {
this.getdispatcherLogmessage();
}
}
async componentDidMount() {
this.refresh();
window.addEventListener('resize', this.setLogDrawerHeight);
}
componentWillUnmount() {
this._isLogDrawer = false;
window.clearTimeout(this.timerId);
window.removeEventListener('resize', this.setLogDrawerHeight);
}
render() {
const { isVisble, closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoadispatcher, isLoading } = this.state;
const heights: number = window.innerHeight - 48; // padding top and bottom
const { closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
return (
<Row>
<Drawer
......@@ -139,18 +89,26 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
closable={false}
destroyOnClose={true}
onClose={closeDrawer}
visible={isVisble}
visible={true}
width="76%"
height={heights}
height={logDrawerHeight}
// className="logDrawer"
>
<div className="card-container log-tab-body" style={{ height: heights }}>
<Tabs type="card" defaultActiveKey={activeTab} style={{ height: heights + 19 }}>
<div className="card-container log-tab-body">
<Tabs
type="card"
defaultActiveKey={activeTab}
style={{ height: logDrawerHeight, minHeight: 190 }}
>
{/* <Tabs type="card" onTabClick={this.selectwhichLog} defaultActiveKey={activeTab}> */}
{/* <TabPane tab="Dispatcher Log" key="dispatcher"> */}
<TabPane tab={this.dispatcherHTML()} key="dispatcher">
<div>
<MonacoHTML content={dispatcherLogStr} loading={isLoadispatcher} />
<MonacoHTML
content={dispatcherLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 104}
/>
</div>
<Row className="buttons">
<Col span={12} className="download">
......@@ -174,7 +132,11 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
<TabPane tab={this.nnimanagerHTML()} key="nnimanager">
{/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
<div>
<MonacoHTML content={nniManagerLogStr} loading={isLoading} />
<MonacoHTML
content={nniManagerLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 104}
/>
</div>
<Row className="buttons">
<Col span={12} className="download">
......@@ -201,6 +163,31 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
</Row>
);
}
private refresh = () => {
window.clearTimeout(this.timerId);
const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
dispatcherPromise.then(res => {
if (res.status === 200) {
this.setState({ dispatcherLogStr: res.data });
}
});
nniManagerPromise.then(res => {
if (res.status === 200) {
this.setState({ nniManagerLogStr: res.data });
}
});
Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
this.setState({ isLoading: false });
this.timerId = window.setTimeout(this.refresh, 300);
});
}
private manualRefresh = () => {
this.setState({ isLoading: true });
this.refresh();
}
}
export default LogDrawer;
src/webui/src/components/SlideBar.tsx
View file @ 66677498
......@@ -214,7 +214,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
type="ghost"
>
<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>
</Button>
</span>
......@@ -329,8 +334,8 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
render() {
const mobile = (<MediaQuery maxWidth={884}>{this.mobileHTML()}</MediaQuery>);
const tablet = (<MediaQuery minWidth={885} maxWidth={1241}>{this.tabeltHTML()}</MediaQuery>);
const desktop = (<MediaQuery minWidth={1242}>{this.desktopHTML()}</MediaQuery>);
const tablet = (<MediaQuery minWidth={885} maxWidth={1281}>{this.tabeltHTML()}</MediaQuery>);
const desktop = (<MediaQuery minWidth={1282}>{this.desktopHTML()}</MediaQuery>);
const { isvisibleLogDrawer, activeKey, isvisibleExperimentDrawer } = this.state;
return (
<div>
......@@ -338,11 +343,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
{tablet}
{desktop}
{/* the drawer for dispatcher & nnimanager log message */}
<LogDrawer
isVisble={isvisibleLogDrawer}
closeDrawer={this.closeLogDrawer}
activeTab={activeKey}
/>
{isvisibleLogDrawer ? (
<LogDrawer
closeDrawer={this.closeLogDrawer}
activeTab={activeKey}
/>
) : null}
<ExperimentDrawer
isVisble={isvisibleExperimentDrawer}
closeExpDrawer={this.closeExpDrawer}
......
src/webui/src/components/TrialsDetail.tsx
View file @ 66677498
......@@ -100,10 +100,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
this.setState({ whichGraph: activeKey });
}
test = () => {
alert('TableList component was not properly initialized.');
}
updateSearchFilterType = (value: string) => {
// clear input value and re-render table
if (this.searchInput !== null) {
......@@ -167,14 +163,14 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
<Col span={14} className="right">
<Button
className="common"
onClick={this.tableList ? this.tableList.addColumn : this.test}
onClick={() => { if (this.tableList) { this.tableList.addColumn(); }}}
>
Add column
</Button>
<Button
className="mediateBtn common"
// use child-component tableList's function, the function is in child-component.
onClick={this.tableList ? this.tableList.compareBtn : this.test}
onClick={() => { if (this.tableList) { this.tableList.compareBtn(); }}}
>
Compare
</Button>
......
src/webui/src/components/overview/Progress.tsx
View file @ 66677498
......@@ -184,11 +184,12 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
</Col>
</Row>
{/* learn about click -> default active key is dispatcher. */}
<LogDrawer
isVisble={isShowLogDrawer}
closeDrawer={this.closeDrawer}
activeTab="dispatcher"
/>
{isShowLogDrawer ? (
<LogDrawer
closeDrawer={this.closeDrawer}
activeTab="dispatcher"
/>
) : null}
</Row>
);
}
......
src/webui/src/components/public-child/MonacoEditor.tsx
View file @ 66677498
......@@ -6,6 +6,7 @@ import MonacoEditor from 'react-monaco-editor';
interface MonacoEditorProps {
content: string;
loading: boolean;
height: number;
}
class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
......@@ -25,18 +26,17 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
}
render() {
const { content, loading } = this.props;
const heights: number = window.innerHeight - 48;
const { content, loading, height } = this.props;
return (
<div className="just-for-log">
<Spin
// tip="Loading..."
style={{ width: '100%', height: heights * 0.9 }}
style={{ width: '100%', height: height }}
spinning={loading}
>
<MonacoEditor
width="100%"
height={heights * 0.9}
height={height}
language="json"
value={content}
options={DRAWEROPTION}
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ 66677498
......@@ -135,17 +135,17 @@ function generateScatterSeries(trials: Trial[]) {
function generateBestCurveSeries(trials: Trial[]) {
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++) {
const trial = trials[i];
const delta = trial.accuracy! - best.accuracy!;
const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
if (better) {
data.push([ trial.sequenceId, trial.accuracy, trial.info.hyperParameters ]);
data.push([ trial.sequenceId, trial.accuracy, trial.description.parameters ]);
best = trial;
} 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 @ 66677498
......@@ -262,16 +262,10 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<div>
{/* style in para.scss */}
<Row className="meline intermediate">
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
{
isFilter
?
<span>
<span style={{marginRight: 15}}>
<span className="filter-x"># Intermediate result</span>
<input
// placeholder="point"
......@@ -300,6 +294,12 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
:
null
}
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
</Row>
<Row className="intermediate-graph">
<ReactEcharts
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 66677498
......@@ -251,13 +251,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
const showColumn: Array<object> = [];
// parameter as table column
const trialMess = TRIALS.getTrial(tableSource[0].id);
const trial = trialMess.description.parameters;
const parameterColumn: Array<string> = Object.keys(trial);
const parameterStr: Array<string> = [];
parameterColumn.forEach(value => {
parameterStr.push(`${value} (search space)`);
});
if (tableSource.length > 0) {
const trialMess = TRIALS.getTrial(tableSource[0].id);
const trial = trialMess.description.parameters;
const parameterColumn: Array<string> = Object.keys(trial);
parameterColumn.forEach(value => {
parameterStr.push(`${value} (search space)`);
});
}
showTitle = COLUMNPro.concat(parameterStr);
// only succeed trials have final keys
......@@ -330,20 +332,35 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Icon type="line-chart" />
</Button>
{/* kill job */}
<Popconfirm
title="Are you sure to cancel this trial?"
onConfirm={killJob.
bind(this, record.key, record.id, record.status)}
>
<Button
type="default"
disabled={flag}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
</Popconfirm>
{
flag
?
<Button
type="default"
disabled={true}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
:
<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>
);
},
......
src/webui/src/static/model/trial.ts
View file @ 66677498
......@@ -43,7 +43,7 @@ class Trial implements TableObj {
}
get sortable(): boolean {
return this.finalAcc !== undefined && !isNaN(this.finalAcc);
return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
}
/* table obj start */
......@@ -132,7 +132,7 @@ class Trial implements TableObj {
/* table obj end */
public initialized(): boolean {
return !!(this.infoField && this.metricsInitialized);
return Boolean(this.infoField);
}
public updateMetrics(metrics: MetricDataRecord[]): boolean {
......
src/webui/src/static/style/button.scss
View file @ 66677498
......@@ -6,7 +6,7 @@ Button.tableButton{
border-color: $btnBgcolor;
height: 26px;
font-size: 14px;
margin-top: 2px;
margin-top: 4px;
border-radius: 0;
}
......
src/webui/src/static/style/logDrawer.scss
View file @ 66677498
......@@ -25,8 +25,9 @@
height: 100%;
}
/* log drawer download & close button's row */
.buttons{
margin-top: 11px;
margin-top: 16px;
.close{
text-align: right;
}
......
src/webui/src/static/style/slideBar.scss
View file @ 66677498
......@@ -21,7 +21,7 @@ $drowHoverBgColor: #e2e2e2;
padding-bottom: 14px;
.down-icon{
font-size: 20px !important;
padding-right: 2px;
padding-right: 6px;
}
}
......@@ -186,6 +186,11 @@ $drowHoverBgColor: #e2e2e2;
width: 20px;
margin-right: 8px;
}
/* ? icon style */
.question{
width: 14px;
margin-right: 4px;
}
.feedback{
font-size: 16px;
margin: 0 20px;
......
src/webui/src/static/style/trialsDetail.scss
View file @ 66677498
......@@ -15,10 +15,12 @@
.ant-tabs-tab-active{
.panelTitle{
background-color: #999;
/*
span{
color: #fff;
font-weight: normal;
}
*/
}
}
.panelTitle{
......
tools/nni_cmd/command_utils.py
View file @ 66677498
......@@ -3,10 +3,11 @@ import sys
import os
import signal
import psutil
from .common_utils import print_error, print_normal, print_warning
from .common_utils import print_error, print_normal, print_warning
def check_output_command(file_path, head=None, tail=None):
'''call check_output command to read content from a file'''
"""call check_output command to read content from a file"""
if os.path.exists(file_path):
if sys.platform == 'win32':
cmds = ['powershell.exe', 'type', file_path]
......@@ -26,8 +27,9 @@ def check_output_command(file_path, head=None, tail=None):
print_error('{0} does not exist!'.format(file_path))
exit(1)
def kill_command(pid):
'''kill command'''
"""kill command"""
if sys.platform == 'win32':
process = psutil.Process(pid=pid)
process.send_signal(signal.CTRL_BREAK_EVENT)
......@@ -35,21 +37,35 @@ def kill_command(pid):
cmds = ['kill', str(pid)]
call(cmds)
def install_package_command(package_name):
'''install python package from pip'''
#TODO refactor python logic
if sys.platform == "win32":
cmds = 'python -m pip install --user {0}'.format(package_name)
else:
cmds = 'python3 -m pip install --user {0}'.format(package_name)
call(cmds, shell=True)
"""
Install python package from pip.
Parameters
----------
package_name: str
The name of package to be installed.
"""
call(_get_pip_install() + [package_name], shell=False)
def install_requirements_command(requirements_path):
'''install requirements.txt'''
cmds = 'cd ' + requirements_path + ' && {0} -m pip install --user -r requirements.txt'
#TODO refactor python logic
if sys.platform == "win32":
cmds = cmds.format('python')
else:
cmds = cmds.format('python3')
call(cmds, shell=True)
"""
Install packages from `requirements.txt` in `requirements_path`.
Parameters
----------
requirements_path: str
Path to the directory that contains `requirements.txt`.
"""
call(_get_pip_install() + ["-r", os.path.join(requirements_path, "requirements.txt")], shell=False)
def _get_pip_install():
python = "python" if sys.platform == "win32" else "python3"
ret = [python, "-m", "pip", "install"]
if "CONDA_DEFAULT_ENV" not in os.environ and "VIRTUAL_ENV" not in os.environ and \
(sys.platform != "win32" and os.getuid() != 0): # on unix and not running in root
ret.append("--user") # not in virtualenv or conda
return ret
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