Make filter toggleable

ui/src/shared/components/Dygraph.js

@@ -24,6 +24,7 @@ export default class Dygraph extends Component {
       isHidden: true,
       isAscending: true,
       isSnipped: false,
+      isFilterVisible: false,
     }
 
     this.sync = ::this.sync
@@ -32,6 +33,7 @@ export default class Dygraph extends Component {
     this.handleLegendInputChange = ::this.handleLegendInputChange
     this.handleSnipLabel = ::this.handleSnipLabel
     this.handleHideLegend = ::this.handleHideLegend
+    this.handleToggleFilter = ::this.handleToggleFilter
   }
 
   static defaultProps = {
@@ -280,6 +282,13 @@ export default class Dygraph extends Component {
     this.setState({isSnipped: !this.state.isSnipped})
   }
 
+  handleToggleFilter() {
+    this.setState({
+      isFilterVisible: !this.state.isFilterVisible,
+      filterText: '',
+    })
+  }
+
   handleHideLegend(e) {
     const {top, bottom, left, right} = this.graphRef.getBoundingClientRect()
 
@@ -303,6 +312,7 @@ export default class Dygraph extends Component {
       sortType,
       isHidden,
       isSnipped,
+      isFilterVisible,
     } = this.state
 
     return (
@@ -312,13 +322,15 @@ export default class Dygraph extends Component {
           sortType={sortType}
           onHide={this.handleHideLegend}
           isHidden={isHidden}
+          isFilterVisible={isFilterVisible}
           isSnipped={isSnipped}
           filterText={filterText}
           isAscending={isAscending}
           onSnip={this.handleSnipLabel}
           onSort={this.handleSortLegend}
-          legendRef={el => this.legendRef = el}
+          legendRef={el => (this.legendRef = el)}
           onInputChange={this.handleLegendInputChange}
+          onToggleFilter={this.handleToggleFilter}
         />
         <div
           ref={r => {

ui/src/shared/components/DygraphLegend.js

@@ -13,12 +13,14 @@ const DygraphLegend = ({
   onSnip,
   onHide,
   isHidden,
+  isFilterVisible,
   isSnipped,
   sortType,
   legendRef,
   filterText,
   isAscending,
   onInputChange,
+  onToggleFilter,
   xHTML,
 }) => {
   const sorted = _.sortBy(
@@ -68,19 +70,32 @@ const DygraphLegend = ({
     >
       <div className="dygraph-legend--header">
         <div className="dygraph-legend--timestamp">{xHTML}</div>
-        <input
-          className="dygraph-legend--filter form-control input-sm"
-          type="text"
-          value={filterText}
-          onChange={onInputChange}
-          placeholder="Filter items..."
-        />
         {renderSortAlpha}
         {renderSortNum}
+        <button
+          className={classnames('btn btn-square btn-sm', {
+            'btn-default': !isFilterVisible,
+            'btn-primary': isFilterVisible,
+          })}
+          onClick={onToggleFilter}
+        >
+          <span className="icon search" />
+        </button>
         <button className="btn btn-default btn-sm" onClick={onSnip}>
           Snip
         </button>
       </div>
+      {isFilterVisible
+        ? <input
+            className="dygraph-legend--filter form-control input-sm"
+            type="text"
+            value={filterText}
+            onChange={onInputChange}
+            placeholder="Filter items..."
+            autoFocus={true}
+          />
+        : null}
+      <div className="dygraph-legend--divider" />
       <div className="dygraph-legend--contents">
         {filtered.map(({label, color, yHTML, isHighlighted}) => {
           const seriesClass = isHighlighted
@@ -88,9 +103,9 @@ const DygraphLegend = ({
             : 'dygraph-legend--row'
           return (
             <div key={label + color} className={seriesClass}>
-              <caption style={{color}}>
+              <span style={{color}}>
                 {isSnipped ? removeMeasurement(label) : label}
-              </caption>
+              </span>
               <figure>{yHTML || 'no value'}</figure>
             </div>
           )
@@ -120,12 +135,14 @@ DygraphLegend.propTypes = {
   onHide: func.isRequired,
   onSort: func.isRequired,
   onInputChange: func.isRequired,
+  onToggleFilter: func.isRequired,
   filterText: string.isRequired,
   isAscending: bool.isRequired,
   sortType: string.isRequired,
   isHidden: bool.isRequired,
   legendRef: func.isRequired,
   isSnipped: bool.isRequired,
+  isFilterVisible: bool.isRequired,
 }
 
 export default DygraphLegend

ui/src/style/components/dygraphs.scss

@@ -152,9 +152,6 @@
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  padding-bottom: 8px;
-  border-bottom: 2px solid $g5-pepper;
-  margin-bottom: 8px;
 
   > .btn { margin-left: 4px; }
 }
@@ -164,9 +161,17 @@
   line-height: 30px;
   font-weight: 600;
   color: $g13-mist;
+  flex: 1 0 0;
 }
 .dygraph-legend--filter {
   flex: 1 0 0;
+  margin-top: 8px;
+}
+.dygraph-legend--divider {
+  width: 100%;
+  margin: 8px 0;
+  height: 2px;
+  background-color: $g5-pepper;
 }
 .dygraph-legend--contents {
   font-size: 13px;
@@ -187,7 +192,7 @@
   line-height: 13px;
   padding: 3px 0;
 
-  caption {
+  span {
     font-weight: 600;
     padding: 0;
     white-space: nowrap;