From 00f04f4ea0d0eab8ab1cc724b5431675e98d8d91 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sat, 4 Aug 2018 11:47:04 +0200
Subject: [PATCH] Add clear button to Explore

- Clear All button to clear all queries and results
- moved result viewer buttons below query rows to make it more clear
  that they govern result options
---
 public/app/containers/Explore/Explore.tsx | 50 +++++++++++++++--------
 public/app/containers/Explore/Graph.tsx   |  3 +-
 public/sass/pages/_explore.scss           |  8 ++++
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/public/app/containers/Explore/Explore.tsx b/public/app/containers/Explore/Explore.tsx
index 53c43782ad6..772617dd7c1 100644
--- a/public/app/containers/Explore/Explore.tsx
+++ b/public/app/containers/Explore/Explore.tsx
@@ -267,6 +267,15 @@ export class Explore extends React.Component<any, IExploreState> {
     }
   };
 
+  onClickClear = () => {
+    this.setState({
+      graphResult: null,
+      logsResult: null,
+      queries: ensureQueries(),
+      tableResult: null,
+    });
+  };
+
   onClickTableCell = (columnKey: string, rowValue: string) => {
     const { datasource, queries } = this.state;
     if (datasource && datasource.modifyQuery) {
@@ -466,24 +475,12 @@ export class Explore extends React.Component<any, IExploreState> {
               </button>
             </div>
           ) : null}
-          <div className="navbar-buttons">
-            {supportsGraph ? (
-              <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}>
-                Graph
-              </button>
-            ) : null}
-            {supportsTable ? (
-              <button className={`btn navbar-button ${tableButtonActive}`} onClick={this.handleClickTableButton}>
-                Table
-              </button>
-            ) : null}
-            {supportsLogs ? (
-              <button className={`btn navbar-button ${logsButtonActive}`} onClick={this.handleClickLogsButton}>
-                Logs
-              </button>
-            ) : null}
-          </div>
           <TimePicker range={range} onChangeTime={this.handleChangeTime} />
+          <div className="navbar-buttons">
+            <button className="btn navbar-button navbar-button--no-icon" onClick={this.onClickClear}>
+              Clear All
+            </button>
+          </div>
           <div className="navbar-buttons relative">
             <button className="btn navbar-button--primary" onClick={this.handleSubmit}>
               Run Query <i className="fa fa-level-down run-icon" />
@@ -514,6 +511,25 @@ export class Explore extends React.Component<any, IExploreState> {
               onRemoveQueryRow={this.handleRemoveQueryRow}
             />
             {queryError && !loading ? <div className="text-warning m-a-2">{queryError}</div> : null}
+
+            <div className="result-options">
+              {supportsGraph ? (
+                <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}>
+                  Graph
+                </button>
+              ) : null}
+              {supportsTable ? (
+                <button className={`btn navbar-button ${tableButtonActive}`} onClick={this.handleClickTableButton}>
+                  Table
+                </button>
+              ) : null}
+              {supportsLogs ? (
+                <button className={`btn navbar-button ${logsButtonActive}`} onClick={this.handleClickLogsButton}>
+                  Logs
+                </button>
+              ) : null}
+            </div>
+
             <main className="m-t-2">
               {supportsGraph && showingGraph ? (
                 <Graph
diff --git a/public/app/containers/Explore/Graph.tsx b/public/app/containers/Explore/Graph.tsx
index eeda29b1292..171be9da6ba 100644
--- a/public/app/containers/Explore/Graph.tsx
+++ b/public/app/containers/Explore/Graph.tsx
@@ -84,7 +84,9 @@ class Graph extends Component<any, any> {
 
   draw() {
     const { data, options: userOptions } = this.props;
+    const $el = $(`#${this.props.id}`);
     if (!data) {
+      $el.empty();
       return;
     }
     const series = data.map((ts: TimeSeries) => ({
@@ -93,7 +95,6 @@ class Graph extends Component<any, any> {
       data: ts.getFlotPairs('null'),
     }));
 
-    const $el = $(`#${this.props.id}`);
     const ticks = $el.width() / 100;
     let { from, to } = userOptions.range;
     if (!moment.isMoment(from)) {
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 59b8b62f349..52ddbc03636 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -47,6 +47,14 @@
     background-color: $btn-active-bg;
   }
 
+  .navbar-button--no-icon {
+    line-height: 18px;
+  }
+
+  .result-options {
+    margin-top: 2 * $panel-margin;
+  }
+
   .elapsed-time {
     position: absolute;
     left: 0;