Merge pull request #13803 from grafana/davkal/explore-fix-resize

Explore: fix graph resize on window resize

public/app/features/explore/Graph.tsx

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

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 
 exports[`Render should render component 1`] = `
 exports[`Render should render component 1`] = `
-<Fragment>
-  <div
+<div
   className="panel-container"
   className="panel-container"
-  >
+>
   <div
   <div
     className="explore-graph"
     className="explore-graph"
     id="graph"
     id="graph"
@@ -457,12 +456,13 @@ exports[`Render should render component 1`] = `
       ]
       ]
     }
     }
   />
   />
-  </div>
-</Fragment>
+</div>
 `;
 `;
 
 
 exports[`Render should render component with disclaimer 1`] = `
 exports[`Render should render component with disclaimer 1`] = `
-<Fragment>
+<div
+  className="panel-container"
+>
   <div
   <div
     className="time-series-disclaimer"
     className="time-series-disclaimer"
   >
   >
@@ -478,9 +478,6 @@ exports[`Render should render component with disclaimer 1`] = `
     </span>
     </span>
   </div>
   </div>
   <div
   <div
-    className="panel-container"
-  >
-    <div
     className="explore-graph"
     className="explore-graph"
     id="graph"
     id="graph"
     style={
     style={
@@ -955,15 +952,13 @@ exports[`Render should render component with disclaimer 1`] = `
       ]
       ]
     }
     }
   />
   />
-  </div>
-</Fragment>
+</div>
 `;
 `;
 
 
 exports[`Render should show query return no time series 1`] = `
 exports[`Render should show query return no time series 1`] = `
-<Fragment>
-  <div
+<div
   className="panel-container"
   className="panel-container"
-  >
+>
   <div
   <div
     className="explore-graph"
     className="explore-graph"
     id="graph"
     id="graph"
@@ -976,6 +971,5 @@ exports[`Render should show query return no time series 1`] = `
   <Legend
   <Legend
     data={Array []}
     data={Array []}
   />
   />
-  </div>
-</Fragment>
+</div>
 `;
 `;