feat(notebook/view): add post query statistics to tables (#4507)

* feat: add query stat for table num and row num

* feat: move query stat to View component

* fix(view): update data type for table column

* style(view): add style to query stat

* style(view): run prettier

* feat: add process time to run the query

* chore(view): reorganize component

* chore(view): remove comment

* chore: move QueryStat to `src/flows/pips/Table/view.tsx`

* chore: replace useState with useRef for queryStart variable

* chore: replace porps variables with context

Author: appletreeisyellow

src/flows/pipes/Table/view.scss

@@ -0,0 +1,17 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.query-stat {
+  padding: $cf-space-2xs 0;
+}
+
+.query-stat--bold {
+  font-weight: $cf-font-weight--medium;
+  color: $cf-grey-75;
+  padding-left: $cf-space-2xs;
+  padding-right: $cf-space-s;
+}
+
+.query-stat--normal {
+  color: $cf-grey-55;
+  padding: 0 $cf-space-2xs;
+}

src/flows/pipes/Table/view.tsx

@@ -1,5 +1,15 @@
 // Libraries
-import React, {FC, useContext, useEffect, useMemo} from 'react'
+import React, {
+  FC,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from 'react'
+
+// Styles
+import './view.scss'
 
 // Components
 import {Icon, IconFont} from '@influxdata/clockface'
@@ -21,6 +31,64 @@ import {downloadTextFile} from 'src/shared/utils/download'
 // Constants
 import {UNPROCESSED_PANEL_TEXT} from 'src/flows'
 
+const QueryStat: FC = () => {
+  const {loading, results} = useContext(PipeContext)
+  const queryStart = useRef(0)
+  const [processTime, setProcessTime] = useState(0)
+  let tableNum = 0
+
+  const tableColumn = results.parsed.table?.getColumn('table') || []
+  const lastTableValue = tableColumn[tableColumn.length - 1]
+
+  if (typeof lastTableValue === 'string') {
+    tableNum = parseInt(lastTableValue) + 1
+  } else if (typeof lastTableValue === 'boolean') {
+    tableNum = lastTableValue ? 1 : 0
+  } else {
+    // number
+    tableNum = lastTableValue + 1
+  }
+
+  useEffect(() => {
+    if (loading === RemoteDataState.Loading) {
+      // start to count
+      if (queryStart.current === 0) {
+        queryStart.current = Date.now()
+        setProcessTime(0)
+      }
+      return
+    }
+
+    if (loading === RemoteDataState.Done && queryStart.current !== 0) {
+      const timePassed = Date.now() - queryStart.current // ms
+      queryStart.current = 0
+      setProcessTime(timePassed)
+      return
+    }
+
+    queryStart.current = 0
+    setProcessTime(0)
+  }, [loading])
+
+  const queryStat = {
+    tableNum,
+    rowNum: results.parsed.table?.length || 0,
+    processTime, // ms
+  }
+
+  if (loading !== RemoteDataState.Done) {
+    return null
+  }
+
+  return (
+    <div className="query-stat">
+      <span className="query-stat--bold">{`${queryStat.tableNum} tables`}</span>
+      <span className="query-stat--bold">{`${queryStat.rowNum} rows`}</span>
+      <span className="query-stat--normal">{`${queryStat.processTime} ms`}</span>
+    </div>
+  )
+}
+
 const Table: FC<PipeProp> = ({Context}) => {
   const {id, data, range, loading, results} = useContext(PipeContext)
   const {basic, getPanelQueries} = useContext(FlowQueryContext)
@@ -115,6 +183,7 @@ const Table: FC<PipeProp> = ({Context}) => {
     <Context resizes controls={caveat}>
       <div className="flow-visualization" id={id}>
         <div className="flow-visualization--view">
+          <QueryStat />
           <View
             loading={loading}
             properties={