[v1.8 bug-bash] fix webui error (#2808)

* fix bug bash error * review by self * also Trial stdout NFS name issue Co-authored-by: Lijiao <Lijiaoa@outlook.com>
microsoft · Aug 24, 2020 · 08edcfb · 08edcfb
1 parent 7be6053
commit 08edcfb
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 22 deletions.
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
@@ -85,8 +85,10 @@ class Compare extends React.Component<CompareProps, {}> {
                 containLabel: true
             },
             legend: {
-                // more than 10 trials will hide legend
-                data: idsList.length > 10 ? null : idsList
+                type: 'scroll',
+                right: 40,
+                left: idsList.length > 6 ? 80 : null,
+                data: idsList
             },
             xAxis: {
                 type: 'category',
@@ -135,8 +137,17 @@ class Compare extends React.Component<CompareProps, {}> {
             isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object')
                 ? true : false;
         }
+        const width = this.getWebUIWidth();
+        let scrollClass;
+        if (width > 1200) {
+            scrollClass = idList.length > 3 ? 'flex' : '';
+        } else if (width < 700) {
+            scrollClass = idList.length > 1 ? 'flex' : '';
+        } else {
+            scrollClass = idList.length > 2 ? 'flex' : '';
+        }
         return (
-            <table className="compare-modal-table">
+            <table className={`compare-modal-table ${scrollClass}`}>
                 <tbody>
                     <tr>
                         <td className="column">Id</td>
@@ -200,6 +211,10 @@ class Compare extends React.Component<CompareProps, {}> {
         );
     }
 
+    getWebUIWidth = (): number => {
+        return window.innerWidth;
+    }
+
     componentDidMount(): void {
         this._isCompareMount = true;
     }

diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DOWNLOAD_IP } from '../../static/const';
+import LogPathChild from './LogPathChild';
 
 interface PaiTrialChildProps {
     logString: string;
@@ -21,7 +22,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
                 {
                     logString === ''
                         ?
-                        <div />
+                        null
                         :
                         <div>
                             {
@@ -33,10 +34,13 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
                                         href={`${DOWNLOAD_IP}/trial_${id}.log`}
                                         style={{ marginRight: 10 }}
                                     >
-                                        trial stdout
+                                        Trial stdout
                                     </a>
                                     :
-                                    <span>trial stdout: {logString}</span>
+                                    <LogPathChild
+                                        eachLogpath={logString}
+                                        logName="Trial stdout:"
+                                    />
                             }
                         </div>
                 }

diff --git a/src/webui/src/components/public-child/PaiTrialLog.tsx b/src/webui/src/components/public-child/PaiTrialLog.tsx
@@ -42,7 +42,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
                                             >
                                                 Trial stdout
                                             </a>
-                                            <a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>hdfsLog</a>
+                                            <a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>NFS log</a>
                                         </div>
                                         :
                                         <div>
@@ -52,7 +52,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
                                             />
                                             <LogPathChild
                                                 eachLogpath={logStr.split(',')[1]}
-                                                logName="Log on HDFS:"
+                                                logName="Log on NFS:"
                                             />
                                         </div>
                                 }

diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
@@ -112,14 +112,14 @@ class Trial implements TableObj {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const duration = (endTime - this.info.startTime!) / 1000;
         let accuracy;
-        if(this.acc !== undefined && this.acc.default !== undefined){
-            if(typeof this.acc.default === 'number'){
+        if (this.acc !== undefined && this.acc.default !== undefined) {
+            if (typeof this.acc.default === 'number') {
                 accuracy = JSON5.parse(this.acc.default);
-            }else {
+            } else {
                 accuracy = this.acc.default;
             }
         }
-        
+
         return {
             key: this.info.id,
             sequenceId: this.info.sequenceId,
@@ -227,7 +227,7 @@ class Trial implements TableObj {
         Object.entries(acc).forEach(item => {
             const [k, v] = item;
             const column = space.axes.get(k);
-            
+
             if (column !== undefined) {
                 ret.set(column, v);
             } else {
@@ -245,7 +245,7 @@ class Trial implements TableObj {
     }
 
     public finalKeys(): string[] {
-        if(this.acc !== undefined){
+        if (this.acc !== undefined) {
             return Object.keys(this.acc);
         } else {
             return [];
@@ -304,11 +304,16 @@ class Trial implements TableObj {
     }
 
     private renderNumber(val: any): string {
-        if(typeof val === 'number'){
+        if (typeof val === 'number') {
             if (isNaNorInfinity(val)) {
                 return `${val}`; // show 'NaN' or 'Infinity'
             } else {
-                return `${formatAccuracy(val)} (FINAL)`;
+                if (this.accuracy === undefined) {
+                    return `${formatAccuracy(val)} (LATEST)`;
+                } else {
+                    return `${formatAccuracy(val)} (FINAL)`;
+
+                }
             }
         } else {
             // show other types, such as {tensor: {data: }}
@@ -317,8 +322,8 @@ class Trial implements TableObj {
     }
 
     public formatLatestAccuracy(): string {  // TODO: this should be private
-        if(this.status === 'SUCCEEDED'){
-            return (this.accuracy === undefined ? '--': this.renderNumber(this.accuracy));
+        if (this.status === 'SUCCEEDED') {
+            return (this.accuracy === undefined ? '--' : this.renderNumber(this.accuracy));
         } else {
             if (this.accuracy !== undefined) {
                 return this.renderNumber(this.accuracy);
@@ -330,7 +335,7 @@ class Trial implements TableObj {
                 return this.renderNumber(metricAccuracy(latest));
             }
         }
-        
+
     }
 }
 

diff --git a/src/webui/src/static/style/compare.scss b/src/webui/src/static/style/compare.scss
@@ -2,16 +2,21 @@
     /* decide modal size */
     .ms-Dialog-main{
         width: 50%;
-        overflow: hidden;
+        min-width: 450px;
+    }
+    .ms-Modal-scrollableContent{
+        overflow-x: hidden;
     }
-
     /* compare-md: table style */
+    .flex{
+        display: flex;
+    }
     &-table{
         width: 92%;
         margin: 0 auto;
         margin-bottom: 20px;
         border: 1px solid transparent;
-        overflow: auto;
+        overflow: auto hidden;
         color: #333;
         tr{
             line-height: 30px;