diff --git a/graylog2-web-interface/public/stylesheets/graylog2.less b/graylog2-web-interface/public/stylesheets/graylog2.less index ea9c02b78b98..17db30035c09 100644 --- 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 new file mode 100644 index 000000000000..00b358c77bc0 --- /dev/null +++ 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 index 272e6d9868ba..e386031f26c8 100644 --- 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 (
- - {dropdownMenu} - -
- {this.props.children} -
-
+ + + {addToDashboardMenu} + {appendMenus} + + + {children} + Show as histogram; widgetType = this.WIDGET_TYPE; } + const menus = ( + + Configuration + {toggleVizType} + + ); + content = (
@@ -229,15 +240,9 @@ const FieldQuickValues = React.createClass({ widgetType={widgetType} configuration={this._buildDashboardConfig(this.state.showHistogram)} pullRight - permissions={this.props.permissions}> - - Configuration - {toggleVizType} - - + permissions={this.props.permissions} + appendMenus={menus}> +

Quick Values for {this.state.field} {this.state.loadPending && - - +

Field Statistics

diff --git a/graylog2-web-interface/src/components/field-analyzers/LegacyFieldGraph.jsx b/graylog2-web-interface/src/components/field-analyzers/LegacyFieldGraph.jsx index 0844bdf4195e..829bbcb0d1e5 100644 --- 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 = ( + + {submenus} + + ); + return (
- - {submenus} - - + permissions={this.props.permissions} + appendMenus={menus}> + {/* It needs to be an anchor to properly work as a draggable handle */} - +

{this._getGraphTitle()}