feat(ui/flux): detect custom script

pull/5895/head
Pavel Zavora 2022-03-21 06:24:36 +01:00
parent 6a5794d09d
commit d5b0b92437
2 changed files with 15 additions and 2 deletions

View File

@ -90,6 +90,7 @@ class FluxQueryMaker extends PureComponent<Props, State> {
fluxProportions, fluxProportions,
onSetFluxProportions, onSetFluxProportions,
timeRange, timeRange,
script,
} = this.props } = this.props
if (!this.state.isWizardActive) { if (!this.state.isWizardActive) {
const {suggestions, draftScriptStatus} = this.state const {suggestions, draftScriptStatus} = this.state
@ -172,6 +173,7 @@ class FluxQueryMaker extends PureComponent<Props, State> {
return ( return (
<FluxQueryBuilder <FluxQueryBuilder
script={script}
source={source} source={source}
timeRange={timeRange} timeRange={timeRange}
onSubmit={this.handleSubmitBuilderScript} onSubmit={this.handleSubmitBuilderScript}

View File

@ -32,7 +32,7 @@ import {timeRangeLabel} from '../../TimeRangeLabel'
interface OwnProps extends TimeMachineQueryProps { interface OwnProps extends TimeMachineQueryProps {
onSubmit: (script: string) => void onSubmit: (script: string) => void
onShowEditor: () => void onShowEditor: () => void
isRunnable: boolean script: string
} }
type Props = OwnProps & typeof mdtp & ReturnType<typeof mstp> type Props = OwnProps & typeof mdtp & ReturnType<typeof mstp>
@ -48,6 +48,7 @@ const FluxQueryBuilder = ({
onSubmit, onSubmit,
onShowEditor, onShowEditor,
onAddTagSelector, onAddTagSelector,
script: editorScript,
}: Props) => { }: Props) => {
const [defaultPeriod, timeRangeText] = useMemo( const [defaultPeriod, timeRangeText] = useMemo(
() => [ () => [
@ -56,6 +57,14 @@ const FluxQueryBuilder = ({
], ],
[timeRange, timeZone] [timeRange, timeZone]
) )
// isCustomScript detects if the supplied script contains user changes
const isCustomScript = useMemo(() => {
if (!editorScript) {
return false
}
const builtScript = buildQuery(builderState)
return editorScript !== builtScript
}, [editorScript])
return ( return (
<div className="flux-query-builder" data-testid="flux-query-builder"> <div className="flux-query-builder" data-testid="flux-query-builder">
@ -130,7 +139,9 @@ const FluxQueryBuilder = ({
/> />
<Button <Button
size={ComponentSize.ExtraSmall} size={ComponentSize.ExtraSmall}
color={ComponentColor.Primary} color={
isCustomScript ? ComponentColor.Warning : ComponentColor.Primary
}
onClick={() => { onClick={() => {
try { try {
const script = buildQuery(builderState) const script = buildQuery(builderState)