"host/online_compile/hip_utility/target_properties.cpp" did not exist on "1264925422920f24b3bb4fa34f178e31a23c97b5"
Unverified Commit e2d8cc1b authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

[webui] format code by eslint and prettier (#2744)



* update

* format as prettier

* fix error

* add stylelint for scss css file

* add arrow-parens rule

* update

* fix lint

* fix conflict
Co-authored-by: default avatarLijiao <15910218274@163.com>
Co-authored-by: default avatarLijiao <Lijiaoa@outlook.com>
Co-authored-by: default avatarLijiao <1425861283@qq.com>
parent 4668fc08
/build/**
/scripts/**
/src/serviceWorker.ts
\ No newline at end of file
...@@ -9,22 +9,29 @@ ...@@ -9,22 +9,29 @@
"sourceType": "module" "sourceType": "module"
}, },
"plugins": [ "plugins": [
"@typescript-eslint" "@typescript-eslint",
"eslint-plugin-prettier"
], ],
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:react/recommended", "plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended" "plugin:@typescript-eslint/recommended",
"prettier/react",
"prettier"
], ],
"rules": { "rules": {
"prettier/prettier": 2,
"@typescript-eslint/no-explicit-any": 0, "@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-namespace": 0, "@typescript-eslint/no-namespace": 0,
"@typescript-eslint/consistent-type-assertions": 0, "@typescript-eslint/consistent-type-assertions": 0,
"@typescript-eslint/no-inferrable-types": 0, "@typescript-eslint/no-inferrable-types": 0,
"@typescript-eslint/no-use-before-define": [2, "nofunc"], "@typescript-eslint/no-use-before-define": [2, "nofunc"],
"no-inner-declarations": 0,
"@typescript-eslint/no-var-requires": 0, "@typescript-eslint/no-var-requires": 0,
"arrow-parens": [2, "as-needed"],
"no-inner-declarations": 0,
"no-empty": 2,
"no-multiple-empty-lines": [2, { "max": 1 }],
"react/display-name": 0 "react/display-name": 0
}, },
"settings": { "settings": {
......
{
"extends": "stylelint-config-standard",
"ignoreFiles": [
"build/**"
],
"rules": {
"at-rule-empty-line-before": null,
"indentation": 4,
"no-descending-specificity": null
}
}
\ No newline at end of file
{ {
"name": "nni-webui", "name": "nni-webui",
"version": "0.1.0", "version": "0.1.0",
"private": true, "license": "MIT",
"dependencies": { "dependencies": {
"axios": "^0.19.0", "axios": "^0.19.0",
"babel-eslint": "10.0.1", "babel-eslint": "10.0.1",
...@@ -75,15 +75,20 @@ ...@@ -75,15 +75,20 @@
"@typescript-eslint/parser": "^2.11.0", "@typescript-eslint/parser": "^2.11.0",
"concurrently": "^5.2.0", "concurrently": "^5.2.0",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-config-prettier": "^6.1.0",
"eslint-config-react-app": "^4.0.0", "eslint-config-react-app": "^4.0.0",
"eslint-loader": "2.1.2", "eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "2.50.1", "eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.16.0", "eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1", "eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "7.12.4", "eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "^1.5.0", "eslint-plugin-react-hooks": "^1.5.0",
"express": "^4.17.1", "express": "^4.17.1",
"npx": "^10.2.0", "npx": "^10.2.0",
"prettier": "^1.18.2",
"stylelint": "^13.7.0",
"stylelint-config-standard": "^20.0.0",
"typescript": "^3.8.0" "typescript": "^3.8.0"
}, },
"proxy": "http://localhost:12138", "proxy": "http://localhost:12138",
...@@ -92,6 +97,7 @@ ...@@ -92,6 +97,7 @@
"build": "node --max-old-space-size=3072 scripts/build.js", "build": "node --max-old-space-size=3072 scripts/build.js",
"test": "node --max-old-space-size=3072 scripts/test.js", "test": "node --max-old-space-size=3072 scripts/test.js",
"eslint": "npx eslint ./ --ext .tsx,.ts", "eslint": "npx eslint ./ --ext .tsx,.ts",
"stylelint": "npx stylelint **/*{.css,.scss}",
"mock": "node scripts/server.js", "mock": "node scripts/server.js",
"dev": "concurrently \"yarn mock\" \"yarn start\"" "dev": "concurrently \"yarn mock\" \"yarn start\""
}, },
......
module.exports = {
printWidth: 120,
semi: true,
tabWidth: 4,
trailingComma: 'none',
arrowParens: 'avoid',
bracketSpacing: true,
singleQuote: true,
eslintIntegration: true,
jsxSingleQuote: true,
endOfline: 'lf'
};
.nni{ .nni {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #212121; color: #212121;
font-size: 14px; font-size: 14px;
background: #f2f2f2; background: #f2f2f2;
} }
.header{ .header {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 56px; height: 56px;
background: #0071BC; background: #0071bc;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
z-index: 1000; z-index: 1000;
} }
.headerCon{ .headerCon {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
} }
.contentBox{ .contentBox {
width: 100%; width: 100%;
} }
.content{ .content {
width: 89%; width: 89%;
min-width: 1024px; min-width: 1024px;
margin: 0 auto; margin: 0 auto;
...@@ -33,31 +33,31 @@ ...@@ -33,31 +33,31 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.bottomDiv{ .bottomDiv {
margin-bottom: 10px; margin-bottom: 10px;
} }
.bgNNI{ .bgNNI {
background-color: #fff; background-color: #fff;
} }
.borderRight{ .borderRight {
margin-right: 10px; margin-right: 10px;
} }
/* office-fabric-ui */ /* office-fabric-ui */
.ms-Pivot-linkContent{ .ms-Pivot-linkContent {
height: 44px; height: 44px;
} }
.ms-Callout-main{ .ms-Callout-main {
p{ p {
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
} }
.warning{ .warning {
padding-bottom: 15px; padding-bottom: 15px;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
...@@ -28,7 +28,7 @@ export const AppContext = React.createContext({ ...@@ -28,7 +28,7 @@ export const AppContext = React.createContext({
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeColumn: (val: string[]) => {}, changeColumn: (val: string[]) => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeMetricGraphMode: ( val: 'max' | 'min') => {}, changeMetricGraphMode: (val: 'max' | 'min') => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeEntries: (val: string) => {} changeEntries: (val: string) => {}
}); });
...@@ -57,7 +57,7 @@ class App extends React.Component<{}, AppState> { ...@@ -57,7 +57,7 @@ class App extends React.Component<{}, AppState> {
this.setState(state => ({ this.setState(state => ({
experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1, trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1,
metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max') metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'
})); }));
this.timerId = window.setTimeout(this.refresh, this.state.interval * 100); this.timerId = window.setTimeout(this.refresh, this.state.interval * 100);
// final result is legal // final result is legal
...@@ -78,7 +78,8 @@ class App extends React.Component<{}, AppState> { ...@@ -78,7 +78,8 @@ class App extends React.Component<{}, AppState> {
// illegal final data // illegal final data
this.setState(() => ({ this.setState(() => ({
isillegalFinal: true, isillegalFinal: true,
expWarningMessage: 'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.' expWarningMessage:
'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
})); }));
window.clearInterval(this.dataFormatimer); window.clearInterval(this.dataFormatimer);
} }
...@@ -86,10 +87,9 @@ class App extends React.Component<{}, AppState> { ...@@ -86,10 +87,9 @@ class App extends React.Component<{}, AppState> {
break; break;
} }
} }
} };
changeInterval = (interval: number): void => { changeInterval = (interval: number): void => {
window.clearTimeout(this.timerId); window.clearTimeout(this.timerId);
if (interval === 0) { if (interval === 0) {
return; return;
...@@ -100,22 +100,21 @@ class App extends React.Component<{}, AppState> { ...@@ -100,22 +100,21 @@ class App extends React.Component<{}, AppState> {
this.firstLoad = true; this.firstLoad = true;
this.refresh(); this.refresh();
}); });
};
}
// TODO: use local storage // TODO: use local storage
changeColumn = (columnList: string[]): void => { changeColumn = (columnList: string[]): void => {
this.setState({ columnList: columnList }); this.setState({ columnList: columnList });
} };
changeMetricGraphMode = (val: 'max' | 'min'): void => { changeMetricGraphMode = (val: 'max' | 'min'): void => {
this.setState({ metricGraphMode: val }); this.setState({ metricGraphMode: val });
} };
// overview best trial module // overview best trial module
changeEntries = (entries: string): void => { changeEntries = (entries: string): void => {
this.setState({ bestTrialEntries: entries }); this.setState({ bestTrialEntries: entries });
} };
shouldComponentUpdate(nextProps: any, nextState: AppState): boolean { shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
if (!(nextState.isUpdate || nextState.isUpdate === undefined)) { if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
...@@ -126,8 +125,15 @@ class App extends React.Component<{}, AppState> { ...@@ -126,8 +125,15 @@ class App extends React.Component<{}, AppState> {
} }
render(): React.ReactNode { render(): React.ReactNode {
const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast, const {
metricGraphMode, isillegalFinal, expWarningMessage, bestTrialEntries interval,
columnList,
experimentUpdateBroadcast,
trialsUpdateBroadcast,
metricGraphMode,
isillegalFinal,
expWarningMessage,
bestTrialEntries
} = this.state; } = this.state;
if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) { if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
return null; // TODO: render a loading page return null; // TODO: render a loading page
...@@ -141,28 +147,30 @@ class App extends React.Component<{}, AppState> { ...@@ -141,28 +147,30 @@ class App extends React.Component<{}, AppState> {
{ errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() } { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
]; ];
return ( return (
<Stack className="nni" style={{ minHeight: window.innerHeight }}> <Stack className='nni' style={{ minHeight: window.innerHeight }}>
<div className="header"> <div className='header'>
<div className="headerCon"> <div className='headerCon'>
<NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} /> <NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
</div> </div>
</div> </div>
<Stack className="contentBox"> <Stack className='contentBox'>
<Stack className="content"> <Stack className='content'>
{/* if api has error field, show error message */} {/* if api has error field, show error message */}
{ {errorList.map(
errorList.map((item, key) => { (item, key) =>
return ( item.errorWhere && (
item.errorWhere && <div key={key} className="warning"> <div key={key} className='warning'>
<MessageInfo info={item.errorMessage} typeInfo="error" /> <MessageInfo info={item.errorMessage} typeInfo='error' />
</div> </div>
); )
}) )}
} {isillegalFinal && (
{isillegalFinal && <div className="warning"> <div className='warning'>
<MessageInfo info={expWarningMessage} typeInfo="warning" /> <MessageInfo info={expWarningMessage} typeInfo='warning' />
</div>} </div>
<AppContext.Provider value={{ )}
<AppContext.Provider
value={{
interval, interval,
columnList, columnList,
changeColumn: this.changeColumn, changeColumn: this.changeColumn,
...@@ -172,7 +180,8 @@ class App extends React.Component<{}, AppState> { ...@@ -172,7 +180,8 @@ class App extends React.Component<{}, AppState> {
changeMetricGraphMode: this.changeMetricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries, bestTrialEntries,
changeEntries: this.changeEntries changeEntries: this.changeEntries
}}> }}
>
{this.props.children} {this.props.children}
</AppContext.Provider> </AppContext.Provider>
</Stack> </Stack>
...@@ -192,7 +201,6 @@ class App extends React.Component<{}, AppState> { ...@@ -192,7 +201,6 @@ class App extends React.Component<{}, AppState> {
if (trialsUpdated) { if (trialsUpdated) {
this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 })); this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
} }
} else { } else {
this.firstLoad = false; this.firstLoad = false;
} }
...@@ -205,13 +213,15 @@ class App extends React.Component<{}, AppState> { ...@@ -205,13 +213,15 @@ class App extends React.Component<{}, AppState> {
} }
this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000); this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
};
}
public async lastRefresh(): Promise<void> { public async lastRefresh(): Promise<void> {
await EXPERIMENT.update(); await EXPERIMENT.update();
await TRIALS.update(true); await TRIALS.update(true);
this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 })); this.setState(state => ({
experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
}));
} }
} }
......
...@@ -2,15 +2,17 @@ import * as React from 'react'; ...@@ -2,15 +2,17 @@ import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import { WEBUIDOC, MANAGER_IP } from '../static/const'; import { WEBUIDOC, MANAGER_IP } from '../static/const';
import { import {
Stack, initializeIcons, StackItem, CommandBarButton, Stack,
IContextualMenuProps, IStackTokens, IStackStyles initializeIcons,
StackItem,
CommandBarButton,
IContextualMenuProps,
IStackTokens,
IStackStyles
} from '@fluentui/react'; } from '@fluentui/react';
import LogPanel from './modals/LogPanel'; import LogPanel from './modals/LogPanel';
import ExperimentPanel from './modals/ExperimentPanel'; import ExperimentPanel from './modals/ExperimentPanel';
import { import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
downLoadIcon, infoIconAbout,
timeIcon, disableUpdates, requency, closeTimer
} from './buttons/Icon';
import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs'; import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
import { EXPERIMENT } from '../static/datamodel'; import { EXPERIMENT } from '../static/datamodel';
import '../static/style/nav/nav.scss'; import '../static/style/nav/nav.scss';
...@@ -22,7 +24,10 @@ const stackTokens: IStackTokens = { ...@@ -22,7 +24,10 @@ const stackTokens: IStackTokens = {
}; };
const stackStyle: IStackStyles = { const stackStyle: IStackStyles = {
root: { root: {
minWidth: 400, height: 56, display: 'flex', verticalAlign: 'center' minWidth: 400,
height: 56,
display: 'flex',
verticalAlign: 'center'
} }
}; };
...@@ -43,7 +48,6 @@ interface NavProps { ...@@ -43,7 +48,6 @@ interface NavProps {
} }
class NavCon extends React.Component<NavProps, NavState> { class NavCon extends React.Component<NavProps, NavState> {
constructor(props: NavProps) { constructor(props: NavProps) {
super(props); super(props);
this.state = { this.state = {
...@@ -61,49 +65,48 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -61,49 +65,48 @@ class NavCon extends React.Component<NavProps, NavState> {
// to see & download experiment parameters // to see & download experiment parameters
showExpcontent = (): void => { showExpcontent = (): void => {
this.setState({ isvisibleExperimentDrawer: true }); this.setState({ isvisibleExperimentDrawer: true });
} };
// to see & download dispatcher | nnimanager log // to see & download dispatcher | nnimanager log
showDispatcherLog = (): void => { showDispatcherLog = (): void => {
this.setState({ isvisibleLogDrawer: true }); this.setState({ isvisibleLogDrawer: true });
} };
// close log drawer (nnimanager.dispatcher) // close log drawer (nnimanager.dispatcher)
closeLogDrawer = (): void => { closeLogDrawer = (): void => {
this.setState({ isvisibleLogDrawer: false }); this.setState({ isvisibleLogDrawer: false });
} };
// close download experiment parameters drawer // close download experiment parameters drawer
closeExpDrawer = (): void => { closeExpDrawer = (): void => {
this.setState({ isvisibleExperimentDrawer: false }); this.setState({ isvisibleExperimentDrawer: false });
} };
getNNIversion = (): void => { getNNIversion = (): void => {
axios(`${MANAGER_IP}/version`, { axios(`${MANAGER_IP}/version`, {
method: 'GET' method: 'GET'
}) }).then(res => {
.then(res => {
if (res.status === 200) { if (res.status === 200) {
this.setState({ version: res.data }); this.setState({ version: res.data });
} }
}); });
} };
openGithub = (): void => { openGithub = (): void => {
const { version } = this.state; const { version } = this.state;
const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`; const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
window.open(feed); window.open(feed);
} };
openDocs = (): void => { openDocs = (): void => {
window.open(WEBUIDOC); window.open(WEBUIDOC);
} };
openGithubNNI = (): void => { openGithubNNI = (): void => {
const { version } = this.state; const { version } = this.state;
const nniLink = `https://github.com/Microsoft/nni/tree/${version}`; const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
window.open(nniLink); window.open(nniLink);
} };
getInterval = (num: number): void => { getInterval = (num: number): void => {
this.props.changeInterval(num); // notice parent component this.props.changeInterval(num); // notice parent component
...@@ -111,15 +114,14 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -111,15 +114,14 @@ class NavCon extends React.Component<NavProps, NavState> {
refreshFrequency: num === 0 ? '' : num, refreshFrequency: num === 0 ? '' : num,
refreshText: num === 0 ? 'Disable auto' : 'Auto refresh' refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
})); }));
} };
componentDidMount(): void { componentDidMount(): void {
this.getNNIversion(); this.getNNIversion();
} }
render(): React.ReactNode { render(): React.ReactNode {
const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
refreshText, refreshFrequency } = this.state;
const aboutProps: IContextualMenuProps = { const aboutProps: IContextualMenuProps = {
items: [ items: [
{ {
...@@ -143,14 +145,14 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -143,14 +145,14 @@ class NavCon extends React.Component<NavProps, NavState> {
] ]
}; };
return ( return (
<Stack horizontal className="nav"> <Stack horizontal className='nav'>
<StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}> <StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}>
<span className="desktop-logo">{NNILOGO}</span> <span className='desktop-logo'>{NNILOGO}</span>
<span className="left-right-margin">{OVERVIEWTABS}</span> <span className='left-right-margin'>{OVERVIEWTABS}</span>
<span>{DETAILTABS}</span> <span>{DETAILTABS}</span>
</StackItem> </StackItem>
<StackItem grow={70} className="navOptions"> <StackItem grow={70} className='navOptions'>
<Stack horizontal horizontalAlign="end" tokens={stackTokens} styles={stackStyle}> <Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
{/* refresh button danyi*/} {/* refresh button danyi*/}
{/* TODO: fix bug */} {/* TODO: fix bug */}
{/* <CommandBarButton {/* <CommandBarButton
...@@ -158,29 +160,23 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -158,29 +160,23 @@ class NavCon extends React.Component<NavProps, NavState> {
text="Refresh" text="Refresh"
onClick={this.props.refreshFunction} onClick={this.props.refreshFunction}
/> */} /> */}
<div className="nav-refresh"> <div className='nav-refresh'>
<CommandBarButton <CommandBarButton
iconProps={refreshFrequency === '' ? disableUpdates : timeIcon} iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}
text={refreshText} text={refreshText}
menuProps={this.refreshProps} menuProps={this.refreshProps}
/> />
<div className="nav-refresh-num">{refreshFrequency}</div> <div className='nav-refresh-num'>{refreshFrequency}</div>
</div> </div>
<CommandBarButton <CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
iconProps={downLoadIcon} <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
text="Download"
menuProps={this.menuProps}
/>
<CommandBarButton
iconProps={infoIconAbout}
text="About"
menuProps={aboutProps}
/>
</Stack> </Stack>
</StackItem> </StackItem>
{/* the drawer for dispatcher & nnimanager log message */} {/* the drawer for dispatcher & nnimanager log message */}
{isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />} {isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
{isvisibleExperimentDrawer && <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />} {isvisibleExperimentDrawer && (
<ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
)}
</Stack> </Stack>
); );
} }
...@@ -236,8 +232,7 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -236,8 +232,7 @@ class NavCon extends React.Component<NavProps, NavState> {
text: 'Refresh every 1min', text: 'Refresh every 1min',
iconProps: requency, iconProps: requency,
onClick: this.getInterval.bind(this, 60) onClick: this.getInterval.bind(this, 60)
}, }
] ]
}; };
} }
......
...@@ -2,7 +2,7 @@ import * as React from 'react'; ...@@ -2,7 +2,7 @@ import * as React from 'react';
import { Stack, IStackTokens, Dropdown } from '@fluentui/react'; import { Stack, IStackTokens, Dropdown } from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel'; import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial'; import { Trial } from '../static/model/trial';
import { AppContext } from "../App"; import { AppContext } from '../App';
import { Title1 } from './overview/Title1'; import { Title1 } from './overview/Title1';
import SuccessTable from './overview/SuccessTable'; import SuccessTable from './overview/SuccessTable';
import Progressed from './overview/Progress'; import Progressed from './overview/Progress';
...@@ -14,7 +14,7 @@ import '../static/style/overview.scss'; ...@@ -14,7 +14,7 @@ import '../static/style/overview.scss';
import '../static/style/logPath.scss'; import '../static/style/logPath.scss';
const stackTokens: IStackTokens = { const stackTokens: IStackTokens = {
childrenGap: 30, childrenGap: 30
}; };
const entriesOption = [ const entriesOption = [
...@@ -50,25 +50,24 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -50,25 +50,24 @@ class Overview extends React.Component<{}, OverviewState> {
// #999 panel active bgcolor; #b3b3b3 as usual // #999 panel active bgcolor; #b3b3b3 as usual
const { changeMetricGraphMode } = this.context; const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('max'); changeMetricGraphMode('max');
} };
clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => { clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation(); event.stopPropagation();
const { changeMetricGraphMode } = this.context; const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('min'); changeMetricGraphMode('min');
} };
changeConcurrency = (val: number): void => { changeConcurrency = (val: number): void => {
this.setState({ trialConcurrency: val }); this.setState({ trialConcurrency: val });
} };
// updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => { // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => { updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
if (item !== undefined) { if (item !== undefined) {
this.context.changeEntries(item.key); this.context.changeEntries(item.key);
} }
} };
render(): React.ReactNode { render(): React.ReactNode {
const { trialConcurrency } = this.state; const { trialConcurrency } = this.state;
...@@ -81,22 +80,22 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -81,22 +80,22 @@ class Overview extends React.Component<{}, OverviewState> {
<AppContext.Consumer> <AppContext.Consumer>
{(value): React.ReactNode => { {(value): React.ReactNode => {
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value; const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3'); const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3'); const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
return ( return (
<div className="overview"> <div className='overview'>
{/* status and experiment block */} {/* status and experiment block */}
<Stack className="bottomDiv bgNNI"> <Stack className='bottomDiv bgNNI'>
<TitleContext.Provider value={{ text: "Experiment", icon: "11.png", fontColor: '' }}> <TitleContext.Provider value={{ text: 'Experiment', icon: '11.png', fontColor: '' }}>
<Title1 /> <Title1 />
</TitleContext.Provider> </TitleContext.Provider>
<BasicInfo /> <BasicInfo />
</Stack> </Stack>
<Stack horizontal className="overMessage bottomDiv"> <Stack horizontal className='overMessage bottomDiv'>
{/* status block */} {/* status block */}
<Stack.Item grow className="prograph bgNNI borderRight"> <Stack.Item grow className='prograph bgNNI borderRight'>
<TitleContext.Provider value={{ text: "Status", icon: "5.png", fontColor: '' }}> <TitleContext.Provider value={{ text: 'Status', icon: '5.png', fontColor: '' }}>
<Title1 /> <Title1 />
</TitleContext.Provider> </TitleContext.Provider>
<Progressed <Progressed
...@@ -107,21 +106,27 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -107,21 +106,27 @@ class Overview extends React.Component<{}, OverviewState> {
/> />
</Stack.Item> </Stack.Item>
{/* experiment parameters search space tuner assessor... */} {/* experiment parameters search space tuner assessor... */}
<Stack.Item grow styles={{ root: { width: 450 } }} className="overviewBoder borderRight bgNNI"> <Stack.Item
<TitleContext.Provider value={{ text: "Search space", icon: "10.png", fontColor: '' }}> grow
styles={{ root: { width: 450 } }}
className='overviewBoder borderRight bgNNI'
>
<TitleContext.Provider
value={{ text: 'Search space', icon: '10.png', fontColor: '' }}
>
<Title1 /> <Title1 />
</TitleContext.Provider> </TitleContext.Provider>
<Stack className="experiment"> <Stack className='experiment'>
<SearchSpace searchSpace={EXPERIMENT.searchSpace} /> <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
</Stack> </Stack>
</Stack.Item> </Stack.Item>
<Stack.Item grow styles={{ root: { width: 450 } }} className="bgNNI"> <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
<TitleContext.Provider value={{ text: "Config", icon: "4.png", fontColor: '' }}> <TitleContext.Provider value={{ text: 'Config', icon: '4.png', fontColor: '' }}>
<Title1 /> <Title1 />
</TitleContext.Provider> </TitleContext.Provider>
<Stack className="experiment"> <Stack className='experiment'>
{/* the scroll bar all the trial profile in the searchSpace div*/} {/* the scroll bar all the trial profile in the searchSpace div*/}
<div className="experiment searchSpace"> <div className='experiment searchSpace'>
<TrialInfo <TrialInfo
experimentUpdateBroadcast={experimentUpdateBroadcast} experimentUpdateBroadcast={experimentUpdateBroadcast}
concurrency={trialConcurrency} concurrency={trialConcurrency}
...@@ -132,20 +137,26 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -132,20 +137,26 @@ class Overview extends React.Component<{}, OverviewState> {
</Stack> </Stack>
<Stack style={{ backgroundColor: '#fff' }}> <Stack style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="top10bg" style={{ position: 'relative', height: 42 }}> <Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
<div <div className='title' onClick={this.clickMaxTop}>
className="title" <TitleContext.Provider
onClick={this.clickMaxTop} value={{
text: 'Top maximal trials',
icon: 'max.png',
fontColor: titleMaxbgcolor
}}
> >
<TitleContext.Provider value={{ text: "Top maximal trials", icon: "max.png", fontColor: titleMaxbgcolor }}>
<Title1 /> <Title1 />
</TitleContext.Provider> </TitleContext.Provider>
</div> </div>
<div <div className='title minTitle' onClick={this.clickMinTop}>
className="title minTitle" <TitleContext.Provider
onClick={this.clickMinTop} value={{
text: 'Top minimal trials',
icon: 'min.png',
fontColor: titleMinbgcolor
}}
> >
<TitleContext.Provider value={{ text: "Top minimal trials", icon: "min.png", fontColor: titleMinbgcolor }}>
<Title1 /> <Title1 />
</TitleContext.Provider> </TitleContext.Provider>
</div> </div>
...@@ -172,9 +183,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -172,9 +183,8 @@ class Overview extends React.Component<{}, OverviewState> {
</Stack> </Stack>
</Stack> </Stack>
</div> </div>
) );
} }}
}
</AppContext.Consumer> </AppContext.Consumer>
); );
} }
...@@ -214,11 +224,13 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -214,11 +224,13 @@ class Overview extends React.Component<{}, OverviewState> {
scale: true, scale: true,
data: ySequence data: ySequence
}, },
series: [{ series: [
{
symbolSize: 6, symbolSize: 6,
type: 'scatter', type: 'scatter',
data: ySequence data: ySequence
}] }
]
}; };
} }
} }
......
import * as React from 'react'; import * as React from 'react';
import { import { Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton } from '@fluentui/react';
Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
} from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel'; import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial'; import { Trial } from '../static/model/trial';
import { AppContext } from "../App"; import { AppContext } from '../App';
import { tableListIcon } from './buttons/Icon'; import { tableListIcon } from './buttons/Icon';
import DefaultPoint from './trial-detail/DefaultMetricPoint'; import DefaultPoint from './trial-detail/DefaultMetricPoint';
import Duration from './trial-detail/Duration'; import Duration from './trial-detail/Duration';
...@@ -18,7 +16,7 @@ const searchOptions = [ ...@@ -18,7 +16,7 @@ const searchOptions = [
{ key: 'id', text: 'Id' }, { key: 'id', text: 'Id' },
{ key: 'Trial No.', text: 'Trial No.' }, { key: 'Trial No.', text: 'Trial No.' },
{ key: 'status', text: 'Status' }, { key: 'status', text: 'Status' },
{ key: 'parameters', text: 'Parameters' }, { key: 'parameters', text: 'Parameters' }
]; ];
interface TrialDetailState { interface TrialDetailState {
...@@ -74,17 +72,17 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -74,17 +72,17 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
alert(`Unexpected search filter ${this.state.searchType}`); alert(`Unexpected search filter ${this.state.searchType}`);
} }
this.setState({ searchFilter: filter }); this.setState({ searchFilter: filter });
} };
handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => { handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
if (item !== undefined) { if (item !== undefined) {
this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) }); this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
} }
} };
handleWhichTabs = (item: any): void => { handleWhichTabs = (item: any): void => {
this.setState({ whichChart: item.props.headerText }); this.setState({ whichChart: item.props.headerText });
} };
updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => { updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
// clear input value and re-render table // clear input value and re-render table
...@@ -94,7 +92,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -94,7 +92,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
} }
this.setState(() => ({ searchType: item.key.toString() })); this.setState(() => ({ searchType: item.key.toString() }));
} }
} };
render(): React.ReactNode { render(): React.ReactNode {
const { tablePageSize, whichChart, searchType } = this.state; const { tablePageSize, whichChart, searchType } = this.state;
...@@ -103,22 +101,24 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -103,22 +101,24 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
return ( return (
<AppContext.Consumer> <AppContext.Consumer>
{(value): React.ReactNode => {(value): React.ReactNode => (
<React.Fragment> <React.Fragment>
<div className="trial" id="tabsty"> <div className='trial' id='tabsty'>
<Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}> <Pivot
defaultSelectedKey={'0'}
className='detial-title'
onLinkClick={this.handleWhichTabs}
selectedKey={whichChart}
>
{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/} {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
<PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric"> <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
<Stack className="graph"> <Stack className='graph'>
<DefaultPoint <DefaultPoint trialIds={trialIds} visible={whichChart === 'Default metric'} />
trialIds={trialIds}
visible={whichChart === 'Default metric'}
/>
</Stack> </Stack>
</PivotItem> </PivotItem>
{/* <PivotItem tab={this.titleOfhyper} key="2"> */} {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
<PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter"> <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
<Stack className="graph"> <Stack className='graph'>
<Para <Para
trials={source} trials={source}
searchSpace={EXPERIMENT.searchSpaceNew} searchSpace={EXPERIMENT.searchSpaceNew}
...@@ -127,11 +127,15 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -127,11 +127,15 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</Stack> </Stack>
</PivotItem> </PivotItem>
{/* <PivotItem tab={this.titleOfDuration} key="3"> */} {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
<PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration"> <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
<Duration source={source} whichChart={whichChart} /> <Duration source={source} whichChart={whichChart} />
</PivotItem> </PivotItem>
{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */} {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
<PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result"> <PivotItem
headerText='Intermediate result'
itemIcon='StackedLineChart'
key='Intermediate result'
>
{/* *why this graph has small footprint? */} {/* *why this graph has small footprint? */}
<Intermediate source={source} whichChart={whichChart} /> <Intermediate source={source} whichChart={whichChart} />
</PivotItem> </PivotItem>
...@@ -139,25 +143,33 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -139,25 +143,33 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</div> </div>
{/* trial table list */} {/* trial table list */}
<div style={{ backgroundColor: '#fff' }}> <div style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="panelTitle" style={{ marginTop: 10 }}> <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
<span style={{ marginRight: 12 }}>{tableListIcon}</span> <span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span> <span>Trial jobs</span>
</Stack> </Stack>
<Stack horizontal className="allList"> <Stack horizontal className='allList'>
<StackItem grow={50}> <StackItem grow={50}>
<DefaultButton <DefaultButton
text="Compare" text='Compare'
className="allList-compare" className='allList-compare'
// use child-component tableList's function, the function is in child-component. // use child-component tableList's function, the function is in child-component.
onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }} onClick={(): void => {
if (this.tableList) {
this.tableList.compareBtn();
}
}}
/> />
</StackItem> </StackItem>
<StackItem grow={50}> <StackItem grow={50}>
<Stack horizontal horizontalAlign="end" className="allList"> <Stack horizontal horizontalAlign='end' className='allList'>
<DefaultButton <DefaultButton
className="allList-button-gap" className='allList-button-gap'
text="Add column" text='Add column'
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }} onClick={(): void => {
if (this.tableList) {
this.tableList.addColumn();
}
}}
/> />
<Dropdown <Dropdown
selectedKey={searchType} selectedKey={searchType}
...@@ -166,12 +178,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -166,12 +178,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
styles={{ root: { width: 150 } }} styles={{ root: { width: 150 } }}
/> />
<input <input
type="text" type='text'
className="allList-search-input" className='allList-search-input'
placeholder={`Search by ${this.state.searchType}`} placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial} onChange={this.searchTrial}
style={{ width: 230 }} style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text} ref={(text): any => (this.searchInput = text)}
/> />
</Stack> </Stack>
</StackItem> </StackItem>
...@@ -183,11 +195,11 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -183,11 +195,11 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
changeColumn={value.changeColumn} changeColumn={value.changeColumn}
trialsUpdateBroadcast={this.context.trialsUpdateBroadcast} trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
// TODO: change any to specific type // TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList} ref={(tabList): any => (this.tableList = tabList)}
/> />
</div> </div>
</React.Fragment> </React.Fragment>
} )}
</AppContext.Consumer> </AppContext.Consumer>
); );
} }
......
...@@ -17,7 +17,19 @@ const requency = { iconName: 'Timer' }; ...@@ -17,7 +17,19 @@ const requency = { iconName: 'Timer' };
const closeTimer = { iconName: 'Blocked2' }; const closeTimer = { iconName: 'Blocked2' };
const LineChart = <Icon iconName='LineChart' />; const LineChart = <Icon iconName='LineChart' />;
export { infoIcon, warining, errorBadge, completed, blocked, export {
infoIconAbout, copy, tableListIcon, downLoadIcon, timeIcon, infoIcon,
disableUpdates, requency, closeTimer, LineChart warining,
errorBadge,
completed,
blocked,
infoIconAbout,
copy,
tableListIcon,
downLoadIcon,
timeIcon,
disableUpdates,
requency,
closeTimer,
LineChart
}; };
...@@ -21,17 +21,23 @@ interface CheckBoxItems { ...@@ -21,17 +21,23 @@ interface CheckBoxItems {
onChange: () => void; onChange: () => void;
} }
class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeColumnState> { class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeColumnState> {
constructor(props: ChangeColumnProps) { constructor(props: ChangeColumnProps) {
super(props); super(props);
this.state = { userSelectColumnList: this.props.selectedColumn, originSelectColumnList: this.props.selectedColumn }; this.state = {
userSelectColumnList: this.props.selectedColumn,
originSelectColumnList: this.props.selectedColumn
};
} }
makeChangeHandler = (label: string): any => { makeChangeHandler = (label: string): any => {
return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked); return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
} };
onCheckboxChange = (ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined, label: string, val?: boolean, ): void => { onCheckboxChange = (
ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
label: string,
val?: boolean
): void => {
const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList)); const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
if (val === true) { if (val === true) {
if (!source.includes(label)) { if (!source.includes(label)) {
...@@ -41,7 +47,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol ...@@ -41,7 +47,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
} else { } else {
if (source.includes(label)) { if (source.includes(label)) {
// remove from source // remove from source
const result = source.filter((item) => item !== label); const result = source.filter(item => item !== label);
this.setState(() => ({ userSelectColumnList: result })); this.setState(() => ({ userSelectColumnList: result }));
} }
} }
...@@ -88,11 +94,11 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol ...@@ -88,11 +94,11 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
} }
this.props.changeColumn(sortColumn); this.props.changeColumn(sortColumn);
this.hideDialog(); // hide dialog this.hideDialog(); // hide dialog
} };
hideDialog = (): void => { hideDialog = (): void => {
this.props.hideShowColumnDialog(); this.props.hideShowColumnDialog();
} };
// user exit dialog // user exit dialog
cancelOption = (): void => { cancelOption = (): void => {
...@@ -101,7 +107,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol ...@@ -101,7 +107,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
this.setState({ userSelectColumnList: originSelectColumnList }, () => { this.setState({ userSelectColumnList: originSelectColumnList }, () => {
this.hideDialog(); this.hideDialog();
}); });
} };
render(): React.ReactNode { render(): React.ReactNode {
const { showColumn, isHideDialog } = this.props; const { showColumn, isHideDialog } = this.props;
...@@ -129,14 +135,14 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol ...@@ -129,14 +135,14 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
styles: { main: { maxWidth: 450 } } styles: { main: { maxWidth: 450 } }
}} }}
> >
<div className="columns-height"> <div className='columns-height'>
{renderOptions.map(item => { {renderOptions.map(item => {
return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} /> return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />;
})} })}
</div> </div>
<DialogFooter> <DialogFooter>
<PrimaryButton text="Save" onClick={this.saveUserSelectColumn} /> <PrimaryButton text='Save' onClick={this.saveUserSelectColumn} />
<DefaultButton text="Cancel" onClick={this.cancelOption} /> <DefaultButton text='Cancel' onClick={this.cancelOption} />
</DialogFooter> </DialogFooter>
</Dialog> </Dialog>
</div> </div>
......
...@@ -20,7 +20,6 @@ interface CompareProps { ...@@ -20,7 +20,6 @@ interface CompareProps {
} }
class Compare extends React.Component<CompareProps, {}> { class Compare extends React.Component<CompareProps, {}> {
public _isCompareMount!: boolean; public _isCompareMount!: boolean;
constructor(props: CompareProps) { constructor(props: CompareProps) {
super(props); super(props);
...@@ -41,7 +40,9 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -41,7 +40,9 @@ class Compare extends React.Component<CompareProps, {}> {
idsList.push(element.id); idsList.push(element.id);
}); });
// find max intermediate number // find max intermediate number
trialIntermediate.sort((a, b) => { return (b.data.length - a.data.length); }); trialIntermediate.sort((a, b) => {
return b.data.length - a.data.length;
});
const legend: string[] = []; const legend: string[] = [];
// max length // max length
const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0; const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
...@@ -56,27 +57,35 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -56,27 +57,35 @@ class Compare extends React.Component<CompareProps, {}> {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
enterable: true, enterable: true,
position: function (point: number[], data: TooltipForIntermediate): number[] { position: function(point: number[], data: TooltipForIntermediate): number[] {
if (data.dataIndex < length / 2) { if (data.dataIndex < length / 2) {
return [point[0], 80]; return [point[0], 80];
} else { } else {
return [point[0] - 300, 80]; return [point[0] - 300, 80];
} }
}, },
formatter: function (data: TooltipForIntermediate): React.ReactNode { formatter: function(data: TooltipForIntermediate): React.ReactNode {
const trialId = data.seriesName; const trialId = data.seriesName;
let obj = {}; let obj = {};
const temp = trialIntermediate.find(key => key.name === trialId); const temp = trialIntermediate.find(key => key.name === trialId);
if (temp !== undefined) { if (temp !== undefined) {
obj = temp.hyperPara; obj = temp.hyperPara;
} }
return '<div class="tooldetailAccuracy">' + return (
'<div>Trial ID: ' + trialId + '</div>' + '<div class="tooldetailAccuracy">' +
'<div>Intermediate: ' + data.data + '</div>' + '<div>Trial ID: ' +
trialId +
'</div>' +
'<div>Intermediate: ' +
data.data +
'</div>' +
'<div>Parameters: ' + '<div>Parameters: ' +
'<pre>' + JSON.stringify(obj, null, 4) + '</pre>' + '<pre>' +
JSON.stringify(obj, null, 4) +
'</pre>' +
'</div>' + '</div>' +
'</div>'; '</div>'
);
} }
}, },
grid: { grid: {
...@@ -110,8 +119,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -110,8 +119,7 @@ class Compare extends React.Component<CompareProps, {}> {
notMerge={true} // update now notMerge={true} // update now
/> />
); );
};
}
// render table column --- // render table column ---
initColumn = (): React.ReactNode => { initColumn = (): React.ReactNode => {
...@@ -134,8 +142,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -134,8 +142,7 @@ class Compare extends React.Component<CompareProps, {}> {
}); });
let isComplexSearchSpace; let isComplexSearchSpace;
if (parameterList.length > 0) { if (parameterList.length > 0) {
isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object') isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
? true : false;
} }
const width = this.getWebUIWidth(); const width = this.getWebUIWidth();
let scrollClass; let scrollClass;
...@@ -150,70 +157,59 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -150,70 +157,59 @@ class Compare extends React.Component<CompareProps, {}> {
<table className={`compare-modal-table ${scrollClass}`}> <table className={`compare-modal-table ${scrollClass}`}>
<tbody> <tbody>
<tr> <tr>
<td className="column">Id</td> <td className='column'>Id</td>
{Object.keys(idList).map(key => { {Object.keys(idList).map(key => (
return ( <td className='value idList' key={key}>
<td className="value idList" key={key}>{idList[key]}</td> {idList[key]}
); </td>
})} ))}
</tr> </tr>
<tr> <tr>
<td className="column">Trial No.</td> <td className='column'>Trial No.</td>
{Object.keys(sequenceIdList).map(key => { {Object.keys(sequenceIdList).map(key => (
return ( <td className='value idList' key={key}>
<td className="value idList" key={key}>{sequenceIdList[key]}</td> {sequenceIdList[key]}
); </td>
})} ))}
</tr> </tr>
<tr> <tr>
<td className="column">Default metric</td> <td className='column'>Default metric</td>
{Object.keys(compareStacks).map(index => { {Object.keys(compareStacks).map(index => (
const temp = compareStacks[index]; <td className='value' key={index}>
return ( <IntermediateVal trialId={compareStacks[index].id} />
<td className="value" key={index}>
<IntermediateVal trialId={temp.id} />
</td> </td>
); ))}
})}
</tr> </tr>
<tr> <tr>
<td className="column">duration</td> <td className='column'>duration</td>
{Object.keys(durationList).map(index => { {Object.keys(durationList).map(index => (
return ( <td className='value' key={index}>
<td className="value" key={index}>{durationList[index]}</td> {durationList[index]}
); </td>
})} ))}
</tr> </tr>
{ {isComplexSearchSpace
isComplexSearchSpace ? null
? : Object.keys(parameterKeys).map(index => (
null
:
Object.keys(parameterKeys).map(index => {
return (
<tr key={index}> <tr key={index}>
<td className="column" key={index}>{parameterKeys[index]}</td> <td className='column' key={index}>
{ {parameterKeys[index]}
Object.keys(parameterList).map(key => { </td>
return ( {Object.keys(parameterList).map(key => (
<td key={key} className="value"> <td key={key} className='value'>
{parameterList[key][parameterKeys[index]]} {parameterList[key][parameterKeys[index]]}
</td> </td>
); ))}
})
}
</tr> </tr>
); ))}
})
}
</tbody> </tbody>
</table> </table>
); );
} };
getWebUIWidth = (): number => { getWebUIWidth = (): number => {
return window.innerWidth; return window.innerWidth;
} };
componentDidMount(): void { componentDidMount(): void {
this._isCompareMount = true; this._isCompareMount = true;
...@@ -230,7 +226,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -230,7 +226,7 @@ class Compare extends React.Component<CompareProps, {}> {
<Modal <Modal
isOpen={true} isOpen={true}
containerClassName={contentStyles.container} containerClassName={contentStyles.container}
className="compare-modal" className='compare-modal'
allowTouchBodyScroll={true} allowTouchBodyScroll={true}
dragOptions={dragOptions} dragOptions={dragOptions}
> >
...@@ -240,13 +236,13 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -240,13 +236,13 @@ class Compare extends React.Component<CompareProps, {}> {
<IconButton <IconButton
styles={iconButtonStyles} styles={iconButtonStyles}
iconProps={{ iconName: 'Cancel' }} iconProps={{ iconName: 'Cancel' }}
ariaLabel="Close popup modal" ariaLabel='Close popup modal'
onClick={cancelFunc} onClick={cancelFunc}
/> />
</div> </div>
<Stack className="compare-modal-intermediate"> <Stack className='compare-modal-intermediate'>
{this.intermediate()} {this.intermediate()}
<Stack className="compare-yAxis"># Intermediate result</Stack> <Stack className='compare-yAxis'># Intermediate result</Stack>
</Stack> </Stack>
<Stack>{this.initColumn()}</Stack> <Stack>{this.initColumn()}</Stack>
</div> </div>
......
...@@ -25,7 +25,6 @@ interface CustomizeState { ...@@ -25,7 +25,6 @@ interface CustomizeState {
} }
class Customize extends React.Component<CustomizeProps, CustomizeState> { class Customize extends React.Component<CustomizeProps, CustomizeState> {
constructor(props: CustomizeProps) { constructor(props: CustomizeProps) {
super(props); super(props);
this.state = { this.state = {
...@@ -36,17 +35,15 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -36,17 +35,15 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
copyTrialParameter: {}, copyTrialParameter: {},
customParameters: {}, customParameters: {},
customID: NaN, customID: NaN,
changeMap: new Map changeMap: new Map()
}; };
} }
getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => { getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => {
const { name, value } = event.target; const { name, value } = event.target;
const { changeMap } = this.state; const { changeMap } = this.state;
this.setState({ changeMap: changeMap.set(name, value) }); this.setState({ changeMap: changeMap.set(name, value) });
};
}
// [submit click] user add a new trial [submit a trial] // [submit click] user add a new trial [submit a trial]
addNewTrial = (): void => { addNewTrial = (): void => {
...@@ -54,7 +51,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -54,7 +51,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
// get user edited hyperParameter, ps: will change data type if you modify the input val // get user edited hyperParameter, ps: will change data type if you modify the input val
const customized = JSON.parse(JSON.stringify(copyTrialParameter)); const customized = JSON.parse(JSON.stringify(copyTrialParameter));
// changeMap: user changed keys: values // changeMap: user changed keys: values
changeMap.forEach(function (value, key) { changeMap.forEach(function(value, key) {
customized[key] = value; customized[key] = value;
}); });
...@@ -72,14 +69,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -72,14 +69,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
return; return;
} }
if (searchSpace[item]._type === 'choice') { if (searchSpace[item]._type === 'choice') {
if (searchSpace[item]._value.find((val: string | number) => if (
val === customized[item]) === undefined) { searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
) {
parametersIllegal = true; parametersIllegal = true;
return; return;
} }
} else { } else {
if (customized[item] < searchSpace[item]._value[0] if (
|| customized[item] > searchSpace[item]._value[1]) { customized[item] < searchSpace[item]._value[0] ||
customized[item] > searchSpace[item]._value[1]
) {
parametersIllegal = true; parametersIllegal = true;
return; return;
} }
...@@ -93,18 +93,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -93,18 +93,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
// submit a customized job // submit a customized job
this.submitCustomize(customized); this.submitCustomize(customized);
} }
};
}
warningConfirm = (): void => { warningConfirm = (): void => {
this.setState(() => ({ isShowWarning: false })); this.setState(() => ({ isShowWarning: false }));
const { customParameters } = this.state; const { customParameters } = this.state;
this.submitCustomize(customParameters); this.submitCustomize(customParameters);
} };
warningCancel = (): void => { warningCancel = (): void => {
this.setState(() => ({ isShowWarning: false })); this.setState(() => ({ isShowWarning: false }));
} };
submitCustomize = (customized: Record<string, any>): void => { submitCustomize = (customized: Record<string, any>): void => {
// delete `tag` key // delete `tag` key
...@@ -129,19 +128,19 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -129,19 +128,19 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
.catch(() => { .catch(() => {
this.setState(() => ({ isShowSubmitFailed: true })); this.setState(() => ({ isShowSubmitFailed: true }));
}); });
} };
closeSucceedHint = (): void => { closeSucceedHint = (): void => {
// also close customized trial modal // also close customized trial modal
this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() })); this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
this.props.closeCustomizeModal(); this.props.closeCustomizeModal();
} };
closeFailedHint = (): void => { closeFailedHint = (): void => {
// also close customized trial modal // also close customized trial modal
this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() })); this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
this.props.closeCustomizeModal(); this.props.closeCustomizeModal();
} };
componentDidMount(): void { componentDidMount(): void {
const { copyTrialId } = this.props; const { copyTrialId } = this.props;
...@@ -164,8 +163,9 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -164,8 +163,9 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
render(): React.ReactNode { render(): React.ReactNode {
const { closeCustomizeModal, visible } = this.props; const { closeCustomizeModal, visible } = this.props;
const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state; const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
const warning = 'The parameters you set are not in our search space, this may cause the tuner to crash, Are' const warning =
+ ' you sure you want to continue submitting?'; 'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
' you sure you want to continue submitting?';
return ( return (
<Stack> <Stack>
<Dialog <Dialog
...@@ -180,23 +180,22 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -180,23 +180,22 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
styles: { main: { maxWidth: 450 } } styles: { main: { maxWidth: 450 } }
}} }}
> >
<form className="hyper-box"> <form className='hyper-box'>
{ {Object.keys(copyTrialParameter).map(item => (
Object.keys(copyTrialParameter).map(item => ( <Stack horizontal key={item} className='hyper-form'>
<Stack horizontal key={item} className="hyper-form"> <StackItem styles={{ root: { minWidth: 100 } }} className='title'>
<StackItem styles={{ root: { minWidth: 100 } }} className="title">{item}</StackItem> {item}
<StackItem className="inputs"> </StackItem>
<StackItem className='inputs'>
<input <input
type="text" type='text'
name={item} name={item}
defaultValue={copyTrialParameter[item]} defaultValue={copyTrialParameter[item]}
onChange={this.getFinalVal} onChange={this.getFinalVal}
/> />
</StackItem> </StackItem>
</Stack> </Stack>
) ))}
)
}
{/* disable [tag] because we havn't support */} {/* disable [tag] because we havn't support */}
{/* <Stack key="tag" horizontal className="hyper-form tag-input"> {/* <Stack key="tag" horizontal className="hyper-form tag-input">
<StackItem grow={9} className="title">Tag</StackItem> <StackItem grow={9} className="title">Tag</StackItem>
...@@ -206,8 +205,8 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -206,8 +205,8 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
</Stack> */} </Stack> */}
</form> </form>
<DialogFooter> <DialogFooter>
<PrimaryButton text="Submit" onClick={this.addNewTrial} /> <PrimaryButton text='Submit' onClick={this.addNewTrial} />
<DefaultButton text="Cancel" onClick={closeCustomizeModal} /> <DefaultButton text='Cancel' onClick={closeCustomizeModal} />
</DialogFooter> </DialogFooter>
</Dialog> </Dialog>
...@@ -217,17 +216,22 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -217,17 +216,22 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
onDismiss={this.closeSucceedHint} onDismiss={this.closeSucceedHint}
dialogContentProps={{ dialogContentProps={{
type: DialogType.normal, type: DialogType.normal,
title: <div className="icon-color">{completed}<b>Submit successfully</b></div>, title: (
<div className='icon-color'>
{completed}
<b>Submit successfully</b>
</div>
),
closeButtonAriaLabel: 'Close', closeButtonAriaLabel: 'Close',
subText: `You can find your customized trial by Trial No.${customID}` subText: `You can find your customized trial by Trial No.${customID}`
}} }}
modalProps={{ modalProps={{
isBlocking: false, isBlocking: false,
styles: { main: { minWidth: 500 } }, styles: { main: { minWidth: 500 } }
}} }}
> >
<DialogFooter> <DialogFooter>
<PrimaryButton onClick={this.closeSucceedHint} text="OK" /> <PrimaryButton onClick={this.closeSucceedHint} text='OK' />
</DialogFooter> </DialogFooter>
</Dialog> </Dialog>
...@@ -236,17 +240,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -236,17 +240,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
onDismiss={this.closeSucceedHint} onDismiss={this.closeSucceedHint}
dialogContentProps={{ dialogContentProps={{
type: DialogType.normal, type: DialogType.normal,
title: <div className="icon-error">{errorBadge}Submit Failed</div>, title: <div className='icon-error'>{errorBadge}Submit Failed</div>,
closeButtonAriaLabel: 'Close', closeButtonAriaLabel: 'Close',
subText: 'Unknown error.' subText: 'Unknown error.'
}} }}
modalProps={{ modalProps={{
isBlocking: false, isBlocking: false,
styles: { main: { minWidth: 500 } }, styles: { main: { minWidth: 500 } }
}} }}
> >
<DialogFooter> <DialogFooter>
<PrimaryButton onClick={this.closeFailedHint} text="OK" /> <PrimaryButton onClick={this.closeFailedHint} text='OK' />
</DialogFooter> </DialogFooter>
</Dialog> </Dialog>
...@@ -256,22 +260,21 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> { ...@@ -256,22 +260,21 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
onDismiss={this.closeSucceedHint} onDismiss={this.closeSucceedHint}
dialogContentProps={{ dialogContentProps={{
type: DialogType.normal, type: DialogType.normal,
title: <div className="icon-error">{warining}Warning</div>, title: <div className='icon-error'>{warining}Warning</div>,
closeButtonAriaLabel: 'Close', closeButtonAriaLabel: 'Close',
subText: `${warning}` subText: `${warning}`
}} }}
modalProps={{ modalProps={{
isBlocking: false, isBlocking: false,
styles: { main: { minWidth: 500 } }, styles: { main: { minWidth: 500 } }
}} }}
> >
<DialogFooter> <DialogFooter>
<PrimaryButton onClick={this.warningConfirm} text="Confirm" /> <PrimaryButton onClick={this.warningConfirm} text='Confirm' />
<DefaultButton onClick={this.warningCancel} text="Cancel" /> <DefaultButton onClick={this.warningCancel} text='Cancel' />
</DialogFooter> </DialogFooter>
</Dialog> </Dialog>
</Stack> </Stack>
); );
} }
} }
......
import * as React from 'react'; import * as React from 'react';
import { downFile } from '../../static/function'; import { downFile } from '../../static/function';
import { import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from '@fluentui/react';
Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
} from '@fluentui/react';
import { DRAWEROPTION } from '../../static/const'; import { DRAWEROPTION } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel'; import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import MonacoEditor from 'react-monaco-editor'; import MonacoEditor from 'react-monaco-editor';
...@@ -19,7 +17,6 @@ interface ExpDrawerState { ...@@ -19,7 +17,6 @@ interface ExpDrawerState {
} }
class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
public _isExperimentMount!: boolean; public _isExperimentMount!: boolean;
private refreshId!: number | undefined; private refreshId!: number | undefined;
...@@ -60,21 +57,20 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -60,21 +57,20 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
} }
if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) { if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
if(this.refreshId !== null || this.refreshId !== undefined){ if (this.refreshId !== null || this.refreshId !== undefined) {
window.clearInterval(this.refreshId); window.clearInterval(this.refreshId);
} }
} }
};
}
downExperimentParameters = (): void => { downExperimentParameters = (): void => {
const { experiment } = this.state; const { experiment } = this.state;
downFile(experiment, 'experiment.json'); downFile(experiment, 'experiment.json');
} };
onWindowResize = (): void => { onWindowResize = (): void => {
this.setState(() => ({ expDrawerHeight: window.innerHeight })); this.setState(() => ({ expDrawerHeight: window.innerHeight }));
} };
componentDidMount(): void { componentDidMount(): void {
this._isExperimentMount = true; this._isExperimentMount = true;
...@@ -93,7 +89,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -93,7 +89,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
const { closeExpDrawer } = this.props; const { closeExpDrawer } = this.props;
const { experiment, expDrawerHeight } = this.state; const { experiment, expDrawerHeight } = this.state;
return ( return (
<Stack className="logDrawer"> <Stack className='logDrawer'>
<Panel <Panel
isOpen={true} isOpen={true}
hasCloseButton={false} hasCloseButton={false}
...@@ -101,30 +97,24 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -101,30 +97,24 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
onLightDismissClick={closeExpDrawer} onLightDismissClick={closeExpDrawer}
styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }} styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
> >
<Pivot style={{ minHeight: 190 }} className="log-tab-body"> <Pivot style={{ minHeight: 190 }} className='log-tab-body'>
<PivotItem headerText="Experiment parameters"> <PivotItem headerText='Experiment parameters'>
<div className="just-for-log"> <div className='just-for-log'>
<MonacoEditor <MonacoEditor
width="100%" width='100%'
// 92 + marginTop[16] // 92 + marginTop[16]
height={expDrawerHeight - 108} height={expDrawerHeight - 108}
language="json" language='json'
value={experiment} value={experiment}
options={DRAWEROPTION} options={DRAWEROPTION}
/> />
</div> </div>
<Stack horizontal className="buttons"> <Stack horizontal className='buttons'>
<StackItem grow={50} className="download"> <StackItem grow={50} className='download'>
<PrimaryButton <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
text="Download"
onClick={this.downExperimentParameters}
/>
</StackItem> </StackItem>
<StackItem grow={50} className="close"> <StackItem grow={50} className='close'>
<DefaultButton <DefaultButton text='Close' onClick={closeExpDrawer} />
text="Close"
onClick={closeExpDrawer}
/>
</StackItem> </StackItem>
</Stack> </Stack>
</PivotItem> </PivotItem>
......
import * as React from 'react'; import * as React from 'react';
import { import {
Stack, FocusTrapCallout, DefaultButton, Stack,
FocusTrapCallout,
DefaultButton,
FocusZone, FocusZone,
PrimaryButton, getTheme, mergeStyleSets, FontWeights PrimaryButton,
getTheme,
mergeStyleSets,
FontWeights
} from '@fluentui/react'; } from '@fluentui/react';
import { killJob } from '../../static/function'; import { killJob } from '../../static/function';
import { blocked } from '../buttons/Icon'; import { blocked } from '../buttons/Icon';
...@@ -63,7 +68,6 @@ interface KillJobProps { ...@@ -63,7 +68,6 @@ interface KillJobProps {
} }
class KillJob extends React.Component<KillJobProps, KillJobState> { class KillJob extends React.Component<KillJobProps, KillJobState> {
private menuButtonElement!: HTMLElement | null; private menuButtonElement!: HTMLElement | null;
constructor(props: KillJobProps) { constructor(props: KillJobProps) {
super(props); super(props);
...@@ -72,20 +76,20 @@ class KillJob extends React.Component<KillJobProps, KillJobState> { ...@@ -72,20 +76,20 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
onDismiss = (): void => { onDismiss = (): void => {
this.setState(() => ({ isCalloutVisible: false })); this.setState(() => ({ isCalloutVisible: false }));
} };
onKill = (): void => { onKill = (): void => {
this.setState({ isCalloutVisible: false }, () => { this.setState({ isCalloutVisible: false }, () => {
const { trial } = this.props; const { trial } = this.props;
killJob(trial.key, trial.id, trial.status); killJob(trial.key, trial.id, trial.status);
}); });
} };
openPromot = (event: React.SyntheticEvent<EventTarget>): void => { openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
this.setState({ isCalloutVisible: true }); this.setState({ isCalloutVisible: true });
} };
render(): React.ReactNode { render(): React.ReactNode {
const { isCalloutVisible } = this.state; const { isCalloutVisible } = this.state;
...@@ -93,12 +97,14 @@ class KillJob extends React.Component<KillJobProps, KillJobState> { ...@@ -93,12 +97,14 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
return ( return (
<div> <div>
<div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}> <div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
<PrimaryButton className="detail-button-operation" onClick={this.openPromot} title="kill">{blocked}</PrimaryButton> <PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
{blocked}
</PrimaryButton>
</div> </div>
{isCalloutVisible ? ( {isCalloutVisible ? (
<div> <div>
<FocusTrapCallout <FocusTrapCallout
role="alertdialog" role='alertdialog'
className={styles.callout} className={styles.callout}
gapSpace={0} gapSpace={0}
target={this.menuButtonElement} target={this.menuButtonElement}
......
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import { import { Stack, StackItem, Panel, PrimaryButton, DefaultButton, Pivot, PivotItem } from '@fluentui/react';
Stack, StackItem, Panel, PrimaryButton, DefaultButton,
Pivot, PivotItem
} from '@fluentui/react';
import { infoIcon } from '../buttons/Icon'; import { infoIcon } from '../buttons/Icon';
import { DOWNLOAD_IP } from '../../static/const'; import { DOWNLOAD_IP } from '../../static/const';
import { downFile } from '../../static/function'; import { downFile } from '../../static/function';
...@@ -40,44 +37,42 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -40,44 +37,42 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
if (this.state.nniManagerLogStr !== null) { if (this.state.nniManagerLogStr !== null) {
downFile(this.state.nniManagerLogStr, 'nnimanager.log'); downFile(this.state.nniManagerLogStr, 'nnimanager.log');
} }
} };
downloadDispatcher = (): void => { downloadDispatcher = (): void => {
if (this.state.dispatcherLogStr !== null) { if (this.state.dispatcherLogStr !== null) {
downFile(this.state.dispatcherLogStr, 'dispatcher.log'); downFile(this.state.dispatcherLogStr, 'dispatcher.log');
} }
} };
dispatcherHTML = (): React.ReactNode => { dispatcherHTML = (): React.ReactNode => (
return (
<div> <div>
<span>Dispatcher log</span> <span>Dispatcher log</span>
<span className="refresh" onClick={this.manualRefresh}> <span className='refresh' onClick={this.manualRefresh}>
{infoIcon} {infoIcon}
</span> </span>
</div> </div>
); );
}
nnimanagerHTML = (): React.ReactNode => { nnimanagerHTML = (): React.ReactNode => (
return (
<div> <div>
<span>NNImanager log</span> <span>NNImanager log</span>
<span className="refresh" onClick={this.manualRefresh}>{infoIcon}</span> <span className='refresh' onClick={this.manualRefresh}>
{infoIcon}
</span>
</div> </div>
); );
}
setLogDrawerHeight = (): void => { setLogDrawerHeight = (): void => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 })); this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
} };
async componentDidMount(): Promise<void> { async componentDidMount(): Promise<void> {
this.refresh(); this.refresh();
window.addEventListener('resize', this.setLogDrawerHeight); window.addEventListener('resize', this.setLogDrawerHeight);
} }
componentWillUnmount(): void{ componentWillUnmount(): void {
window.clearTimeout(this.timerId); window.clearTimeout(this.timerId);
window.removeEventListener('resize', this.setLogDrawerHeight); window.removeEventListener('resize', this.setLogDrawerHeight);
} }
...@@ -95,41 +90,38 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -95,41 +90,38 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
isLightDismiss={true} isLightDismiss={true}
onLightDismissClick={closeDrawer} onLightDismissClick={closeDrawer}
> >
<div className="log-tab-body"> <div className='log-tab-body'>
<Pivot <Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
selectedKey={activeTab}
style={{ minHeight: 190, paddingTop: '16px' }}
>
{/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */} {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
<PivotItem headerText="Dispatcher log" key="dispatcher"> <PivotItem headerText='Dispatcher log' key='dispatcher'>
<MonacoHTML <MonacoHTML
content={dispatcherLogStr || 'Loading...'} content={dispatcherLogStr || 'Loading...'}
loading={isLoading} loading={isLoading}
// paddingTop[16] + tab[44] + button[32] // paddingTop[16] + tab[44] + button[32]
height={logDrawerHeight - 92} height={logDrawerHeight - 92}
/> />
<Stack horizontal className="buttons"> <Stack horizontal className='buttons'>
<StackItem grow={12} className="download"> <StackItem grow={12} className='download'>
<PrimaryButton text="Download" onClick={this.downloadDispatcher} /> <PrimaryButton text='Download' onClick={this.downloadDispatcher} />
</StackItem> </StackItem>
<StackItem grow={12} className="close"> <StackItem grow={12} className='close'>
<DefaultButton text="Close" onClick={closeDrawer} /> <DefaultButton text='Close' onClick={closeDrawer} />
</StackItem> </StackItem>
</Stack> </Stack>
</PivotItem> </PivotItem>
<PivotItem headerText="NNIManager log" key="nnimanager"> <PivotItem headerText='NNIManager log' key='nnimanager'>
{/* <TabPane tab="NNImanager Log" key="nnimanager"> */} {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
<MonacoHTML <MonacoHTML
content={nniManagerLogStr || 'Loading...'} content={nniManagerLogStr || 'Loading...'}
loading={isLoading} loading={isLoading}
height={logDrawerHeight - 92} height={logDrawerHeight - 92}
/> />
<Stack horizontal className="buttons"> <Stack horizontal className='buttons'>
<StackItem grow={12} className="download"> <StackItem grow={12} className='download'>
<PrimaryButton text="Download" onClick={this.downloadNNImanager} /> <PrimaryButton text='Download' onClick={this.downloadNNImanager} />
</StackItem> </StackItem>
<StackItem grow={12} className="close"> <StackItem grow={12} className='close'>
<DefaultButton text="Close" onClick={closeDrawer} /> <DefaultButton text='Close' onClick={closeDrawer} />
</StackItem> </StackItem>
</Stack> </Stack>
</PivotItem> </PivotItem>
...@@ -158,12 +150,12 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -158,12 +150,12 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
this.timerId = window.setTimeout(this.refresh, 10000); this.timerId = window.setTimeout(this.refresh, 10000);
}); });
} };
private manualRefresh = (): void => { private manualRefresh = (): void => {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
this.refresh(); this.refresh();
} };
} }
export default LogDrawer; export default LogDrawer;
...@@ -8,7 +8,6 @@ interface MessageInfoProps { ...@@ -8,7 +8,6 @@ interface MessageInfoProps {
} }
class MessageInfo extends React.Component<MessageInfoProps, {}> { class MessageInfo extends React.Component<MessageInfoProps, {}> {
constructor(props: MessageInfoProps) { constructor(props: MessageInfoProps) {
super(props); super(props);
} }
...@@ -16,11 +15,7 @@ class MessageInfo extends React.Component<MessageInfoProps, {}> { ...@@ -16,11 +15,7 @@ class MessageInfo extends React.Component<MessageInfoProps, {}> {
render(): React.ReactNode { render(): React.ReactNode {
const { info, typeInfo, className } = this.props; const { info, typeInfo, className } = this.props;
return ( return (
<MessageBar <MessageBar messageBarType={MessageBarType[typeInfo]} isMultiline={true} className={className}>
messageBarType={MessageBarType[typeInfo]}
isMultiline={true}
className={className}
>
{info} {info}
</MessageBar> </MessageBar>
); );
......
/* resubmit confirm modal style */ /* resubmit confirm modal style */
.resubmit{ .resubmit {
.title{ .title {
font-size: 16px; font-size: 16px;
color: #000; color: #000;
.color-warn, .color-error{
.color-warn,
.color-error {
color: red; color: red;
} }
i{
i {
margin-right: 10px; margin-right: 10px;
} }
} }
.hint{
.hint {
padding: 15px 0; padding: 15px 0;
color: #333; color: #333;
margin-left: 30px; margin-left: 30px;
} }
.color-succ{
.color-succ {
color: green; color: green;
} }
} }
.hyper-box{
.hyper-box {
padding: 16px 18px 16px 16px; padding: 16px 18px 16px 16px;
} }
.hyper-form{
.hyper-form {
margin-bottom: 10px; margin-bottom: 10px;
.title{
.title {
font-size: 14px; font-size: 14px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 40px; line-height: 40px;
} }
.inputs{
.inputs {
height: 32px; height: 32px;
} }
input{
input {
padding-left: 5px; padding-left: 5px;
height: 32px; height: 32px;
} }
} }
.tag-input{
.tag-input {
margin-top: 25px; margin-top: 25px;
} }
/* submit & cancel buttons style*/ /* submit & cancel buttons style */
.modal-button{ .modal-button {
text-align: right; text-align: right;
height: 28px; height: 28px;
/* cancel button style*/
.cancelSty{ /* cancel button style */
.cancelSty {
width: 80px; width: 80px;
background-color: #dadada; background-color: #dadada;
border: none; border: none;
color: #333; color: #333;
} }
.cancelSty:hover, .cancelSty:active, .cancelSty:focus{
.cancelSty:hover,
.cancelSty:active,
.cancelSty:focus {
background-color: #dadada; background-color: #dadada;
} }
.distance{
.distance {
margin-right: 8px; margin-right: 8px;
} }
} }
.center{ .center {
text-align: center; text-align: center;
} }
.icon-color{ .icon-color {
i{ i {
color: green; color: green;
} }
} }
.icon-error{
i{ .icon-error {
i {
color: red; color: red;
} }
} }
.icon-color, .icon-error{
i{ .icon-color,
.icon-error {
i {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
top: 5px; top: 5px;
} }
} }
.ms-Dialog-subText{
.ms-Dialog-subText {
color: #333; color: #333;
} }
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