Fix rendering of live plan when query is queued
@@ -239,7 +239,6 @@ let LivePlan = React.createClass({
return null;
},
render: function() {
- this.updateD3Graph();
const query = this.state.query;
if (query == null || this.state.initialized == false) {
@@ -254,6 +253,19 @@ let LivePlan = React.createClass({
);
}
+ let livePlanGraph = null;
+ if (!this.state.query.outputStage) {
+ livePlanGraph = (
+ <div className="row error-message">
+ <div className="col-xs-12">
+ <h4>Live plan graph will appear automatically when query starts running.</h4>
+ <div className="loader">Loading...</div>
+ </div>
+ </div>
+ )
+ }
+ else {
+ this.updateD3Graph();
const selectedStage = this.findStage(this.state.selectedStageId, this.state.query.outputStage);
if (selectedStage) {
ReactDOM.render(
@@ -261,6 +273,7 @@ let LivePlan = React.createClass({
document.getElementById('stage-performance')
);
}
+ }
return (
<div>
@@ -299,6 +312,12 @@ let LivePlan = React.createClass({
{ this.renderProgressBar() }
</div>
</div>
+ <hr className="h3-hr"/>
+ <div className="row">
+ <div className="col-xs-12">
+ { livePlanGraph }
+ </div>
+ </div>
</div>
);
}
