-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
executor_stats.go
116 lines (98 loc) · 3.38 KB
/
executor_stats.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
Copyright 2019 The Vitess Authors.
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.
*/
package vtgate
const (
// ExecutorTemplate is the HTML template to display ExecutorStats.
ExecutorTemplate = `
<table style="vertical-align: middle; width: 100%">
<tr>
<td width="50%">
<div>
<!-- The div in the next line will be overwritten by the JavaScript graph. -->
<div id="qps_chart">QPS</div>
</div>
</td>
<td width="50%" style="padding: 20px;">
<a href="/debug/health">Health</a><br>
<a href="/debug/querylogz">Current Query Log</a><br>
<a href="/debug/queryz">Query Plan Stats</a><br>
<a href="/debug/query_plans">Query Plans</a><br>
<a href="/debug/scatter_stats">Scatter Query Statistics</a><br>
</td>
</tr>
</table>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("visualization", "1", {packages:["corechart"]});
function sampleDate(d, i) {
var copy = new Date(d);
copy.setTime(copy.getTime() - i*60/5*1000);
return copy
}
function drawQPSChart() {
var div = $('#qps_chart').height(500).width(900).unwrap()[0]
var chart = new google.visualization.LineChart(div);
var options = {
title: "QPS By DB Type",
focusTarget: 'category',
vAxis: {
viewWindow: {min: 0},
}
};
// If we're accessing status through a proxy that requires a URL prefix,
// add the prefix to the vars URL.
var vars_url = '/debug/vars';
var pos = window.location.pathname.lastIndexOf('/debug/status');
if (pos > 0) {
vars_url = window.location.pathname.substring(0, pos) + vars_url;
}
var redraw = function() {
$.getJSON(vars_url, function(input_data) {
var now = new Date();
var qps = input_data.QPSByDbType;
var planTypes = Object.keys(qps);
if (planTypes.length === 0) {
planTypes = ["All"];
qps["All"] = [];
}
var data = [["Time"].concat(planTypes)];
// Create data points, starting with the most recent timestamp.
// (On the graph this means going from right to left.)
// Time span: 15 minutes in 5 second intervals.
for (var i = 0; i < 15*60/5; i++) {
var datum = [sampleDate(now, i)];
for (var j = 0; j < planTypes.length; j++) {
if (i < qps[planTypes[j]].length) {
// Rates are ordered from least recent to most recent.
// Therefore, we have to start reading from the end of the array.
var idx = qps[planTypes[j]].length - i - 1;
datum.push(+qps[planTypes[j]][idx].toFixed(2));
} else {
// Assume 0.0 QPS for older, non-existent data points.
datum.push(0);
}
}
data.push(datum)
}
chart.draw(google.visualization.arrayToDataTable(data), options);
})
};
redraw();
// redraw every 2.5 seconds.
window.setInterval(redraw, 2500);
}
google.setOnLoadCallback(drawQPSChart);
</script>
`
)