mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2024-11-25 09:02:00 +00:00
Merge pull request #38169 from ClickHouse/trace-visualizer
improve trace-visualizer UX
This commit is contained in:
Sergei Trifonov
GitHub
commit
c0a275984f
@ -1,17 +1,12 @@
|
||||
Trace visualizer is a tool for representation of a tracing data as a Gantt diagram.
|
||||
|
||||
# Quick start
|
||||
For now this tool is not integrated into ClickHouse and requires a lot of manual adjustments.
|
||||
```bash
|
||||
cd utils/trace-visualizer
|
||||
python3 -m http.server
|
||||
```
|
||||
Open [localhost](http://localhost:8000). It will show an example of data. To show your tracing data you have to put it in JSON format near `index.html` and change call to `fetchData()` function at the bottom of `index.html`. (Do not forget to disable browser caching while changing it).
|
||||
For now this tool is not integrated into ClickHouse and requires manual actions. Open `trace-visualizer/index.html` in your browser. It will show an example of data. To visualize your data click `Load` button and select your trace data JSON file.
|
||||
|
||||
# Visualizing query trace
|
||||
First of all [opentelemetry_span_log](https://clickhouse.com/docs/en/operations/opentelemetry/) system table must be enabled to save query traces. Then run a query you want to trace with a setting:
|
||||
```sql
|
||||
set opentelemetry_start_trace_probability=1;
|
||||
SET opentelemetry_start_trace_probability=1;
|
||||
SELECT 1;
|
||||
```
|
||||
|
||||
@ -22,10 +17,9 @@ SELECT DISTINCT trace_id FROM system.opentelemetry_span_log ORDER BY query_start
|
||||
|
||||
To obtain JSON data suitable for visualizing run:
|
||||
```sql
|
||||
SELECT tuple (parent_span_id, attribute['clickhouse.thread_id'] || attribute['thread_number'] as thread_id)::Tuple(parent_span_id UInt64, thread_id String) as group, operation_name, start_time_us, finish_time_us, sipHash64(operation_name) as color, attribute
|
||||
from system.opentelemetry_span_log
|
||||
SELECT tuple (leftPad(attribute['clickhouse.thread_id'] || attribute['thread_number'], 10, '0') as thread_id, parent_span_id)::Tuple(thread_id String, parent_span_id UInt64) as group, operation_name, start_time_us, finish_time_us, sipHash64(operation_name) as color, attribute
|
||||
FROM system.opentelemetry_span_log
|
||||
WHERE trace_id = 'your-trace-id'
|
||||
ORDER BY group ASC
|
||||
FORMAT JSON SETTINGS output_format_json_named_tuples_as_objects = 1;
|
||||
```
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
}
|
||||
|
||||
rect.zoom-panel {
|
||||
/*cursor: ew-resize;*/
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
@ -20,18 +19,18 @@ rect.zoom-panel {
|
||||
}
|
||||
|
||||
.axis.y {
|
||||
font-size: 16px;
|
||||
font-size: 9px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.axis.x {
|
||||
font-size: 16px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
#ruler {
|
||||
text-anchor: middle;
|
||||
alignment-baseline: before-edge;
|
||||
font-size: 16px;
|
||||
font-size: 9px;
|
||||
font-family: sans-serif;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -14,26 +14,77 @@
|
||||
<script language="javascript" type="text/javascript" src="js/d3.v4.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="js/d3-tip-0.8.0-alpha.1.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="js/d3-gantt.js"></script>
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">ClickHouse trace-visualizer</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<form class="navbar-form navbar-left">
|
||||
<button type="button" class="btn btn-primary" id="toolbar-load" data-toggle="modal" data-target="#loadModal">Load</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="placeholder" class="chart-placeholder"></div>
|
||||
|
||||
<div class="modal fade" id="loadModal" tabindex="-1" role="dialog" aria-labelledby="loadModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="loadModalLabel">Load Trace JSON</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="file" id="loadFiles" value="Load" /><br />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="btnDoLoad">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script language="javascript">
|
||||
var example_json = [
|
||||
{ t1: 100, t2: 200, band: "band1", color: "#888", text: "text1" },
|
||||
{ t1: 300, t2: 400, band: "band2", color: "#ff8", text: "text2" },
|
||||
{ t1: 100, t2: 400, band: "band3", color: "#888", text: "some very long text with a lot of letters in it" },
|
||||
{ t1: 300, t2: 400, band: "band1", color: "#8ff", text: "some_very_long_identifier_with_a_lot_of_letters_in_it" },
|
||||
{ t1: 500, t2: 800, band: "band2", color: "#f8f", text: "test\nif\nnew\nline\nworks\nhere?" }
|
||||
];
|
||||
|
||||
var chart = d3.gantt()
|
||||
.height(window.innerHeight - $("#placeholder")[0].getBoundingClientRect().y - window.scrollY)
|
||||
.selector("#placeholder");
|
||||
var example_json = [];
|
||||
var example_colors = ["#f88", "#8f8", "#88f", "#888", "#aaa"];
|
||||
for (let i = 0; i < 1024; i++) {
|
||||
example_json.push({
|
||||
t1: i + 50 - Math.random() * 60,
|
||||
t2: i + 50 + Math.random() * 60,
|
||||
band: "band" + (i % 128),
|
||||
color: example_colors[i % example_colors.length],
|
||||
text: "it is span #" + i
|
||||
});
|
||||
}
|
||||
example_json.bands = new Set(example_json.map(x => x.band));
|
||||
example_json.max_time_ms = Math.max(...example_json.map(x => x.t2));
|
||||
|
||||
var data = null;
|
||||
var chart = null;
|
||||
|
||||
function renderChart(parsed) {
|
||||
data = parsed;
|
||||
if (chart != null) {
|
||||
chart.destroy();
|
||||
}
|
||||
let view_height = window.innerHeight - $("#placeholder")[0].getBoundingClientRect().y - 40;
|
||||
let data_height = parsed.bands.size * 8;
|
||||
chart = d3.gantt()
|
||||
.height(Math.max(view_height, data_height))
|
||||
.view_height(view_height)
|
||||
.selector("#placeholder")
|
||||
.timeDomain([0, parsed.max_time_ms])
|
||||
;
|
||||
chart(data);
|
||||
}
|
||||
|
||||
// Error message popup
|
||||
$("<div id='errmsg'></div>").css({
|
||||
position: "absolute",
|
||||
display: "none",
|
||||
@ -46,8 +97,7 @@
|
||||
function fetchData(dataurl, parser = x => x) {
|
||||
function onDataReceived(json, textStatus, xhr) {
|
||||
$("#errmsg").hide();
|
||||
data = parser(json);
|
||||
chart(data);
|
||||
renderChart(parser(json));
|
||||
}
|
||||
|
||||
function onDataError(xhr, error) {
|
||||
@ -70,6 +120,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
$("#btnDoLoad").click(function(){
|
||||
let element = document.getElementById('loadFiles');
|
||||
let files = element.files;
|
||||
if (files.length <= 0) {
|
||||
return false;
|
||||
}
|
||||
let fr = new FileReader();
|
||||
fr.onload = function(e) {
|
||||
$("#errmsg").hide();
|
||||
renderChart(parseClickHouseTrace(JSON.parse(e.target.result)));
|
||||
}
|
||||
fr.readAsText(files.item(0));
|
||||
element.value = '';
|
||||
$('#loadModal').modal('hide');
|
||||
});
|
||||
|
||||
function parseClickHouseTrace(json) {
|
||||
let min_time_us = Number.MAX_VALUE;
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
@ -98,21 +164,25 @@
|
||||
}
|
||||
|
||||
let result = [];
|
||||
let bands = new Set();
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
let span = json.data[i];
|
||||
let band = Object.values(span.group).join(' ');
|
||||
bands.add(band);
|
||||
result.push({
|
||||
t1: convertTime(+span.start_time_us),
|
||||
t2: convertTime(+span.finish_time_us),
|
||||
band: Object.values(span.group).join(' '),
|
||||
band,
|
||||
color: d3.interpolateRainbow((strHash(span.color) % 256) / 256),
|
||||
text: span.operation_name
|
||||
});
|
||||
}
|
||||
|
||||
chart.timeDomain([0, max_time_ms]);
|
||||
result.bands = bands;
|
||||
result.max_time_ms = max_time_ms;
|
||||
return result;
|
||||
}
|
||||
|
||||
fetchData(); // do not fetch, just draw example_json w/o parsing
|
||||
//fetchData("your-traces.json" , parseClickHouseTrace);
|
||||
//fetchData("your-traces.json", parseClickHouseTrace);
|
||||
</script>
|
||||
|
||||
50
utils/trace-visualizer/js/d3-gantt.js
vendored
50
utils/trace-visualizer/js/d3-gantt.js
vendored
@ -37,6 +37,7 @@
|
||||
.on("zoom", function() {
|
||||
if (tipShown != null) {
|
||||
tip.hide(tipShown);
|
||||
tipShown = null;
|
||||
}
|
||||
var tr = d3.event.transform;
|
||||
xZoomed = tr.rescaleX(x);
|
||||
@ -51,7 +52,7 @@
|
||||
zoomContainer1.attr("transform", "translate(" + tr.x + ",0) scale(" + tr.k + ",1)");
|
||||
zoomContainer2.attr("transform", "translate(" + tr.x + ",0) scale(" + tr.k + ",1)");
|
||||
|
||||
render();
|
||||
//render();
|
||||
})
|
||||
.on("start", function() {
|
||||
zoom.startScreenY = d3.event.sourceEvent.screenY;
|
||||
@ -116,6 +117,12 @@
|
||||
.call(xAxis)
|
||||
;
|
||||
|
||||
// ruler should be drawn above x axis and under y axis
|
||||
ruler = fixedContainer.append("g")
|
||||
.attr("id", "ruler")
|
||||
.attr("transform", "translate(0, 0)")
|
||||
;
|
||||
|
||||
// create y axis
|
||||
fixedContainer.append("g")
|
||||
.attr("class", "y axis")
|
||||
@ -186,10 +193,6 @@
|
||||
;
|
||||
|
||||
// ruler
|
||||
ruler = fixedContainer.append("g")
|
||||
.attr("id", "ruler")
|
||||
.attr("transform", "translate(0, 0)")
|
||||
;
|
||||
ruler.append("rect")
|
||||
.attr("id", "ruler-line")
|
||||
.attr("x", 0)
|
||||
@ -218,10 +221,9 @@
|
||||
|
||||
// scroll handling
|
||||
window.onscroll = function myFunction() {
|
||||
documentBodyScrollLeft(document.body.scrollLeft);
|
||||
documentBodyScrollTop(document.body.scrollTop);
|
||||
documentBodyScrollLeft(window.scrollX);
|
||||
documentBodyScrollTop(window.scrollY);
|
||||
var scroll = scrollParams();
|
||||
|
||||
svgChartContainer
|
||||
.attr("transform", "translate(" + margin.left
|
||||
+ ", " + (margin.top + scroll.y1) + ")");
|
||||
@ -282,7 +284,7 @@
|
||||
.attr("class", "bar")
|
||||
.attr("vector-effect", "non-scaling-stroke")
|
||||
.style("fill", d => d.color)
|
||||
.on('click', function(d) {
|
||||
.on('mouseover', function(d) {
|
||||
if (tipShown != d) {
|
||||
tipShown = d;
|
||||
tip.show(d);
|
||||
@ -314,12 +316,11 @@
|
||||
//.clamp(true); // dosn't work with zoom/pan
|
||||
xZoomed = x;
|
||||
y = d3.scaleBand()
|
||||
.domain(Object.values(data).map(d => d.band).sort())
|
||||
.rangeRound([0, height - margin.top - margin.bottom])
|
||||
.padding(0.5);
|
||||
.domain([...data.bands])
|
||||
.range([1, height - margin.top - margin.bottom])
|
||||
.padding(1/8);
|
||||
xAxis = d3.axisBottom()
|
||||
.scale(x)
|
||||
//.tickSubdivide(true)
|
||||
.tickSize(8)
|
||||
.tickPadding(8);
|
||||
yAxis = d3.axisLeft()
|
||||
@ -331,7 +332,7 @@
|
||||
var documentBodyScrollLeft = function(value) {
|
||||
if (!arguments.length) {
|
||||
if (documentBodyScrollLeft.value === undefined) {
|
||||
documentBodyScrollLeft.value = document.body.scrollLeft;
|
||||
documentBodyScrollLeft.value = window.scrollX;
|
||||
}
|
||||
return documentBodyScrollLeft.value;
|
||||
} else {
|
||||
@ -343,7 +344,7 @@
|
||||
var documentBodyScrollTop = function(value) {
|
||||
if (!arguments.length) {
|
||||
if (!documentBodyScrollTop.value === undefined) {
|
||||
documentBodyScrollTop.value = document.body.scrollTop;
|
||||
documentBodyScrollTop.value = window.scrollY;
|
||||
}
|
||||
return documentBodyScrollTop.value;
|
||||
} else {
|
||||
@ -353,7 +354,7 @@
|
||||
|
||||
var scrollParams = function() {
|
||||
var y1 = documentBodyScrollTop();
|
||||
var y2 = y1 + window.innerHeight - margin.footer;
|
||||
var y2 = y1 + view_height;
|
||||
y2 = Math.min(y2, height - margin.top - margin.bottom);
|
||||
var h = y2 - y1;
|
||||
return {
|
||||
@ -401,7 +402,7 @@
|
||||
var textWidth = 10 * posText.length;
|
||||
ruler.select("#bgrect")
|
||||
.attr("x", -textWidth/2 - xpadding)
|
||||
.attr("y", positionRuler.bbox.y - ypadding)
|
||||
.attr("y", positionRuler.bbox.y - ypadding + window.scrollY)
|
||||
.attr("width", textWidth + (xpadding*2))
|
||||
.attr("height", positionRuler.bbox.height + (ypadding*2))
|
||||
;
|
||||
@ -425,6 +426,13 @@
|
||||
return gantt;
|
||||
}
|
||||
|
||||
gantt.view_height = function(value) {
|
||||
if (!arguments.length)
|
||||
return view_height;
|
||||
view_height = +value;
|
||||
return gantt;
|
||||
}
|
||||
|
||||
gantt.selector = function(value) {
|
||||
if (!arguments.length)
|
||||
return selector;
|
||||
@ -444,12 +452,18 @@
|
||||
return data;
|
||||
}
|
||||
|
||||
gantt.destroy = function() {
|
||||
tip.destroy();
|
||||
d3.select(selector).selectAll("svg").remove();
|
||||
}
|
||||
|
||||
// constructor
|
||||
|
||||
// Config
|
||||
var margin = { top: 20, right: 40, bottom: 20, left: 200, footer: 100 },
|
||||
var margin = { top: 0, right: 30, bottom: 20, left: 150 },
|
||||
height = document.body.clientHeight - margin.top - margin.bottom - 5,
|
||||
width = document.body.clientWidth - margin.right - margin.left - 5,
|
||||
view_height = window.innerHeight,
|
||||
selector = 'body',
|
||||
timeDomainStart = 0,
|
||||
timeDomainEnd = 1000,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user