From e35f61b2df33a8164c776551dc02ea8d632506c9 Mon Sep 17 00:00:00 2001
From: Edmundo Alvarez <edmundo@graylog.com>
Date: Mon, 4 Apr 2016 17:21:29 +0200
Subject: [PATCH] Replace message field analyzers dropdown

Improve usability of selecting field analyzers by replacing the dropdown
with a collapsible panel.

Fixes #2022
---
 .../components/search/SidebarMessageField.css | 15 ++++++
 .../components/search/SidebarMessageField.jsx | 52 +++++++++++++------
 2 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 graylog2-web-interface/src/components/search/SidebarMessageField.css

diff --git a/graylog2-web-interface/src/components/search/SidebarMessageField.css b/graylog2-web-interface/src/components/search/SidebarMessageField.css
new file mode 100644
index 000000000000..735d81746af6
--- /dev/null
+++ b/graylog2-web-interface/src/components/search/SidebarMessageField.css
@@ -0,0 +1,15 @@
+.field-analyzer {
+    margin: 5px 5px 5px 12px;
+}
+
+.field-analyzer .panel-body {
+    padding: 5px;
+}
+
+.field-analyzer ul {
+    padding-left: 10px;
+}
+
+.field-selector {
+    margin-left: 25px;
+}
\ No newline at end of file
diff --git a/graylog2-web-interface/src/components/search/SidebarMessageField.jsx b/graylog2-web-interface/src/components/search/SidebarMessageField.jsx
index 1a36449f74e4..b97ff54b8ce1 100644
--- a/graylog2-web-interface/src/components/search/SidebarMessageField.jsx
+++ b/graylog2-web-interface/src/components/search/SidebarMessageField.jsx
@@ -1,6 +1,6 @@
 import React, {PropTypes} from 'react';
 
-import {Input, DropdownButton, MenuItem} from 'react-bootstrap';
+import { Input, Panel } from 'react-bootstrap';
 import naturalSort from 'javascript-natural-sort';
 
 const SidebarMessageField = React.createClass({
@@ -16,48 +16,66 @@ const SidebarMessageField = React.createClass({
       showActions: false,
     };
   },
-  _setShowActions(isOpen) {
-    this.setState({showActions: isOpen});
+
+  componentDidMount() {
+    this.style.use();
+  },
+
+  componentWillUnmount() {
+    this.style.unuse();
   },
 
+  style: require('!style/useable!css!./SidebarMessageField.css'),
+
   _onFieldAnalyzer(refId, fieldName) {
-    return () => {
+    return (event) => {
+      event.preventDefault();
       this.props.onFieldAnalyzer(refId, fieldName);
     };
   },
 
-  _fieldAnalyzerMenuItems() {
-    return this.props.fieldAnalyzers
+  _fieldAnalyzersList() {
+    const analyzersList = this.props.fieldAnalyzers
       .sort((a, b) => naturalSort(a.displayName, b.displayName))
       .map((analyzer, idx) => {
       return (
-        <MenuItem key={'field-analyzer-button-' + idx}
-                  onClick={this._onFieldAnalyzer(analyzer.refId, this.props.field.name)}>
-          {analyzer.displayName}
-        </MenuItem>
+        <li key={'field-analyzer-button-' + idx}>
+          <a href="#" onClick={this._onFieldAnalyzer(analyzer.refId, this.props.field.name)}>
+            {analyzer.displayName}
+          </a>
+        </li>
       );
     });
+
+    return <Panel className="field-analyzer"><ul>{analyzersList}</ul></Panel>;
+  },
+
+  _toggleFieldAnalyzers(event) {
+    event.preventDefault();
+    this.setState({ showActions: !this.state.showActions });
   },
 
   render() {
     let toggleClassName = 'fa fa-fw open-analyze-field ';
     toggleClassName += this.state.showActions ? 'open-analyze-field-active fa-caret-down' : 'fa-caret-right';
 
+    let fieldAnalyzers;
+    if (this.state.showActions) {
+      fieldAnalyzers = this._fieldAnalyzersList();
+    }
+
     return (
       <li>
         <div className="pull-left">
-          <DropdownButton bsStyle="link"
-                          id={'field-analyzers-' + this.props.field.name}
-                          onToggle={this._setShowActions}
-                          title={<i className={toggleClassName} />}>
-            {this._fieldAnalyzerMenuItems()}
-          </DropdownButton>
+          <a href="#" onClick={this._toggleFieldAnalyzers}><i className={toggleClassName}/></a>
         </div>
-        <div style={{marginLeft: 25}}>
+        <div className="field-selector">
           <Input type="checkbox"
                  label={this.props.field.name}
                  checked={this.props.selected}
                  onChange={() => this.props.onToggled(this.props.field.name)}/>
+
+          {fieldAnalyzers}
         </div>
       </li>
     );