Format trial duration, rename button name (#209)

src/webui/src/components/Para.tsx

@@ -445,7 +445,7 @@ class Para extends React.Component<{}, ParaState> {
                                 className="changeBtu"
                                 onClick={this.swapBtn}
                             >
-                                sure
+                                Confirm
                             </Button>
                         </div>
                     </div>

src/webui/src/components/Sessionpro.tsx

@@ -245,6 +245,23 @@ class Sessionpro extends React.Component<{}, SessionState> {
         }
     }
 
+    // trial's duration, accurate to seconds
+    convertDuration = (num: number) => {
+        const hour = Math.floor(num / 3600);
+        const min = Math.floor(num / 60 % 60);
+        const second = Math.floor(num % 60);
+        const result = hour > 0 ? `${hour} h ${min} min ${second}s` : `${min} min ${second}s`;
+        if (hour <= 0 && min === 0 && second !== 0) {
+            return `${second}s`;
+        } else if (hour === 0 && min !== 0 && second === 0) {
+            return `${min}min`;
+        } else if (hour === 0 && min !== 0 && second !== 0) {
+            return `${min}min ${second}s`;
+        } else {
+            return result;
+        }
+    }
+    
     downExperimentContent = () => {
         axios
             .all([
@@ -321,7 +338,17 @@ class Sessionpro extends React.Component<{}, SessionState> {
             title: 'Duration/s',
             dataIndex: 'duration',
             key: 'duration',
-            width: '9%'
+            width: '9%',
+            sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
+            render: (text: string, record: TableObj) => {
+                let duration;
+                if (record.duration) {
+                    duration = this.convertDuration(record.duration);
+                }
+                return (
+                    <span>{duration}</span>
+                );
+            },
         }, {
             title: 'Start',
             dataIndex: 'start',

src/webui/src/components/TrialStatus.tsx

@@ -352,6 +352,22 @@ class TrialStatus extends React.Component<{}, TabState> {
         };
     }
 
+    convertTime = (num: number) => {
+        const hour = Math.floor(num / 3600);
+        const min = Math.floor(num / 60 % 60);
+        const second = Math.floor(num % 60);
+        const result = hour > 0 ? `${hour} h ${min} min ${second}s` : `${min} min ${second}s`;
+        if (hour <= 0 && min === 0 && second !== 0) {
+            return `${second}s`;
+        } else if (hour === 0 && min !== 0 && second === 0) {
+            return `${min}min`;
+        } else if (hour === 0 && min !== 0 && second !== 0) {
+            return `${min}min ${second}s`;
+        } else {
+            return result;
+        }
+    }
+
     componentDidMount() {
 
         this._isMounted = true;
@@ -394,7 +410,16 @@ class TrialStatus extends React.Component<{}, TabState> {
             key: 'duration',
             width: '10%',
             // the sort of number
-            sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number)
+            sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
+            render: (text: string, record: TableObj) => {
+                let duration;
+                if (record.duration) {
+                    duration = this.convertTime(record.duration);
+                }
+                return (
+                    <span>{duration}</span>
+                );
+            },
         }, {
             title: 'Start',
             dataIndex: 'start',