Unverified Commit 2488aa65 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

refactor experiment summary file(to fix componentWillReceiveProps waring) and...

refactor experiment summary file(to fix componentWillReceiveProps waring) and click other areas to close panel (#2734)
parent 2d026a13
import * as React from 'react'; import * as React from 'react';
import axios from 'axios';
import { downFile } from '../../static/function'; import { downFile } from '../../static/function';
import { import {
Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
} from 'office-ui-fabric-react'; } from 'office-ui-fabric-react';
import { MANAGER_IP, DRAWEROPTION } from '../../static/const'; import { DRAWEROPTION } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import MonacoEditor from 'react-monaco-editor'; import MonacoEditor from 'react-monaco-editor';
import '../../static/style/logDrawer.scss'; import '../../static/style/logDrawer.scss';
import { TrialManager } from '../../static/model/trialmanager';
interface ExpDrawerProps { interface ExpDrawerProps {
isVisble: boolean;
closeExpDrawer: () => void; closeExpDrawer: () => void;
experimentProfile: object;
} }
interface ExpDrawerState { interface ExpDrawerState {
...@@ -21,7 +20,9 @@ interface ExpDrawerState { ...@@ -21,7 +20,9 @@ interface ExpDrawerState {
class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
public _isCompareMount!: boolean; public _isExperimentMount!: boolean;
private refreshId!: number | undefined;
constructor(props: ExpDrawerProps) { constructor(props: ExpDrawerProps) {
super(props); super(props);
...@@ -32,42 +33,40 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -32,42 +33,40 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
} }
getExperimentContent = (): void => { getExperimentContent = (): void => {
axios const experimentData = JSON.parse(JSON.stringify(this.props.experimentProfile));
.all([ if (experimentData.params.searchSpace) {
axios.get(`${MANAGER_IP}/experiment`), experimentData.params.searchSpace = JSON.parse(experimentData.params.searchSpace);
axios.get(`${MANAGER_IP}/trial-jobs`), }
axios.get(`${MANAGER_IP}/metric-data`) const trialMessagesArr = TRIALS.getTrialJobList();
]) const interResultList = TRIALS.getMetricsList();
.then(axios.spread((resExperiment, resTrialJobs, resMetricData) => { Object.keys(trialMessagesArr).map(item => {
if (resExperiment.status === 200 && resTrialJobs.status === 200 && resMetricData.status === 200) { // not deal with trial's hyperParameters
if (resExperiment.data.params.searchSpace) { const trialId = trialMessagesArr[item].jobId;
resExperiment.data.params.searchSpace = JSON.parse(resExperiment.data.params.searchSpace); // add intermediate result message
} trialMessagesArr[item].intermediate = [];
const trialMessagesArr = TrialManager.expandJobsToTrials(resTrialJobs.data); Object.keys(interResultList).map(key => {
const interResultList = resMetricData.data; const interId = interResultList[key].trialJobId;
Object.keys(trialMessagesArr).map(item => { if (trialId === interId) {
// not deal with trial's hyperParameters trialMessagesArr[item].intermediate.push(interResultList[key]);
const trialId = trialMessagesArr[item].id;
// add intermediate result message
trialMessagesArr[item].intermediate = [];
Object.keys(interResultList).map(key => {
const interId = `${interResultList[key].trialJobId}-${interResultList[key].parameterId}`;
if (trialId === interId) {
trialMessagesArr[item].intermediate.push(interResultList[key]);
}
});
});
const result = {
experimentParameters: resExperiment.data,
trialMessage: trialMessagesArr
};
if (this._isCompareMount === true) {
this.setState({ experiment: JSON.stringify(result, null, 4) });
}
} }
})); });
} });
const result = {
experimentParameters: experimentData,
trialMessage: trialMessagesArr
};
if (this._isExperimentMount === true) {
this.setState({ experiment: JSON.stringify(result, null, 4) });
}
if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
if(this.refreshId !== null || this.refreshId !== undefined){
window.clearInterval(this.refreshId);
}
}
}
downExperimentParameters = (): void => { downExperimentParameters = (): void => {
const { experiment } = this.state; const { experiment } = this.state;
downFile(experiment, 'experiment.json'); downFile(experiment, 'experiment.json');
...@@ -78,31 +77,28 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> { ...@@ -78,31 +77,28 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
} }
componentDidMount(): void { componentDidMount(): void {
this._isCompareMount = true; this._isExperimentMount = true;
this.getExperimentContent(); this.getExperimentContent();
this.refreshId = window.setInterval(this.getExperimentContent, 10000);
window.addEventListener('resize', this.onWindowResize); window.addEventListener('resize', this.onWindowResize);
} }
componentWillReceiveProps(nextProps: ExpDrawerProps): void {
const { isVisble } = nextProps;
if (isVisble === true) {
this.getExperimentContent();
}
}
componentWillUnmount(): void { componentWillUnmount(): void {
this._isCompareMount = false; this._isExperimentMount = false;
window.clearTimeout(this.refreshId);
window.removeEventListener('resize', this.onWindowResize); window.removeEventListener('resize', this.onWindowResize);
} }
render(): React.ReactNode { render(): React.ReactNode {
const { isVisble, 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={isVisble} isOpen={true}
hasCloseButton={false} hasCloseButton={false}
isLightDismiss={true}
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">
......
...@@ -92,6 +92,8 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> { ...@@ -92,6 +92,8 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
isOpen={true} isOpen={true}
hasCloseButton={false} hasCloseButton={false}
isFooterAtBottom={true} isFooterAtBottom={true}
isLightDismiss={true}
onLightDismissClick={closeDrawer}
> >
<div className="log-tab-body"> <div className="log-tab-body">
<Pivot <Pivot
......
...@@ -5,13 +5,14 @@ import { ...@@ -5,13 +5,14 @@ import {
Stack, initializeIcons, StackItem, CommandBarButton, Stack, initializeIcons, StackItem, CommandBarButton,
IContextualMenuProps, IStackTokens, IStackStyles IContextualMenuProps, IStackTokens, IStackStyles
} from 'office-ui-fabric-react'; } from 'office-ui-fabric-react';
import LogDrawer from './Modals/LogDrawer'; import LogPanel from './Modals/LogPanel';
import ExperimentDrawer from './Modals/ExperimentDrawer'; import ExperimentPanel from './Modals/ExperimentPanel';
import { import {
downLoadIcon, infoIconAbout, downLoadIcon, infoIconAbout,
timeIcon, disableUpdates, requency, closeTimer timeIcon, disableUpdates, requency, closeTimer
} from './Buttons/Icon'; } 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 '../static/style/nav/nav.scss'; import '../static/style/nav/nav.scss';
import '../static/style/icon.scss'; import '../static/style/icon.scss';
...@@ -97,9 +98,9 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -97,9 +98,9 @@ class NavCon extends React.Component<NavProps, NavState> {
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);
} }
...@@ -178,8 +179,8 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -178,8 +179,8 @@ class NavCon extends React.Component<NavProps, NavState> {
</Stack> </Stack>
</StackItem> </StackItem>
{/* the drawer for dispatcher & nnimanager log message */} {/* the drawer for dispatcher & nnimanager log message */}
{isvisibleLogDrawer && <LogDrawer closeDrawer={this.closeLogDrawer} />} {isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
<ExperimentDrawer isVisble={isvisibleExperimentDrawer} closeExpDrawer={this.closeExpDrawer} /> {isvisibleExperimentDrawer && <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />}
</Stack> </Stack>
); );
} }
......
...@@ -9,7 +9,7 @@ import { EXPERIMENT, TRIALS } from '../../static/datamodel'; ...@@ -9,7 +9,7 @@ import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { convertTime } from '../../static/function'; import { convertTime } from '../../static/function';
import ConcurrencyInput from './NumInput'; import ConcurrencyInput from './NumInput';
import ProgressBar from './ProgressItem'; import ProgressBar from './ProgressItem';
import LogDrawer from '../Modals/LogDrawer'; import LogDrawer from '../Modals/LogPanel';
import MessageInfo from '../Modals/MessageInfo'; import MessageInfo from '../Modals/MessageInfo';
import { infoIcon } from "../Buttons/Icon"; import { infoIcon } from "../Buttons/Icon";
import '../../static/style/progress.scss'; import '../../static/style/progress.scss';
......
...@@ -48,6 +48,16 @@ class TrialManager { ...@@ -48,6 +48,16 @@ class TrialManager {
private latestMetricdataErrorMessage: string = ''; // metric-data-latest error message private latestMetricdataErrorMessage: string = ''; // metric-data-latest error message
private isMetricdataRangeError: boolean = false; // metric-data-range api error filed private isMetricdataRangeError: boolean = false; // metric-data-range api error filed
private metricdataRangeErrorMessage: string = ''; // metric-data-latest error message private metricdataRangeErrorMessage: string = ''; // metric-data-latest error message
private metricsList: Array<MetricDataRecord> = [];
private trialJobList: Array<TrialJobInfo> = [];
public getMetricsList(): Array<MetricDataRecord> {
return this.metricsList;
}
public getTrialJobList(): Array<TrialJobInfo> {
return this.trialJobList;
}
public async init(): Promise<void> { public async init(): Promise<void> {
while (!this.infoInitialized || !this.metricInitialized) { while (!this.infoInitialized || !this.metricInitialized) {
...@@ -230,6 +240,7 @@ class TrialManager { ...@@ -230,6 +240,7 @@ class TrialManager {
requestAxios(`${MANAGER_IP}/trial-jobs`) requestAxios(`${MANAGER_IP}/trial-jobs`)
.then(data => { .then(data => {
const newTrials = TrialManager.expandJobsToTrials(data as any); const newTrials = TrialManager.expandJobsToTrials(data as any);
this.trialJobList = newTrials;
for (const trialInfo of newTrials as TrialJobInfo[]) { for (const trialInfo of newTrials as TrialJobInfo[]) {
if (this.trials.has(trialInfo.id)) { if (this.trials.has(trialInfo.id)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
...@@ -265,7 +276,10 @@ class TrialManager { ...@@ -265,7 +276,10 @@ class TrialManager {
private async updateAllMetrics(): Promise<boolean> { private async updateAllMetrics(): Promise<boolean> {
return requestAxios(`${MANAGER_IP}/metric-data`) return requestAxios(`${MANAGER_IP}/metric-data`)
.then(data => this.doUpdateMetrics(data as any, false)) .then(data => {
this.metricsList = data;
return this.doUpdateMetrics(data as any, false);
})
.catch(error => { .catch(error => {
this.isMetricdataError = true; this.isMetricdataError = true;
this.MetricdataErrorMessage = `${error.message}`; this.MetricdataErrorMessage = `${error.message}`;
......
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