Improvements in unified analyzer menus

graylog2-web-interface/public/stylesheets/graylog2.less

@@ -1413,7 +1413,6 @@ table .dc-table-column {
 
 .field-graph-container .reposition-handle {
   cursor: move;
-  margin-left: 10px !important;
 }
 
 .field-graph-container .merge-hint {
@@ -2649,10 +2648,6 @@ ul.pill-list > li {
   margin-top: 10px !important;
 }
 
-.field-analyzer-close {
-  margin-left: 10px !important;
-}
-
 .save-button-margin {
   margin-right: 5px;
 }

graylog2-web-interface/src/components/dashboard/AddToDashboardMenu.css

@@ -0,0 +1,11 @@
+:local(.toolbar) .btn,
+:local(.toolbar) .btn-group,
+:local(.toolbar) .input-group {
+    float: none;
+}
+
+:local(.toolbar) > .btn:not(:first-child),
+:local(.toolbar) > .btn-group:not(:first-child),
+:local(.toolbar) > .input-group:not(:first-child) {
+    margin-left: 10px;
+}

graylog2-web-interface/src/components/dashboard/AddToDashboardMenu.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Reflux from 'reflux';
-import { ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';
+import { ButtonGroup, ButtonToolbar, DropdownButton, MenuItem } from 'react-bootstrap';
 import Immutable from 'immutable';
 
 import CombinedProvider from 'injection/CombinedProvider';
@@ -15,6 +15,8 @@ import PermissionsMixin from 'util/PermissionsMixin';
 import { WidgetCreationModal } from 'components/widgets';
 import { EditDashboardModal } from 'components/dashboard';
 
+import style from './AddToDashboardMenu.css';
+
 const AddToDashboardMenu = React.createClass({
   propTypes: {
     widgetType: PropTypes.string.isRequired,
@@ -25,6 +27,10 @@ const AddToDashboardMenu = React.createClass({
     fields: PropTypes.array,
     hidden: PropTypes.bool,
     pullRight: PropTypes.bool,
+    appendMenus: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.element),
+      PropTypes.element,
+    ]),
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.element),
       PropTypes.element,
@@ -170,22 +176,25 @@ const AddToDashboardMenu = React.createClass({
     );
   },
   render() {
-    let dropdownMenu;
+    let addToDashboardMenu;
     if (this.state.dashboards === undefined) {
-      dropdownMenu = this._renderLoadingDashboardsMenu();
+      addToDashboardMenu = this._renderLoadingDashboardsMenu();
     } else {
-      dropdownMenu = (!this.props.hidden && (this.state.dashboards.size > 0 ? this._renderDashboardMenu() : this._renderNoDashboardsMenu()));
+      addToDashboardMenu = (!this.props.hidden && (this.state.dashboards.size > 0 ? this._renderDashboardMenu() : this._renderNoDashboardsMenu()));
     }
 
+    const { appendMenus, children } = this.props;
+
     return (
       <div style={{ display: 'inline-block' }}>
-        <ButtonGroup>
-          {dropdownMenu}
-
-          <div style={{ display: 'inline' }}>
-            {this.props.children}
-          </div>
-        </ButtonGroup>
+        <ButtonToolbar className={style.toolbar}>
+          <ButtonGroup>
+            {addToDashboardMenu}
+            {appendMenus}
+          </ButtonGroup>
+
+          {children}
+        </ButtonToolbar>
         <WidgetCreationModal ref="widgetModal"
                              widgetType={this.props.widgetType}
                              onConfigurationSaved={this._saveWidget}

graylog2-web-interface/src/components/field-analyzers/FieldQuickValues.jsx

@@ -222,22 +222,27 @@ const FieldQuickValues = React.createClass({
         toggleVizType = <MenuItem onSelect={this._showHistogram}>Show as histogram</MenuItem>;
         widgetType = this.WIDGET_TYPE;
       }
+      const menus = (
+        <DropdownButton bsSize="small"
+                        className="graph-settings"
+                        title="Customize"
+                        id="customize-field-graph-dropdown"
+                        pullRight>
+          <MenuItem onSelect={this._showVizOptions}>Configuration</MenuItem>
+          {toggleVizType}
+        </DropdownButton>
+      );
+
       content = (
         <div className="content-col">
           <div className="pull-right">
             <AddToDashboardMenu title="Add to dashboard"
                                 widgetType={widgetType}
                                 configuration={this._buildDashboardConfig(this.state.showHistogram)}
                                 pullRight
-                                permissions={this.props.permissions}>
-              <DropdownButton bsSize="small"
-                              className="graph-settings"
-                              title="Customize"
-                              id="customize-field-graph-dropdown">
-                <MenuItem onSelect={this._showVizOptions}>Configuration</MenuItem>
-                {toggleVizType}
-              </DropdownButton>
-              <Button bsSize="small" className="field-analyzer-close" onClick={() => this._resetStatus()}><i className="fa fa-close" /></Button>
+                                permissions={this.props.permissions}
+                                appendMenus={menus}>
+              <Button bsSize="small" onClick={() => this._resetStatus()}><i className="fa fa-close" /></Button>
             </AddToDashboardMenu>
           </div>
           <h1>Quick Values for <em>{this.state.field}</em> {this.state.loadPending && <i

graylog2-web-interface/src/components/field-analyzers/FieldStatistics.jsx

@@ -167,8 +167,7 @@ const FieldStatistics = React.createClass({
                                 fields={this.state.fieldStatistics.keySeq().toJS()}
                                 pullRight
                                 permissions={this.props.permissions}>
-
-              <Button bsSize="small" className="field-analyzer-close" onClick={() => this._resetStatus()}><i className="fa fa-close" /></Button>
+              <Button bsSize="small" onClick={() => this._resetStatus()}><i className="fa fa-close" /></Button>
             </AddToDashboardMenu>
           </div>
           <h1>Field Statistics</h1>

graylog2-web-interface/src/components/field-analyzers/LegacyFieldGraph.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Button, DropdownButton, MenuItem } from 'react-bootstrap';
+import { Button, ButtonGroup, DropdownButton } from 'react-bootstrap';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import AddToDashboardMenu from 'components/dashboard/AddToDashboardMenu';
@@ -105,6 +105,12 @@ const LegacyFieldGraph = React.createClass({
       );
     }
 
+    const menus = (
+      <DropdownButton bsSize="small" className="graph-settings" title="Customize" id="customize-field-graph-dropdown" pullRight>
+        {submenus}
+      </DropdownButton>
+    );
+
     return (
       <div ref="fieldGraphContainer"
            style={{ display: this.props.hidden ? 'none' : 'block' }}
@@ -119,12 +125,9 @@ const LegacyFieldGraph = React.createClass({
                               widgetType={this._getWidgetType()}
                               configuration={this._getWidgetConfiguration()}
                               pullRight
-                              permissions={this.props.permissions}>
-            <DropdownButton bsSize="small" className="graph-settings" title="Customize"
-                            id="customize-field-graph-dropdown">
-              {submenus}
-            </DropdownButton>
-
+                              permissions={this.props.permissions}
+                              appendMenus={menus}>
+            {/* It needs to be an anchor to properly work as a draggable handle */}
             <Button href="#"
                     bsSize="small"
                     className="reposition-handle"
@@ -133,7 +136,7 @@ const LegacyFieldGraph = React.createClass({
               <i className="fa fa-reorder" />
             </Button>
 
-            <Button bsSize="small" className="field-analyzer-close" onClick={this.props.onDelete}><i className="fa fa-close" /></Button>
+            <Button bsSize="small" onClick={this.props.onDelete}><i className="fa fa-close" /></Button>
           </AddToDashboardMenu>
         </div>
         <h1>{this._getGraphTitle()}</h1>