Skip to content

GitLab

Unverified Commit 4668fc08 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Update webui react version and use fluent ui (#2873)

parent 2ee76dc7
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 314 deletions
src/webui/package.json
View file @ 4668fc08
......@@ -22,12 +22,15 @@
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"json5": "^2.1.1",
"mini-css-extract-plugin": "0.5.0",
"monaco-editor": "^0.19.0",
"monaco-editor-webpack-plugin": "^1.8.1",
"node-sass": "^4.13.0",
"office-ui-fabric-react": "^7.78.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"parcoord-es": "^2.2.10",
"pnp-webpack-plugin": "1.2.1",
......@@ -44,7 +47,8 @@
"react-monaco-editor": "^0.32.1",
"react-paginate": "^6.3.2",
"react-pagination": "^1.0.0",
"react-router": "^3.2.3",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-table": "^7.0.0-rc.15",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
......@@ -59,17 +63,16 @@
},
"devDependencies": {
"@babel/core": "7.4.3",
"@fluentui/react": "^7.135.0",
"@svgr/webpack": "4.1.0",
"@types/d3": "^5.7.2",
"@types/jest": "24.0.12",
"@types/json5": "^0.0.30",
"@types/node": "^10.13.0",
"@types/react": "16.8.6",
"@types/react-dom": "^16.0.7",
"@types/react-router": "^3.0.20",
"@types/node": "^10.14.2",
"@types/react": "16.8.15",
"@types/react-dom": "16.8.4",
"@typescript-eslint/eslint-plugin": "^2.11.0",
"@typescript-eslint/parser": "^2.11.0",
"@uifabric/fluent-theme": "^0.16.7",
"concurrently": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.0",
......
src/webui/src/App.tsx
View file @ 4668fc08
import * as React from 'react';
import { Stack } from 'office-ui-fabric-react';
import { Stack } from '@fluentui/react';
import { COLUMN } from './static/const';
import { EXPERIMENT, TRIALS } from './static/datamodel';
import NavCon from './components/NavCon';
import MessageInfo from './components/Modals/MessageInfo';
import MessageInfo from './components/modals/MessageInfo';
import './App.scss';
interface AppState {
......@@ -18,6 +18,21 @@ interface AppState {
isUpdate: boolean;
}
export const AppContext = React.createContext({
interval: 10, // sendons
columnList: COLUMN,
experimentUpdateBroadcast: 0,
trialsUpdateBroadcast: 0,
metricGraphMode: 'max',
bestTrialEntries: '10',
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeColumn: (val: string[]) => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeMetricGraphMode: ( val: 'max' | 'min') => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeEntries: (val: string) => {}
});
class App extends React.Component<{}, AppState> {
private timerId!: number | undefined;
private dataFormatimer!: number;
......@@ -103,8 +118,7 @@ class App extends React.Component<{}, AppState> {
}
shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
if(!(nextState.isUpdate || nextState.isUpdate === undefined)){
if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
nextState.isUpdate = true;
return false;
}
......@@ -126,19 +140,6 @@ class App extends React.Component<{}, AppState> {
{ errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
{ errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
];
const reactPropsChildren = React.Children.map(this.props.children, child =>
React.cloneElement(
child as React.ReactElement<any>, {
interval,
columnList, changeColumn: this.changeColumn,
experimentUpdateBroadcast,
trialsUpdateBroadcast,
metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries, changeEntries: this.changeEntries
})
);
return (
<Stack className="nni" style={{ minHeight: window.innerHeight }}>
<div className="header">
......@@ -161,7 +162,19 @@ class App extends React.Component<{}, AppState> {
{isillegalFinal && <div className="warning">
<MessageInfo info={expWarningMessage} typeInfo="warning" />
</div>}
{reactPropsChildren}
<AppContext.Provider value={{
interval,
columnList,
changeColumn: this.changeColumn,
experimentUpdateBroadcast,
trialsUpdateBroadcast,
metricGraphMode,
changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries,
changeEntries: this.changeEntries
}}>
{this.props.children}
</AppContext.Provider>
</Stack>
</Stack>
</Stack>
......@@ -203,5 +216,3 @@ class App extends React.Component<{}, AppState> {
}
export default App;
src/webui/src/components/NavCon.tsx
View file @ 4668fc08
......@@ -4,13 +4,13 @@ import { WEBUIDOC, MANAGER_IP } from '../static/const';
import {
Stack, initializeIcons, StackItem, CommandBarButton,
IContextualMenuProps, IStackTokens, IStackStyles
} from 'office-ui-fabric-react';
import LogPanel from './Modals/LogPanel';
import ExperimentPanel from './Modals/ExperimentPanel';
} from '@fluentui/react';
import LogPanel from './modals/LogPanel';
import ExperimentPanel from './modals/ExperimentPanel';
import {
downLoadIcon, infoIconAbout,
timeIcon, disableUpdates, requency, closeTimer
} from './Buttons/Icon';
} from './buttons/Icon';
import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
import { EXPERIMENT } from '../static/datamodel';
import '../static/style/nav/nav.scss';
......
src/webui/src/components/Overview.tsx
View file @ 4668fc08
import * as React from 'react';
import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
import { Stack, IStackTokens, Dropdown } from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial';
import Title1 from './overview/Title1';
import { AppContext } from "../App";
import { Title1 } from './overview/Title1';
import SuccessTable from './overview/SuccessTable';
import Progressed from './overview/Progress';
import Accuracy from './overview/Accuracy';
import SearchSpace from './overview/SearchSpace';
import BasicInfo from './overview/BasicInfo';
import { BasicInfo } from './overview/BasicInfo';
import TrialInfo from './overview/TrialProfile';
import '../static/style/overview.scss';
import '../static/style/logPath.scss';
......@@ -24,21 +25,20 @@ const entriesOption = [
{ key: '100', text: 'Display top 100 trials' }
];
interface OverviewProps {
experimentUpdateBroadcast: number;
trialsUpdateBroadcast: number;
metricGraphMode: 'max' | 'min';
bestTrialEntries: string;
changeMetricGraphMode: (val: 'max' | 'min') => void;
changeEntries: (entries: string) => void;
}
interface OverviewState {
trialConcurrency: number;
}
class Overview extends React.Component<OverviewProps, OverviewState> {
constructor(props: OverviewProps) {
export const TitleContext = React.createContext({
text: '',
icon: '',
fontColor: ''
});
class Overview extends React.Component<{}, OverviewState> {
static contextType = AppContext;
constructor(props) {
super(props);
this.state = {
trialConcurrency: EXPERIMENT.trialConcurrency
......@@ -48,14 +48,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
// #999 panel active bgcolor; #b3b3b3 as usual
const { changeMetricGraphMode } = this.props;
const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('max');
}
clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
const { changeMetricGraphMode } = this.props;
const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('min');
}
......@@ -66,107 +66,123 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
// 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);
this.context.changeEntries(item.key);
}
}
render(): React.ReactNode {
const { trialConcurrency } = this.state;
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
const bestTrials = this.findBestTrials();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
return (
<div className="overview">
{/* status and experiment block */}
<Stack className="bottomDiv bgNNI">
<Title1 text="Experiment" icon="11.png" />
<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
</Stack>
<Stack horizontal className="overMessage bottomDiv">
{/* status block */}
<Stack.Item grow className="prograph bgNNI borderRight">
<Title1 text="Status" icon="5.png" />
<Progressed
bestAccuracy={bestAccuracy}
concurrency={trialConcurrency}
changeConcurrency={this.changeConcurrency}
experimentUpdateBroadcast={experimentUpdateBroadcast}
/>
</Stack.Item>
{/* experiment parameters search space tuner assessor... */}
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI">
<Title1 text="Search space" icon="10.png" />
<Stack className="experiment">
<SearchSpace searchSpace={EXPERIMENT.searchSpace} />
</Stack>
</Stack.Item>
{/* <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*/}
<div className="experiment searchSpace">
<TrialInfo
experimentUpdateBroadcast={experimentUpdateBroadcast}
concurrency={trialConcurrency}
/>
</div>
</Stack>
</Stack.Item>
</Stack>
<Stack style={{backgroundColor: '#fff'}}>
<Stack horizontal className="top10bg" style={{position: 'relative', height: 42}}>
<div
className="title"
onClick={this.clickMaxTop}
>
<Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
</div>
<div
className="title minTitle"
onClick={this.clickMinTop}
>
<Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
</div>
<div style={{position: 'absolute', right: '2%', top: 8}}>
<Dropdown
selectedKey={bestTrialEntries}
options={entriesOption}
onChange={this.updateEntries}
styles={{ root: { width: 170 } }}
/>
</div>
</Stack>
<Stack horizontal tokens={stackTokens}>
<div style={{ width: '40%', position: 'relative'}}>
<Accuracy
accuracyData={accuracyGraphData}
accNodata={noDataMessage}
height={404}
/>
</div>
<div style={{ width: '60%'}}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
<AppContext.Consumer>
{(value): React.ReactNode => {
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
return (
<div className="overview">
{/* status and experiment block */}
<Stack className="bottomDiv bgNNI">
<TitleContext.Provider value={{ text: "Experiment", icon: "11.png", fontColor: '' }}>
<Title1 />
</TitleContext.Provider>
<BasicInfo />
</Stack>
<Stack horizontal className="overMessage bottomDiv">
{/* status block */}
<Stack.Item grow className="prograph bgNNI borderRight">
<TitleContext.Provider value={{ text: "Status", icon: "5.png", fontColor: '' }}>
<Title1 />
</TitleContext.Provider>
<Progressed
bestAccuracy={bestAccuracy}
concurrency={trialConcurrency}
changeConcurrency={this.changeConcurrency}
experimentUpdateBroadcast={experimentUpdateBroadcast}
/>
</Stack.Item>
{/* experiment parameters search space tuner assessor... */}
<Stack.Item grow styles={{ root: { width: 450 } }} className="overviewBoder borderRight bgNNI">
<TitleContext.Provider value={{ text: "Search space", icon: "10.png", fontColor: '' }}>
<Title1 />
</TitleContext.Provider>
<Stack className="experiment">
<SearchSpace searchSpace={EXPERIMENT.searchSpace} />
</Stack>
</Stack.Item>
<Stack.Item grow styles={{ root: { width: 450 } }} className="bgNNI">
<TitleContext.Provider value={{ text: "Config", icon: "4.png", fontColor: '' }}>
<Title1 />
</TitleContext.Provider>
<Stack className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/}
<div className="experiment searchSpace">
<TrialInfo
experimentUpdateBroadcast={experimentUpdateBroadcast}
concurrency={trialConcurrency}
/>
</div>
</Stack>
</Stack.Item>
</Stack>
<Stack style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="top10bg" style={{ position: 'relative', height: 42 }}>
<div
className="title"
onClick={this.clickMaxTop}
>
<TitleContext.Provider value={{ text: "Top maximal trials", icon: "max.png", fontColor: titleMaxbgcolor }}>
<Title1 />
</TitleContext.Provider>
</div>
<div
className="title minTitle"
onClick={this.clickMinTop}
>
<TitleContext.Provider value={{ text: "Top minimal trials", icon: "min.png", fontColor: titleMinbgcolor }}>
<Title1 />
</TitleContext.Provider>
</div>
<div style={{ position: 'absolute', right: '2%', top: 8 }}>
<Dropdown
selectedKey={bestTrialEntries}
options={entriesOption}
onChange={this.updateEntries}
styles={{ root: { width: 170 } }}
/>
</div>
</Stack>
<Stack horizontal tokens={stackTokens}>
<div style={{ width: '40%', position: 'relative' }}>
<Accuracy
accuracyData={accuracyGraphData}
accNodata={noDataMessage}
height={404}
/>
</div>
<div style={{ width: '60%' }}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
</div>
</Stack>
</Stack>
</div>
</Stack>
</Stack>
</div>
)
}
}
</AppContext.Consumer>
);
}
private findBestTrials(): Trial[] {
const bestTrials = TRIALS.sort();
const { bestTrialEntries } = this.props;
if (this.props.metricGraphMode === 'max') {
const { bestTrialEntries, metricGraphMode } = this.context;
if (metricGraphMode === 'max') {
bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
} else {
bestTrials.splice(JSON.parse(bestTrialEntries));
......
src/webui/src/components/TrialsDetail.tsx
View file @ 4668fc08
import * as React from 'react';
import {
Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
} from 'office-ui-fabric-react';
} from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial';
import { tableListIcon } from './Buttons/Icon';
import { AppContext } from "../App";
import { tableListIcon } from './buttons/Icon';
import DefaultPoint from './trial-detail/DefaultMetricPoint';
import Duration from './trial-detail/Duration';
import Para from './trial-detail/Para';
......@@ -13,6 +14,13 @@ import TableList from './trial-detail/TableList';
import '../static/style/trialsDetail.scss';
import '../static/style/search.scss';
const searchOptions = [
{ key: 'id', text: 'Id' },
{ key: 'Trial No.', text: 'Trial No.' },
{ key: 'status', text: 'Status' },
{ key: 'parameters', text: 'Parameters' },
];
interface TrialDetailState {
tablePageSize: number; // table components val
whichChart: string;
......@@ -20,22 +28,15 @@ interface TrialDetailState {
searchFilter: (trial: Trial) => boolean;
}
interface TrialsDetailProps {
columnList: string[];
changeColumn: (val: string[]) => void;
experimentUpdateBroacast: number;
trialsUpdateBroadcast: number;
}
class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
class TrialsDetail extends React.Component<{}, TrialDetailState> {
static contextType = AppContext;
public interAccuracy = 0;
public interAllTableList = 2;
public tableList!: TableList | null;
public searchInput!: HTMLInputElement | null;
constructor(props: TrialsDetailProps) {
constructor(props) {
super(props);
this.state = {
tablePageSize: 20,
......@@ -82,7 +83,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
}
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 => {
......@@ -97,100 +98,97 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
render(): React.ReactNode {
const { tablePageSize, whichChart, searchType } = this.state;
const { columnList, changeColumn } = this.props;
const source = TRIALS.filter(this.state.searchFilter);
const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
const searchOptions = [
{ key: 'id', text: 'Id' },
{ key: 'Trial No.', text: 'Trial No.' },
{ key: 'status', text: 'Status' },
{ key: 'parameters', text: 'Parameters' },
];
return (
<div>
<div className="trial" id="tabsty">
<Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}>
{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
<PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric">
<Stack className="graph">
<DefaultPoint
trialIds={trialIds}
visible={whichChart === 'Default metric'}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
/>
<AppContext.Consumer>
{(value): React.ReactNode =>
<React.Fragment>
<div className="trial" id="tabsty">
<Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}>
{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
<PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric">
<Stack className="graph">
<DefaultPoint
trialIds={trialIds}
visible={whichChart === 'Default metric'}
/>
</Stack>
</PivotItem>
{/* <PivotItem tab={this.titleOfhyper} key="2"> */}
<PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter">
<Stack className="graph">
<Para
trials={source}
searchSpace={EXPERIMENT.searchSpaceNew}
whichChart={whichChart}
/>
</Stack>
</PivotItem>
{/* <PivotItem tab={this.titleOfDuration} key="3"> */}
<PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration">
<Duration source={source} whichChart={whichChart} />
</PivotItem>
{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
<PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result">
{/* *why this graph has small footprint? */}
<Intermediate source={source} whichChart={whichChart} />
</PivotItem>
</Pivot>
</div>
{/* trial table list */}
<div style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack>
</PivotItem>
{/* <PivotItem tab={this.titleOfhyper} key="2"> */}
<PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter">
<Stack className="graph">
<Para
trials={source}
searchSpace={EXPERIMENT.searchSpaceNew}
whichChart={whichChart}
/>
<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">
<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>
</PivotItem>
{/* <PivotItem tab={this.titleOfDuration} key="3"> */}
<PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration">
<Duration source={source} whichChart={whichChart} />
</PivotItem>
{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
<PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result">
{/* *why this graph has small footprint? */}
<Intermediate source={source} whichChart={whichChart} />
</PivotItem>
</Pivot>
</div>
{/* trial table list */}
<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
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(); } }}
<TableList
pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)}
columnList={value.columnList}
changeColumn={value.changeColumn}
trialsUpdateBroadcast={this.context.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>
</div>
</React.Fragment>
}
</AppContext.Consumer>
);
}
}
......
src/webui/src/components/Buttons/Icon.tsx → src/webui/src/components/buttons/Icon.tsx
View file @ 4668fc08
import * as React from 'react';
import { Icon, initializeIcons } from 'office-ui-fabric-react';
import { Icon, initializeIcons } from '@fluentui/react';
initializeIcons();
const infoIcon = <Icon iconName='info' />;
......@@ -11,7 +11,7 @@ const copy = <Icon iconName='Copy' />;
const tableListIcon = <Icon iconName='BulletedList' />;
const downLoadIcon = { iconName: 'Download' };
const infoIconAbout = { iconName: 'info' };
const timeIcon = { iconName: 'ReminderTime' };
const timeIcon = { iconName: 'Refresh' };
const disableUpdates = { iconName: 'DisableUpdates' };
const requency = { iconName: 'Timer' };
const closeTimer = { iconName: 'Blocked2' };
......
src/webui/src/components/Buttons/ModalTheme.tsx → src/webui/src/components/buttons/ModalTheme.tsx
View file @ 4668fc08
import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabric-react';
import { getTheme, mergeStyleSets, FontWeights, FontSizes } from '@fluentui/react';
// Themed styles for the example.
const theme = getTheme();
const contentStyles = mergeStyleSets({
......
src/webui/src/components/Modals/ChangeColumnComponent.tsx → src/webui/src/components/modals/ChangeColumnComponent.tsx
View file @ 4668fc08
import * as React from 'react';
import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from '@fluentui/react';
import { OPERATION } from '../../static/const';
interface ChangeColumnState {
......
src/webui/src/components/Modals/Compare.tsx → src/webui/src/components/modals/Compare.tsx
View file @ 4668fc08
import * as React from 'react';
import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from 'office-ui-fabric-react';
import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from '@fluentui/react';
import ReactEcharts from 'echarts-for-react';
import IntermediateVal from '../public-child/IntermediateVal';
import { TRIALS } from '../../static/datamodel';
import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
import '../../static/style/compare.scss';
const dragOptions: IDragOptions = {
......
src/webui/src/components/Modals/CustomizedTrial.tsx → src/webui/src/components/modals/CustomizedTrial.tsx
View file @ 4668fc08
import * as React from 'react';
import axios from 'axios';
import { Stack, StackItem, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { Stack, StackItem, PrimaryButton, DefaultButton } from '@fluentui/react';
import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
import { MANAGER_IP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { warining, errorBadge, completed } from '../Buttons/Icon';
import { warining, errorBadge, completed } from '../buttons/Icon';
import './customized.scss';
interface CustomizeProps {
......
src/webui/src/components/Modals/ExperimentPanel.tsx → src/webui/src/components/modals/ExperimentPanel.tsx
View file @ 4668fc08
......@@ -2,7 +2,7 @@ import * as React from 'react';
import { downFile } from '../../static/function';
import {
Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
} from 'office-ui-fabric-react';
} from '@fluentui/react';
import { DRAWEROPTION } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import MonacoEditor from 'react-monaco-editor';
......
src/webui/src/components/Modals/Killjob.tsx → src/webui/src/components/modals/Killjob.tsx
View file @ 4668fc08
......@@ -3,9 +3,9 @@ import {
Stack, FocusTrapCallout, DefaultButton,
FocusZone,
PrimaryButton, getTheme, mergeStyleSets, FontWeights
} from 'office-ui-fabric-react';
} from '@fluentui/react';
import { killJob } from '../../static/function';
import { blocked } from '../Buttons/Icon';
import { blocked } from '../buttons/Icon';
const theme = getTheme();
const styles = mergeStyleSets({
......
src/webui/src/components/Modals/LogPanel.tsx → src/webui/src/components/modals/LogPanel.tsx
View file @ 4668fc08
......@@ -3,8 +3,8 @@ import axios from 'axios';
import {
Stack, StackItem, Panel, PrimaryButton, DefaultButton,
Pivot, PivotItem
} from 'office-ui-fabric-react';
import { infoIcon } from '../Buttons/Icon';
} from '@fluentui/react';
import { infoIcon } from '../buttons/Icon';
import { DOWNLOAD_IP } from '../../static/const';
import { downFile } from '../../static/function';
import MonacoHTML from '../public-child/MonacoEditor';
......
src/webui/src/components/Modals/MessageInfo.tsx → src/webui/src/components/modals/MessageInfo.tsx
View file @ 4668fc08
import * as React from 'react';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
import { MessageBar, MessageBarType } from '@fluentui/react';
interface MessageInfoProps {
info: string;
......
src/webui/src/components/overview/BasicInfo.tsx
View file @ 4668fc08
import * as React from 'react';
import { Stack, TooltipHost, getId } from 'office-ui-fabric-react';
import React from 'react';
import { Stack, TooltipHost } from '@fluentui/react';
import { EXPERIMENT } from '../../static/datamodel';
import { formatTimestamp } from '../../static/function';
interface BasicInfoProps {
experimentUpdateBroadcast: number;
}
class BasicInfo extends React.Component<BasicInfoProps, {}> {
// Use getId() to ensure that the ID is unique on the page.
// (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
// for tooltip user the log directory
private _hostId: string = getId('tooltipHost');
constructor(props: BasicInfoProps) {
super(props);
}
render(): React.ReactNode {
return (
<Stack horizontal horizontalAlign="space-between" className="main">
<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>
<Stack.Item className="padItem basic">
<p>Log directory</p>
<div className="nowrap">
<TooltipHost
// Tooltip message content
content={EXPERIMENT.profile.logDir || 'unknown'}
id={this._hostId}
calloutProps={{ gapSpace: 0 }}
styles={{ root: { display: 'inline-block' } }}
>
{/* show logDir */}
{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>
</Stack>
);
}
}
export default BasicInfo;
export const BasicInfo = (): any => (
<Stack horizontal horizontalAlign="space-between" className="main">
<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>
<Stack.Item className="padItem basic">
<p>Log directory</p>
<div className="nowrap">
<TooltipHost
// Tooltip message content
content={EXPERIMENT.profile.logDir || 'unknown'}
calloutProps={{ gapSpace: 0 }}
styles={{ root: { display: 'inline-block' } }}
>
{/* show logDir */}
{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>
</Stack>
);
\ No newline at end of file
src/webui/src/components/overview/Details.tsx
View file @ 4668fc08
import * as React from 'react';
import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
import { DetailsRow, IDetailsRowBaseProps } from '@fluentui/react';
import OpenRow from '../public-child/OpenRow';
interface DetailsProps {
......
src/webui/src/components/overview/NumInput.tsx
View file @ 4668fc08
import * as React from 'react';
import { Stack, PrimaryButton } from 'office-ui-fabric-react';
import { Stack, PrimaryButton } from '@fluentui/react';
interface ConcurrencyInputProps {
value: number;
......
src/webui/src/components/overview/Progress.tsx
View file @ 4668fc08
......@@ -2,16 +2,16 @@ import * as React from 'react';
import {
Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
getId, getTheme, StackItem, TooltipHost
} from 'office-ui-fabric-react';
} from '@fluentui/react';
import axios from 'axios';
import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { convertTime } from '../../static/function';
import ConcurrencyInput from './NumInput';
import ProgressBar from './ProgressItem';
import LogDrawer from '../Modals/LogPanel';
import MessageInfo from '../Modals/MessageInfo';
import { infoIcon } from "../Buttons/Icon";
import LogDrawer from '../modals/LogPanel';
import MessageInfo from '../modals/MessageInfo';
import { infoIcon } from "../buttons/Icon";
import '../../static/style/progress.scss';
import '../../static/style/probar.scss';
interface ProgressProps {
......
src/webui/src/components/overview/ProgressItem.tsx
View file @ 4668fc08
import * as React from 'react';
import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
import { Stack, StackItem, ProgressIndicator } from '@fluentui/react';
interface ProItemProps {
who: string;
......
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