diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js index 4eadd853b9..590b4eb8b5 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.js +++ b/ui/src/dashboards/components/CellEditorOverlay.js @@ -243,6 +243,20 @@ class CellEditorOverlay extends Component { text: `${s.name} @ ${s.url}`, })) + findSelectedSource = () => { + const {source} = this.props + const sources = this.formatSources + const query = _.get(this.state.queriesWorkingDraft, 0, false) + + if (!query || !query.source) { + const defaultSource = sources.find(s => s.id === source.id) + return (defaultSource && defaultSource.text) || 'No sources' + } + + const selected = sources.find(s => s.id === query.source.id) + return (selected && selected.text) || 'No sources' + } + render() { const { source, @@ -293,23 +307,24 @@ class CellEditorOverlay extends Component { /> {isDisplayOptionsTabActive ? { - const {source, sources} = this.props - const query = _.get(this.props.queryConfigs, 0, false) - - if (!query || !query.source) { - const defaultSource = sources.find(s => s.id === source.id) - return (defaultSource && defaultSource.text) || 'No sources' - } - - const selected = sources.find(s => s.id === query.source.id) - return (selected && selected.text) || 'No sources' - } - render() { const { - sources, onSetBase, onSetScale, onSetLabel, - onSetQuerySource, selectedGraphType, onSelectGraphType, onSetPrefixSuffix, @@ -64,22 +46,15 @@ class DisplayOptions extends Component { return (
-
- - -
+
-

Cell Editor

+
  • - Display Options + Options
@@ -41,7 +49,7 @@ const OverlayControls = ({
-const {func, bool} = PropTypes +const {arrayOf, bool, func, shape, string} = PropTypes OverlayControls.propTypes = { onCancel: func.isRequired, @@ -49,6 +57,9 @@ OverlayControls.propTypes = { isDisplayOptionsTabActive: bool.isRequired, onClickDisplayOptions: func.isRequired, isSavable: bool, + sources: arrayOf(shape()), + onSetQuerySource: func, + selected: string, } export default OverlayControls diff --git a/ui/src/dashboards/components/SourceSelector.js b/ui/src/dashboards/components/SourceSelector.js index 5cddcf1964..36ba1ccd84 100644 --- a/ui/src/dashboards/components/SourceSelector.js +++ b/ui/src/dashboards/components/SourceSelector.js @@ -2,23 +2,18 @@ import React, {PropTypes} from 'react' import Dropdown from 'shared/components/Dropdown' const SourceSelector = ({sources = [], selected, onSetQuerySource}) => -
-
InfluxDB Source Selector
-
- - -
+
+ {sources.length > 1 + ? + : null}
const {arrayOf, func, shape, string} = PropTypes diff --git a/ui/src/shared/components/LayoutCellHeader.js b/ui/src/shared/components/LayoutCellHeader.js index ad028e0fb3..2944533892 100644 --- a/ui/src/shared/components/LayoutCellHeader.js +++ b/ui/src/shared/components/LayoutCellHeader.js @@ -1,5 +1,4 @@ import React, {PropTypes} from 'react' -import classnames from 'classnames' import _ from 'lodash' import CustomTimeIndicator from 'shared/components/CustomTimeIndicator' diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index d7ec2232fc..2be5b0290f 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -50,6 +50,7 @@ @import 'components/resizer'; @import 'components/search-widget'; @import 'components/source-indicator'; +@import 'components/source-selector'; @import 'components/tables'; // Pages diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss index e0abc0a2fe..44d77270d5 100644 --- a/ui/src/style/components/ceo-display-options.scss +++ b/ui/src/style/components/ceo-display-options.scss @@ -27,9 +27,6 @@ color: $g11-sidewalk; @include no-user-select(); } -.y-axis-controls { - margin-bottom: 8px; -} .viz-type-selector { display: flex; flex-wrap: wrap; diff --git a/ui/src/style/components/source-selector.scss b/ui/src/style/components/source-selector.scss new file mode 100644 index 0000000000..87739d863a --- /dev/null +++ b/ui/src/style/components/source-selector.scss @@ -0,0 +1,11 @@ +/* + Source Selector component styles + ---------------------------------------------------------------- +*/ + +.source-selector { + display: flex; + align-items: center; + flex-wrap: nowrap; + flex: 1 0 0; +} diff --git a/ui/src/style/pages/overlay-technology.scss b/ui/src/style/pages/overlay-technology.scss index 74c7fa6e6a..8cc608ac2d 100644 --- a/ui/src/style/pages/overlay-technology.scss +++ b/ui/src/style/pages/overlay-technology.scss @@ -44,10 +44,21 @@ $overlay-z: 100; border: 0; background-color: $g2-kevlar; } + .overlay-controls .nav-tablist { + width: 200px; + + li { + white-space: nowrap; + justify-content: center; + flex: 1 0 50%; + } + } .overlay-controls--right { display: flex; align-items: center; flex-wrap: nowrap; + justify-content: flex-end; + flex: 1 0 0; .toggle { margin: 0 0 0 5px;