Hybrid show trial platforms in webui (#3391)

ts/webui/src/App.scss

@@ -29,7 +29,7 @@
 
 .content {
     width: 87%;
-    min-height: calc(100vh - 56);
+    min-height: calc(100vh - 56px);
     margin: 0 auto;
     min-width: 1200px;
     max-width: 1490px;

ts/webui/src/components/trial-detail/TableList.tsx

@@ -56,6 +56,8 @@ function _inferColumnTitle(columnKey: string): string {
         return 'ID';
     } else if (columnKey === 'intermediateCount') {
         return 'Intermediate results (#)';
+    } else if (columnKey === 'message') {
+        return 'Message';
     } else if (columnKey.startsWith('space/')) {
         return columnKey.split('/', 2)[1] + ' (space)';
     } else if (columnKey === 'latestAccuracy') {
@@ -185,6 +187,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 endTime: (trial as Trial).info.endTime,
                 duration: trial.duration,
                 status: trial.status,
+                message: (trial as Trial).info.message || '--',
                 intermediateCount: trial.intermediates.length,
                 _expandDetails: this._expandedTrialIds.has(trial.id) // hidden field names should start with `_`
             };
@@ -280,6 +283,28 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         <span className={`${record.status} commonStyle`}>{record.status}</span>
                     )
                 }),
+                ...(k === 'message' && {
+                    onRender: (record): React.ReactNode =>
+                        record.message.length > 15 ? (
+                            <TooltipHost
+                                content={record.message}
+                                directionalHint={DirectionalHint.bottomCenter}
+                                tooltipProps={{
+                                    calloutProps: {
+                                        styles: {
+                                            beak: { background: TOOLTIP_BACKGROUND_COLOR },
+                                            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
+                                            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
+                                        }
+                                    }
+                                }}
+                            >
+                                <div>{record.message}</div>
+                            </TooltipHost>
+                        ) : (
+                            <div>{record.message}</div>
+                        )
+                }),
                 ...((k.startsWith('metric/') || k.startsWith('space/')) && {
                     // show tooltip
                     onRender: (record): React.ReactNode => (

ts/webui/src/static/const.ts

@@ -39,18 +39,6 @@ const DRAWEROPTION = {
 const OPERATION = 'Operation';
 // defatult selected column
 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.';
 const SUPPORTED_SEARCH_SPACE_TYPE = [
     'choice',
@@ -75,7 +63,6 @@ export {
     DOWNLOAD_IP,
     trialJobStatus,
     EXPERIMENTSTATUS,
-    COLUMNPro,
     WEBUIDOC,
     CONTROLTYPE,
     MONACO,

ts/webui/src/static/interface.ts

@@ -46,6 +46,7 @@ interface TableRecord {
     id: string;
     duration: number;
     status: string;
+    message: string;
     intermediateCount: number;
     accuracy?: number | any;
     latestAccuracy: number | undefined;
@@ -135,6 +136,7 @@ interface TrialJobInfo {
     trialJobId: string;
     sequenceId: number;
     status: string;
+    message: string;
     startTime?: number;
     endTime?: number;
     hyperParameters?: string[];

ts/webui/src/static/model/trial.ts

@@ -152,6 +152,7 @@ class Trial implements TableObj {
             endTime: this.info.endTime,
             duration,
             status: this.info.status,
+            message: this.info.message || '--',
             intermediateCount: this.intermediates.length,
             accuracy: accuracy,
             latestAccuracy: this.latestAccuracy,

ts/webui/src/static/style/common.scss

@@ -13,6 +13,7 @@
         color: #0071bc !important;
         text-decoration: underline;
     }
+
     &:active,
     &:visited {
         color: #0071bc;

ts/webui/src/static/style/experiment/experiment.scss

@@ -16,8 +16,9 @@ $pageMargin: 24px;
     padding: $pageMargin 42px;
 
     .ms-DetailsRow {
-		&:hover, &:focus {
-			background: #F3F2F1 !important;
+        &:hover,
+        &:focus {
+            background: #f3f2f1 !important;
         }
     }
 
@@ -44,6 +45,7 @@ $pageMargin: 24px;
 
     .filter-condition {
         margin-top: 26px;
+
         .reset {
             width: 80px;
             position: relative;
@@ -53,6 +55,7 @@ $pageMargin: 24px;
         &-status {
             width: 194px;
         }
+
         &-platform {
             width: 150px;
         }

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

@@ -102,6 +102,7 @@ a.common-tabs {
         position: relative;
         top: -4px;
     }
+
     i {
         color: #fff;
         font-size: 12px;

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

@@ -61,6 +61,7 @@ $margin: 24px;
         position: relative;
     }
 }
+
 .editparam {
     &-Input {
         width: 42px;

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

@@ -79,7 +79,6 @@ $boxGapPadding: 10px;
         font-weight: 500;
         color: #484848;
     }
-    
 }
 
 .overviewBestMetric {

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

@@ -26,7 +26,6 @@ $buttonBorderRadius: 23px;
     .margin {
         margin-left: 10px;
     }
-
 }
 
 .container {
@@ -50,7 +49,7 @@ $buttonBorderRadius: 23px;
         }
     }
 
-    .configBtn i{
+    .configBtn i {
         margin-left: -40px;
     }