feat: moving query time over (#4750)

Author: drdelambre

src/dataExplorer/components/QueryTime.scss

@@ -0,0 +1,29 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.query-status {
+  flex-grow: 1;
+
+  .status {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: $g10-wolf;
+
+    display: inline-block;
+    margin-right: 10px;
+    margin-bottom: -2px;
+
+    &.loading {
+      background: $c-rainforest;
+      filter: drop-shadow(0 0 4px $c-rainforest);
+    }
+
+    &.error {
+      background: $c-fire;
+    }
+
+    &.done {
+      background: $c-rainforest;
+    }
+  }
+}

src/dataExplorer/components/QueryTime.tsx

@@ -0,0 +1,56 @@
+import React, {FC, useContext} from 'react'
+import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {RemoteDataState} from 'src/types'
+
+import 'src/dataExplorer/components/QueryTime.scss'
+
+const humanReadable = (time: number): string => {
+  return '' + time + 'ms'
+}
+
+const QueryTime: FC = () => {
+  const {status, time} = useContext(ResultsContext)
+
+  if (status === RemoteDataState.Done) {
+    return (
+      <div className="query-status">
+        <div className="status done" />
+        <label>Ready ({humanReadable(time)})</label>
+      </div>
+    )
+  }
+
+  if (status === RemoteDataState.Loading) {
+    if (time < 1000) {
+      return (
+        <div className="query-status">
+          <div className="status loading" />
+          <label>Running...</label>
+        </div>
+      )
+    }
+    return (
+      <div className="query-status">
+        <div className="status loading" />
+        <label>Running ({humanReadable(time)})...</label>
+      </div>
+    )
+  }
+
+  if (status === RemoteDataState.Error) {
+    return (
+      <div className="query-status">
+        <div className="status error" />
+        <label>Error ({humanReadable(time)})</label>
+      </div>
+    )
+  }
+
+  return (
+    <div className="query-status">
+      <div className="status pending" />
+    </div>
+  )
+}
+
+export default QueryTime

src/dataExplorer/components/Results.tsx

@@ -12,7 +12,7 @@ import './Results.scss'
 
 // simplified version migrated from src/flows/pipes/Table/view.tsx
 const QueryStat: FC = () => {
-  const {result, time} = useContext(ResultsContext)
+  const {result} = useContext(ResultsContext)
 
   const tableColumn = result?.parsed?.table?.getColumn('table') || []
   const lastTableValue = tableColumn[tableColumn.length - 1] || -1
@@ -33,7 +33,6 @@ const QueryStat: FC = () => {
       <span className="query-stat--bold">{`${tableNum} tables`}</span>
       <span className="query-stat--bold">{`${result?.parsed?.table?.length ||
         0} rows`}</span>
-      <span className="query-stat--normal">{`${time} ms`}</span>
     </div>
   )
 }

src/dataExplorer/components/ResultsContext.tsx

@@ -1,4 +1,4 @@
-import React, {FC, createContext, useState} from 'react'
+import React, {FC, createContext, useState, useRef, useEffect} from 'react'
 import {FluxResult} from 'src/types/flows'
 import {RemoteDataState} from 'src/types'
 
@@ -9,25 +9,57 @@ interface ResultsContextType {
 
   setStatus: (status: RemoteDataState) => void
   setResult: (result: FluxResult) => void
-  setTime: (time: number) => void
 }
 
 export const ResultsContext = createContext<ResultsContextType>({
   status: RemoteDataState.NotStarted,
   result: {} as FluxResult,
-  time: 0,
+  time: null,
 
   setStatus: _ => {},
   setResult: _ => {},
-  setTime: _ => {},
 })
 
 export const ResultsProvider: FC = ({children}) => {
   const [result, setResult] = useState<FluxResult>({} as FluxResult)
-  const [time, setTime] = useState<number>(0)
+  const timeStart = useRef<number>(null)
+  const [time, setTime] = useState<number>(null)
   const [status, setStatus] = useState<RemoteDataState>(
     RemoteDataState.NotStarted
   )
+
+  useEffect(() => {
+    let running = false
+    const check = () => {
+      if (!running) {
+        return
+      }
+
+      setTime(Date.now() - timeStart.current)
+
+      window.requestAnimationFrame(check)
+    }
+
+    if (status === RemoteDataState.Loading) {
+      if (!timeStart.current) {
+        timeStart.current = Date.now()
+      }
+
+      running = true
+      window.requestAnimationFrame(check)
+    } else if (
+      status === RemoteDataState.Done ||
+      status === RemoteDataState.Error
+    ) {
+      running = false
+      timeStart.current = null
+    }
+
+    return () => {
+      running = false
+    }
+  }, [status])
+
   return (
     <ResultsContext.Provider
       value={{
@@ -37,7 +69,6 @@ export const ResultsProvider: FC = ({children}) => {
 
         setStatus,
         setResult,
-        setTime,
       }}
     >
       {children}

src/dataExplorer/components/ResultsPane.tsx

@@ -27,6 +27,7 @@ import {notify} from 'src/shared/actions/notifications'
 import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
 import {getRangeVariable} from 'src/variables/utils/getTimeRangeVars'
 import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindowVars'
+import QueryTime from 'src/dataExplorer/components/QueryTime'
 
 import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
 
@@ -46,7 +47,7 @@ const ResultsPane: FC = () => {
     INITIAL_HORIZ_RESIZER_HANDLE,
   ])
   const {basic, query} = useContext(QueryContext)
-  const {status, setStatus, setResult, setTime} = useContext(ResultsContext)
+  const {status, setStatus, setResult} = useContext(ResultsContext)
 
   const [text, setText] = useLocalStorageState()
   const [timeRange, setTimeRange] = useState<TimeRange>(DEFAULT_TIME_RANGE)
@@ -88,7 +89,6 @@ const ResultsPane: FC = () => {
     }
 
     setStatus(RemoteDataState.Loading)
-    const time = Date.now()
     query(text, {
       vars: {
         timeRangeStart,
@@ -98,11 +98,9 @@ const ResultsPane: FC = () => {
       .then(r => {
         setResult(r)
         setStatus(RemoteDataState.Done)
-        setTime(Date.now() - time)
       })
       .catch(() => {
         setStatus(RemoteDataState.Error)
-        setTime(0)
       })
   }
 
@@ -150,6 +148,7 @@ const ResultsPane: FC = () => {
               justifyContent={JustifyContent.FlexEnd}
               margin={ComponentSize.Small}
             >
+              <QueryTime />
               <Button
                 titleText="Download query results as a .CSV file"
                 text="CSV"