mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 01:12:56 +03:00
3aa0027c40
https://github.com/hasura/graphql-engine-mono/pull/1680 GitOrigin-RevId: c92d4f977b5b7fe9a0b71d3841e960a95f722299
448 lines
15 KiB
JavaScript
448 lines
15 KiB
JavaScript
$(document).ready(function () {
|
|
"use strict";
|
|
|
|
var hge_port;
|
|
function set_hge_port(){
|
|
// Maybe use query strings if we need to do more configuration:
|
|
if(window.location.hash) {
|
|
hge_port = window.location.hash.substring(1);
|
|
} else {
|
|
alert("Please provide the graphql-engine port in the URL fragment, e.g.: .../ekg.html#8088");
|
|
}
|
|
}
|
|
window.onhashchange = set_hge_port;
|
|
set_hge_port();
|
|
|
|
// Number formatters
|
|
function commaify(n)
|
|
{
|
|
var nStr = n.toString();
|
|
var x = nStr.split('.');
|
|
var x1 = x[0];
|
|
var x2 = x.length > 1 ? '.' + x[1] : '';
|
|
var rgx = /(\d+)(\d{3})/;
|
|
while (rgx.test(x1)) {
|
|
x1 = x1.replace(rgx, '$1' + ',' + '$2');
|
|
}
|
|
return x1 + x2;
|
|
}
|
|
|
|
function formatSuffix(val, opt_prec) {
|
|
if (val === null) {
|
|
return "N/A";
|
|
}
|
|
|
|
var prec = opt_prec || 1;
|
|
if (val >= 1000000000) {
|
|
return (val / 1000000000).toFixed(prec) + " GB";
|
|
} else if (val >= 1000000) {
|
|
return (val / 1000000).toFixed(prec) + " MB";
|
|
} else if (val >= 1000) {
|
|
return (val / 1000).toFixed(prec) + " kB";
|
|
} else {
|
|
return val.toFixed(prec) + " B";
|
|
}
|
|
}
|
|
|
|
function formatRate(val, prec) {
|
|
if (val === null) {
|
|
return "N/A";
|
|
}
|
|
|
|
return formatSuffix(val, prec) + "/s";
|
|
}
|
|
|
|
function formatPercent(val, opt_prec) {
|
|
if (val === null) {
|
|
return "N/A";
|
|
}
|
|
|
|
var prec = opt_prec || 1;
|
|
return val.toFixed(prec) + " %";
|
|
}
|
|
|
|
// Set up polling interval control
|
|
var updateInterval = 1000; // ms
|
|
$("#updateInterval").val(updateInterval).change(function () {
|
|
updateInterval = $(this).val();
|
|
});
|
|
|
|
// Allow the UI to be paused
|
|
var paused = false;
|
|
$('#pause-ui').click(function () {
|
|
if (paused) {
|
|
$(this).text("Pause UI");
|
|
paused = false;
|
|
} else {
|
|
$(this).text("Unpause UI");
|
|
paused = true;
|
|
}
|
|
});
|
|
|
|
// Plot formatters
|
|
function suffixFormatter(val, axis) {
|
|
return formatSuffix(val, axis.tickDecimals);
|
|
}
|
|
|
|
function suffixFormatterGeneric(val, axis) {
|
|
if (val >= 1000000000) {
|
|
return (val / 1000000000).toFixed(axis.tickDecimals) + " G";
|
|
} else if (val >= 1000000) {
|
|
return (val / 1000000).toFixed(axis.tickDecimals) + " M";
|
|
} else if (val >= 1000) {
|
|
return (val / 1000).toFixed(axis.tickDecimals) + " k";
|
|
} else {
|
|
return val.toFixed(axis.tickDecimals);
|
|
}
|
|
}
|
|
|
|
function rateFormatter(val, axis) {
|
|
return formatRate(val, axis.tickDecimals);
|
|
}
|
|
|
|
function percentFormatter(val, axis) {
|
|
return formatPercent(val, axis.tickDecimals);
|
|
}
|
|
|
|
// Fetch data periodically and notify interested parties.
|
|
var listeners = [];
|
|
|
|
function subscribe(fn) {
|
|
listeners.push(fn);
|
|
}
|
|
|
|
function unsubscribe(fn) {
|
|
listeners = listeners.filter(function (el) {
|
|
if (el !== fn) {
|
|
return el;
|
|
}
|
|
});
|
|
}
|
|
|
|
var alertVisible = false;
|
|
function fetchData() {
|
|
function onDataReceived(stats) {
|
|
if (alertVisible) {
|
|
$(".alert-message").hide();
|
|
}
|
|
alertVisible = false;
|
|
for (var i = 0; i < listeners.length; i++) {
|
|
listeners[i](stats, stats.ekg.server_timestamp_ms[0].value.val);
|
|
}
|
|
}
|
|
|
|
function onError() {
|
|
$(".alert-message").show();
|
|
alertVisible = true;
|
|
}
|
|
|
|
$.ajax("http://127.0.0.1:"+hge_port+"/dev/ekg", {
|
|
dataType: 'json',
|
|
success: onDataReceived,
|
|
error: onError,
|
|
cache: false
|
|
});
|
|
|
|
setTimeout(fetchData, updateInterval);
|
|
}
|
|
fetchData();
|
|
|
|
function addPlot(elem, series, opts) {
|
|
var defaultOptions = {
|
|
series: { shadowSize: 0 }, // drawing is faster without shadows
|
|
xaxis: { mode: "time", tickSize: [10, "second"] }
|
|
};
|
|
var options = $.extend(true, {}, defaultOptions, opts);
|
|
var data = new Array(series.length);
|
|
var maxPoints = 60;
|
|
for(var i = 0; i < series.length; i++) {
|
|
data[i] = [];
|
|
}
|
|
|
|
var plot = $.plot(elem, [], options);
|
|
|
|
var prev_stats, prev_time;
|
|
function onDataReceived(stats, time) {
|
|
for(var i = 0; i < series.length; i++) {
|
|
if (data[i].length >= maxPoints) {
|
|
data[i] = data[i].slice(1);
|
|
}
|
|
|
|
data[i].push([time, series[i].fn(stats, time,
|
|
prev_stats, prev_time)]);
|
|
|
|
// the data may arrive out-of-order, so sort by time stamp first
|
|
data[i].sort(function (a, b) { return a[0] - b[0]; });
|
|
}
|
|
|
|
// zip legends with data
|
|
var res = [];
|
|
for(var i = 0; i < series.length; i++)
|
|
res.push({ label: series[i].label, data: data[i] });
|
|
|
|
if (!paused) {
|
|
plot.setData(res);
|
|
plot.setupGrid();
|
|
plot.draw();
|
|
}
|
|
prev_stats = stats;
|
|
prev_time = time;
|
|
}
|
|
|
|
subscribe(onDataReceived);
|
|
return onDataReceived;
|
|
}
|
|
|
|
function addCounter(elem, fn, formatter) {
|
|
var prev_stats, prev_time;
|
|
function onDataReceived(stats, time) {
|
|
if (!paused)
|
|
elem.text(formatter(fn(stats, time, prev_stats, prev_time)));
|
|
prev_stats = stats;
|
|
prev_time = time;
|
|
}
|
|
|
|
subscribe(onDataReceived);
|
|
}
|
|
|
|
// jQuery has problem with IDs containing symbols, so we replace the
|
|
// symbols generated by `JSON.stringify`.
|
|
function safeStringifyTags(tags) {
|
|
return JSON.stringify(tags)
|
|
.replace(/\{|\}|\"/g, '')
|
|
.replace(/:/g, "-COLON-")
|
|
.replace(/,/g, "-COMMA-")
|
|
}
|
|
|
|
function addDynamicPlot(name, tags, button, graph_fn, label_fn) {
|
|
function getStats(stats, time, prev_stats, prev_time) {
|
|
return graph_fn(name, stats, time, prev_stats, prev_time);
|
|
}
|
|
|
|
// jQuery has problem with IDs containing dots and other symbols, so we
|
|
// need to strip symbols out.
|
|
//
|
|
// Here we are also relying on `JSON.stringify` to produce strings from
|
|
// objects in a consistent manner. This might break.
|
|
var tagsStr = safeStringifyTags(tags);
|
|
var plotId = name.replace(/\./g, '-') + '-TAGS-' + tagsStr + '-PLOT';
|
|
$("#plots:last").append(
|
|
'<div id="' + plotId + '" class="plot-container">' +
|
|
'<img src="cross.png" class="close-button"><h3>' +
|
|
name + JSON.stringify(tags) +
|
|
'</h3><div class="plot"></div></div>');
|
|
var plot = $("#plots > .plot-container:last > div");
|
|
var observer = addPlot(plot,
|
|
[{ label: label_fn(name), fn: getStats }],
|
|
{ yaxis: { tickFormatter: suffixFormatterGeneric } });
|
|
|
|
var plotContainer = $("#" + plotId);
|
|
var closeButton = plotContainer.find("img");
|
|
closeButton.hide();
|
|
closeButton.click(function () {
|
|
plotContainer.remove();
|
|
button.show();
|
|
unsubscribe(observer);
|
|
});
|
|
|
|
plotContainer.hover(
|
|
function () {
|
|
closeButton.show();
|
|
},
|
|
function () {
|
|
closeButton.hide();
|
|
}
|
|
);
|
|
}
|
|
|
|
function addMetrics(table) {
|
|
var COUNTER = "c";
|
|
var GAUGE = "g";
|
|
var DISTRIBUTION = "d";
|
|
var metrics = {};
|
|
|
|
function getStatValue(stats, pieces, tags) {
|
|
var value = stats;
|
|
$.each(pieces, function(_, piece) {
|
|
value = value[piece];
|
|
});
|
|
// The value should now be an array of objects of the form
|
|
// { "tags": tagsObj, "value": valueObj }
|
|
var returnVal;
|
|
var tagsStr = JSON.stringify(tags);
|
|
// Due to this loop, processing received data takes O(n^2) time,
|
|
// where n is the size of the largest group of metrics sharing the
|
|
// same name. We will eventually need to fix this.
|
|
$.each(value, function(_, tagValueObj) {
|
|
// Here we are relying on `JSON.stringify` to produce strings
|
|
// from objects in a consistent manner. This might break.
|
|
if (tagsStr === JSON.stringify(tagValueObj.tags)) {
|
|
returnVal = tagValueObj.value;
|
|
}
|
|
});
|
|
return returnVal;
|
|
}
|
|
|
|
function makeDataGetter(name, tags) {
|
|
var pieces = name.split(".");
|
|
function get(name, stats, time, prev_stats, prev_time) {
|
|
var value = getStatValue(stats, pieces, tags);
|
|
if (value.type === COUNTER) {
|
|
if (prev_stats == undefined)
|
|
return null;
|
|
var prev_value = getStatValue(prev_stats, pieces, tags);
|
|
return 1000 * (value.val - prev_value.val) /
|
|
(time - prev_time);
|
|
} else if (value.type === DISTRIBUTION) {
|
|
return value.mean;
|
|
} else { // value.type === GAUGE || value.type === LABEL
|
|
return value.val;
|
|
}
|
|
}
|
|
return get;
|
|
}
|
|
|
|
function counterLabel(label) {
|
|
return label + "/s";
|
|
}
|
|
|
|
function gaugeLabel(label) {
|
|
return label;
|
|
}
|
|
|
|
/** Adds the table row. */
|
|
function addElem(name, tags, value) {
|
|
var name_with_tags = name+'-TAGS-'+safeStringifyTags(tags);
|
|
var elem;
|
|
if (name_with_tags in metrics) {
|
|
elem = metrics[name_with_tags];
|
|
} else {
|
|
// Add UI element
|
|
table.find("tbody:last").append(
|
|
'<tr><td>' + name + '<br>' +
|
|
JSON.stringify(tags) + '</td>' +
|
|
'<td>' +
|
|
' <img src="chart_line_add.png" class="graph-button"' +
|
|
' width="16" height="16"' +
|
|
' alt="Add graph" title="Add graph"></td>' +
|
|
'<td class="value">N/A</td></tr>');
|
|
elem = table.find("tbody > tr > td:last");
|
|
metrics[name_with_tags] = elem;
|
|
|
|
var button = table.find("tbody > tr:last > td:eq(1) > img");
|
|
var graph_fn = makeDataGetter(name, tags);
|
|
var label_fn = gaugeLabel;
|
|
if (value.type === COUNTER) {
|
|
label_fn = counterLabel;
|
|
}
|
|
button.click(function () {
|
|
addDynamicPlot(name, tags, button, graph_fn, label_fn);
|
|
$(this).hide();
|
|
});
|
|
}
|
|
if (!paused) {
|
|
if (value.type === DISTRIBUTION) {
|
|
if (value.mean !== null) {
|
|
var val = value.mean.toPrecision(8) + '\n+/-' +
|
|
Math.sqrt(value.variance).toPrecision(8) + ' sd';
|
|
}
|
|
else {
|
|
var val = "N/A";
|
|
}
|
|
} else { // COUNTER, GAUGE, LABEL
|
|
var val = value.val;
|
|
}
|
|
if ($.inArray(value.type, [COUNTER, GAUGE]) !== -1) {
|
|
val = commaify(val);
|
|
}
|
|
elem.text(val);
|
|
}
|
|
}
|
|
|
|
/** Updates UI for all metrics. */
|
|
function onDataReceived(stats, time) {
|
|
function build(prefix, obj) {
|
|
$.each(obj, function (suffix, value) {
|
|
if (Array.isArray(value)) {
|
|
$.each(value, function (_, arr_value) {
|
|
var name = prefix + suffix;
|
|
addElem(name, arr_value.tags, arr_value.value);
|
|
});
|
|
} else {
|
|
build(prefix + suffix + '.', value);
|
|
}
|
|
});
|
|
}
|
|
build('', stats);
|
|
}
|
|
|
|
subscribe(onDataReceived);
|
|
}
|
|
|
|
function initAll() {
|
|
// Metrics
|
|
var current_bytes_used = function (stats) {
|
|
return stats.rts.gc.current_bytes_used[0].value.val;
|
|
};
|
|
var max_bytes_used = function (stats) {
|
|
return stats.rts.gc.max_bytes_used[0].value.val;
|
|
};
|
|
var max_bytes_slop = function (stats) {
|
|
return stats.rts.gc.max_bytes_slop[0].value.val;
|
|
};
|
|
var current_bytes_slop = function (stats) {
|
|
return stats.rts.gc.current_bytes_slop[0].value.val;
|
|
};
|
|
var productivity_wall_percent = function (stats, time, prev_stats, prev_time) {
|
|
if (prev_stats == undefined)
|
|
return null;
|
|
var mutator_ms = stats.rts.gc.mutator_wall_ms[0].value.val -
|
|
prev_stats.rts.gc.mutator_wall_ms[0].value.val;
|
|
var gc_ms = stats.rts.gc.gc_wall_ms[0].value.val -
|
|
prev_stats.rts.gc.gc_wall_ms[0].value.val;
|
|
return 100 * mutator_ms / (mutator_ms + gc_ms);
|
|
};
|
|
var productivity_cpu_percent = function (stats, time, prev_stats, prev_time) {
|
|
if (prev_stats == undefined)
|
|
return null;
|
|
var mutator_ms = stats.rts.gc.mutator_cpu_ms[0].value.val -
|
|
prev_stats.rts.gc.mutator_cpu_ms[0].value.val;
|
|
var gc_ms = stats.rts.gc.gc_cpu_ms[0].value.val -
|
|
prev_stats.rts.gc.gc_cpu_ms[0].value.val;
|
|
return 100 * mutator_ms / (mutator_ms + gc_ms);
|
|
};
|
|
var allocation_rate = function (stats, time, prev_stats, prev_time) {
|
|
if (prev_stats == undefined)
|
|
return null;
|
|
return 1000 * (stats.rts.gc.bytes_allocated[0].value.val -
|
|
prev_stats.rts.gc.bytes_allocated[0].value.val) /
|
|
(time - prev_time);
|
|
};
|
|
|
|
addMetrics($("#metric-table"));
|
|
|
|
// Plots
|
|
addPlot($("#current-bytes-used-plot > div"),
|
|
[{ label: "residency", fn: current_bytes_used }],
|
|
{ yaxis: { tickFormatter: suffixFormatter } });
|
|
addPlot($("#allocation-rate-plot > div"),
|
|
[{ label: "rate", fn: allocation_rate }],
|
|
{ yaxis: { tickFormatter: rateFormatter } });
|
|
addPlot($("#productivity-plot > div"),
|
|
[{ label: "wall clock time", fn: productivity_wall_percent },
|
|
{ label: "cpu time", fn: productivity_cpu_percent }],
|
|
{ yaxis: { tickDecimals: 1, tickFormatter: percentFormatter } });
|
|
|
|
// GC and memory statistics
|
|
addCounter($("#max-bytes-used"), max_bytes_used, formatSuffix);
|
|
addCounter($("#current-bytes-used"), current_bytes_used, formatSuffix);
|
|
addCounter($("#max-bytes-slop"), max_bytes_slop, formatSuffix);
|
|
addCounter($("#current-bytes-slop"), current_bytes_slop, formatSuffix);
|
|
addCounter($("#productivity-wall"), productivity_wall_percent, formatPercent);
|
|
addCounter($("#productivity-cpu"), productivity_cpu_percent, formatPercent);
|
|
addCounter($("#allocation-rate"), allocation_rate, formatRate);
|
|
}
|
|
|
|
initAll();
|
|
});
|