Improvements in unified analyzer menus (#4280)

* Fix styling of unified analyzer buttons Fixes #4230 * Open analyzer menus to the left Dropdown menus on the unified analyzer menus open currently to the right, but they are very close to the edge of the window and will be cropped. This commit changes that by opening menus to the left.
Graylog2 · Oct 24, 2017 · f09054a · f09054a
1 parent bcf609e
commit f09054a
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 35 deletions.
diff --git a/graylog2-web-interface/public/stylesheets/graylog2.less b/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;
 }

diff --git a/graylog2-web-interface/src/components/dashboard/AddToDashboardMenu.css b/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;
+}
diff --git a/graylog2-web-interface/src/components/dashboard/AddToDashboardMenu.jsx b/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}

diff --git a/graylog2-web-interface/src/components/field-analyzers/FieldQuickValues.jsx b/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

diff --git a/graylog2-web-interface/src/components/field-analyzers/FieldStatistics.jsx b/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>

diff --git a/graylog2-web-interface/src/components/field-analyzers/LegacyFieldGraph.jsx b/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>