add tooltip when there is no data in overview table (#2318)

src/webui/src/components/overview/SuccessTable.tsx

@@ -4,6 +4,7 @@ import DefaultMetric from '../public-child/DefaultMetric';
 import Details from './Details';
 import { convertDuration } from '../../static/function';
 import { TRIALS } from '../../static/datamodel';
+import { DETAILTABS } from '../stateless-component/NNItabs';
 import '../../static/style/succTable.scss';
 import '../../static/style/openRow.scss';
 
@@ -55,6 +56,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
     }
 
+    tooltipStr = (
+        <div>
+            <p>The experiment is running, please wait for the final metric patiently.</p>
+            <div className="link">You could also find status of trial job with <span>{DETAILTABS}</span> button.</div>
+        </div>
+    );
+
     columns = [
         {
             name: 'Trial No.',
@@ -125,17 +133,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
 
     render(): React.ReactNode {
         const { columns, source } = this.state;
+        const isNoneData = (source.length === 0) ? true : false;
+
         return (
             <div id="succTable">
-                {/* TODO: [style] lineHeight question */}
                 <DetailsList
                     columns={columns}
                     items={source}
                     setKey="set"
                     compact={true}
                     onRenderRow={this.onRenderRow}
                     selectionMode={0} // close selector function
+                    className="succTable"
                 />
+                {isNoneData && <div className="succTable-tooltip">{this.tooltipStr}</div>}
             </div>
         );
     }

src/webui/src/static/style/succTable.scss

@@ -1,4 +1,17 @@
 #succTable{
     height: 404px;
     overflow-y: scroll;
+    position: relative;
+    .succTable-tooltip{
+        position: absolute;
+        top: 40%;
+        left: 17%;
+        .link{
+            margin-left: 15px;
+            a{
+                font-weight: 500;
+                color: blue;
+            }
+        }
+    }
 }