Move source selector to OverlayControls

This move accomplishes a few things
1) It looks nicer
2) Can take advantage of the query error handling UI
3) Gives plenty of room for the dropdown

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 {
           />
           <CEOBottom>
             <OverlayControls
+              onCancel={onCancel}
+              sources={this.formatSources}
+              onSave={this.handleSaveCell}
+              selected={this.findSelectedSource()}
+              onSetQuerySource={this.handleSetQuerySource}
+              isSavable={queriesWorkingDraft.every(isQuerySavable)}
               isDisplayOptionsTabActive={isDisplayOptionsTabActive}
               onClickDisplayOptions={this.handleClickDisplayOptionsTab}
-              onCancel={onCancel}
-              onSave={this.handleSaveCell}
-              isSavable={queriesWorkingDraft.every(isQuerySavable)}
             />
             {isDisplayOptionsTabActive
               ? <DisplayOptions
                   axes={axes}
                   source={source}
-                  sources={this.formatSources}
                   onSetBase={this.handleSetBase}
                   onSetLabel={this.handleSetLabel}
                   onSetScale={this.handleSetScale}
                   queryConfigs={queriesWorkingDraft}
                   selectedGraphType={cellWorkingType}
-                  onSetQuerySource={this.handleSetQuerySource}
                   onSetPrefixSuffix={this.handleSetPrefixSuffix}
                   onSelectGraphType={this.handleSelectGraphType}
                   onSetYAxisBoundMin={this.handleSetYAxisBoundMin}

ui/src/dashboards/components/DisplayOptions.js

@@ -2,9 +2,6 @@ import React, {Component, PropTypes} from 'react'
 
 import GraphTypeSelector from 'src/dashboards/components/GraphTypeSelector'
 import AxesOptions from 'src/dashboards/components/AxesOptions'
-import SourceSelector from 'src/dashboards/components/SourceSelector'
-
-import _ from 'lodash'
 
 import {buildDefaultYLabel} from 'shared/presenters'
 
@@ -34,26 +31,11 @@ class DisplayOptions extends Component {
       : axes
   }
 
-  findSelectedSource = () => {
-    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 (
       <div className="display-options">
-        <div style={{display: 'flex', flexDirection: 'column', flex: 1}}>
+        <AxesOptions
-          <AxesOptions
+          axes={axes}
-            axes={axes}
+          onSetBase={onSetBase}
-            onSetBase={onSetBase}
+          onSetLabel={onSetLabel}
-            onSetLabel={onSetLabel}
+          onSetScale={onSetScale}
-            onSetScale={onSetScale}
+          onSetPrefixSuffix={onSetPrefixSuffix}
-            onSetPrefixSuffix={onSetPrefixSuffix}
+          onSetYAxisBoundMin={onSetYAxisBoundMin}
-            onSetYAxisBoundMin={onSetYAxisBoundMin}
+          onSetYAxisBoundMax={onSetYAxisBoundMax}
-            onSetYAxisBoundMax={onSetYAxisBoundMax}
+        />
-          />
-          <SourceSelector
-            sources={sources}
-            onSetQuerySource={onSetQuerySource}
-            selected={this.findSelectedSource()}
-          />
-        </div>
         <GraphTypeSelector
           selectedGraphType={selectedGraphType}
           onSelectGraphType={onSelectGraphType}
@@ -91,13 +66,11 @@ class DisplayOptions extends Component {
 const {arrayOf, func, shape, string} = PropTypes
 
 DisplayOptions.propTypes = {
-  sources: arrayOf(shape()).isRequired,
   selectedGraphType: string.isRequired,
   onSelectGraphType: func.isRequired,
   onSetPrefixSuffix: func.isRequired,
   onSetYAxisBoundMin: func.isRequired,
   onSetYAxisBoundMax: func.isRequired,
-  onSetQuerySource: func.isRequired,
   onSetScale: func.isRequired,
   onSetLabel: func.isRequired,
   onSetBase: func.isRequired,

ui/src/dashboards/components/OverlayControls.js

@@ -2,16 +2,24 @@ import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
+import SourceSelector from 'src/dashboards/components/SourceSelector'
 
 const OverlayControls = ({
-  onCancel,
   onSave,
+  sources,
+  selected,
+  onCancel,
+  isSavable,
+  onSetQuerySource,
   isDisplayOptionsTabActive,
   onClickDisplayOptions,
-  isSavable,
 }) =>
   <div className="overlay-controls">
-    <h3 className="overlay--graph-name">Cell Editor</h3>
+    <SourceSelector
+      sources={sources}
+      selected={selected}
+      onSetQuerySource={onSetQuerySource}
+    />
     <ul className="nav nav-tablist nav-tablist-sm">
       <li
         key="queries"
@@ -29,7 +37,7 @@ const OverlayControls = ({
         })}
         onClick={onClickDisplayOptions(true)}
       >
-        Display Options
+        Options
       </li>
     </ul>
     <div className="overlay-controls--right">
@@ -41,7 +49,7 @@ const OverlayControls = ({
     </div>
   </div>
 
-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

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}) =>
-  <div className="display-options--cell">
+  <div className="source-selector">
-    <h5 className="display-options--header">InfluxDB Source Selector</h5>
+    {sources.length > 1
-    <div
+      ? <Dropdown
-      className="form-group col-md-12"
+          items={sources}
-      style={{display: 'flex', flexDirection: 'column'}}
+          buttonSize="btn-sm"
-    >
+          menuClass="dropdown-astronaut"
-      <label>Using data from</label>
+          useAutoComplete={true}
-      <Dropdown
+          selected={selected}
-        items={sources}
+          onChoose={onSetQuerySource}
-        buttonSize="btn-sm"
+          className="dropdown-240"
-        menuClass="dropdown-astronaut"
+        />
-        useAutoComplete={true}
+      : null}
-        selected={selected}
-        onChoose={onSetQuerySource}
-        toggleStyle={{width: '50%', maxWidth: '300px'}}
-      />
-    </div>
   </div>
 
 const {arrayOf, func, shape, string} = PropTypes

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'

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

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;

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;
+}

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;