Show experiment error message and refactor function component props (#5029)

ts/webui/src/static/model/trialmanager.ts

@@ -3,7 +3,7 @@ import { MetricDataRecord, TableRecord, TrialJobInfo, MultipleAxes } from '../in
 import { Trial } from './trial';
 import { SearchSpace, MetricSpace } from './searchspace';
 import { requestAxios, parseMetrics } from '../function';
-import { allTrialsIntermediateChart } from '../interface';
+import { AllTrialsIntermediateChart } from '../interface';
 
 function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
     const ret = new Map<string, MetricDataRecord[]>();
@@ -91,8 +91,8 @@ class TrialManager {
         return this.filter(trial => trial.status !== 'WAITING');
     }
 
-    public allTrialsIntermediateChart(): allTrialsIntermediateChart[] {
-        const ret: allTrialsIntermediateChart[] = [];
+    public allTrialsIntermediateChart(): AllTrialsIntermediateChart[] {
+        const ret: AllTrialsIntermediateChart[] = [];
         for (const trial of this.trials.values()) {
             const mediate: number[] = [];
             for (const items of trial.intermediates) {

ts/webui/src/static/style/nav/slideNavBtns.scss

 $buttonBorderRadius: 23px;
-
+$errorseriscolor: #FC615C;
 .config {
     position: fixed;
     right: 0;
@@ -80,3 +80,63 @@ $buttonBorderRadius: 23px;
         margin: 0;
     }
 }
+
+.experiment-error {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    max-width: 455px;
+    min-width: 300px;
+    padding: 28px 32px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 16px rgba(78, 97, 123, 0.2);
+    background-color: #fff;
+    
+    .head {
+        height: 27px;
+        line-height: 27px;
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 15px;
+
+        .title {
+            color: $errorseriscolor;
+        }
+
+        .close {
+            position: absolute;
+            right: 30px;
+        }
+
+        .icon{
+            width: 25px;
+            height: 25px;
+            background-color: $errorseriscolor;
+            border-radius: 50%;
+            margin-right: 15px;
+            
+            i{
+                font-size: 21px;
+                color: #fff;
+                margin-left: 2px;
+            }
+        }
+    }
+
+    .message {
+        line-height: 24px;
+    }
+
+    &-buttons {
+        margin-top: 10px;
+    }
+
+    .detailsBtn {
+        width: 113px;
+        height: 32px;
+        color: #fff;
+        background: $errorseriscolor;
+        border: none;
+        border-radius: 6px;
+    }
+}
\ No newline at end of file