Skip to content

GitLab

"...targets/git@developer.sourcefind.cn:gaoqiong/migraphx.git" did not exist on "4a066e44b56dc1ffd03447b9124aff58875615cb"
Unverified Commit d90433da authored by SparkSnail's avatar SparkSnail Committed by GitHub
Browse files

Merge pull request #246 from microsoft/master 

merge master
parents 1e511829 bf7daa8f
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 170 deletions
src/webui/src/components/Modals/Killjob.tsx
View file @ d90433da
......@@ -77,7 +77,7 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
onKill = (): void => {
this.setState({ isCalloutVisible: false }, () => {
const { trial } = this.props;
killJob(trial.key, trial.id, trial.status);
killJob(trial.key, trial.jobId, trial.status);
});
}
......@@ -127,4 +127,4 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
}
}
export default KillJob;
\ No newline at end of file
export default KillJob;
src/webui/src/components/Overview.tsx
View file @ d90433da
import * as React from 'react';
import { Stack, IStackTokens } from 'office-ui-fabric-react';
import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial';
import Title1 from './overview/Title1';
......@@ -16,7 +16,9 @@ interface OverviewProps {
experimentUpdateBroadcast: number;
trialsUpdateBroadcast: number;
metricGraphMode: 'max' | 'min';
bestTrialEntries: string;
changeMetricGraphMode: (val: 'max' | 'min') => void;
changeEntries: (entries: string) => void;
}
interface OverviewState {
......@@ -38,6 +40,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
changeMetricGraphMode('max');
}
clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
const { changeMetricGraphMode } = this.props;
......@@ -48,9 +51,16 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
this.setState({ trialConcurrency: val });
}
// updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
if (item !== undefined) {
this.props.changeEntries(item.key);
}
}
render(): React.ReactNode {
const { trialConcurrency } = this.state;
const { experimentUpdateBroadcast, metricGraphMode } = this.props;
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
const searchSpace = this.convertSearchSpace();
const bestTrials = this.findBestTrials();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
......@@ -58,23 +68,31 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#999' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#999' : '#b3b3b3');
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
const stackTokens: IStackTokens = {
childrenGap: 30,
};
const entriesOption = [
{ key: '10', text: 'Display top 10 trials' },
{ key: '20', text: 'Display top 20 trials' },
{ key: '30', text: 'Display top 30 trials' },
{ key: '50', text: 'Display top 50 trials' },
{ key: '100', text: 'Display top 100 trials' }
];
return (
<div className="overview">
{/* status and experiment block */}
<Stack>
<Stack className="bottomDiv bgNNI">
<Title1 text="Experiment" icon="11.png" />
<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
</Stack>
<Stack horizontal className="overMessage">
<Stack horizontal className="overMessage bottomDiv">
{/* status block */}
<Stack.Item grow className="prograph overviewBoder cc">
<Stack.Item grow className="prograph bgNNI borderRight">
<Title1 text="Status" icon="5.png" />
<Progressed
bestAccuracy={bestAccuracy}
......@@ -84,13 +102,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
/>
</Stack.Item>
{/* experiment parameters search space tuner assessor... */}
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder">
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI">
<Title1 text="Search space" icon="10.png" />
<Stack className="experiment">
<SearchSpace searchSpace={searchSpace} />
</Stack>
</Stack.Item>
<Stack.Item grow styles={{root: {width: 450}}}>
{/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
<Stack.Item grow styles={{root: {width: 450}}} className="bgNNI">
<Title1 text="Config" icon="4.png" />
<Stack className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/}
......@@ -104,19 +123,27 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
</Stack.Item>
</Stack>
<Stack>
<Stack horizontal className="top10bg">
<Stack style={{backgroundColor: '#fff'}}>
<Stack horizontal className="top10bg" style={{position: 'relative'}}>
<div
className="title"
onClick={this.clickMaxTop}
>
<Title1 text="Top10 Maximal trials" icon="max.png" bgcolor={titleMaxbgcolor} />
<Title1 text="Top Maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
</div>
<div
className="title minTitle"
onClick={this.clickMinTop}
>
<Title1 text="Top10 Minimal trials" icon="min.png" bgcolor={titleMinbgcolor} />
<Title1 text="Top Minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
</div>
<div style={{position: 'absolute', right: 52, top: 6}}>
<Dropdown
selectedKey={bestTrialEntries}
options={entriesOption}
onChange={this.updateEntries}
styles={{ root: { width: 170 } }}
/>
</div>
</Stack>
<Stack horizontal tokens={stackTokens}>
......@@ -128,7 +155,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
/>
</div>
<div style={{ width: '60%'}}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
</div>
</Stack>
</Stack>
......@@ -155,10 +182,11 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
private findBestTrials(): Trial[] {
const bestTrials = TRIALS.sort();
const { bestTrialEntries } = this.props;
if (this.props.metricGraphMode === 'max') {
bestTrials.reverse().splice(10);
bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
} else {
bestTrials.splice(10);
bestTrials.splice(JSON.parse(bestTrialEntries));
}
return bestTrials;
}
......
src/webui/src/components/TrialsDetail.tsx
View file @ d90433da
......@@ -142,53 +142,54 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
</Pivot>
</div>
{/* trial table list */}
<Stack horizontal className="panelTitle">
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack>
<Stack horizontal className="allList">
<StackItem grow={50}>
<DefaultButton
text="Compare"
className="allList-compare"
// use child-component tableList's function, the function is in child-component.
onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
/>
</StackItem>
<StackItem grow={50}>
<Stack horizontal horizontalAlign="end" className="allList">
<div style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack>
<Stack horizontal className="allList">
<StackItem grow={50}>
<DefaultButton
className="allList-button-gap"
text="Add column"
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
text="Compare"
className="allList-compare"
// use child-component tableList's function, the function is in child-component.
onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
/>
<Dropdown
selectedKey={searchType}
options={searchOptions}
onChange={this.updateSearchFilterType}
styles={{ root: { width: 150 } }}
/>
<input
type="text"
className="allList-search-input"
placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial}
style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text}
/>
</Stack>
</StackItem>
</Stack>
<TableList
pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)}
columnList={columnList}
changeColumn={changeColumn}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
// TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList}
/>
</StackItem>
<StackItem grow={50}>
<Stack horizontal horizontalAlign="end" className="allList">
<DefaultButton
className="allList-button-gap"
text="Add column"
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
/>
<Dropdown
selectedKey={searchType}
options={searchOptions}
onChange={this.updateSearchFilterType}
styles={{ root: { width: 150 } }}
/>
<input
type="text"
className="allList-search-input"
placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial}
style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text}
/>
</Stack>
</StackItem>
</Stack>
<TableList
pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)}
columnList={columnList}
changeColumn={changeColumn}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
// TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList}
/>
</div>
</div>
);
}
......
src/webui/src/components/overview/BasicInfo.tsx
View file @ d90433da
......@@ -22,12 +22,16 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
<Stack.Item grow={3} className="padItem basic">
<p>Name</p>
<div>{EXPERIMENT.profile.params.experimentName}</div>
</Stack.Item>
<Stack.Item grow={3} className="padItem basic">
<p>ID</p>
<div>{EXPERIMENT.profile.id}</div>
</Stack.Item>
<Stack.Item grow={3} className="padItem basic">
<p>Start time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
</Stack.Item>
<Stack.Item grow={3} className="padItem basic">
<p>End time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
</Stack.Item>
......@@ -45,6 +49,8 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
{EXPERIMENT.profile.logDir || 'unknown'}
</TooltipHost>
</div>
</Stack.Item>
<Stack.Item className="padItem basic">
<p>Training platform</p>
<div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
</Stack.Item>
......
src/webui/src/components/overview/Title1.tsx
View file @ d90433da
......@@ -4,7 +4,7 @@ import '../../static/style/overviewTitle.scss';
interface Title1Props {
text: string;
icon?: string;
bgcolor?: string;
fontColor?: string;
}
class Title1 extends React.Component<Title1Props, {}> {
......@@ -14,11 +14,11 @@ class Title1 extends React.Component<Title1Props, {}> {
}
render(): React.ReactNode {
const { text, icon, bgcolor } = this.props;
const { text, icon, fontColor } = this.props;
return (
<Stack horizontal className="panelTitle" style={{ backgroundColor: bgcolor }}>
<Stack horizontal className="panelTitle">
<img src={require(`../../static/img/icon/${icon}`)} alt="icon" />
<span>{text}</span>
<span style={{ color: fontColor }}>{text}</span>
</Stack>
);
}
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ d90433da
......@@ -3,7 +3,6 @@ import * as copy from 'copy-to-clipboard';
import { Stack, PrimaryButton, Pivot, PivotItem } from 'office-ui-fabric-react';
import { Trial } from '../../static/model/trial';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { MANAGER_IP } from '../../static/const';
import JSONTree from 'react-json-tree';
import PaiTrialLog from '../public-child/PaiTrialLog';
import TrialLog from '../public-child/TrialLog';
......@@ -60,31 +59,12 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
const { isHidenInfo, typeInfo, info } = this.state;
const trialId = this.props.trialId;
const trial = TRIALS.getTrial(trialId);
const trialLink: string = `${MANAGER_IP}/trial-jobs/${trialId}`;
const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
const multiProgress = trial.info.hyperParameters === undefined ? 0 : trial.info.hyperParameters.length;
return (
<Stack className="openRow">
<Stack className="openRowContent">
<Pivot>
<PivotItem headerText="Parameters" key="1" itemIcon="TestParameter">
{
EXPERIMENT.multiPhase
?
<Stack className="link">
{
`
Trails for multiphase experiment will return a set of parameters,
we are listing the latest parameter in webportal.
For the entire parameter set, please refer to the following "
`
}
<a href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a>{`".`}
<div>Current Phase: {multiProgress}.</div>
</Stack>
:
null
}
{
trial.info.hyperParameters !== undefined
?
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ d90433da
......@@ -9,7 +9,7 @@ import { LineChart, blocked, copy } from '../Buttons/Icon';
import { MANAGER_IP, COLUMNPro } from '../../static/const';
import { convertDuration, formatTimestamp, intermediateGraphOption, parseMetrics } from '../../static/function';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { TableRecord } from '../../static/interface';
import { TableRecord, TrialJobInfo } from '../../static/interface';
import Details from '../overview/Details';
import ChangeColumnComponent from '../Modals/ChangeColumnComponent';
import Compare from '../Modals/Compare';
......@@ -231,18 +231,23 @@ class TableList extends React.Component<TableListProps, TableListState> {
)
};
showIntermediateModal = async (id: string, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
event.preventDefault();
event.stopPropagation();
const res = await axios.get(`${MANAGER_IP}/metric-data/${id}`);
const res = await axios.get(`${MANAGER_IP}/metric-data/${record.jobId}`);
if (res.status === 200) {
const intermediateArr: number[] = [];
// support intermediate result is dict because the last intermediate result is
// final result in a succeed trial, it may be a dict.
// get intermediate result dict keys array
const { intermediateKey } = this.state;
const otherkeys: string[] = [ ];
if (res.data.length !== 0) {
const otherkeys: string[] = [];
// One trial job may contains multiple parameter id
// only show current trial's metric data
const metricDatas = res.data.filter(item => {
return item.parameterId == record.parameterId;
});
if (metricDatas.length !== 0) {
// just add type=number keys
const intermediateMetrics = parseMetrics(res.data[0].data);
for (const key in intermediateMetrics) {
......@@ -252,9 +257,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
// intermediateArr just store default val
Object.keys(res.data).map(item => {
if (res.data[item].type === 'PERIODICAL') {
const temp = parseMetrics(res.data[item].data);
metricDatas.map(item => {
if (item.type === 'PERIODICAL') {
const temp = parseMetrics(item.data);
if (typeof temp === 'object') {
intermediateArr.push(temp[intermediateKey]);
} else {
......@@ -262,12 +268,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
});
const intermediate = intermediateGraphOption(intermediateArr, id);
const intermediate = intermediateGraphOption(intermediateArr, record.id);
this.setState({
intermediateData: res.data, // store origin intermediate data for a trial
intermediateOption: intermediate,
intermediateOtherKeys: otherkeys,
intermediateId: id
intermediateId: record.id
});
}
this.setState({ modalVisible: true });
......@@ -426,8 +432,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
// when user click [Add Column] need to use the function
private initTableColumnList = (columnList: string[]): IColumn[] => {
// const { columnList } = this.props;
// [supportCustomizedTrial: true]
const supportCustomizedTrial = (EXPERIMENT.multiPhase === true) ? false : true;
const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
const showColumn: IColumn[] = [];
for (const item of columnList) {
......@@ -479,7 +483,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
<PrimaryButton
className="detail-button-operation"
title="Intermediate"
onClick={this.showIntermediateModal.bind(this, record.id)}
onClick={this.showIntermediateModal.bind(this, record)}
>
{LineChart}
</PrimaryButton>
......@@ -494,20 +498,14 @@ class TableList extends React.Component<TableListProps, TableListState> {
<KillJob trial={record} />
}
{/* Add a new trial-customized trial */}
{
supportCustomizedTrial
?
<PrimaryButton
className="detail-button-operation"
title="Customized trial"
onClick={this.setCustomizedTrial.bind(this, record.id)}
disabled={disabledAddCustomizedTrial}
>
{copy}
</PrimaryButton>
:
null
}
<PrimaryButton
className="detail-button-operation"
title="Customized trial"
onClick={this.setCustomizedTrial.bind(this, record.id)}
disabled={disabledAddCustomizedTrial}
>
{copy}
</PrimaryButton>
</Stack>
);
},
......@@ -659,4 +657,4 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
export default TableList;
\ No newline at end of file
export default TableList;
src/webui/src/static/const.ts
View file @ d90433da
......@@ -2,7 +2,10 @@
const METRIC_GROUP_UPDATE_THRESHOLD = 100;
const METRIC_GROUP_UPDATE_SIZE = 20;
const MANAGER_IP = `/api/v1/nni`;
let MANAGER_IP = `/api/v1/nni`;
if (process.env.NODE_ENV == "development") {
MANAGER_IP = `//${window.location.hostname}:8080` + MANAGER_IP;
}
const DOWNLOAD_IP = `/logs`;
const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
const trialJobStatus = [
......@@ -34,8 +37,8 @@ const OPERATION = 'Operation';
const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
// all choice column !dictory final
const COLUMNPro = ['Trial No.', 'ID', 'Start Time', 'End Time', 'Duration', 'Status',
'Intermediate result', 'Default', OPERATION];
const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
'Intermediate result', 'Default', OPERATION];
const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
export {
MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro, WEBUIDOC,
......
src/webui/src/static/interface.ts
View file @ d90433da
......@@ -18,6 +18,8 @@ interface TableRecord {
startTime: number;
endTime?: number;
id: string;
jobId: string;
parameterId: string;
duration: number;
status: string;
intermediateCount: number;
......@@ -99,6 +101,7 @@ interface Intermedia {
interface MetricDataRecord {
timestamp: number;
trialJobId: string;
trialId: string;
parameterId: string;
type: string;
sequence: number;
......@@ -107,6 +110,8 @@ interface MetricDataRecord {
interface TrialJobInfo {
id: string;
jobId: string;
parameterId: string;
sequenceId: number;
status: string;
startTime?: number;
......@@ -126,7 +131,6 @@ interface ExperimentParams {
maxTrialNum: number;
searchSpace: string;
trainingServicePlatform: string;
multiPhase?: boolean;
multiThread?: boolean;
versionCheck?: boolean;
logCollection?: string;
......@@ -189,4 +193,4 @@ export {
AccurPoint, DetailAccurPoint, TooltipForIntermediate, TooltipForAccuracy,
Dimobj, ParaObj, Intermedia, MetricDataRecord, TrialJobInfo, ExperimentParams,
ExperimentProfile, NNIManagerStatus, EventMap
};
\ No newline at end of file
};
src/webui/src/static/model/experiment.ts
View file @ d90433da
......@@ -66,10 +66,6 @@ class Experiment {
return !!(this.profile.params.logCollection && this.profile.params.logCollection !== 'none');
}
get multiPhase(): boolean {
return !!(this.profile.params.multiPhase);
}
get status(): string {
if (!this.statusField) {
throw Error('Experiment status not initialized');
......
src/webui/src/static/model/trial.ts
View file @ d90433da
......@@ -4,7 +4,7 @@ import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } f
class Trial implements TableObj {
private metricsInitialized: boolean = false;
private infoField: TrialJobInfo | undefined;
private intermediates: (MetricDataRecord | undefined)[] = [ ];
private intermediates: (MetricDataRecord | undefined)[] = [];
public final: MetricDataRecord | undefined;
private finalAcc: number | undefined;
......@@ -29,7 +29,7 @@ class Trial implements TableObj {
}
get intermediateMetrics(): MetricDataRecord[] {
const ret: MetricDataRecord[] = [ ];
const ret: MetricDataRecord[] = [];
for (let i = 0; i < this.intermediates.length; i++) {
if (this.intermediates[i]) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
......@@ -80,6 +80,8 @@ class Trial implements TableObj {
key: this.info.id,
sequenceId: this.info.sequenceId,
id: this.info.id,
jobId: this.info.jobId,
parameterId: this.info.parameterId,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
startTime: this.info.startTime!,
endTime: this.info.endTime,
......@@ -122,8 +124,8 @@ class Trial implements TableObj {
get description(): Parameters {
const ret: Parameters = {
parameters: { },
intermediate: [ ],
parameters: {},
intermediate: [],
multiProgress: 1
};
const tempHyper = this.info.hyperParameters;
......@@ -142,7 +144,7 @@ class Trial implements TableObj {
ret.logPath = this.info.logPath;
}
const mediate: number[] = [ ];
const mediate: number[] = [];
for (const items of this.intermediateMetrics) {
if (typeof parseMetrics(items.data) === 'object') {
mediate.push(parseMetrics(items.data).default);
......
src/webui/src/static/model/trialmanager.ts
View file @ d90433da
......@@ -6,13 +6,29 @@ import { Trial } from './trial';
function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
const ret = new Map<string, MetricDataRecord[]>();
for (const metric of metrics) {
if (ret.has(metric.trialJobId)) {
const trialId = `${metric.trialJobId}-${metric.parameterId}`;
metric.trialId = trialId;
if (ret.has(trialId)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
ret.get(metric.trialJobId)!.push(metric);
ret.get(trialId)!.push(metric);
} else {
ret.set(metric.trialJobId, [ metric ]);
ret.set(trialId, [metric]);
}
}
// to compatiable with multi-trial in same job, fix offset of sequence
ret.forEach((trialMetrics) => {
let minSequenceNumber = Number.POSITIVE_INFINITY;
trialMetrics.map((item) => {
if (item.sequence < minSequenceNumber && item.type !== "FINAL") {
minSequenceNumber = item.sequence;
}
});
trialMetrics.map((item) => {
if (item.type !== "FINAL") {
item.sequence -= minSequenceNumber;
}
});
});
return ret;
}
......@@ -31,7 +47,7 @@ class TrialManager {
}
public async update(lastTime?: boolean): Promise<boolean> {
const [ infoUpdated, metricUpdated ] = await Promise.all([ this.updateInfo(), this.updateMetrics(lastTime) ]);
const [infoUpdated, metricUpdated] = await Promise.all([this.updateInfo(), this.updateMetrics(lastTime)]);
return infoUpdated || metricUpdated;
}
......@@ -71,14 +87,14 @@ class TrialManager {
public countStatus(): Map<string, number> {
const cnt = new Map<string, number>([
[ 'UNKNOWN', 0 ],
[ 'WAITING', 0 ],
[ 'RUNNING', 0 ],
[ 'SUCCEEDED', 0 ],
[ 'FAILED', 0 ],
[ 'USER_CANCELED', 0 ],
[ 'SYS_CANCELED', 0 ],
[ 'EARLY_STOPPED', 0 ],
['UNKNOWN', 0],
['WAITING', 0],
['RUNNING', 0],
['SUCCEEDED', 0],
['FAILED', 0],
['USER_CANCELED', 0],
['SYS_CANCELED', 0],
['EARLY_STOPPED', 0],
]);
for (const trial of this.trials.values()) {
if (trial.initialized()) {
......@@ -89,19 +105,71 @@ class TrialManager {
return cnt;
}
public static expandJobsToTrials(jobs: TrialJobInfo[]): TrialJobInfo[] {
const trials: TrialJobInfo[] = [];
for (const jobInfo of jobs as TrialJobInfo[]) {
if (jobInfo.hyperParameters) {
let trial: TrialJobInfo | undefined;
let lastTrial: TrialJobInfo | undefined;
for (let i = 0; i < jobInfo.hyperParameters.length; i++) {
const hyperParameters = jobInfo.hyperParameters[i]
const hpObject = JSON.parse(hyperParameters);
const parameterId = hpObject["parameter_id"];
trial = {
id: `${jobInfo.id}-${parameterId}`,
jobId: jobInfo.id,
parameterId: parameterId,
sequenceId: parameterId,
status: "SUCCEEDED",
startTime: jobInfo.startTime,
endTime: jobInfo.startTime,
hyperParameters: [hyperParameters],
logPath: jobInfo.logPath,
stderrPath: jobInfo.stderrPath,
};
if (jobInfo.finalMetricData) {
for (const metricData of jobInfo.finalMetricData) {
if (metricData.parameterId == parameterId) {
trial.finalMetricData = [metricData];
trial.endTime = metricData.timestamp;
break;
}
}
}
if (lastTrial) {
trial.startTime = lastTrial.endTime;
} else {
trial.startTime = jobInfo.startTime;
}
lastTrial = trial;
trials.push(trial);
}
if (lastTrial !== undefined) {
lastTrial.status = jobInfo.status;
lastTrial.endTime = jobInfo.endTime;
}
} else {
trials.push(jobInfo);
}
}
return trials;
}
private async updateInfo(): Promise<boolean> {
const response = await axios.get(`${MANAGER_IP}/trial-jobs`);
let updated = false;
if (response.status === 200) {
for (const info of response.data as TrialJobInfo[]) {
if (this.trials.has(info.id)) {
const newTrials = TrialManager.expandJobsToTrials(response.data);
for (const trialInfo of newTrials as TrialJobInfo[]) {
if (this.trials.has(trialInfo.id)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
updated = this.trials.get(info.id)!.updateTrialJobInfo(info) || updated;
updated = this.trials.get(trialInfo.id)!.updateTrialJobInfo(trialInfo) || updated;
} else {
this.trials.set(info.id, new Trial(info, undefined));
this.trials.set(trialInfo.id, new Trial(trialInfo, undefined));
updated = true;
}
this.maxSequenceId = Math.max(this.maxSequenceId, info.sequenceId);
this.maxSequenceId = Math.max(this.maxSequenceId, trialInfo.sequenceId);
}
this.infoInitialized = true;
}
......@@ -146,7 +214,7 @@ class TrialManager {
private doUpdateMetrics(allMetrics: MetricDataRecord[], latestOnly: boolean): boolean {
let updated = false;
for (const [ trialId, metrics ] of groupMetricsByTrial(allMetrics).entries()) {
for (const [trialId, metrics] of groupMetricsByTrial(allMetrics).entries()) {
if (this.trials.has(trialId)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const trial = this.trials.get(trialId)!;
......
src/webui/src/static/style/overview.scss
View file @ d90433da
......@@ -25,7 +25,6 @@
padding: 15px 0;
color: #212121;
width: 95%;
margin: 0 auto;
}
.nowrap{
......
src/webui/src/static/style/overviewTitle.scss
View file @ d90433da
$titleBgcolor: #b3b3b3;
$iconPaddingVal: 14px;
.overview .overviewBoder{
height: 100%;
border-right: 2px solid white;
}
.panelTitle{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
height: 38px;
padding: 0 $iconPaddingVal;
background: $titleBgcolor;
padding: 4px $iconPaddingVal;
box-sizing: border-box;
img{
height: 22px;
/* (38 - 22 ) / 2 */
......@@ -40,7 +34,6 @@ $iconPaddingVal: 14px;
}
.top10bg{
background-color: $titleBgcolor;
.top10Title{
width: 160px;
......
src/webui/src/static/style/trialsDetail.scss
View file @ d90433da
$bg: #b3b3b3;
#tabsty{
background-color: #fff;
.ms-Pivot{
.ms-Button{
padding: 0;
......@@ -7,13 +7,6 @@ $bg: #b3b3b3;
margin-right: 0;
border-right: 2px solid #fff;
transition: 0.3s;
&:hover{
background-color: $bg;
}
.ms-Button-flexContainer{
background-color: $bg;
}
}
.ms-Pivot-link::before{
......@@ -45,10 +38,7 @@ $bg: #b3b3b3;
/* graph, title total height */
width: 100%;
height: 500px;
/* graph all title bg*/
.ms-FocusZone{
background-color: $bg;
}
.graph{
height: 432px;
margin: 0 auto;
......
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