From 4cf804c8b6d60c237a9b1634a6517160aaf98803 Mon Sep 17 00:00:00 2001
From: fxmiii <51002364+fxmiii@users.noreply.github.com>
Date: Wed, 14 Aug 2019 09:15:42 -0400
Subject: [PATCH] Prometheus: Fix regression of rerunning query on
 legend/interval change (#18147)

* Rerun query on input changes

Added "this.onRunQuery" for update of the input fields so that the panel updates when changed

* typo in comment

changed "fullu" to "fully"

* modified to onBlur for legend, interval

legend and interval (min step) now call for query re-run when they go 'onBlur' instead of 'onChange'

* PromQueryEditor: Updated snapshot
---
 .../datasource/prometheus/components/PromQueryEditor.tsx      | 4 +++-
 .../components/__snapshots__/PromQueryEditor.test.tsx.snap    | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
index e3fff4a7d2a..8cccca92b95 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
@@ -39,7 +39,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
     super(props);
     const { query } = props;
     this.query = query;
-    // Query target properties that are fullu controlled inputs
+    // Query target properties that are fully controlled inputs
     this.state = {
       // Fully controlled text inputs
       interval: query.interval,
@@ -123,6 +123,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
               placeholder="legend format"
               value={legendFormat}
               onChange={this.onLegendChange}
+              onBlur={this.onRunQuery}
             />
           </div>
 
@@ -140,6 +141,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
               className="gf-form-input width-8"
               placeholder={interval}
               onChange={this.onIntervalChange}
+              onBlur={this.onRunQuery}
               value={interval}
             />
           </div>
diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
index 184648c1cc8..4637e44ab74 100644
--- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
       </Component>
       <input
         className="gf-form-input"
+        onBlur={[Function]}
         onChange={[Function]}
         placeholder="legend format"
         type="text"
@@ -53,6 +54,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
       </Component>
       <input
         className="gf-form-input width-8"
+        onBlur={[Function]}
         onChange={[Function]}
         type="text"
       />