Show startTime and endTime in detail table (#1536)

* Show startTime and endTime in detail table

src/webui/src/components/TrialsDetail.tsx

@@ -171,7 +171,9 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                             status: status,
                             duration: duration,
                             acc: acc,
-                            description: desc
+                            description: desc,
+                            startTime: begin,
+                            endTime: (end !== undefined) ? end : undefined
                         });
                     });
                     // update search data result

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

@@ -182,7 +182,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     // checkbox for coloumn
     selectedColumn = (checkedValues: Array<string>) => {
-        // 7: because have seven common column, "Intermediate count" is not shown by default
+        // 7: because have seven common column, "Intermediate count" is hidden by default
         let count = 7;
         const want: Array<object> = [];
         const finalKeys: Array<string> = [];
@@ -191,6 +191,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
             switch (checkedValues[m]) {
                 case 'Trial No.':
                 case 'ID':
+                case 'StartTime':
+                case 'EndTime':
                 case 'Duration':
                 case 'Status':
                 case 'Operation':
@@ -347,6 +349,50 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         }
                     });
                     break;
+                case 'StartTime':
+                    showColumn.push({
+                        title: 'StartTime',
+                        dataIndex: 'startTime',
+                        key: 'startTime',
+                        width: 160,
+                        render: (text: string, record: TableObj) => {
+                            const start = record.startTime !== undefined ? record.startTime : -1;
+                            return (
+                                <span>
+                                    {
+                                        start !== -1
+                                            ?
+                                            new Date(start).toLocaleString('en-US')
+                                            :
+                                            '--'
+                                    }
+                                </span>
+                            );
+                        },
+                    });
+                    break;
+                case 'EndTime':
+                    showColumn.push({
+                        title: 'EndTime',
+                        dataIndex: 'endTime',
+                        key: 'endTime',
+                        width: 160,
+                        render: (text: string, record: TableObj) => {
+                            const end = record.endTime !== undefined ? record.endTime : -1;
+                            return (
+                                <span>
+                                    {
+                                        end !== -1
+                                            ?
+                                            new Date(end).toLocaleString('en-US')
+                                            :
+                                            '--'
+                                    }
+                                </span>
+                            );
+                        },
+                    });
+                    break;
                 case 'Duration':
                     showColumn.push({
                         title: 'Duration',

src/webui/src/static/const.ts

@@ -34,21 +34,29 @@ const COLUMN_INDEX = [
         index: 2
     },
     {
-        name: 'Duration',
+        name: 'StartTime',
         index: 3
     },
     {
-        name: 'Status',
+        name: 'EndTime',
         index: 4
     },
     {
-        name: 'Intermediate count',
+        name: 'Duration',
         index: 5
     },
     {
-        name: 'Default',
+        name: 'Status',
         index: 6
     },
+    {
+        name: 'Intermediate count',
+        index: 7
+    },
+    {
+        name: 'Default',
+        index: 8
+    },
     {
         name: 'Operation',
         index: 10000
@@ -57,7 +65,8 @@ const COLUMN_INDEX = [
 // defatult selected column
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation'];
 // all choice column !dictory final
-const COLUMNPro = ['Trial No.', 'ID', 'Duration', 'Status', 'Intermediate count', 'Default', 'Operation'];
+const COLUMNPro = ['Trial No.', 'ID', 'StartTime', 'EndTime', 'Duration', 'Status',
+'Intermediate count', 'Default', 'Operation'];
 export {
     MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
     CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION

src/webui/src/static/interface.ts

@@ -8,6 +8,8 @@ interface TableObj {
     acc?: FinalType; // draw accuracy graph
     description: Parameters;
     color?: string;
+    startTime?: number;
+    endTime?: number;
 }
 
 interface SearchSpace {