From f1c1633d154ce643321876419af29672e5d283ca Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sat, 4 Aug 2018 11:07:48 +0200
Subject: [PATCH] Explore: show message if queries did not return data

- every result viewer displays a message that it received an empty data
  set
---
 public/app/containers/Explore/Explore.tsx | 19 ++++++++++---------
 public/app/containers/Explore/Graph.tsx   |  9 ++++++++-
 public/app/containers/Explore/Logs.tsx    |  1 +
 public/app/containers/Explore/Table.tsx   | 21 +++++++++++++++++++--
 4 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/public/app/containers/Explore/Explore.tsx b/public/app/containers/Explore/Explore.tsx
index 31fd082c94c..53c43782ad6 100644
--- a/public/app/containers/Explore/Explore.tsx
+++ b/public/app/containers/Explore/Explore.tsx
@@ -440,12 +440,12 @@ export class Explore extends React.Component<any, IExploreState> {
               </a>
             </div>
           ) : (
-            <div className="navbar-buttons explore-first-button">
-              <button className="btn navbar-button" onClick={this.handleClickCloseSplit}>
-                Close Split
+              <div className="navbar-buttons explore-first-button">
+                <button className="btn navbar-button" onClick={this.handleClickCloseSplit}>
+                  Close Split
               </button>
-            </div>
-          )}
+              </div>
+            )}
           {!datasourceMissing ? (
             <div className="navbar-buttons">
               <Select
@@ -513,21 +513,22 @@ export class Explore extends React.Component<any, IExploreState> {
               onExecuteQuery={this.handleSubmit}
               onRemoveQueryRow={this.handleRemoveQueryRow}
             />
-            {queryError ? <div className="text-warning m-a-2">{queryError}</div> : null}
+            {queryError && !loading ? <div className="text-warning m-a-2">{queryError}</div> : null}
             <main className="m-t-2">
               {supportsGraph && showingGraph ? (
                 <Graph
                   data={graphResult}
+                  height={graphHeight}
+                  loading={loading}
                   id={`explore-graph-${position}`}
                   options={requestOptions}
-                  height={graphHeight}
                   split={split}
                 />
               ) : null}
               {supportsTable && showingTable ? (
-                <Table data={tableResult} onClickCell={this.onClickTableCell} className="m-t-3" />
+                <Table className="m-t-3" data={tableResult} loading={loading} onClickCell={this.onClickTableCell} />
               ) : null}
-              {supportsLogs && showingLogs ? <Logs data={logsResult} /> : null}
+              {supportsLogs && showingLogs ? <Logs data={logsResult} loading={loading} /> : null}
             </main>
           </div>
         ) : null}
diff --git a/public/app/containers/Explore/Graph.tsx b/public/app/containers/Explore/Graph.tsx
index a43ddfb2aa5..eeda29b1292 100644
--- a/public/app/containers/Explore/Graph.tsx
+++ b/public/app/containers/Explore/Graph.tsx
@@ -123,7 +123,14 @@ class Graph extends Component<any, any> {
   }
 
   render() {
-    const { data, height } = this.props;
+    const { data, height, loading } = this.props;
+    if (!loading && data && data.length === 0) {
+      return (
+        <div className="panel-container">
+          <div className="muted m-a-1">The queries returned no time series to graph.</div>
+        </div>
+      );
+    }
     return (
       <div className="panel-container">
         <div id={this.props.id} className="explore-graph" style={{ height }} />
diff --git a/public/app/containers/Explore/Logs.tsx b/public/app/containers/Explore/Logs.tsx
index 10d7827a9a3..ae2d5e2daa6 100644
--- a/public/app/containers/Explore/Logs.tsx
+++ b/public/app/containers/Explore/Logs.tsx
@@ -5,6 +5,7 @@ import { LogsModel, LogRow } from 'app/core/logs_model';
 interface LogsProps {
   className?: string;
   data: LogsModel;
+  loading: boolean;
 }
 
 const EXAMPLE_QUERY = '{job="default/prometheus"}';
diff --git a/public/app/containers/Explore/Table.tsx b/public/app/containers/Explore/Table.tsx
index 0856acd5d89..5cf41563704 100644
--- a/public/app/containers/Explore/Table.tsx
+++ b/public/app/containers/Explore/Table.tsx
@@ -6,6 +6,7 @@ const EMPTY_TABLE = new TableModel();
 interface TableProps {
   className?: string;
   data: TableModel;
+  loading: boolean;
   onClickCell?: (columnKey: string, rowValue: string) => void;
 }
 
@@ -38,8 +39,24 @@ function Cell(props: SFCCellProps) {
 
 export default class Table extends PureComponent<TableProps, {}> {
   render() {
-    const { className = '', data, onClickCell } = this.props;
-    const tableModel = data || EMPTY_TABLE;
+    const { className = '', data, loading, onClickCell } = this.props;
+    let tableModel = data || EMPTY_TABLE;
+    if (!loading && data && data.rows.length === 0) {
+      return (
+        <table className={`${className} filter-table`}>
+          <thead>
+            <tr>
+              <th>Table</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="muted">The queries returned no data for a table.</td>
+            </tr>
+          </tbody>
+        </table>
+      );
+    }
     return (
       <table className={`${className} filter-table`}>
         <thead>