Update WebUI for metrics data changing to json string

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

@@ -5,6 +5,7 @@ import {
     Stack, Dropdown, DetailsList, IDetailsListProps, DetailsListLayoutMode,
     PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton
 } from 'office-ui-fabric-react';
+import * as JSON5 from 'json5';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
 import { MANAGER_IP, COLUMNPro } from '../../static/const';
 import { convertDuration, formatTimestamp, intermediateGraphOption, parseMetrics } from '../../static/function';
@@ -377,7 +378,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     // trial parameters & dict final keys & Trial No. Id ...
     private getAllColumnKeys = (): string[] => {
-        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
+        const tableSource: Array<TableRecord> = JSON5.parse(JSON5.stringify(this.props.tableSource));
         // parameter as table column
         const parameterStr: string[] = [];
         if (tableSource.length > 0) {
@@ -545,7 +546,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             isShowCustomizedModal, copyTrialId, intermediateOption
         } = this.state;
         const { columnList } = this.props;
-        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.state.tableSourceForSort));
+        const tableSource: Array<TableRecord> = JSON5.parse(JSON5.stringify(this.state.tableSourceForSort));
 
         return (
             <Stack>

src/webui/src/static/function.ts

@@ -43,7 +43,7 @@ const getFinalResult = (final?: MetricDataRecord[]): number => {
     let acc;
     let showDefault = 0;
     if (final) {
-        acc = JSON.parse(final[final.length - 1].data);
+        acc = JSON5.parse(final[final.length - 1].data);
         if (typeof (acc) === 'object') {
             if (acc.default) {
                 showDefault = acc.default;
@@ -61,7 +61,7 @@ const getFinalResult = (final?: MetricDataRecord[]): number => {
 const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
     let showDefault: FinalType;
     if (final) {
-        showDefault = JSON.parse(final[final.length - 1].data);
+        showDefault = JSON5.parse(final[final.length - 1].data);
         if (typeof showDefault === 'number') {
             showDefault = { default: showDefault };
         }
@@ -182,8 +182,6 @@ function formatTimestamp(timestamp?: number, placeholder?: string): string {
 function parseMetrics(metricData: string): any {
     if (metricData.includes('NaN')) {
         return JSON5.parse(metricData)
-    } else {
-        return JSON.parse(metricData)
     }
 }