fix some issues about webui overview page (#3237)

ts/webui/src/components/managementExp/ExperimentManager.tsx

@@ -211,7 +211,9 @@ class Experiment extends React.Component<{}, ExpListState> {
             onColumnClick: this.onColumnClick,
             onRender: (item: any): React.ReactNode => (
                 <div className='succeed-padding'>
-                    <div>{item.port !== undefined ? item.port : '--'}</div>
+                    <div className={item.status === 'STOPPED' ? 'gray-port' : ''}>
+                        {item.port !== undefined ? item.port : '--'}
+                    </div>
                 </div>
             )
         },

ts/webui/src/components/overview/params/BasicInfo.tsx

@@ -36,7 +36,7 @@ export const BasicInfo = (): any => {
                         <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
                         {EXPERIMENT.status === 'ERROR' ? (
                             <div>
-                                <div className={styles.buttonArea} ref={ref}>
+                                <div className={`${styles.buttonArea} error-info-icon`} ref={ref}>
                                     <IconButton
                                         iconProps={{ iconName: 'info' }}
                                         onClick={isCalloutVisible ? onDismiss : showCallout}

ts/webui/src/static/model/experimentsManager.ts

@@ -31,7 +31,8 @@ class ExperimentsManager {
                     }
                     platforms.add(item.platform);
                 }
-                this.experimentList = data;
+                // this.experimentList = data.reverse();
+                this.experimentList = data.sort((a, b) => b.startTime - a.startTime);
                 this.platform = Array.from(platforms);
             })
             .catch(error => {

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

@@ -79,3 +79,7 @@ $pageMargin: 24px;
 		background: #e1dfdd;
 	}
 }
+
+.gray-port {
+	color: #E2E2E2;
+}

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

 .status {
+    height: 21px;
     color: #0573bc;
     font-size: 20px;
     font-weight: 600;
@@ -6,10 +7,17 @@
     .status-text {
         display: inline-block;
     }
+}
 
-    .color {
-        color: #333;
-    }
+/* for overview page: status error info icon's style */
+.error-info-icon {
+    position: relative;
+    top: -4px;
+}
+
+/* error body font-color */
+.color {
+    color: #333 !important;
 }
 
 .inputBox {

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

@@ -65,7 +65,8 @@ $boxGapPadding: 10px;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 
     p {
-        font-size: 14px;
+		font-size: 14px;
+		font-weight: normal;
         color: #8f8f8f;
 
         span {