From 0cd89e80cae8620c116b865255943bd6524f57b7 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Tue, 23 Oct 2018 15:51:14 +0200
Subject: [PATCH] Submit query when enabling result viewer

---
 public/app/features/explore/Explore.tsx | 61 +++++++++++++++++++++++--
 public/app/types/explore.ts             |  6 ++-
 2 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index ed54fa3f6e9..ee725406c63 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -3,7 +3,15 @@ import { hot } from 'react-hot-loader';
 import Select from 'react-select';
 import _ from 'lodash';
 
-import { ExploreState, ExploreUrlState, HistoryItem, Query, QueryTransaction, Range } from 'app/types/explore';
+import {
+  ExploreState,
+  ExploreUrlState,
+  HistoryItem,
+  Query,
+  QueryTransaction,
+  Range,
+  ResultType,
+} from 'app/types/explore';
 import kbn from 'app/core/utils/kbn';
 import colors from 'app/core/utils/colors';
 import store from 'app/core/store';
@@ -306,11 +314,41 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   };
 
   onClickGraphButton = () => {
-    this.setState(state => ({ showingGraph: !state.showingGraph }));
+    this.setState(
+      state => {
+        const showingGraph = !state.showingGraph;
+        let nextQueryTransactions = state.queryTransactions;
+        if (!showingGraph) {
+          // Discard transactions related to Graph query
+          nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph');
+        }
+        return { queryTransactions: nextQueryTransactions, showingGraph };
+      },
+      () => {
+        if (this.state.showingGraph) {
+          this.onSubmit();
+        }
+      }
+    );
   };
 
   onClickLogsButton = () => {
-    this.setState(state => ({ showingLogs: !state.showingLogs }));
+    this.setState(
+      state => {
+        const showingLogs = !state.showingLogs;
+        let nextQueryTransactions = state.queryTransactions;
+        if (!showingLogs) {
+          // Discard transactions related to Logs query
+          nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs');
+        }
+        return { queryTransactions: nextQueryTransactions, showingLogs };
+      },
+      () => {
+        if (this.state.showingLogs) {
+          this.onSubmit();
+        }
+      }
+    );
   };
 
   onClickSplit = () => {
@@ -322,7 +360,22 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   };
 
   onClickTableButton = () => {
-    this.setState(state => ({ showingTable: !state.showingTable }));
+    this.setState(
+      state => {
+        const showingTable = !state.showingTable;
+        let nextQueryTransactions = state.queryTransactions;
+        if (!showingTable) {
+          // Discard transactions related to Table query
+          nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Table');
+        }
+        return { queryTransactions: nextQueryTransactions, showingTable };
+      },
+      () => {
+        if (this.state.showingTable) {
+          this.onSubmit();
+        }
+      }
+    );
   };
 
   onClickTableCell = (columnKey: string, rowValue: string) => {
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index 5f3f128a332..918dd4e4483 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -26,8 +26,8 @@ export interface QueryTransaction {
   latency: number;
   options: any;
   query: string;
-  result?: any; // Table / Timeseries / Logs
-  resultType: string;
+  result?: any; // Table model / Timeseries[] / Logs
+  resultType: ResultType;
   rowIndex: number;
 }
 
@@ -71,3 +71,5 @@ export interface ExploreUrlState {
   queries: Query[];
   range: Range;
 }
+
+export type ResultType = 'Graph' | 'Logs' | 'Table';