Overview concurrency tooltip (#2333)

src/webui/src/components/overview/Progress.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
-import { Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets, getId, getTheme, StackItem } from 'office-ui-fabric-react';
+import {
+    Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
+    getId, getTheme, StackItem, TooltipHost
+} from 'office-ui-fabric-react';
 import axios from 'axios';
-import { MANAGER_IP } from '../../static/const';
+import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { convertTime } from '../../static/function';
 import ConcurrencyInput from './NumInput';
 import ProgressBar from './ProgressItem';
 import LogDrawer from '../Modals/LogDrawer';
 import MessageInfo from '../Modals/MessageInfo';
+import { infoIcon } from "../Buttons/Icon";
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {
@@ -97,7 +101,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
     hideSucceedInfo = (): void => {
         this.setState(() => ({ isShowSucceedInfo: false }));
     }
-    
+
     /**
      * info: message content
      * typeInfo: message type: success | error...
@@ -264,7 +268,9 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                     </span>
                     <span style={itemStyles}>
                         {/* modify concurrency */}
-                        <p>Concurrency</p>
+                        <TooltipHost content={CONCURRENCYTOOLTIP}>
+                        <p className="cursor">Concurrency<span className="progress-info">{infoIcon}</span></p>
+                        </TooltipHost>
                         <ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
                     </span>
                     <span style={itemStyles} className="basic colorOfbasic"></span>

src/webui/src/static/const.ts

@@ -35,8 +35,10 @@ 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.';
+
 export {
     MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro, WEBUIDOC,
     CONTROLTYPE, MONACO, COLUMN, DRAWEROPTION, OPERATION,
-    METRIC_GROUP_UPDATE_THRESHOLD, METRIC_GROUP_UPDATE_SIZE,
+    METRIC_GROUP_UPDATE_THRESHOLD, METRIC_GROUP_UPDATE_SIZE, CONCURRENCYTOOLTIP
 };

src/webui/src/static/style/progress.scss

@@ -48,6 +48,12 @@
       margin-left: 6px;
     }
   }
+
+  &-info{
+    margin-left: 4px;
+    position: relative;
+    top: 2px;
+  }
 }
 
 /* basic experiment message style */
@@ -101,3 +107,7 @@
     border: 2px solid #e6e6e6;
     border-radius: 0 12px 12px 0 !important;
 }
+
+.cursor, .cursor:hover{
+  cursor: pointer;
+}

src/webui/src/static/style/tableStatus.css

@@ -15,7 +15,7 @@
     color:	#EB0716;
 }
 .WAITING{
-    color:	#008B8B;
+    color: #FDC401;
 }
 .EARLY_STOPPED{
     color: 	#FFA500;