Explore: fix graph resize on window resize

- resize HOC wrapper only resized first child which in case of large
  graphs was the warning button
- moved warning button inside the panel parent

public/app/features/explore/Graph.tsx

@@ -168,7 +168,8 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
     const data = this.getGraphData();
 
     return (
-      <>
+      <div className="panel-container">
+        {loading && <div className="explore-graph__loader" />}
         {this.props.data &&
           this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
           !this.state.showAllTimeSeries && (
@@ -180,12 +181,9 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
               }`}</span>
             </div>
           )}
-        <div className="panel-container">
-          {loading && <div className="explore-graph__loader" />}
-          <div id={id} className="explore-graph" style={{ height }} />
-          <Legend data={data} />
-        </div>
-      </>
+        <div id={id} className="explore-graph" style={{ height }} />
+        <Legend data={data} />
+      </div>
     );
   }
 }

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

@@ -1,468 +1,468 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<Fragment>
+<div
+  className="panel-container"
+>
   <div
-    className="panel-container"
-  >
-    <div
-      className="explore-graph"
-      id="graph"
-      style={
-        Object {
-          "height": "100px",
-        }
-      }
-    />
-    <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",
-              ],
-            ],
-          },
-        ]
+    className="explore-graph"
+    id="graph"
+    style={
+      Object {
+        "height": "100px",
       }
-    />
-  </div>
-</Fragment>
+    }
+  />
+  <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>
 `;
 
 exports[`Render should render component with disclaimer 1`] = `
-<Fragment>
+<div
+  className="panel-container"
+>
   <div
     className="time-series-disclaimer"
   >
@@ -478,504 +478,498 @@ exports[`Render should render component with disclaimer 1`] = `
     </span>
   </div>
   <div
-    className="panel-container"
-  >
-    <div
-      className="explore-graph"
-      id="graph"
-      style={
-        Object {
-          "height": "100px",
-        }
-      }
-    />
-    <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",
-              ],
-            ],
-          },
-        ]
+    className="explore-graph"
+    id="graph"
+    style={
+      Object {
+        "height": "100px",
       }
-    />
-  </div>
-</Fragment>
+    }
+  />
+  <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>
 `;
 
 exports[`Render should show query return no time series 1`] = `
-<Fragment>
+<div
+  className="panel-container"
+>
   <div
-    className="panel-container"
-  >
-    <div
-      className="explore-graph"
-      id="graph"
-      style={
-        Object {
-          "height": "100px",
-        }
+    className="explore-graph"
+    id="graph"
+    style={
+      Object {
+        "height": "100px",
       }
-    />
-    <Legend
-      data={Array []}
-    />
-  </div>
-</Fragment>
+    }
+  />
+  <Legend
+    data={Array []}
+  />
+</div>
 `;