limit number of time series show in explore graph

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>
     );
   }