fix bug of table entries (#1032)

* fix bug of table entries

src/webui/src/components/TrialsDetail.tsx

@@ -23,7 +23,8 @@ interface TrialDetailState {
     experimentStatus: string;
     experimentPlatform: string;
     experimentLogCollection: boolean;
-    entriesTable: number;
+    entriesTable: number; // table components val
+    entriesInSelect: string;
     searchSpace: string;
     isMultiPhase: boolean;
 }
@@ -68,6 +69,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             experimentPlatform: '',
             experimentLogCollection: false,
             entriesTable: 20,
+            entriesInSelect: '20',
             isHasSearch: false,
             searchSpace: '',
             isMultiPhase: false
@@ -82,7 +84,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                 axios.get(`${MANAGER_IP}/metric-data`)
             ])
             .then(axios.spread((res, res1) => {
-                if (res.status === 200) {
+                if (res.status === 200 && res1.status === 200) {
                     const trialJobs = res.data;
                     const metricSource = res1.data;
                     const trialTable: Array<TableObj> = [];
@@ -149,7 +151,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         });
                     });
                     // update search data result
-                    const { searchResultSource } = this.state;
+                    const { searchResultSource, entriesInSelect } = this.state;
                     if (searchResultSource.length !== 0) {
                         const temp: Array<number> = [];
                         Object.keys(searchResultSource).map(index => {
@@ -176,6 +178,11 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             tableListSource: trialTable
                         }));
                     }
+                    if (entriesInSelect === 'all' && this._isMounted) {
+                        this.setState(() => ({
+                            entriesTable: trialTable.length
+                        }));
+                    }
                 }
             }));
     }
@@ -198,7 +205,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                 const item = tableListSource[key];
                 if (item.sequenceId.toString() === targetValue
                     || item.id.includes(targetValue)
-                    || item.status.includes(targetValue)
+                    || item.status.toUpperCase().includes(targetValue.toUpperCase())
                 ) {
                     searchResultList.push(item);
                 }
@@ -244,7 +251,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                 break;
             case 'all':
                 const { tableListSource } = this.state;
-                this.setState(() => ({ entriesTable: tableListSource.length }));
+                if (this._isMounted) {
+                    this.setState(() => ({
+                        entriesInSelect: 'all',
+                        entriesTable: tableListSource.length
+                    }));
+                }
                 break;
             default:
         }

src/webui/src/components/trial-detail/Para.tsx

@@ -182,7 +182,8 @@ class Para extends React.Component<ParaProps, ParaState> {
             // need to cut down the data
             if (percent !== 0) {
                 const linesNum = paraData.data.length;
-                const len = Math.floor(linesNum * percent);
+                // Math.ceil rather than Math.floor to avoid lost lines
+                const len = Math.ceil(linesNum * percent);
                 paraData.data.length = len;
             }
             // need to swap the yAxis
@@ -236,6 +237,8 @@ class Para extends React.Component<ParaProps, ParaState> {
             visualMapObj = {
                 type: 'continuous',
                 precision: 3,
+                min: 0,
+                max: max,
                 color: ['#CA0000', '#FFC400', '#90EE90']
             };
         } else {