From 9fb249a5b9aa9ad3542fad4a1659b22fc1b2b4f9 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Wed, 2 Feb 2022 15:20:34 +0100
Subject: [PATCH] feat(fluxWizard): submit wizard query

---
 .../components/TimeMachine/FluxQueryMaker.tsx   | 12 ++++--------
 .../fluxQueryBuilder/FluxQueryBuilder.tsx       | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx b/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
index 2beaeba24..396402c60 100644
--- a/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
+++ b/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
@@ -118,7 +118,7 @@ class FluxQueryMaker extends PureComponent<Props, State> {
             <Button
               key={1}
               text={'Run Script'}
-              onClick={this.handleSubmitScript}
+              onClick={() => this.handleSubmitScript()}
               size={ComponentSize.ExtraSmall}
               color={ComponentColor.Primary}
             />,
@@ -194,14 +194,10 @@ class FluxQueryMaker extends PureComponent<Props, State> {
     this.handleCursorPosition(cursorPosition)
   }
 
-  private handleSubmitScript = () => {
-    const {
-      onChangeScript,
-      onUpdateStatus,
-      onManualRefresh,
-      draftScript,
-    } = this.props
+  private handleSubmitScript = (script?: string) => {
+    const {onChangeScript, onUpdateStatus, onManualRefresh} = this.props
     const {draftScriptStatus} = this.state
+    const draftScript = script ? script : this.props.draftScript
 
     onChangeScript(draftScript)
     onManualRefresh()
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
index cee36e856..02eb42f64 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
@@ -18,6 +18,7 @@ import AggregationSelector from './AggregationSelector'
 import TagSelector from './TagSelector'
 import {notify as notifyActionCreator} from 'src/shared/actions/notifications'
 import {
+  fluxWizardError,
   notifyCopyToClipboardFailed,
   notifyCopyToClipboardSuccess,
 } from 'src/shared/copy/notifications'
@@ -28,7 +29,7 @@ import {RemoteDataState} from 'src/types'
 import {buildQuery} from './util/generateFlux'
 
 interface OwnProps extends TimeMachineQueryProps {
-  onSubmit: () => void
+  onSubmit: (script: string) => void
   onShowEditor: () => void
   isRunnable: boolean
 }
@@ -123,7 +124,19 @@ const FluxQueryBuilder = ({
             <Button
               size={ComponentSize.ExtraSmall}
               color={ComponentColor.Primary}
-              onClick={onSubmit}
+              onClick={() => {
+                try {
+                  const script = buildQuery(builderState)
+                  onSubmit(script)
+                } catch (ex) {
+                  console.error(ex)
+                  notify(
+                    fluxWizardError(
+                      'Unable to build flux script: ' + ex.message
+                    )
+                  )
+                }
+              }}
               status={
                 isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled
               }