Hybrid show trial platforms in webui

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

@@ -55,6 +55,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') {
@@ -184,6 +186,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 `_`
             };
@@ -279,6 +282,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

@@ -1,27 +1,28 @@
 .ellipsis {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .link {
-	outline: none;
-	color: #333 !important;
-	text-decoration: none;
-
-	&:hover {
-		color: #0071bc !important;
-		text-decoration: underline;
-	}
-	&:active,
-	&:visited {
-		color: #0071bc;
-	}
+    outline: none;
+    color: #333 !important;
+    text-decoration: none;
+
+    &:hover {
+        color: #0071bc !important;
+        text-decoration: underline;
+    }
+
+    &:active,
+    &:visited {
+        color: #0071bc;
+    }
 }
 
 .cursor {
-	&:hover,
-	& i:hover {
-		cursor: pointer;
-	}
+    &:hover,
+    & i:hover {
+        cursor: pointer;
+    }
 }

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

@@ -1,84 +1,87 @@
 $pageMargin: 24px;
 
 .expBackground {
-	background: #f2f2f2;
-	height: 100%;
-
-	.content {
-		/* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
-		margin-top: 32px;
-		margin-bottom: $pageMargin;
-		background: #fff;
-	}
+    background: #f2f2f2;
+    height: 100%;
+
+    .content {
+        /* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
+        margin-top: 32px;
+        margin-bottom: $pageMargin;
+        background: #fff;
+    }
 }
 
 .experimentList {
-	padding: $pageMargin 42px;
-
-	.ms-DetailsRow {
-		&:hover, &:focus {
-			background: #F3F2F1 !important;
-		}
-	}
-
-	.box {
-		margin-top: 20px;
-
-		.search {
-			width: 90%;
-
-			&-input {
-				width: 330px;
-			}
-		}
-
-		.filter {
-			width: 10%;
-			text-align: right;
-
-			&-button-open {
-				background: #f3f2f1;
-			}
-		}
-	}
-
-	.filter-condition {
-		margin-top: 26px;
-		.reset {
-			width: 80px;
-			position: relative;
-			top: 29px;
-		}
-
-		&-status {
-			width: 194px;
-		}
-		&-platform {
-			width: 150px;
-		}
-	}
-
-	.hidden {
-		display: none;
-	}
-
-	.margin {
-		margin-left: 10px;
-	}
-
-	.idColor {
-		color: #615f5d !important;
-	}
-
-	.toAnotherExp {
-		color: #0071bc !important;
-	}
-
-	.ms-DetailsRow:focus {
-		background: #e1dfdd;
-	}
+    padding: $pageMargin 42px;
+
+    .ms-DetailsRow {
+        &:hover,
+        &:focus {
+            background: #f3f2f1 !important;
+        }
+    }
+
+    .box {
+        margin-top: 20px;
+
+        .search {
+            width: 90%;
+
+            &-input {
+                width: 330px;
+            }
+        }
+
+        .filter {
+            width: 10%;
+            text-align: right;
+
+            &-button-open {
+                background: #f3f2f1;
+            }
+        }
+    }
+
+    .filter-condition {
+        margin-top: 26px;
+
+        .reset {
+            width: 80px;
+            position: relative;
+            top: 29px;
+        }
+
+        &-status {
+            width: 194px;
+        }
+
+        &-platform {
+            width: 150px;
+        }
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .margin {
+        margin-left: 10px;
+    }
+
+    .idColor {
+        color: #615f5d !important;
+    }
+
+    .toAnotherExp {
+        color: #0071bc !important;
+    }
+
+    .ms-DetailsRow:focus {
+        background: #e1dfdd;
+    }
 }
 
 .gray-port {
-	color: #bebebe;
+    color: #bebebe;
 }