Add tooltip for dynamic source that does not support flux

pull/4407/head
Alirie Gray 2018-09-10 14:59:57 -07:00
parent cef576a829
commit ef51935e8d
2 changed files with 35 additions and 27 deletions

View File

@ -1,9 +1,10 @@
// Libraries // Libraries
import React, {SFC} from 'react' import React, {SFC} from 'react'
// Componentes // Components
import SourceDropdown from 'src/flux/components/SourceDropdown' import SourceDropdown from 'src/flux/components/SourceDropdown'
import {Radio} from 'src/reusable_ui' import {Radio} from 'src/reusable_ui'
import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
// Types // Types
import * as QueriesModels from 'src/types/queries' import * as QueriesModels from 'src/types/queries'
@ -55,28 +56,36 @@ const SourceSelector: SFC<Props> = ({
onChangeService={onChangeService} onChangeService={onChangeService}
onSelectDynamicSource={onSelectDynamicSource} onSelectDynamicSource={onSelectDynamicSource}
/> />
{isDynamicSourceSelected && (
<Radio>
<Radio.Button
id="flux-source"
titleText="Flux"
value="Flux"
onClick={toggleFlux}
active={isFluxSource}
disabled={!sourceSupportsFlux}
>
Flux
</Radio.Button>
<Radio.Button
id="influxql-source"
titleText="InfluxQL"
value="InfluxQL"
onClick={toggleFlux}
active={!isFluxSource}
disabled={!sourceSupportsFlux}
>
InfluxQL
</Radio.Button>
</Radio>
)}
{isDynamicSourceSelected && {isDynamicSourceSelected &&
sourceSupportsFlux && ( !sourceSupportsFlux && (
<Radio> <QuestionMarkTooltip
<Radio.Button tipID="token"
id="flux-source" tipContent={`<p>The current source does not support Flux.</p>`}
titleText="Flux" />
value="Flux"
onClick={toggleFlux}
active={isFluxSource}
>
Flux
</Radio.Button>
<Radio.Button
id="influxql-source"
titleText="InfluxQL"
value="InfluxQL"
onClick={toggleFlux}
active={!isFluxSource}
>
InfluxQL
</Radio.Button>
</Radio>
)} )}
</div> </div>
) )

View File

@ -405,16 +405,15 @@ class TimeMachine extends PureComponent<Props, State> {
private get source(): Source { private get source(): Source {
const {source, sources, queryDrafts} = this.props const {source, sources, queryDrafts} = this.props
const {selectedSource, useDynamicSource} = this.state const {selectedSource, useDynamicSource} = this.state
if (selectedSource) {
return selectedSource
}
// return current source // return current source
if (useDynamicSource) { if (useDynamicSource) {
return source return source
} }
if (selectedSource) {
return selectedSource
}
const queryDraft = _.get(queryDrafts, 0) const queryDraft = _.get(queryDrafts, 0)
const querySource = _.get(queryDraft, 'source') const querySource = _.get(queryDraft, 'source')