limit number of time series show in explore graph

public/app/features/explore/Explore.tsx

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

public/app/features/explore/Graph.tsx

@@ -67,6 +67,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, 20);
+  }
+
   componentDidMount() {
     this.draw();
   }
@@ -82,8 +92,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 +145,10 @@ class Graph extends Component<any, any> {
   }
 
   render() {
-    const { data, height, loading } = this.props;
-    if (!loading && data && data.length === 0) {
+    const { height, loading } = this.props;
+    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 +156,21 @@ class Graph extends Component<any, any> {
       );
     }
     return (
-      <div className="panel-container">
-        <div id={this.props.id} className="explore-graph" style={{ height }} />
-        <Legend data={data} />
+      <div>
+        {this.props.data.length > 20 &&
+          !this.state.showAllTimeSeries && (
+            <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={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/sass/pages/_explore.scss

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