mirror of
https://github.com/apache/impala.git
synced 2026-01-10 09:00:16 -05:00
1a2cd25ae8
This patch adds the /query_plan endpoint, which uses the Dagre and D3 JS libraries to render the plan tree. The tree auto-refreshes once every second, and the edges are labelled with the output cardinalities of each operator. Plan fragment boundaries are marked by a different edge colour, and nodes that belong to the same fragment are all coloured the same. This patch also restructures the summary and profile pages under one new 'details' heading that gives the user a selection of tabs to choose between, each with some relevant query information. Those tabs contain the plan tree, the query statement, query summary, plan text and the profile. Change-Id: I759970bf7a41874435baff700025ee0a3407d222 Reviewed-on: http://gerrit.cloudera.org:8080/68 Reviewed-by: Henry Robinson <henry@cloudera.com> Tested-by: Internal Jenkins
69 lines
2.0 KiB
Cheetah
69 lines
2.0 KiB
Cheetah
<!--
|
|
Copyright 2012- Cloudera Inc.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
{{> www/common-header.tmpl }}
|
|
|
|
{{> www/query_detail_tabs.tmpl }}
|
|
|
|
<div>
|
|
<label>
|
|
<input type="checkbox" checked="true" id="toggle" onClick="toggleRefresh()"/>
|
|
<span id="refresh_on">Auto-refresh on</span>
|
|
</label> Last updated: <span id="last-updated"></span>
|
|
</div>
|
|
|
|
<h3>Exec Summary</h3>
|
|
<pre id="summary">{{summary}}</pre>
|
|
|
|
<script>
|
|
document.getElementById("summary-tab").className = "active";
|
|
|
|
// Periodically refreshes the summary details
|
|
function refresh() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'text';
|
|
xhr.timeout = 60000;
|
|
xhr.onload = function(ignored_arg) {
|
|
if (xhr.status != 200) {
|
|
return;
|
|
}
|
|
var blob = xhr.response;
|
|
json = JSON.parse(blob);
|
|
document.getElementById("summary").textContent = json["summary"].trim();
|
|
document.getElementById("status").textContent = json["status"];
|
|
document.getElementById("last-updated").textContent = new Date();
|
|
}
|
|
xhr.ontimeout = function(){ }
|
|
xhr.open('GET', "/query_summary?query_id={{query_id}}&json", true);
|
|
xhr.send();
|
|
}
|
|
|
|
document.getElementById("last-updated").textContent = new Date();
|
|
var intervalId = setInterval(refresh, 1000);
|
|
|
|
function toggleRefresh() {
|
|
if (document.getElementById("toggle").checked == true) {
|
|
intervalId = setInterval(refresh, 1000);
|
|
document.getElementById("refresh_on").textContent = "Auto-refresh on";
|
|
} else {
|
|
clearInterval(intervalId);
|
|
document.getElementById("refresh_on").textContent = "Auto-refresh off";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{{> www/common-footer.tmpl}}
|