WIP Introduce SourceSelector component

pull/10616/head
Andrew Watkins 2017-09-13 10:41:39 -07:00
parent f1fc9640d8
commit f5b034c98c
5 changed files with 49 additions and 11 deletions

View File

@ -224,6 +224,7 @@ class CellEditorOverlay extends Component {
render() {
const {
source,
sources,
onCancel,
templates,
timeRange,
@ -280,6 +281,8 @@ class CellEditorOverlay extends Component {
{isDisplayOptionsTabActive
? <DisplayOptions
axes={axes}
source={source}
sources={sources}
onSetBase={this.handleSetBase}
onSetLabel={this.handleSetLabel}
onSetScale={this.handleSetScale}
@ -343,6 +346,7 @@ CellEditorOverlay.propTypes = {
status: shape({}),
}).isRequired,
dashboardID: string.isRequired,
sources: arrayOf(shape()),
}
CEOBottom.propTypes = {

View File

@ -2,6 +2,7 @@ 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 {buildDefaultYLabel} from 'shared/presenters'
@ -31,6 +32,8 @@ class DisplayOptions extends Component {
: axes
}
formatSources = this.props.sources.map(s => ({...s, text: s.name}))
render() {
const {
onSetBase,
@ -46,15 +49,18 @@ class DisplayOptions extends Component {
return (
<div className="display-options">
<AxesOptions
axes={axes}
onSetBase={onSetBase}
onSetLabel={onSetLabel}
onSetScale={onSetScale}
onSetPrefixSuffix={onSetPrefixSuffix}
onSetYAxisBoundMin={onSetYAxisBoundMin}
onSetYAxisBoundMax={onSetYAxisBoundMax}
/>
<div className="foo" style={{display: 'flex', flexDirection: 'row'}}>
<AxesOptions
axes={axes}
onSetBase={onSetBase}
onSetLabel={onSetLabel}
onSetScale={onSetScale}
onSetPrefixSuffix={onSetPrefixSuffix}
onSetYAxisBoundMin={onSetYAxisBoundMin}
onSetYAxisBoundMax={onSetYAxisBoundMax}
/>
<SourceSelector sources={this.formatSources} />
</div>
<GraphTypeSelector
selectedGraphType={selectedGraphType}
onSelectGraphType={onSelectGraphType}
@ -66,6 +72,7 @@ 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,

View File

@ -0,0 +1,23 @@
import React, {PropTypes} from 'react'
import Dropdown from 'src/shared/components/Dropdown'
const SourceSelector = ({sources = []}) =>
<div className="display-options--cell">
<h5 className="display-options--header">Source Selector</h5>
<div className="form-group col-sm-12">
<Dropdown
onChoose={() => {}}
items={sources}
selected={sources[0].text}
/>
</div>
</div>
const {arrayOf, shape} = PropTypes
SourceSelector.propTypes = {
sources: arrayOf(shape()).isRequired,
}
export default SourceSelector

View File

@ -190,6 +190,7 @@ class DashboardPage extends Component {
const {
source,
sources,
timeRange,
timeRange: {lower, upper},
showTemplateControlBar,
@ -277,6 +278,7 @@ class DashboardPage extends Component {
{selectedCell
? <CellEditorOverlay
source={source}
sources={sources}
cell={selectedCell}
timeRange={timeRange}
autoRefresh={autoRefresh}
@ -324,6 +326,7 @@ class DashboardPage extends Component {
{dashboard
? <Dashboard
source={source}
sources={sources}
dashboard={dashboard}
timeRange={timeRange}
autoRefresh={autoRefresh}
@ -406,6 +409,7 @@ DashboardPage.propTypes = {
status: shape(),
}).isRequired,
errorThrown: func,
sources: arrayOf(shape()),
}
const mapStateToProps = state => {
@ -415,6 +419,7 @@ const mapStateToProps = state => {
persisted: {autoRefresh, showTemplateControlBar},
},
dashboardUI: {dashboards, timeRange, cellQueryStatus},
sources,
} = state
return {
@ -424,6 +429,7 @@ const mapStateToProps = state => {
showTemplateControlBar,
inPresentationMode,
cellQueryStatus,
sources,
}
}

View File

@ -17,8 +17,6 @@
padding: 30px;
flex: 1 0 0;
margin-right: 8px;
&:last-child { margin-right: 0; }
}
.display-options--cellx2 {
flex: 2 0 0;