Use office-fabric-ui components (#1964)

src/webui/src/components/overview/BasicInfo.tsx

-import { Col, Row, Tooltip } from 'antd';
 import * as React from 'react';
+import { Stack, TooltipHost, getId } from 'office-ui-fabric-react';
 import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
@@ -8,36 +8,48 @@ interface BasicInfoProps {
 }
 
 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 (
-            <Row className="main">
-                <Col span={8} className="padItem basic">
+            <Stack horizontal horizontalAlign="space-between" className="main">
+                <Stack.Item grow={3} className="padItem basic">
                     <p>Name</p>
                     <div>{EXPERIMENT.profile.params.experimentName}</div>
                     <p>ID</p>
                     <div>{EXPERIMENT.profile.id}</div>
-                </Col>
-                <Col span={8} className="padItem basic">
+                </Stack.Item>
+                <Stack.Item grow={3} className="padItem basic">
                     <p>Start time</p>
                     <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
                     <p>End time</p>
                     <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
-                </Col>
-                <Col span={8} className="padItem basic">
+                </Stack.Item>
+                <Stack.Item  className="padItem basic">
                     <p>Log directory</p>
                     <div className="nowrap">
-                        <Tooltip placement="top" title={EXPERIMENT.profile.logDir || ''}>
+                        <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'}
-                        </Tooltip>
+                        </TooltipHost>
                     </div>
                     <p>Training platform</p>
                     <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
-                </Col>
-            </Row>
+                </Stack.Item>
+
+            </Stack>
         );
     }
 }

src/webui/src/components/overview/Details.tsx

+import * as React from 'react';
+import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
+import OpenRow from '../public-child/OpenRow';
+
+interface DetailsProps {
+    detailsProps: IDetailsRowBaseProps;
+}
+
+interface DetailsState {
+    isExpand: boolean;
+}
+
+class Details extends React.Component<DetailsProps, DetailsState> {
+
+    constructor(props: DetailsProps) {
+        super(props);
+        this.state = { isExpand: false };
+    }
+
+    render(): React.ReactNode {
+        const { detailsProps } = this.props;
+        const { isExpand } = this.state;
+        return (
+            <div>
+                <div onClick={(): void => {
+                    this.setState(() => ({ isExpand: !isExpand }));
+                }}>
+                    <DetailsRow {...detailsProps} />
+                </div>
+                {isExpand && <OpenRow trialId={detailsProps.item.id} />}
+            </div>
+        );
+    }
+}
+
+export default Details;
\ No newline at end of file

src/webui/src/components/overview/NumInput.tsx

 import * as React from 'react';
-import { Button, Row } from 'antd';
+import { Stack, PrimaryButton } from 'office-ui-fabric-react';
 
 interface ConcurrencyInputProps {
     value: number;
@@ -36,47 +36,38 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
     render(): React.ReactNode {
         if (this.state.editting) {
             return (
-                <Row className="inputBox">
+                <Stack horizontal className="inputBox">
                     <input
                         type="number"
                         className="concurrencyInput"
                         defaultValue={this.props.value.toString()}
                         ref={this.input}
                     />
-                    <Button
-                        type="primary"
-                        className="tableButton editStyle"
+                    <PrimaryButton
+                        text="Save"
                         onClick={this.save}
-                    >
-                        Save
-                    </Button>
-                    <Button
-                        type="primary"
-                        onClick={this.cancel}
+                    />
+                    <PrimaryButton
+                        text="Cancel"
                         style={{ display: 'inline-block', marginLeft: 1 }}
-                        className="tableButton editStyle"
-                    >
-                        Cancel
-                    </Button>
-                </Row>
+                        onClick={this.cancel}
+                    />
+                </Stack>
             );
         } else {
             return (
-                <Row className="inputBox">
+                <Stack horizontal className="inputBox">
                     <input
                         type="number"
                         className="concurrencyInput"
                         disabled={true}
                         value={this.props.value}
                     />
-                    <Button
-                        type="primary"
-                        className="tableButton editStyle"
+                    <PrimaryButton
+                        text="Edit"
                         onClick={this.edit}
-                    >
-                        Edit
-                    </Button>
-                </Row>
+                    />
+                </Stack>
             );
         }
     }

src/webui/src/components/overview/ProgressItem.tsx

 import * as React from 'react';
-import { Row, Col, Progress } from 'antd';
+import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
 
 interface ProItemProps {
     who: string;
@@ -18,29 +18,23 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
 
     render(): React.ReactNode {
         const { who, percent, description, maxString, bgclass } = this.props;
-
         return (
             <div>
-                <Row className={`probar ${bgclass}`}>
-                        <Col span={8}>
+                <Stack horizontal className={`probar ${bgclass}`}>
                     <div className="name">{who}</div>
-                        </Col>
-                        <Col span={16} className="bar">
-                            <div className="showProgress">
-                                <Progress
-                                    percent={percent}
-                                    strokeWidth={30}
-                                    // strokeLinecap={'square'}
-                                    format={(): string => description}
+                    <div className="showProgress" style={{ width: '80%' }}>
+                        <ProgressIndicator
+                            barHeight={30}
+                            percentComplete={percent}
                         />
+                        <Stack horizontal className="boundary">
+                            <StackItem grow={30}>0</StackItem>
+                            <StackItem className="right" grow={70}>{maxString}</StackItem>
+                        </Stack>
                     </div>
-                            <Row className="description">
-                                <Col span={9}>0</Col>
-                                <Col className="right" span={15}>{maxString}</Col>
-                            </Row>
-                        </Col>
-                    </Row>
-                    <br/>
+                    <div className="description" style={{ width: '20%' }}>{description}</div>
+                </Stack>
+                <br />
             </div>
         );
     }

src/webui/src/components/overview/SearchSpace.tsx

@@ -18,7 +18,6 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
         return (
             <div className="searchSpace">
                 <MonacoEditor
-                    width="100%"
                     height="361"
                     language="json"
                     theme="vs-light"

src/webui/src/components/overview/Title1.tsx

 import * as React from 'react';
-
+import {Stack} from 'office-ui-fabric-react';
+import '../../static/style/overviewTitle.scss';
 interface Title1Props {
     text: string;
     icon?: string;
@@ -15,12 +16,10 @@ class Title1 extends React.Component<Title1Props, {}> {
     render(): React.ReactNode {
         const { text, icon, bgcolor } = this.props;
         return (
-            <div>
-                <div className="panelTitle" style={{backgroundColor: bgcolor}}>
+            <Stack horizontal className="panelTitle" style={{ backgroundColor: bgcolor }}>
                 <img src={require(`../../static/img/icon/${icon}`)} alt="icon" />
                 <span>{text}</span>
-                </div>
-            </div>
+            </Stack>
         );
     }
 }

src/webui/src/components/overview/TrialProfile.tsx

@@ -27,7 +27,6 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
         };
         const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
 
-        // FIXME: highlight not working?
         return (
             <div className="profile">
                 <MonacoEditor

src/webui/src/components/public-child/LogPath.tsx

-import * as React from 'react';
-import LogPathChild from './LogPathChild';
-
-interface LogpathProps {
-    logStr: string;
-}
-
-class LogPath extends React.Component<LogpathProps, {}> {
-
-    constructor(props: LogpathProps) {
-        super(props);
-
-    }
-
-    render(): React.ReactNode {
-        const { logStr } = this.props;
-        const isTwopath = logStr.indexOf(',') !== -1
-            ?
-            true
-            :
-            false;
-        return (
-            <div>
-                {
-                    isTwopath
-                        ?
-                        <div>
-                            <LogPathChild
-                                eachLogpath={logStr.split(',')[0]}
-                                logName="LogPath:"
-                            />
-                            <LogPathChild
-                                eachLogpath={logStr.split(',')[1]}
-                                logName="Log on HDFS:"
-                            />
-                        </div>
-                        :
-                        <LogPathChild
-                            eachLogpath={logStr}
-                            logName="Log path:"
-                        />
-                }
-            </div>
-        );
-    }
-}
-
-export default LogPath;
\ No newline at end of file

src/webui/src/components/public-child/MonacoEditor.tsx

 import * as React from 'react';
-import { Spin } from 'antd';
+import { Spinner } from 'office-ui-fabric-react';
 import { DRAWEROPTION } from '../../static/const';
 import MonacoEditor from 'react-monaco-editor';
 
@@ -11,7 +11,7 @@ interface MonacoEditorProps {
 
 class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
 
-    public _isMonacoMount: boolean;
+    public _isMonacoMount!: boolean;
 
     constructor(props: MonacoEditorProps) {
         super(props);
@@ -25,14 +25,18 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
         this._isMonacoMount = false;
     }
 
-    render(): React.ReactNode{
+    render(): React.ReactNode {
         const { content, loading, height } = this.props;
         return (
             <div className="just-for-log">
-                <Spin
-                    // tip="Loading..."
-                    style={{ width: '100%', height: height }}
-                    spinning={loading}
+                {
+                    loading
+                        ?
+                        <Spinner
+                            label="Wait, wait..."
+                            ariaLive="assertive"
+                            labelPosition="right"
+                            styles={{ root: { width: '100%', height: height } }}
                         >
                             <MonacoEditor
                                 width="100%"
@@ -41,7 +45,17 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
                                 value={content}
                                 options={DRAWEROPTION}
                             />
-                </Spin>
+                        </Spinner>
+                        :
+                        <MonacoEditor
+                            width="100%"
+                            height={height}
+                            language="json"
+                            value={content}
+                            options={DRAWEROPTION}
+                        />
+                }
+
             </div>
         );
     }

src/webui/src/components/public-child/PaiTrialChild.tsx

 import * as React from 'react';
-import { Row } from 'antd';
 import { DOWNLOAD_IP } from '../../static/const';
 
 interface PaiTrialChildProps {
@@ -24,7 +23,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
                         ?
                         <div />
                         :
-                        <Row>
+                        <div>
                             {
                                 logCollect
                                     ?
@@ -39,7 +38,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
                                     :
                                     <span>trial stdout: {logString}</span>
                             }
-                        </Row>
+                        </div>
                 }
             </div>
         );