[webui] refactor overview page

src/webui/src/App.scss

@@ -26,9 +26,9 @@
 }
 
 .content {
-    width: 89%;
-    min-width: 1024px;
+    width: 87%;
     margin: 0 auto;
+    min-width: 1200px;
     margin-top: 74px;
     margin-bottom: 30px;
 }

src/webui/src/App.tsx

@@ -30,12 +30,13 @@ export const AppContext = React.createContext({
     // 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) => {}
+    changeEntries: (val: string) => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    updateOverviewPage: () => {}
 });
 
 class App extends React.Component<{}, AppState> {
     private timerId!: number | undefined;
-    private dataFormatimer!: number;
     private firstLoad: boolean = false; // when click refresh selector options
     constructor(props: {}) {
         super(props);
@@ -60,35 +61,8 @@ class App extends React.Component<{}, AppState> {
             metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'
         }));
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 100);
-        // final result is legal
-        // get a succeed trial，see final result data's format
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.dataFormatimer = window.setInterval(this.getFinalDataFormat, this.state.interval * 1000);
     }
 
-    getFinalDataFormat = (): void => {
-        for (let i = 0; this.state.isillegalFinal === false; i++) {
-            if (TRIALS.succeededTrials()[0] !== undefined && TRIALS.succeededTrials()[0].final !== undefined) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                const oneSucceedTrial = JSON.parse(JSON.parse(TRIALS.succeededTrials()[0].final!.data));
-                if (typeof oneSucceedTrial === 'number' || oneSucceedTrial.hasOwnProperty('default')) {
-                    window.clearInterval(this.dataFormatimer);
-                    break;
-                } else {
-                    // illegal final data
-                    this.setState(() => ({
-                        isillegalFinal: true,
-                        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);
-                }
-            } else {
-                break;
-            }
-        }
-    };
-
     changeInterval = (interval: number): void => {
         window.clearTimeout(this.timerId);
         if (interval === 0) {
@@ -116,6 +90,12 @@ class App extends React.Component<{}, AppState> {
         this.setState({ bestTrialEntries: entries });
     };
 
+    updateOverviewPage = (): void => {
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1
+        }));
+    };
+
     shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
         if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
             nextState.isUpdate = true;
@@ -179,7 +159,8 @@ class App extends React.Component<{}, AppState> {
                                 metricGraphMode,
                                 changeMetricGraphMode: this.changeMetricGraphMode,
                                 bestTrialEntries,
-                                changeEntries: this.changeEntries
+                                changeEntries: this.changeEntries,
+                                updateOverviewPage: this.updateOverviewPage
                             }}
                         >
                             {this.props.children}

src/webui/src/components/TrialsDetail.tsx

@@ -3,7 +3,8 @@ import { Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultB
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
 import { AppContext } from '../App';
-import { tableListIcon } from './buttons/Icon';
+import { Title } from './overview/Title';
+import { TitleContext } from './overview/TitleContext';
 import DefaultPoint from './trial-detail/DefaultMetricPoint';
 import Duration from './trial-detail/Duration';
 import Para from './trial-detail/Para';
@@ -28,6 +29,7 @@ interface TrialDetailState {
 
 class TrialsDetail extends React.Component<{}, TrialDetailState> {
     static contextType = AppContext;
+    context!: React.ContextType<typeof AppContext>;
     public interAccuracy = 0;
     public interAllTableList = 2;
 
@@ -142,10 +144,11 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             </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>
+                        <div className='bulletedList' style={{ marginTop: 18 }}>
+                            <Stack className='title'>
+                                <TitleContext.Provider value={{ text: 'Trial jobs', icon: 'BulletedList' }}>
+                                    <Title />
+                                </TitleContext.Provider>
                             </Stack>
                             <Stack horizontal className='allList'>
                                 <StackItem grow={50}>

src/webui/src/components/buttons/Icon.tsx

@@ -11,11 +11,14 @@ const copy = <Icon iconName='Copy' />;
 const tableListIcon = <Icon iconName='BulletedList' />;
 const downLoadIcon = { iconName: 'Download' };
 const infoIconAbout = { iconName: 'info' };
-const timeIcon = { iconName: 'Refresh' };
+const timeIcon = { iconName: 'ReminderTime' };
 const disableUpdates = { iconName: 'DisableUpdates' };
 const requency = { iconName: 'Timer' };
 const closeTimer = { iconName: 'Blocked2' };
 const LineChart = <Icon iconName='LineChart' />;
+const Edit = <Icon iconName='Edit' />;
+const CheckMark = <Icon iconName='CheckMark' />;
+const Cancel = <Icon iconName='Cancel' />;
 
 export {
     infoIcon,
@@ -31,5 +34,8 @@ export {
     disableUpdates,
     requency,
     closeTimer,
-    LineChart
+    LineChart,
+    Edit,
+    CheckMark,
+    Cancel
 };

src/webui/src/components/overview/Accuracy.tsx

@@ -22,7 +22,7 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
     render(): React.ReactNode {
         const { accNodata, accuracyData, height } = this.props;
         return (
-            <div>
+            <div style={{ position: 'relative' }}>
                 <ReactEcharts
                     option={accuracyData}
                     style={{