feat: normalize table experience (#4950)

Author: drdelambre

src/flows/pipes/Table/view.scss

@@ -1,7 +1,14 @@
 @import '@influxdata/clockface/dist/variables.scss';
 
+.flow-visualization--header {
+  .search-widget-input {
+    flex: 0 1 500px;
+  }
+}
+
 .query-stat {
   padding: $cf-space-2xs 0;
+  white-space: nowrap;
 }
 
 .query-stat--bold {

src/flows/pipes/Table/view.tsx

@@ -7,19 +7,17 @@ import React, {
   useState,
   useRef,
 } from 'react'
-
-// Styles
-import './view.scss'
+import {Icon, IconFont} from '@influxdata/clockface'
 
 // Components
-import {Icon, IconFont} from '@influxdata/clockface'
+import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 
 // Utilities
 import {View} from 'src/visualization'
 
 // Types
 import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
-import {PipeProp} from 'src/types/flows'
+import {PipeProp, FluxResult} from 'src/types/flows'
 
 import {PipeContext} from 'src/flows/context/pipe'
 import {FlowQueryContext} from 'src/flows/context/flow.query'
@@ -31,6 +29,9 @@ import {downloadTextFile} from 'src/shared/utils/download'
 // Constants
 import {UNPROCESSED_PANEL_TEXT} from 'src/flows'
 
+// Styles
+import './view.scss'
+
 const QueryStat: FC = () => {
   const {loading, results} = useContext(PipeContext)
   const queryStart = useRef(0)
@@ -93,6 +94,7 @@ const Table: FC<PipeProp> = ({Context}) => {
   const {id, data, range, loading, results} = useContext(PipeContext)
   const {basic, getPanelQueries} = useContext(FlowQueryContext)
   const {register} = useContext(SidebarContext)
+  const [search, setSearch] = useState('')
 
   const dataExists = !!(results?.parsed?.table || []).length
 
@@ -108,6 +110,56 @@ const Table: FC<PipeProp> = ({Context}) => {
     })
   }
 
+  const res = useMemo(() => {
+    if (!search.trim() || !results?.parsed) {
+      return results?.parsed
+    }
+
+    const dupped = {
+      fluxGroupKeyUnion: [...results.parsed.fluxGroupKeyUnion],
+      resultColumnNames: [...results.parsed.resultColumnNames],
+      table: {
+        length: 0,
+        columns: Object.entries(results.parsed.table.columns).reduce(
+          (acc, [k, v]) => {
+            acc[k] = {...v, data: []}
+            return acc
+          },
+          {}
+        ),
+      },
+    }
+
+    const len = results.parsed.table.length
+    const keys = Object.keys(results.parsed.table.columns)
+    let newLen = 0,
+      ni = 0
+
+    const _search = search.toLocaleLowerCase()
+    const oldCols = results.parsed.table.columns
+    const newCols = dupped.table.columns
+
+    for (; ni < len; ni++) {
+      if (
+        !keys.reduce(
+          (acc, curr) =>
+            acc ||
+            ('' + oldCols[curr].data[ni]).toLocaleLowerCase().includes(_search),
+          false
+        )
+      ) {
+        continue
+      }
+
+      keys.forEach(k => (newCols[k].data[newLen] = oldCols[k].data[ni]))
+      newLen++
+    }
+
+    dupped.table.length = newLen
+
+    return dupped as FluxResult['parsed']
+  }, [search, results?.parsed])
+
   const loadingText = useMemo(() => {
     if (loading === RemoteDataState.Loading) {
       return 'Loading'
@@ -182,8 +234,15 @@ const Table: FC<PipeProp> = ({Context}) => {
   return (
     <Context resizes controls={caveat}>
       <div className="flow-visualization" id={id}>
-        <div className="flow-visualization--view">
+        <div className="flow-visualization--header">
+          <SearchWidget
+            placeholderText="Search results..."
+            onSearch={setSearch}
+            searchTerm={search}
+          />
           <QueryStat />
+        </div>
+        <div className="flow-visualization--view">
           <View
             loading={loading}
             properties={
@@ -192,7 +251,7 @@ const Table: FC<PipeProp> = ({Context}) => {
                 showAll: false,
               } as SimpleTableViewProperties
             }
-            result={results.parsed}
+            result={res}
             timeRange={range}
           />
         </div>

src/flows/pipes/Visualization/style.scss

@@ -4,16 +4,22 @@
   background-color: $cf-grey-5;
   border-radius: $cf-radius;
   display: flex;
+  flex-direction: column;
   align-items: stretch;
   height: 100%;
+  padding: $cf-space-2xs + $cf-space-3xs;
+}
+
+.flow-visualization--header {
+  display: flex;
 }
 
 .flow-visualization--view-error,
 .flow-visualization--view {
+  flex-grow: 1;
   width: 100%;
   border-radius: $cf-radius-sm;
   background-color: $cf-grey-5;
-  padding: $cf-space-2xs + $cf-space-3xs;
 
   .empty-graph-error {
     height: 200px;