Use office-fabric-ui components (#1964)

src/webui/src/index.css

+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
 /* http://meyerweb.com/eric/tools/css/reset/
    v4.0 | 20180602
    License: none (public domain)
@@ -31,9 +49,6 @@ footer, header, hgroup, main, menu, nav, section {
 *[hidden] {
     display: none;
 }
-body {
-	line-height: 1;
-}
 ol, ul {
 	list-style: none;
 }

src/webui/src/index.tsx

-import 'babel-polyfill';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import App from './App';
 import { Router, Route, browserHistory, IndexRedirect } from 'react-router';
-import registerServiceWorker from './registerServiceWorker';
 import Overview from './components/Overview';
 import TrialsDetail from './components/TrialsDetail';
 import './index.css';
+import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-    (
-        <Router history={browserHistory}>
-            <Route path="/" component={App}>
-                <IndexRedirect to="/oview" />
-                <Route path="/oview" component={Overview} />
-                <Route path="/detail" component={TrialsDetail} />
-            </Route>
-        </Router>
-    ),
-    document.getElementById('root') as HTMLElement
+  (
+    <Router history={browserHistory}>
+      <Route path="/" component={App}>
+        <IndexRedirect to="/oview" />
+        <Route path="/oview" component={Overview} />
+        <Route path="/detail" component={TrialsDetail} />
+        {/* test branch */}
+      </Route>
+    </Router>
+
+  ),
+  document.getElementById('root')
 );
-registerServiceWorker();
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

src/webui/src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

src/webui/src/react-app-env.d.ts

+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

src/webui/src/registerServiceWorker.ts → src/webui/src/serviceWorker.ts

-// In production, we register a service worker to serve assets from local cache.
+// This optional code is used to register a service worker.
+// register() is not called by default.
 
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the 'N+1' visit to a page, since previously
-// cached resources are updated in the background.
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
 
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
-  // [::1] is the IPv6 localhost address.
-  window.location.hostname === '[::1]' ||
-  // 127.0.0.1/8 is considered localhost for IPv4.
-  window.location.hostname.match(
-    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-  )
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
 );
 
-function registerValidSW(swUrl: string): void {
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+function registerValidSW(swUrl: string, config?: Config): void {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
       registration.onupdatefound = (): void => {
         const installingWorker = registration.installing;
-        if (installingWorker) {
-          installingWorker.onstatechange = (): void => {
-            if (installingWorker.state === 'installed') {
-              if (navigator.serviceWorker.controller) {
-                // At this point, the old content will have been purged and
-                // the fresh content will have been added to the cache.
-                // It's the perfect time to display a 'New content is
-                // available; please refresh.' message in your web app.
-                console.log('New content is available; please refresh.');
-              } else {
-                // At this point, everything has been precached.
-                // It's the perfect time to display a
-                // 'Content is cached for offline use.' message.
-                console.log('Content is cached for offline use.');
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = (): void => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log( // eslint-disable-line no-console
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.'); // eslint-disable-line no-console
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
               }
             }
-          };
-        }
+          }
+        };
       };
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
+      console.error('Error during service worker registration:', error); // eslint-disable-line no-console
     });
 }
 
-function checkValidServiceWorker(swUrl: string): void {
+function checkValidServiceWorker(swUrl: string, config?: Config): void {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
       if (
         response.status === 404 ||
-        response.headers.get('content-type')!.indexOf('javascript') === -1// eslint-disable-line @typescript-eslint/no-non-null-assertion
+        (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
@@ -66,39 +87,48 @@ function checkValidServiceWorker(swUrl: string): void {
         });
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
+        registerValidSW(swUrl, config);
       }
     })
     .catch(() => {
-      console.log(
+      console.log( // eslint-disable-line no-console
         'No internet connection found. App is running in offline mode.'
       );
     });
 }
 
-export default function register(): void {
+export function register(config?: Config): void {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(
-      process.env.PUBLIC_URL!, // eslint-disable-line @typescript-eslint/no-non-null-assertion
-      window.location.toString()
+      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
+      window.location.href
     );
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
       return;
     }
 
     window.addEventListener('load', () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
-      if (!isLocalhost) {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl);
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log( // eslint-disable-line no-console
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
       } else {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
       }
     });
   }

src/webui/src/static/const.ts

@@ -4,6 +4,7 @@ const METRIC_GROUP_UPDATE_SIZE = 20;
 
 const MANAGER_IP = `/api/v1/nni`;
 const DOWNLOAD_IP = `/logs`;
+const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
 const trialJobStatus = [
     'UNKNOWN',
     'WAITING',
@@ -28,51 +29,14 @@ const DRAWEROPTION = {
     readOnly: true,
     automaticLayout: true
 };
-const COLUMN_INDEX = [
-    {
-        name: 'Trial No.',
-        index: 1
-    },
-    {
-        name: 'ID',
-        index: 2
-    },
-    {
-        name: 'Start Time',
-        index: 3
-    },
-    {
-        name: 'End Time',
-        index: 4
-    },
-    {
-        name: 'Duration',
-        index: 5
-    },
-    {
-        name: 'Status',
-        index: 6
-    },
-    {
-        name: 'Intermediate result',
-        index: 7
-    },
-    {
-        name: 'Default',
-        index: 8
-    },
-    {
-        name: 'Operation',
-        index: 10000
-    }
-];
+const OPERATION = 'Operation';
 // defatult selected column
-const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', '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'];
+'Intermediate result', 'Default', OPERATION];
 export {
-    MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
-    CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION,
+    MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro, WEBUIDOC,
+    CONTROLTYPE, MONACO, COLUMN, DRAWEROPTION, OPERATION,
     METRIC_GROUP_UPDATE_THRESHOLD, METRIC_GROUP_UPDATE_SIZE,
 };

src/webui/src/static/function.ts

 import * as JSON5 from 'json5';
 import axios from 'axios';
-import { message } from 'antd';
 import { MANAGER_IP } from './const';
 import { MetricDataRecord, FinalType, TableObj } from './interface';
 
@@ -25,7 +24,7 @@ const convertDuration = (num: number): string => {
     const hour = Math.floor(num / 3600);
     const minute = Math.floor(num / 60 % 60);
     const second = Math.floor(num % 60);
-    const result = [ ];
+    const result: string[] = [];
     if (hour > 0) {
         result.push(`${hour}h`);
     }
@@ -59,7 +58,7 @@ const getFinalResult = (final?: MetricDataRecord[]): number => {
 };
 
 // get final result value // acc obj
-const getFinal = (final?: MetricDataRecord[]): any => {
+const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
     let showDefault: FinalType;
     if (final) {
         showDefault = JSON.parse(final[final.length - 1].data);
@@ -118,33 +117,35 @@ const killJob = (key: number, id: string, status: string, updateList?: Function)
     })
         .then(res => {
             if (res.status === 200) {
-                message.destroy();
-                message.success('Cancel the job successfully');
+                // TODO: use Message.txt to tooltip
+                alert('Cancel the job successfully');
                 // render the table
                 if (updateList) {
                     updateList();  // FIXME
                 }
             } else {
-                message.error('fail to cancel the job');
+                alert('fail to cancel the job');
             }
         })
         .catch(error => {
             if (error.response.status === 500) {
                 if (error.response.data.error) {
-                    message.error(error.response.data.error);
+                    alert(123);
+                    // message.error(error.response.data.error);
                 } else {
-                    message.error('500 error, fail to cancel the job');
+                    alert(234);
+                    // message.error('500 error, fail to cancel the job');
                 }
             }
         });
 };
 
-const filterByStatus = (item: TableObj): any => {
+const filterByStatus = (item: TableObj): boolean => {
     return item.status === 'SUCCEEDED';
 };
 
 // a waittiong trial may havn't start time 
-const filterDuration = (item: TableObj): any => {
+const filterDuration = (item: TableObj): boolean => {
     return item.status !== 'WAITING';
 };
 
@@ -170,7 +171,11 @@ const downFile = (content: string, fileName: string): void => {
     }
 };
 
-function formatTimestamp(timestamp?: number, placeholder?: string = 'N/A'): string {
+// function formatTimestamp(timestamp?: number, placeholder?: string = 'N/A'): string {
+function formatTimestamp(timestamp?: number, placeholder?: string): string {
+    if (placeholder === undefined) {
+        placeholder = 'N/A';
+    }
     return timestamp ? new Date(timestamp).toLocaleString('en-US') : placeholder;
 }
 

src/webui/src/static/interface.ts

-// draw accuracy graph data interface
+// draw accuracy graph data export interface
 interface TableObj {
     key: number;
     sequenceId: number;
@@ -184,8 +184,8 @@ interface EventMap {
 }
 
 export {
-    TableObj, TableRecord, Parameters, ExperimentProfile, AccurPoint,
-    DetailAccurPoint, TooltipForAccuracy, ParaObj, Dimobj, FinalType,
-    TooltipForIntermediate, SearchSpace, Intermedia, MetricDataRecord, TrialJobInfo,
-    NNIManagerStatus, EventMap
-};
+    TableObj, TableRecord, SearchSpace, FinalType, ErrorParameter, Parameters,
+    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

@@ -79,6 +79,7 @@ class Experiment {
     }
 
     get error(): string {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         if (!this.statusField) {
             throw Error('Experiment status not initialized');
         }

src/webui/src/static/style/accuracy.css

-.showMess{
-    position: absolute;
-    left: 49%;
-    top: 48%;
-    font-size: 13px;
-    color: #999;
-}

src/webui/src/static/style/compare.scss

-.compare{
-    width: 92%;
-    table-layout: fixed;
-    margin: 0 auto;
-    color: #333;
-    tr{
-        line-height: 30px;
+.compare-modal{
+    /* decide modal size */
+    .ms-Dialog-main{
+        max-width: 70%;
     }
-    tr:nth-of-type(even){
-        background-color: gainsboro;
-    }
-    .column{
-        max-width: 124px;
-        padding-left: 18px;
-        font-weight: 600;
-    }
-    .value{
-        max-width: 152px;
-        padding-right: 18px;
-        text-align: left;
-    }
-    .idList{
-        font-weight: 600;
-    }
-}
 
-.compare-intermediate{
-    position: relative;
-    .compare-yAxis{
+    /* compare-md: table style */
+    &-table{
+        width: 92%;
+        table-layout: fixed;
+        margin: 0 auto;
         color: #333;
-        position: absolute;
-        top: 87%;
-        left: 45%;
+        tr{
+            line-height: 30px;
+        }
+        tr:nth-of-type(even){
+            background-color: gainsboro;
+        }
+        .column{
+            max-width: 124px;
+            padding-left: 18px;
+            font-weight: 600;
+        }
+        .value{
+            max-width: 152px;
+            padding-right: 18px;
+            text-align: left;
+        }
+        .idList{
+            font-weight: 600;
+        }
+    }
+    /* compare-md: intermediate graph style */
+    &-intermediate{
+        position: relative;
+        .compare-yAxis{
+            color: #333;
+            position: absolute;
+            top: 87%;
+            left: 45%;
+        }
     }
-}
+}
\ No newline at end of file

src/webui/src/static/style/control.scss

-.user{
-    background: #ECF0F5;
-    overflow: hidden;
-}
-.userCon{
-    width: 100%;
-    padding-left: 30px;
-    box-sizing: border-box;
-}
-/* add job */
-.addtrial{
-    width: 100%;
-}
-div.addtitle{
-    height: 64px;
-    text-align: center;
-    line-height: 64px;
-    margin-top: 16px;
-    color: #333;
-    font-size: 20px;
-}
-/* textarea margin 0 auto */
-.userInput{
-    width: 80%;
-    margin: 0 auto;
-    color: #333;
-}
-#userInputJob, #InputUpdate{
-    color: #333;
-}
-/* two btn style */
-.addBtubox{
-    width: 80%;
-    height: 30px;
-    margin: 0 auto;
-    margin-top: 10px;
-}
-.addBtubox Button{
-    float: right;
-    height: 30px;
-    color: #fff;
-    background-color: #3c8dbc;
-    border-color: #3c8dbc;
-}
-.addBtubox Button:hover, .addBtubox Button:focus{
-    background-color: #3c8dbc;
-    border-color: #3c8dbc;
-}
-/* add job btn style end */
-.updatesear{
-    line-height: 64px;
-    text-align: center;
-    margin-top: 16px;
-    color: #333;
-    font-size: 20px;
-}
-.line{
-    font-weight: 600;
-    color: rgb(60,141,188);
-    padding-right: 20px;
-}
-/* search box style */
-.searchbox{
-    width: 100%;
-}
\ No newline at end of file

src/webui/src/static/style/icon.scss

+.iconButtons{
+    margin-top: 12px;
+    i{
+        font-size: 16px;
+        color: #fff;
+    }
+    
+}
+
+.docIcon{
+    i{
+        font-size: 28px;
+    }
+}
\ No newline at end of file

src/webui/src/static/style/logDrawer.scss

-.card-container > .ant-tabs-card > .ant-tabs-content {
-    margin-top: -16px;
-  }
-  
-  .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
-    background: #fff;
-    padding: 16px;
-  }
-  
-  .card-container > .ant-tabs-card > .ant-tabs-bar {
-    border-color: #fff;
-  }
-  
-  .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
-    border-color: transparent;
-    background: transparent;
+.download {
+  button,
+  button:active,
+  button:hover {
+    color: #fff;
+    border: none;
   }
-  
-  .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
-    border-color: #fff;
-    background: #fff;
+}
+
+.log-tab-body {
+  .refresh {
+    margin-left: 10px;
+    display: none;
   }
+}
 
-.logContainer{
-  height: 100%;
+/* office-fabric-ui */
+.ms-Panel-main {
+  width: 55%;
+  background: #fff;
 }
 
 /* log drawer download & close button's row */
-.buttons{
+.buttons {
   margin-top: 16px;
-  .close{
+  .close {
     text-align: right;
   }
 }
-/*
-.logDrawer{
-    width: 100%;
-    .ant-drawer-body{
-      box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-    }
-}
-*/
-.ant-drawer-body{
-    background: #333;
-}
-.card-container > .ant-tabs-card > .ant-tabs-bar{
-    border: none;
-}
-.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane{
-    background-color: #333;
-}
-.close{
-    Button, Button:active, Button:hover{
-        background-color: #212121;
-        color: #fff;
-        border: none;
-    }
-}
-.download{
-    Button, Button:active, Button:hover{
-        background-color: #2772be;
-        color: #fff;
-        border: none;
-    }
-}
-.log-tab-body > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
-    background-color: #1e1e1e;
-    color: #fff;
-    border: none;
-}
-.log-tab-body .ant-tabs-nav .ant-tabs-tab:hover, .log-tab-body .ant-tabs-nav .ant-tabs-tab{
-    color: #fff;
-    border: none;
-}
-.ant-tabs.ant-tabs-card>.ant-tabs-bar .ant-tabs-tab{
-  border: none;
-}
-.log-tab-body{
-  .refresh{
-    margin-left: 10px;
-    display: none;
-  }
-  .ant-tabs-tab-active{
-    .refresh{
-      transition: 0.3s;
-      display: inline-block;
-    }
-    .refresh:hover{
-      transform: scale(1.2);
-    }
-  }
-}
-.just-for-log{
-  .monaco-editor{
-    .line-numbers{
-      color: #fff;
-    }
-    .current-line ~ .line-numbers{
-      color: #FFFAF0;
-    }
-  }
-  .view-lines{
-    background-color: #1e1e1e;
-    .mtk1{
-      color: #fff;
-    }
-    
-  }
-  .margin-view-overlays{
-    background-color: #1e1e1e;
-  }
-}

src/webui/src/static/style/nav/nav.scss

+$barHeight: 56px;
+
+.navOptions{
+    .ms-Button-icon{
+        color: #fff;
+        &:hover{
+            color: #fff;
+        }
+    }
+    .ms-Button--commandBar{
+        background-color: #0071bc;
+        user-select: none;
+        &:hover, &:active{
+            color: #fff;
+            .ms-Button-icon{
+                color: #fff;
+            }
+        }
+        .ms-Button-textContainer{
+            color: #fff;
+        }
+        .ms-Button-menuIcon{
+            color: #fff;
+            background-color: transparent;
+        }
+    }
+}
+
+.nav{
+    height: $barHeight;
+    line-height: $barHeight;
+    
+    /* desktop mode useful*/
+    .desktop-logo{
+        position: relative;
+        top: 6px;
+    }
+
+    &-refresh{
+        position: relative;
+        display: flex;
+    }
+    &-refresh-num{
+        position: absolute;
+        top: -10px;
+        left: 18px;
+        color: #fff;
+        font-size: 12px;
+    }
+}
+
+/* overview and detail tabs common style */
+a.common-tabs{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    color: #b8c7ce;
+    text-decoration: none;
+}
+.common-tabs:visited, .high-light:hover{
+    color: #fff;
+    text-decoration: none;
+}
+.common-tabs:hover, .high-light{
+    color: #fff;
+    border-bottom: 1px solid #fff;
+}
+.left-right-margin{
+    margin-left: 20px;
+    margin-right: 20px;
+}
\ No newline at end of file

src/webui/src/static/style/openRow.scss

@@ -2,58 +2,39 @@
 $color: #0071bc;
 /* bg light grey */
 $bgColor: #f2f2f2;
-.openRowContent{
-    .ant-tabs-vertical.ant-tabs-left .ant-tabs-bar .ant-tabs-tab{
-        text-align: left !important;
-    }
-}
-.openRowContent{
-    .ant-tabs-nav .ant-tabs-tab:hover{
-        color: $color;
-    }
-}
-.openRowContent{
-    margin-top: 15px;
+.openRow{
+    width: 100%;
     background-color: $bgColor;
-    .card{
-        .ant-tabs-vertical .ant-tabs-bar .ant-tabs-tab{
-            margin: 0;
-            padding: 8px 12px;
-        }
-        .ant-tabs-nav .ant-tabs-tab-active{
-            color: $color;
-            font-weight: 600;
-            background: #dedede;
-            border-left: 3px solid ;
-        }
-        .ant-tabs-tabpane{
-            background: #f2f2f2;
-            padding: 12px 12px 12px 0;
-        }
+    margin-bottom: 10px;
+
+    &Content{
+        width: 91%;
+        margin: 0 auto;
+        min-height: 150px;
+        padding-bottom: 10px;
     }
 }
+
 .trialLog{
     white-space: normal;
     color: #212121;
 }
 #trialLogContent{
-    .ant-input-disabled{
-        color: #212121;
-        background-color: #fff;
-        cursor: pointer;
-        border: none;
-    }
+
     .logcontent{
         height: 100%;
     }
 }
 
 #description{
-    .bgHyper{
-        background-color: #fff;
-        margin-bottom: 12px;
+    padding: 0 10px;
+    .bgHyper ul{
+        background-color: #fff !important;
+        padding: 3px 0 5px 0 !important;
+        font-size: 14px;
     }
     .copy{
+        margin-top: 3px;
         Button{
             background-color: #ccc;
             color: #191919;

src/webui/src/static/style/overview.scss

 
 /* new style */
 .overMessage{
-    height: 430px;
+    height: 446px;
 }
-.overGraph{
-    height: 362px;
 
-    .accuracy{
-        width: 100%;
-        height: 324px;
-    }
-}
 .blockPadding{
     padding: 10px 20px;
 }
@@ -23,7 +16,7 @@
 }
 
 .padItem{
-    padding-left: 20px;
+    padding: 10px 20px 0 20px;
 }
 
 .searchSpace{
@@ -31,6 +24,8 @@
     font-size: 14px;
     padding: 15px 0;
     color: #212121;
+    width: 95%;
+    margin: 0 auto;
 }
 
 .nowrap{
@@ -52,3 +47,13 @@
 .link{
     margin-bottom: 10px;
 }
+
+.info{
+    position: relative;
+    top: 15px;
+    left: 10px;
+    span{
+        color: #333;
+        font-size: 14px;
+    }
+}
\ No newline at end of file

src/webui/src/static/style/overviewTitle.scss

 $titleBgcolor: #b3b3b3;
+$iconPaddingVal: 14px;
+
 .overview .overviewBoder{
     height: 100%;
     border-right: 2px solid white;
@@ -8,12 +10,15 @@ $titleBgcolor: #b3b3b3;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     width: 100%;
     height: 38px;
+    padding: 0 $iconPaddingVal;
     background: $titleBgcolor;
 
     img{
         height: 22px;
-        margin-top: -8px;
-        padding-left: 14px;
+        /* (38 - 22 ) / 2 */
+        margin-top: 8px;
+        /* icon right */
+        padding: 0 $iconPaddingVal 0 0;
     }
 
     span{
@@ -21,15 +26,11 @@ $titleBgcolor: #b3b3b3;
         font-weight: 600;
         color: #333;
         line-height: 38px;
-        margin-left: 14px;
     }
 
     i{
         font-size: 24px;
-        margin-left: 14px;
         color: #545454;
-        position: relative;
-        top: 2px;
     }
 }
 
@@ -46,11 +47,11 @@ $titleBgcolor: #b3b3b3;
     }
 
     .title{
-        width: 135px;
         border-left: 2px solid #fff;
     }
 
     .minTitle{
+        margin-right: $iconPaddingVal;
         border-right: 2px solid #fff;
     }
 

src/webui/src/static/style/para.scss

-
 .parameter{
     height: 100%;
 }
 
+.para-filter{
+    width: 97%;
+    margin-top: 15px;
+
+    &-text{
+        line-height: 32px;
+        margin-right: 10px;
+    }
+
+    &-percent{
+        margin-right: 10px;
+    }
+}
+
 .meline{
     margin-top: 15px;
 
@@ -27,16 +40,14 @@
 
 /* Intermediate Result Style */
 .intermediate{
-    width: 90%;
-    text-align: right;
+    width: 95%;
    /* border: 1px solid blue; */
     input{
         width: 64px;
-        height: 32px;
+        height: 26px;
         padding-left: 8px;
     }
     .strange{
-        margin-top: 2px;
         margin-right: 15px;
     }
     .hyphen{
@@ -46,4 +57,7 @@
     .filter-x{
         margin-left: 15px;
     }
+    .filter-toggle{
+        line-height: 32px;
+    }
 }

src/webui/src/static/style/probar.scss

@@ -4,37 +4,22 @@
     .RUNNING, .STOPPING, .INITIALIZED, .NO_MORE_TRIAL, .TUNER_NO_MORE_TRIAL{
         /* specific status color */
         color: #0071bc;
-        .ant-progress-bg {
+        /* progress- duration & trial numbers span */
+        .ms-ProgressIndicator-progressBar {
             background-color: #0071bc;
         }
-        .ant-progress-text{
-            color: #0071bc;
-        }
     }
     .DONE, .STOPPED{
         color: #009245;
-        .ant-progress-bg {
+        .ms-ProgressIndicator-progressBar {
             background-color: #009245;
         }
-        .ant-progress-text{
-            color: #009245;
-        }
     }
     .ERROR{
         color: #eb0716;
-        .ant-progress-bg {
+        .ms-ProgressIndicator-progressBar {
             background-color: #eb0716;
         }
-        .ant-progress-text{
-            color: #eb0716;
-        }
-
-    }
-    .ant-progress-bg{
-        border-radius: 0 !important;
-    }
-    .ant-progress-status-success .ant-progress-bg{
-        border-radius: 0 12px 12px 0 !important;
     }
 }