add options to show/hide search buttons when creating a widget (#32)

* add options to show/hide search buttons when creating a widget * fixed typo * also add options to remove open in new window button and exclude from query button * made defaults true not false
billmurrin · Jan 7, 2018 · a88f694 · a88f694
1 parent eb708fb
commit a88f694
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 22 deletions.
diff --git a/src/web/components/FieldQuickValuesPlus.jsx b/src/web/components/FieldQuickValuesPlus.jsx
@@ -35,8 +35,8 @@ const FieldQuickValuesPlus = React.createClass({
             dropdownIsOpen: false,
             loaded: false,
             data: [],
-            defaults: {top_values: 5, sort_order: "descending", table_size: 25, show_pie_chart: true, show_data_table: true},
-            quickValuesOptions: {top_values: 5, sort_order: "descending", table_size: 25, show_pie_chart: true, show_data_table: true}
+            defaults: {top_values: 5, sort_order: "descending", table_size: 25, show_pie_chart: true, show_data_table: true, display_add_to_search_button: true, display_remove_from_search_button: true, display_exclude_from_query_button: true, display_get_term_reply_in_new_window_button: true},
+            quickValuesOptions: {top_values: 5, sort_order: "descending", table_size: 25, show_pie_chart: true, show_data_table: true, display_add_to_search_button: true, display_remove_from_search_button: true, display_exclude_from_query_button: true, display_get_term_reply_in_new_window_button: true}
         };
     },
     style: style,
@@ -46,7 +46,7 @@ const FieldQuickValuesPlus = React.createClass({
     componentWillMount() {
         if (this.state.debug) console.log("In componentWillMount");
         this.setState({ dropdownIsOpen: false });
-        this.setState({quickValuesOptions: {top_values: 5, sort_order: "descending", table_size: 25, show_pie_chart: true, show_data_table: true}});
+        this.setState({quickValuesOptions: {top_values: 5, sort_order: "descending", table_size: 25, show_pie_chart: true, show_data_table: true, display_add_to_search_button: true, display_remove_from_search_button: true, display_exclude_from_query_button: true, display_get_term_reply_in_new_window_button: true}});
     },
 
     componentDidMount() {
@@ -125,7 +125,12 @@ const FieldQuickValuesPlus = React.createClass({
                         sort_order: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].sort_order,
                         table_size: this.state.configuration['org.graylog.plugins.quickvaluesplus.QuickValuesPlusPluginConfiguration'].table_size,
                         show_pie_chart: true,
-                        show_data_table: true
+                        show_data_table: true,
+                        display_add_to_search_button: true,
+                        display_remove_from_search_button: true,
+                        display_exclude_from_query_button: true,
+                        display_get_term_reply_in_new_window_button: true
+
                     },
                     loaded: true,
                 });
@@ -148,7 +153,12 @@ const FieldQuickValuesPlus = React.createClass({
                         sort_order: this.state.defaults.sort_order,
                         table_size: this.state.defaults.table_size,
                         show_pie_chart: true,
-                        show_data_table: true
+                        show_data_table: true,
+                        display_add_to_search_button: true,
+                        display_remove_from_search_button: true,
+                        display_exclude_from_query_button: true,
+                        display_get_term_reply_in_new_window_button: true
+
                     },
                 });
             }
@@ -233,8 +243,8 @@ const FieldQuickValuesPlus = React.createClass({
                                           data={this.state.data}
                                           horizontal
                                           displayAddToSearchButton
-                                          displayRemoveFromSearchButton
-                                          displayAnalysisInformation/>
+                                          displayRemoveFromSearchButton={this.state.quickValuesOptions.display_remove_from_search_button}
+                                          displayAnalysisInformation={this.state.quickValuesOptions.display_remove_from_search_button}/>
             );
         }
 
@@ -266,4 +276,4 @@ const FieldQuickValuesPlus = React.createClass({
     },
 });
 
-export default FieldQuickValuesPlus;
+export default FieldQuickValuesPlus;
diff --git a/src/web/components/QuickValuesPlusVisualization.jsx b/src/web/components/QuickValuesPlusVisualization.jsx
@@ -30,8 +30,6 @@ const QuickValuesPlusVisualization = React.createClass({
         height: PropTypes.any,
         horizontal: PropTypes.bool,
         displayAnalysisInformation: PropTypes.bool,
-        displayAddToSearchButton: PropTypes.bool,
-        displayRemoveFromSearchButton: PropTypes.bool,
     },
     getInitialState() {
         this.filters = [];
@@ -308,21 +306,21 @@ const QuickValuesPlusVisualization = React.createClass({
             (d) => NumberUtils.formatNumber(d.count),
         ];
 
-        if (this.props.displayAddToSearchButton) {
+        if (this.props.config.display_add_to_search_button == true ) {
             columns.push((d) => this._getAddToSearchButton(d.term));
         }
 
-        if (this.props.displayRemoveFromSearchButton) {
+        if (this.props.config.display_remove_from_search_button == true) {
             columns.push((d) => this._getRemoveFromSearchButton(d.term));
         }
 
         if (this.props.config.dashboardID) {
-            if (this.isPermitted(this.state.currentUser.permissions, [`dashboards:edit:${this.props.config.dashboardID}`])) {
+            if (this.isPermitted(this.state.currentUser.permissions, [`dashboards:edit:${this.props.config.dashboardID}`]) && this.props.config.display_exclude_from_query_button) {
                 columns.push((d) => this._getExcludeFromQueryButton(d.term));
             }
         }
 
-        if (this.props.config.field) {
+        if (this.props.config.field && this.props.config.display_get_term_reply_in_new_window_button) {
             columns.push((d) => {
                 //Properly format strings containing spaces, backslashes and colons.
                 let escTerm = this.escape(`${d.term}`);
@@ -607,14 +605,15 @@ const QuickValuesPlusVisualization = React.createClass({
                           <th style={{ width: '50%' }}>Value</th>
                           <th style={{ alignItems: 'center' }}>%</th>
                           <th style={{ alignItems: 'center' }}>#</th>
-                            {this.props.displayAddToSearchButton &&
+                            {this.props.config.display_add_to_search_button &&
                             <th style={{ width: 30 }}>&nbsp;</th>
                             }
-                            {this.props.displayRemoveFromSearchButton &&
+                            {this.props.config.display_remove_from_search_button &&
                             <th style={{ width: 30 }}>&nbsp;</th>
                             }
-                            {excludeQueryButton}
-                            {this.props.config.field &&
+                            {this.props.config.display_exclude_from_query_button &&
+                            excludeQueryButton}
+                            {(this.props.config.field && this.props.config.display_get_term_reply_in_new_window_button) &&
                             <th style={{ width: 28 }}>&nbsp;</th>
                             }
                         </tr>
@@ -629,4 +628,4 @@ const QuickValuesPlusVisualization = React.createClass({
     },
 });
 
-export default QuickValuesPlusVisualization;
+export default QuickValuesPlusVisualization;
diff --git a/src/web/components/QuickValuesPlusWidgetCreateConfiguration.jsx b/src/web/components/QuickValuesPlusWidgetCreateConfiguration.jsx
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react';
+ import React, {PropTypes} from 'react';
 import { Input } from 'components/bootstrap';
 
 const QuickValuesPlusWidgetCreateConfiguration = React.createClass({
@@ -14,6 +14,10 @@ const QuickValuesPlusWidgetCreateConfiguration = React.createClass({
       sort_order: 'descending',
       show_pie_chart: true,
       show_data_table: true,
+      display_add_to_search_button: true,
+      display_remove_from_search_button: true,
+      display_exclude_from_query_button: true,
+      display_get_term_reply_in_new_window_button: true,
     };
   },
 
@@ -38,7 +42,7 @@ const QuickValuesPlusWidgetCreateConfiguration = React.createClass({
                onChange={this.props.onChange}
                help="Modify the number of results in the table."/>
 
-          <label for="quickvaluesplus-sort-order-descending" class="control-label"><span>Sort Order</span></label>
+             <label for="quickvaluesplus-sort-order-descending" className="control-label"><span>Sort Order</span></label>
           <div className="radio">
               <label>
                   <input key="dataSortOrderDesc"  id="quickvaluesplus-sort-order-descending" type="radio" name="sort_order" value="descending"
@@ -73,6 +77,42 @@ const QuickValuesPlusWidgetCreateConfiguration = React.createClass({
                checked={this.props.config.show_data_table}
                onChange={this.props.onChange}
                help="Include a table with quantitative information." />
+
+        <Input key="displayAddToSearchButton"
+               type="checkbox"
+               id="quickvaluesplus-display-add-to-search-button"
+               name="display_add_to_search_button"
+               label="Display Add to Search Button"
+               checked={this.props.config.display_add_to_search_button}
+               onChange={this.props.onChange}
+               help="Column containing a add to search button." />
+
+        <Input key="displayRemoveFromSearchButton"
+               type="checkbox"
+               id="quickvaluesplus-display-remove-from-search-button"
+               name="display_remove_from_search_button"
+               label="Display Remove From Search Button"
+               checked={this.props.config.display_remove_from_search_button}
+               onChange={this.props.onChange}
+               help="Column containing a remove from search button." />
+
+         <Input key="displayExludeFromQueryButton"
+               type="checkbox"
+               id="quickvaluesplus-display-exclude-from-query-button"
+               name="display_exclude_from_query_button"
+               label="Display Exclude From Query Button"
+               checked={this.props.config.display_exclude_from_query_button}
+               onChange={this.props.onChange}
+               help="Column containing a exclude from Query button." />
+
+         <Input key="displayGetTermReplyInNewWindowButton"
+               type="checkbox"
+               id="quickvaluesplus-display-get-term-reply-in-new-window-button"
+               name="display_get_term_reply_in_new_window_button"
+               label="Display Get Term Reply In New Window Button"
+               checked={this.props.config.display_get_term_reply_in_new_window_button}
+               onChange={this.props.onChange}
+               help="Column containing a get term reply in new window button." />
       </fieldset>
     );
   },

diff --git a/src/web/components/QuickValuesPlusWidgetEditConfiguration.jsx b/src/web/components/QuickValuesPlusWidgetEditConfiguration.jsx
@@ -75,6 +75,42 @@ const QuickValuesPlusWidgetEditConfiguration = React.createClass({
                defaultChecked={this.props.config.show_data_table}
                onChange={this.props.onChange}
                help="Include a table with quantitative information."/>
+
+        <Input key="displayAddToSearchButton"
+               type="checkbox"
+               id="quickvaluesplus-display-add-to-search-button"
+               name="display_add_to_search_button"
+               label="Display Add to Search Button"
+               checked={this.props.config.display_add_to_search_button}
+               onChange={this.props.onChange}
+               help="Column containing a add to search button." />
+
+        <Input key="displayRemoveFromSearchButton"
+               type="checkbox"
+               id="quickvaluesplus-display-remove-from-search-button"
+               name="display_remove_from_search_button"
+               label="Display Remove From Search Button"
+               checked={this.props.config.display_remove_from_search_button}
+               onChange={this.props.onChange}
+               help="Column containing a remove from search button." />
+
+        <Input key="displayExludeFromQueryButton"
+               type="checkbox"
+               id="quickvaluesplus-display-exclude-from-query-button"
+               name="display_exclude_from_query_button"
+               label="Display Exclude From Query Button"
+               checked={this.props.config.display_exclude_from_query_button}
+               onChange={this.props.onChange}
+               help="Column containing a exclude from Query button." />
+
+        <Input key="displayGetTermReplyInNewWindowButton"
+               type="checkbox"
+               id="quickvaluesplus-display-get-term-reply-in-new-window-button"
+               name="display_get_term_reply_in_new_window_button"
+               label="Display Get Term Reply In New Window Button"
+               checked={this.props.config.display_get_term_reply_in_new_window_button}
+               onChange={this.props.onChange}
+               help="Column containing a get term reply in new window button." />
       </fieldset>
     );
   },

diff --git a/src/web/stores/QuickValuesPlusStore.jsx b/src/web/stores/QuickValuesPlusStore.jsx
@@ -50,4 +50,4 @@ export const QuickValuesPlusStore = Reflux.createStore({
 
         QuickValuesPlusActions.getQuickValues.promise(promise);
     },
-});
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,4 +50,4 @@ export const QuickValuesPlusStore = Reflux.createStore({ @@
             QuickValuesPlusActions.getQuickValues.promise(promise);
         },
-    });
+    });