Add filtering to legend

ui/src/shared/components/Dygraph.js

@@ -21,11 +21,13 @@ export default class Dygraph extends Component {
       },
       sortType: null,
       legendOrder: 'asc',
+      filterText: '',
     }
 
     this.getTimeSeries = ::this.getTimeSeries
     this.sync = ::this.sync
     this.handleSortLegend = ::this.handleSortLegend
+    this.handleLegendInputChange = ::this.handleLegendInputChange
   }
 
   static defaultProps = {
@@ -60,6 +62,10 @@ export default class Dygraph extends Component {
     })
   }
 
+  handleLegendInputChange(e) {
+    this.setState({filterText: e.target.value})
+  }
+
   sortByType(list, sortType, order) {
     if (!sortType) {
       return list
@@ -238,11 +244,11 @@ export default class Dygraph extends Component {
         return ''
       },
     })
+
     // part of optional workaround for preventing updateOptions from breaking legend
     // if (this.lastMouseMoveEvent) {
     //   dygraph.mouseMove_(this.lastMouseMoveEvent)
     // }
-
     dygraph.resize()
     const {w} = this.dygraph.getArea()
     this.props.setResolution(w)
@@ -256,11 +262,16 @@ export default class Dygraph extends Component {
   }
 
   render() {
-    const {legend} = this.state
+    const {legend, filterText} = this.state
 
     return (
       <div className="dygraph-child">
-        <DygraphLegend {...legend} onSort={this.handleSortLegend} />
+        <DygraphLegend
+          {...legend}
+          onSort={this.handleSortLegend}
+          onInputChange={this.handleLegendInputChange}
+          filterText={filterText}
+        />
         <div
           ref={r => {
             this.graphContainer = r

ui/src/shared/components/DygraphLegend.js

@@ -1,9 +1,14 @@
 import React, {PropTypes} from 'react'
 
-const DygraphLegend = ({series, onSort}) => (
+const DygraphLegend = ({series, onSort, filterText, onInputChange}) => (
   <div style={{userSelect: 'text'}} className="container--dygraph-legend">
     <div className="dygraph-legend--header">
-      <input className="form-control input-xs" type="text" />
+      <input
+        className="form-control input-xs"
+        type="text"
+        value={filterText}
+        onChange={onInputChange}
+      />
       <button
         className="btn btn-primary btn-xs"
         onClick={() => onSort('alphabetic')}
@@ -18,7 +23,12 @@ const DygraphLegend = ({series, onSort}) => (
       </button>
     </div>
     <div className="dygraph-legend--contents">
-      {series.map(({label, color, yHTML, isHighlighted}) => {
+      {series.filter(s => s.label.match(filterText)).map(({
+        label,
+        color,
+        yHTML,
+        isHighlighted,
+      }) => {
         return (
           <span key={label + color}>
             <b>
@@ -52,6 +62,8 @@ DygraphLegend.propTypes = {
   ),
   dygraph: shape(),
   onSort: func.isRequired,
+  onInputChange: func.isRequired,
+  filterText: string.isRequired,
 }
 
 export default DygraphLegend