Merge pull request #12813 from grafana/davkal/explore-empty-results

Explore: show message if queries did not return data

public/app/containers/Explore/Explore.tsx

@@ -440,12 +440,12 @@ export class Explore extends React.Component<any, IExploreState> {
               </a>
               </a>
             </div>
             </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>
               </button>
-            </div>
-          )}
+              </div>
+            )}
           {!datasourceMissing ? (
           {!datasourceMissing ? (
             <div className="navbar-buttons">
             <div className="navbar-buttons">
               <Select
               <Select
@@ -513,21 +513,22 @@ export class Explore extends React.Component<any, IExploreState> {
               onExecuteQuery={this.handleSubmit}
               onExecuteQuery={this.handleSubmit}
               onRemoveQueryRow={this.handleRemoveQueryRow}
               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">
             <main className="m-t-2">
               {supportsGraph && showingGraph ? (
               {supportsGraph && showingGraph ? (
                 <Graph
                 <Graph
                   data={graphResult}
                   data={graphResult}
+                  height={graphHeight}
+                  loading={loading}
                   id={`explore-graph-${position}`}
                   id={`explore-graph-${position}`}
                   options={requestOptions}
                   options={requestOptions}
-                  height={graphHeight}
                   split={split}
                   split={split}
                 />
                 />
               ) : null}
               ) : null}
               {supportsTable && showingTable ? (
               {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}
               ) : null}
-              {supportsLogs && showingLogs ? <Logs data={logsResult} /> : null}
+              {supportsLogs && showingLogs ? <Logs data={logsResult} loading={loading} /> : null}
             </main>
             </main>
           </div>
           </div>
         ) : null}
         ) : null}

public/app/containers/Explore/Graph.tsx

@@ -123,7 +123,14 @@ class Graph extends Component<any, any> {
   }
   }
 
 
   render() {
   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 (
     return (
       <div className="panel-container">
       <div className="panel-container">
         <div id={this.props.id} className="explore-graph" style={{ height }} />
         <div id={this.props.id} className="explore-graph" style={{ height }} />

public/app/containers/Explore/Logs.tsx

@@ -5,6 +5,7 @@ import { LogsModel, LogRow } from 'app/core/logs_model';
 interface LogsProps {
 interface LogsProps {
   className?: string;
   className?: string;
   data: LogsModel;
   data: LogsModel;
+  loading: boolean;
 }
 }
 
 
 const EXAMPLE_QUERY = '{job="default/prometheus"}';
 const EXAMPLE_QUERY = '{job="default/prometheus"}';

public/app/containers/Explore/Table.tsx

@@ -6,6 +6,7 @@ const EMPTY_TABLE = new TableModel();
 interface TableProps {
 interface TableProps {
   className?: string;
   className?: string;
   data: TableModel;
   data: TableModel;
+  loading: boolean;
   onClickCell?: (columnKey: string, rowValue: string) => void;
   onClickCell?: (columnKey: string, rowValue: string) => void;
 }
 }
 
 
@@ -38,8 +39,24 @@ function Cell(props: SFCCellProps) {
 
 
 export default class Table extends PureComponent<TableProps, {}> {
 export default class Table extends PureComponent<TableProps, {}> {
   render() {
   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 (
     return (
       <table className={`${className} filter-table`}>
       <table className={`${className} filter-table`}>
         <thead>
         <thead>