Merge pull request #13408 from grafana/limit-number-of-series-in-explore

Limit number of time series in explore

public/app/features/explore/Explore.tsx

@@ -604,16 +604,18 @@ export class Explore extends React.Component<any, ExploreState> {
             </div>
 
             <main className="m-t-2">
-              {supportsGraph && showingGraph ? (
+              {supportsGraph &&
-                <Graph
+                showingGraph &&
-                  data={graphResult}
+                graphResult && (
-                  height={graphHeight}
+                  <Graph
-                  loading={loading}
+                    data={graphResult}
-                  id={`explore-graph-${position}`}
+                    height={graphHeight}
-                  options={requestOptions}
+                    loading={loading}
-                  split={split}
+                    id={`explore-graph-${position}`}
-                />
+                    options={requestOptions}
-              ) : null}
+                    split={split}
+                  />
+                )}
               {supportsTable && showingTable ? (
                 <Table className="m-t-3" data={tableResult} loading={loading} onClickCell={this.onClickTableCell} />
               ) : null}

public/app/features/explore/Graph.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Graph from './Graph';
+import { mockData } from './__mocks__/mockData';
+
+const setup = (propOverrides?: object) => {
+  const props = Object.assign(
+    {
+      data: mockData().slice(0, 19),
+      options: {
+        interval: '20s',
+        range: { from: 'now-6h', to: 'now' },
+        targets: [
+          {
+            format: 'time_series',
+            instant: false,
+            hinting: true,
+            expr: 'prometheus_http_request_duration_seconds_bucket',
+          },
+        ],
+      },
+    },
+    propOverrides
+  );
+
+  // Enzyme.shallow did not work well with jquery.flop. Mocking the draw function.
+  Graph.prototype.draw = jest.fn();
+
+  const wrapper = shallow(<Graph {...props} />);
+  const instance = wrapper.instance() as Graph;
+
+  return {
+    wrapper,
+    instance,
+  };
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render component with disclaimer', () => {
+    const { wrapper } = setup({
+      data: mockData(),
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should show query return no time series', () => {
+    const { wrapper } = setup({
+      data: [],
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

public/app/features/explore/Graph.tsx

@@ -9,6 +9,8 @@ import TimeSeries from 'app/core/time_series2';
 
 import Legend from './Legend';
 
+const MAX_NUMBER_OF_TIME_SERIES = 20;
+
 // Copied from graph.ts
 function time_format(ticks, min, max) {
   if (min && max && ticks) {
@@ -67,6 +69,16 @@ const FLOT_OPTIONS = {
 };
 
 class Graph extends Component<any, any> {
+  state = {
+    showAllTimeSeries: false,
+  };
+
+  getGraphData() {
+    const { data } = this.props;
+
+    return this.state.showAllTimeSeries ? data : data.slice(0, MAX_NUMBER_OF_TIME_SERIES);
+  }
+
   componentDidMount() {
     this.draw();
   }
@@ -82,8 +94,19 @@ class Graph extends Component<any, any> {
     }
   }
 
+  onShowAllTimeSeries = () => {
+    this.setState(
+      {
+        showAllTimeSeries: true,
+      },
+      this.draw
+    );
+  };
+
   draw() {
-    const { data, options: userOptions } = this.props;
+    const { options: userOptions } = this.props;
+    const data = this.getGraphData();
+
     const $el = $(`#${this.props.id}`);
     if (!data) {
       $el.empty();
@@ -124,8 +147,10 @@ class Graph extends Component<any, any> {
   }
 
   render() {
-    const { data, height, loading } = this.props;
+    const { height, loading } = this.props;
-    if (!loading && data && data.length === 0) {
+    const data = this.getGraphData();
+
+    if (!loading && data.length === 0) {
       return (
         <div className="panel-container">
           <div className="muted m-a-1">The queries returned no time series to graph.</div>
@@ -133,9 +158,21 @@ class Graph extends Component<any, any> {
       );
     }
     return (
-      <div className="panel-container">
+      <div>
-        <div id={this.props.id} className="explore-graph" style={{ height }} />
+        {this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
-        <Legend data={data} />
+          !this.state.showAllTimeSeries && (
+            <div className="time-series-disclaimer">
+              <i className="fa fa-fw fa-warning disclaimer-icon" />
+              {`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
+              <span className="show-all-time-series" onClick={this.onShowAllTimeSeries}>{`Show all ${
+                this.props.data.length
+              }`}</span>
+            </div>
+          )}
+        <div className="panel-container">
+          <div id={this.props.id} className="explore-graph" style={{ height }} />
+          <Legend data={data} />
+        </div>
       </div>
     );
   }

public/app/features/explore/__mocks__/mockData.ts

@@ -0,0 +1,274 @@
+export const mockData = () => {
+  return [
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '+Inf',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.1',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.2',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.4',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '1',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '120',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '20',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '3',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '60',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/label/:name/values',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '8',
+      },
+      values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '+Inf',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.1',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.4',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '1',
+      },
+      values: [[1537847900, '953'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '120',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '20',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '3',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '60',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/metrics',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '8',
+      },
+      values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '+Inf',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.1',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.2',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '0.4',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '1',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '120',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '20',
+      },
+      values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+    {
+      metric: {
+        __name__: 'prometheus_http_request_duration_seconds_bucket',
+        handler: '/query',
+        instance: 'localhost:9090',
+        job: 'prometheus',
+        le: '3',
+      },
+      values: [[1537857260, '55'], [1537861960, '1'], [1537861980, '1']],
+    },
+  ];
+};

public/app/features/explore/__snapshots__/Graph.test.tsx.snap

@@ -0,0 +1,970 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div>
+  <div
+    className="panel-container"
+  >
+    <div
+      className="explore-graph"
+      style={
+        Object {
+          "height": undefined,
+        }
+      }
+    />
+    <Legend
+      data={
+        Array [
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "+Inf",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.1",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.2",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.4",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "1",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "120",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "20",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "3",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "60",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "8",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "+Inf",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.1",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.4",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "1",
+            },
+            "values": Array [
+              Array [
+                1537847900,
+                "953",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "120",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "20",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "3",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "60",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "8",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+        ]
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Render should render component with disclaimer 1`] = `
+<div>
+  <div
+    className="time-series-disclaimer"
+  >
+    <i
+      className="fa fa-fw fa-warning disclaimer-icon"
+    />
+    Showing only 20 time series. 
+    <span
+      className="show-all-time-series"
+      onClick={[Function]}
+    >
+      Show all 27
+    </span>
+  </div>
+  <div
+    className="panel-container"
+  >
+    <div
+      className="explore-graph"
+      style={
+        Object {
+          "height": undefined,
+        }
+      }
+    />
+    <Legend
+      data={
+        Array [
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "+Inf",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.1",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.2",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.4",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "1",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "120",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "20",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "3",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "60",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/label/:name/values",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "8",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "16",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "+Inf",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.1",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "0.4",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "1",
+            },
+            "values": Array [
+              Array [
+                1537847900,
+                "953",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "120",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "20",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "3",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "60",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/metrics",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "8",
+            },
+            "values": Array [
+              Array [
+                1537858060,
+                "1195",
+              ],
+              Array [
+                1537858080,
+                "1195",
+              ],
+              Array [
+                1537858100,
+                "1195",
+              ],
+            ],
+          },
+          Object {
+            "metric": Object {
+              "__name__": "prometheus_http_request_duration_seconds_bucket",
+              "handler": "/query",
+              "instance": "localhost:9090",
+              "job": "prometheus",
+              "le": "+Inf",
+            },
+            "values": Array [
+              Array [
+                1537858100,
+                "55",
+              ],
+              Array [
+                1537861960,
+                "1",
+              ],
+              Array [
+                1537861980,
+                "1",
+              ],
+            ],
+          },
+        ]
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Render should show query return no time series 1`] = `
+<div
+  className="panel-container"
+>
+  <div
+    className="muted m-a-1"
+  >
+    The queries returned no time series to graph.
+  </div>
+</div>
+`;

public/sass/pages/_explore.scss

@@ -55,6 +55,25 @@
     margin-top: 2 * $panel-margin;
   }
 
+  .time-series-disclaimer {
+    width: 300px;
+    margin: $panel-margin auto;
+    padding: 10px 0;
+    border-radius: $border-radius;
+    text-align: center;
+    background-color: $panel-bg;
+
+    .disclaimer-icon {
+      color: $yellow;
+      margin-right: $panel-margin/2;
+    }
+
+    .show-all-time-series {
+      cursor: pointer;
+      color: $external-link-color;
+    }
+  }
+
   .elapsed-time {
     position: absolute;
     left: 0;