feat: add estimated time for query execution (pinterest#1158)

* feat: add estimated time for query execution

* resolved comments

Author: czgu

querybook/webapp/components/DataDocStatementExecution/DataDocStatementExecution.scss

@@ -28,9 +28,11 @@
         .statement-execution-progress-wrapper {
             margin-bottom: 10px;
 
-            progress {
-                width: 40%;
-                display: inline-block;
+            .ProgressBar {
+                flex: 1;
+            }
+            .progress-text {
+                flex: 1;
             }
         }
     }

querybook/webapp/components/DataDocStatementExecution/DataDocStatementExecution.tsx

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -8,6 +9,7 @@ import {
 import { StatementExecutionDefaultResultSize } from 'const/queryResultLimit';
 import { useToggleState } from 'hooks/useToggleState';
 import { sanitizeAndExtraMarkdown } from 'lib/markdown';
+import { formatDuration } from 'lib/utils/datetime';
 import { fetchResult } from 'redux/queryExecutions/action';
 import { IStoreState } from 'redux/store/types';
 import { Icon } from 'ui/Icon/Icon';
@@ -133,21 +135,51 @@ export const DataDocStatementExecution: React.FC<IProps> = ({
                 <span className="statement-status-label">Initializing</span>
             );
         } else if (status === StatementExecutionStatus.RUNNING) {
-            const percentComplete = statementExecution.percent_complete;
-            const statusLabel =
-                status === StatementExecutionStatus.RUNNING ? (
-                    <span className="statement-status-label">Running</span>
-                ) : null;
-            const progressBar = status === StatementExecutionStatus.RUNNING && (
-                <div className="statement-execution-progress-wrapper">
+            const { created_at: createdAt } = statementExecution;
+            const percentComplete = statementExecution.percent_complete ?? 0;
+
+            const statusLabel = (
+                <span className="statement-status-label">Running</span>
+            );
+
+            const estimatedTimeText = (() => {
+                let progressMessage = `${Math.floor(percentComplete || 0)}%`;
+
+                if (
+                    percentComplete == null ||
+                    percentComplete === 0 ||
+                    percentComplete === 100
+                ) {
+                    return progressMessage;
+                }
+
+                const secondsPassedSinceStart =
+                    new Date().getTime() / 1000 - createdAt;
+                const secondsRemainToComplete =
+                    secondsPassedSinceStart / (percentComplete / 100) -
+                    secondsPassedSinceStart;
+                const durationToComplete = formatDuration(
+                    moment.duration(secondsRemainToComplete, 'seconds')
+                );
+
+                progressMessage += ` (${durationToComplete} Remaining)`;
+
+                return progressMessage;
+            })();
+
+            const progressBar = (
+                <div className="statement-execution-progress-wrapper flex-row">
                     <ProgressBar
                         value={percentComplete}
-                        showValue
                         isSmall
                         type="success"
                     />
+                    <AccentText className="progress-text">
+                        {estimatedTimeText}
+                    </AccentText>
                 </div>
             );
+
             contentDOM = (
                 <div className="statement-execution-text-container">
                     <div className="statement-execution-text-title">