Merge pull request #3567 from influxdata/flux/table-sidebar-filter

Enable filtering of Flux table sidebar

ui/src/ifql/components/TableSidebar.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent, CSSProperties} from 'react'
+import React, {PureComponent, CSSProperties, ChangeEvent} from 'react'
 import _ from 'lodash'
 
 import {FluxTable} from 'src/types'
@@ -13,21 +13,46 @@ interface Props {
   onSelectResult: (id: string) => void
 }
 
+interface State {
+  searchTerm: string
+}
+
 @ErrorHandling
-export default class TableSidebar extends PureComponent<Props> {
+export default class TableSidebar extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      searchTerm: '',
+    }
+  }
+
   public render() {
-    const {data, selectedResultID, onSelectResult} = this.props
+    const {selectedResultID, onSelectResult} = this.props
+    const {searchTerm} = this.state
 
     return (
       <div className="time-machine--sidebar">
         {!this.isDataEmpty && (
-          <div className="query-builder--heading" style={this.headingStyle}>
+          <div
+            className="time-machine-sidebar--heading"
+            style={this.headingStyle}
+          >
             Tables
+            <div className="time-machine-sidebar--filter">
+              <input
+                type="text"
+                className="form-control input-xs"
+                onChange={this.handleSearch}
+                placeholder="Filter tables"
+                value={searchTerm}
+              />
+            </div>
           </div>
         )}
         <FancyScrollbar>
           <div className="time-machine-vis--sidebar query-builder--list">
-            {data.map(({partitionKey, id}) => {
+            {this.data.map(({partitionKey, id}) => {
               return (
                 <TableSidebarItem
                   id={id}
@@ -45,9 +70,20 @@ export default class TableSidebar extends PureComponent<Props> {
     )
   }
 
+  private handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({searchTerm: e.target.value})
+  }
+
+  get data(): FluxTable[] {
+    const {data} = this.props
+    const {searchTerm} = this.state
+
+    return data.filter(d => d.name.includes(searchTerm))
+  }
+
   get headingStyle(): CSSProperties {
     return {
-      height: `${vis.TABLE_ROW_HEIGHT + 2.5}px`,
+      height: `${vis.TABLE_ROW_HEADER_HEIGHT + 4}px`,
       backgroundColor: '#31313d',
       borderBottom: '2px solid #383846', // $g5-pepper
     }

ui/src/ifql/components/TimeMachineTable.tsx

@@ -46,9 +46,9 @@ export default class TimeMachineTable extends PureComponent<Props, State> {
                   scrollLeft={scrollLeft}
                   style={this.headerStyle}
                   columnWidth={getColumnWidth}
-                  height={vis.TABLE_ROW_HEIGHT}
+                  height={vis.TABLE_ROW_HEADER_HEIGHT}
                   columnCount={this.columnCount}
-                  rowHeight={vis.TABLE_ROW_HEIGHT}
+                  rowHeight={vis.TABLE_ROW_HEADER_HEIGHT}
                   cellRenderer={this.headerCellRenderer}
                 />
               )}
@@ -97,7 +97,7 @@ export default class TimeMachineTable extends PureComponent<Props, State> {
   }
 
   private get headerOffset(): number {
-    return NUM_FIXED_ROWS * vis.TABLE_ROW_HEIGHT
+    return NUM_FIXED_ROWS * vis.TABLE_ROW_HEADER_HEIGHT
   }
 
   private handleScroll = ({scrollLeft}): void => {
@@ -112,7 +112,7 @@ export default class TimeMachineTable extends PureComponent<Props, State> {
     return (
       <div
         key={key}
-        style={style}
+        style={{...style, display: 'flex', alignItems: 'center'}}
         className="table-graph-cell table-graph-cell__fixed-row"
       >
         {this.table.data[0][columnIndex]}

ui/src/ifql/constants/vis.ts

@@ -1,2 +1,3 @@
+export const TABLE_ROW_HEADER_HEIGHT = 40
 export const TABLE_ROW_HEIGHT = 30
 export const TIME_COLUMN_WIDTH = 170

ui/src/style/components/time-machine/visualization.scss

@@ -69,6 +69,29 @@
   flex: 1 0 0;
 }
 
+.time-machine-sidebar--heading {
+  @include no-user-select();
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 600;
+  color: $query-builder--heading-text;
+  background-color: $query-builder--heading-bg;
+  padding: 0 $query-builder--list-gutter;
+  line-height: $query-builder--heading-height;
+
+  > .time-machine-sidebar--filter {
+    flex: 1 1 100%;
+    margin-left: 20px;
+    margin-top: 1px;
+
+    input {
+      font-size: 12px;
+    }
+  }
+}
 
 .time-machine-sidebar--item {
   @include no-user-select();