Merge pull request #4 from billmurrin/add-search-menus

Add search menus

Author: billmurrin

README.md

@@ -7,7 +7,7 @@ The QuickValuesPlus Widget is an enhanced fork of the GrayLog2 Quick Values Widg
 
 When the QuickValuesPlus Widget is added to a stream as a field analyzer it adds a "Remove from search" button. The button will negate the field in the search bar (E.g. !field_name:foo).
 
-![alt text](http://i.imgur.com/0tfXFTu.png "Remove From Search Button")
+![alt text](http://i.imgur.com/uthGeG1.png "Remove From Search Button")
 
 In addition, the QuickValuesPlus Widget has extra features when added to dashboards, such as:
  * Support for **ascending** OR **descending** sort order in the datatable. Can now obtain true bottom values.
@@ -16,15 +16,25 @@ In addition, the QuickValuesPlus Widget has extra features when added to dashboa
 
 ![alt text](http://i.imgur.com/7PLDXCW.png "Example of Configuration Options")
 
-**Required Graylog versions:**
-* Version 1.0.0 was tested and is compatible with Graylog version 2.1.3
-* Version 2.0.0 was tested and is compatible with Graylog versions 2.2.1, 2.2.2, and 2.2.3
- 
-Please file a bug report providing as much detail as possible if you find that the plugin is not working.
+In version 2.1.0, a Customization menu was introduced to help control the sort order, number of top values and the table size of the plugin when used in Search.
+
+![alt text](http://i.imgur.com/TsZQxil.png "Example of Options Menu")
 
-Way Ahead (Next Version)
+Options Menu Caveat
 -----------
- * Add customize menu to widget when attached to a stream which allows ability to toggle sort order, top values and table size.
+
+Right now, Graylog's REST API does not support a sort option for the RelativeSearch lookup on /terms. I plan on doing a Pull Request for this in the future.
+
+With that means is that at this time we cannot obtain a "TRUE" ascending order query. The ascending order observed is actually based on a descending ordered query. 
+
+If you want a true ascending query, simply add the visualization as a dashboard. The widget code does obtain the *TRUE* ascending order query. 
+
+Required Graylog Versions
+-----------
+* Version 1.0.0 was tested and is compatible with Graylog version 2.1.3. 
+* Version 2.1.0 was tested and is compatible with Graylog versions 2.2.1, 2.2.2, and 2.2.3
+ 
+Please file a bug report providing as much detail as possible if you find that the plugin is not working.
 
 Installation
 ------------
@@ -35,6 +45,12 @@ and can be configured in your `graylog.conf` file.
 
 Restart `graylog-server` and you are done.
 
+Way Ahead - Next Version(s)
+-----------
+ * Add support to modify the field of the widget.
+ * Add code to make the Dropdown menu go away after a selection.
+ * Add a System Configuration menu to allow users to change the global defaults for sort order, top values, and table size.
+
 Development
 -----------
 You can improve your development experience for the web interface part of your plugin
@@ -95,17 +111,4 @@ This project is using Maven 3 and requires Java 8 or higher.
 * Run `mvn package` to build a JAR file.
 * Optional: Run `mvn jdeb:jdeb` and `mvn rpm:rpm` to create a DEB and RPM package respectively.
 * Copy generated JAR file in target directory to your Graylog plugin directory.
-* Restart the Graylog.
-
-Plugin Release
---------------
-
-We are using the maven release plugin:
-
-```
-$ mvn release:prepare
-[...]
-$ mvn release:perform
-```
-
-This sets the version numbers, creates a tag and pushes to GitHub. Travis CI will build the release artifacts and upload to GitHub automatically.
+* Restart the Graylog.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "QuickValuesPlusWidget",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "GrayLog2 QuickValuesPlus Widget Plusin",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "react-dom": "^0.14.6",
     "react-hot-loader": "^3.0.0-beta.3",
     "react-proxy-loader": "^0.3.4",
+    "style-loader": "^0.16.1",
     "webpack": "^1.12.2"
   }
 }
-

pom.xml

@@ -8,7 +8,7 @@
 
     <groupId>org.graylog.plugins</groupId>
     <artifactId>graylog-plugin-quickvaluesplus-widget</artifactId>
-    <version>2.0.0</version>
+    <version>2.1.0</version>
     <packaging>jar</packaging>
 
     <name>${project.artifactId}</name>

src/web/components/FieldQuickValuesPlus.css

@@ -0,0 +1,3 @@
+.dropdown-menu a.selected {
+  font-weight: bold;
+}

src/web/components/FieldQuickValuesPlus.jsx

@@ -1,15 +1,17 @@
 import React, {PropTypes} from 'react';
 import ReactDOM from 'react-dom';
-import {Button} from 'react-bootstrap';
+import {Button, DropdownButton, MenuItem} from 'react-bootstrap';
 import Reflux from 'reflux';
 
 import QuickValuesPlusVisualization from 'components/QuickValuesPlusVisualization';
 import AddToDashboardMenu from 'components/dashboard/AddToDashboardMenu';
 import Spinner from 'components/common/Spinner';
+import StringUtils from 'util/StringUtils';
 import UIUtils from 'util/UIUtils';
 
 import StoreProvider from 'injection/StoreProvider';
 import { QuickValuesPlusActions, QuickValuesPlusStore } from  'stores/QuickValuesPlusStore';
+
 const RefreshStore = StoreProvider.getStore('Refresh');
 
 const FieldQuickValuesPlus = React.createClass({
@@ -26,8 +28,13 @@ const FieldQuickValuesPlus = React.createClass({
             data: [],
         };
     },
+    style: require('!style/useable!css!./FieldQuickValuesPlus.css'),
 
+    componentWillMount() {
+        this.setState({quickValuesOptions: {top_values: 5, sort_order: "descending", table_size: 50, show_pie_chart: true, show_data_table: true}});
+    },
     componentDidMount() {
+        this.style.use();
         this._loadQuickValuesData();
     },
     componentDidUpdate(oldProps, oldState) {
@@ -49,6 +56,7 @@ const FieldQuickValuesPlus = React.createClass({
     },
 
     componentWillUnmount() {
+        this.style.unuse();
         this._stopTimer();
     },
 
@@ -71,23 +79,66 @@ const FieldQuickValuesPlus = React.createClass({
     _loadQuickValuesData() {
         if (this.state.field !== undefined) {
             this.setState({loadPending: true});
-            const promise = QuickValuesPlusActions.getQuickValues(this.state.field);
+            const promise = QuickValuesPlusActions.getQuickValues(this.state.field, 50);
             promise.then((data) => this.setState({data: data, loadPending: false}));
         }
     },
     _resetStatus() {
         this.setState(this.getInitialState());
     },
+    sortordermenu: ['ascending', 'descending'],
+    topvaluesmenu: [5,10,15,20,25],
+    tablesizemenu: [10,15,20,25,50,75,100],
+
+    _submenuItemClassName(configKey, value) {
+        return this.state.quickValuesOptions[configKey] === value ? 'selected' : '';
+    },
+    _updateOptionState(configKey, value) {
+        let newOptions = Object.assign({}, this.state.quickValuesOptions, {[configKey]: value});
+        this.refs.thedash.refs.widgetModal.setState({config: newOptions});
+        this.setState({quickValuesOptions: newOptions});
+        const promise = QuickValuesPlusActions.getQuickValues(this.state.field, newOptions['table_size']);
+        promise.then((data) => this.setState({data: data, loadPending: false}));
+    },
+    _getSubmenu(configKey, values) {
+        const submenuItems = values.map((value) => {
+            const readableName = value;
+            return (
+                <li key={`menu-item-${value}`}>
+                    <a href="#" onClick={() => this._updateOptionState(configKey, value)} className={this._submenuItemClassName(configKey, value)} data-type={value}>
+                        {StringUtils.capitalizeFirstLetter(readableName.toString())}
+                    </a>
+                </li>
+            );
+        });
+
+        return <ul className={`dropdown-menu ${configKey}-selector`}>{submenuItems}</ul>;
+    },
     render() {
         let content;
-
         let inner;
+
+        const submenus = [
+            <li key="sort_order-submenu" className="dropdown-submenu left-submenu">
+                <a href="#">Sort Order</a>
+                {this._getSubmenu('sort_order', this.sortordermenu)}
+            </li>,
+            <li key="top_values-submenu" className="dropdown-submenu left-submenu">
+                <a href="#">Top Values</a>
+                {this._getSubmenu('top_values', this.topvaluesmenu)}
+            </li>,
+            <li key="table_size-submenu" className="dropdown-submenu left-submenu">
+                <a href="#">Table Size</a>
+                {this._getSubmenu('table_size', this.tablesizemenu)}
+            </li>,
+        ];
+
         if (this.state.data.length === 0) {
             inner = <Spinner />;
         } else {
             inner = (
                 <QuickValuesPlusVisualization id={this.state.field}
-                                          config={{top_values: 5, sort_order: "descending", table_size: 50, show_pie_chart: true, show_data_table: true}}
+                                          config={this.state.quickValuesOptions}
                                           data={this.state.data}
                                           horizontal
                                           displayAddToSearchButton
@@ -101,12 +152,16 @@ const FieldQuickValuesPlus = React.createClass({
                 <div className="content-col">
                     <div className="pull-right">
                         <AddToDashboardMenu title="Add to dashboard"
+                                            ref="thedash"
                                             widgetType={this.WIDGET_TYPE}
-                                            configuration={{field: this.state.field}}
+                                            configuration={{field: this.state.field, table_size: this.state.quickValuesOptions['table_size'], sort_order: this.state.quickValuesOptions['sort_order'], top_values: this.state.quickValuesOptions['top_values']}}
                                             bsStyle="default"
                                             pullRight
                                             permissions={this.props.permissions}>
                             <Button bsSize="small" onClick={() => this._resetStatus()}>Dismiss</Button>
+                            <DropdownButton bsSize="small" className="quickvalues-settings" title="Customize" id="customize-quick-values-plus-dropdown">
+                                {submenus}
+                            </DropdownButton>
                         </AddToDashboardMenu>
                     </div>
                     <h1>Quick Values for {this.state.field} {this.state.loadPending && <i

src/web/components/QuickValuesPlusWidgetCreateConfiguration.jsx

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
 import { Input } from 'react-bootstrap';
+import QuickValuesPlusVisualization from 'components/QuickValuesPlusVisualization';
 
 const QuickValuesPlusWidgetCreateConfiguration = React.createClass({
   propTypes: {
@@ -8,6 +9,7 @@ const QuickValuesPlusWidgetCreateConfiguration = React.createClass({
   },
 
   getInitialConfiguration() {
+
     return {
       top_values: 5,
       table_size: 50,

src/web/stores/QuickValuesPlusStore.jsx

@@ -16,7 +16,7 @@ export const QuickValuesPlusStore = Reflux.createStore({
     listenables: [QuickValuesPlusActions],
     getInitialState() {
     },
-    getQuickValues(field) {
+    getQuickValues(field, tableSize) {
         const originalSearchURLParams = SearchStore.getOriginalSearchURLParams();
         const streamId = SearchStore.searchInStream ? SearchStore.searchInStream.id : null;
         const rangeType = originalSearchURLParams.get('rangetype');
@@ -34,9 +34,11 @@ export const QuickValuesPlusStore = Reflux.createStore({
                 break;
         }
         let url = ApiRoutes.UniversalSearchApiController.fieldTerms(rangeType, originalSearchURLParams.get('q') || '*', field, timerange, streamId).url;
-        //alert("url is " + url);
         url = URLUtils.qualifyUrl(url);
-        //alert("URL2 is " + url);
+
+        //If it was set, append the optional Size parameter to the query.
+        if (tableSize !== undefined) url = url + "&size=" + tableSize;
+
         const promise = fetch('GET', url);
         promise.catch(function (error) {
             UserNotification.error('Loading quick values failed with status: ' + error, 'Could not load quick values');

webpack.config.js

@@ -4,4 +4,5 @@ const path = require('path');
 
 // Remember to use the same name here and in `getUniqueId()` in the java MetaData class
 module.exports = new PluginWebpackConfig('org.graylog.plugins.quickvaluesplus.QuickValuesPlusWidgetPlugin', loadBuildConfig(path.resolve(__dirname, './build.config')), {
+    test: /\.css$/, loader: "style-loader!css-loader"
 });