mirror of https://github.com/prometheus/prometheus
Merge pull request #44 from matttproud/julius-better-graphs
Make graphs linkable, object-oriented, and multiple per page.pull/46/head
juliusv
12 years ago
commit
cfc1ba2244
@ -0,0 +1,337 @@
|
|||||||
|
// Graph options we might want:
|
||||||
|
// Grid off/on
|
||||||
|
// Stacked off/on
|
||||||
|
// Area off/on
|
||||||
|
// Legend position
|
||||||
|
// Short link
|
||||||
|
// Graph title
|
||||||
|
// Palette
|
||||||
|
// Background
|
||||||
|
// Enable tooltips
|
||||||
|
// width/height
|
||||||
|
// Axis options
|
||||||
|
// Y-Range min/max
|
||||||
|
// (X-Range min/max)
|
||||||
|
// X-Axis format
|
||||||
|
// Y-Axis format
|
||||||
|
// Y-Axis title
|
||||||
|
// X-Axis title
|
||||||
|
// Log scale
|
||||||
|
|
||||||
|
var Prometheus = Prometheus || {};
|
||||||
|
var graphs = [];
|
||||||
|
|
||||||
|
Prometheus.Graph = function(element, options) {
|
||||||
|
this.el = element;
|
||||||
|
this.options = options;
|
||||||
|
this.changeHandler = null;
|
||||||
|
this.rickshawGraph = null;
|
||||||
|
this.data = [];
|
||||||
|
|
||||||
|
this.initialize();
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.timeFactors = {
|
||||||
|
"y": 60 * 60 * 24 * 365,
|
||||||
|
"w": 60 * 60 * 24 * 7,
|
||||||
|
"d": 60 * 60 * 24,
|
||||||
|
"h": 60 * 60,
|
||||||
|
"m": 60,
|
||||||
|
"s": 1
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.stepValues = [
|
||||||
|
"1s", "10s", "1m", "5m", "15m", "30m", "1h", "2h", "6h", "12h", "1d", "2d",
|
||||||
|
"1w", "2w", "4w", "8w", "1y", "2y"
|
||||||
|
];
|
||||||
|
|
||||||
|
Prometheus.Graph.numGraphs = 0;
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.initialize = function() {
|
||||||
|
var self = this;
|
||||||
|
self.id = Prometheus.Graph.numGraphs++;
|
||||||
|
|
||||||
|
// Set default options.
|
||||||
|
self.options['id'] = self.id;
|
||||||
|
self.options['range_input'] = self.options['range_input'] || "1h";
|
||||||
|
self.options['stacked_checked'] = self.options['stacked'] ? "checked" : "";
|
||||||
|
|
||||||
|
// Draw graph controls and container from Handlebars template.
|
||||||
|
var source = $("#graph_template").html();
|
||||||
|
var template = Handlebars.compile(source);
|
||||||
|
var graphHtml = template(self.options);
|
||||||
|
self.el.append(graphHtml);
|
||||||
|
|
||||||
|
// Get references to all the interesting elements in the graph container and
|
||||||
|
// bind event handlers.
|
||||||
|
var graphWrapper = self.el.find("#graph_wrapper" + self.id);
|
||||||
|
self.queryForm = graphWrapper.find(".query_form");
|
||||||
|
self.expr = graphWrapper.find("input[name=expr]");
|
||||||
|
self.rangeInput = self.queryForm.find("input[name=range_input]");
|
||||||
|
self.stacked = self.queryForm.find("input[name=stacked]");
|
||||||
|
|
||||||
|
self.graph = graphWrapper.find(".graph");
|
||||||
|
self.legend = graphWrapper.find(".legend");
|
||||||
|
self.spinner = graphWrapper.find(".spinner");
|
||||||
|
self.evalStats = graphWrapper.find(".eval_stats");
|
||||||
|
|
||||||
|
self.stacked.change(function() { self.updateGraph(); });
|
||||||
|
self.queryForm.submit(function() { self.submitQuery(); return false; });
|
||||||
|
self.spinner.hide();
|
||||||
|
|
||||||
|
self.queryForm.find("input[name=inc_range]").click(function() { self.increaseRange(); });
|
||||||
|
self.queryForm.find("input[name=dec_range]").click(function() { self.decreaseRange(); });
|
||||||
|
self.expr.focus(); // TODO: move to external Graph method.
|
||||||
|
|
||||||
|
if (self.expr.val()) {
|
||||||
|
self.submitQuery();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.onChange = function(handler) {
|
||||||
|
this.changeHandler = handler;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.getOptions = function(handler) {
|
||||||
|
var self = this;
|
||||||
|
var options = {};
|
||||||
|
|
||||||
|
var optionInputs = [
|
||||||
|
"expr",
|
||||||
|
"range_input",
|
||||||
|
"end",
|
||||||
|
"step_input",
|
||||||
|
"stacked"
|
||||||
|
];
|
||||||
|
|
||||||
|
self.queryForm.find("input").each(function(index, element) {
|
||||||
|
var name = element.name;
|
||||||
|
if ($.inArray(name, optionInputs) >= 0) {
|
||||||
|
if (name == "stacked") {
|
||||||
|
options[name] = element.checked;
|
||||||
|
} else {
|
||||||
|
options[name] = element.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return options;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.parseRange = function(rangeText) {
|
||||||
|
var rangeRE = new RegExp("^([0-9]+)([ywdhms]+)$");
|
||||||
|
var matches = rangeText.match(rangeRE);
|
||||||
|
if (matches.length != 3) {
|
||||||
|
return 60;
|
||||||
|
}
|
||||||
|
var value = parseInt(matches[1]);
|
||||||
|
var unit = matches[2];
|
||||||
|
return value * Prometheus.Graph.timeFactors[unit];
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.increaseRange = function() {
|
||||||
|
var self = this;
|
||||||
|
var rangeSeconds = self.parseRange(self.rangeInput.val());
|
||||||
|
for (var i = 0; i < Prometheus.Graph.stepValues.length; i++) {
|
||||||
|
if (rangeSeconds < self.parseRange(Prometheus.Graph.stepValues[i])) {
|
||||||
|
self.rangeInput.val(Prometheus.Graph.stepValues[i]);
|
||||||
|
if (self.expr.val()) {
|
||||||
|
self.submitQuery();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.decreaseRange = function() {
|
||||||
|
var self = this;
|
||||||
|
var rangeSeconds = self.parseRange(self.rangeInput.val());
|
||||||
|
for (var i = Prometheus.Graph.stepValues.length - 1; i >= 0; i--) {
|
||||||
|
if (rangeSeconds > self.parseRange(Prometheus.Graph.stepValues[i])) {
|
||||||
|
self.rangeInput.val(Prometheus.Graph.stepValues[i]);
|
||||||
|
if (self.expr.val()) {
|
||||||
|
self.submitQuery();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.submitQuery = function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.spinner.show();
|
||||||
|
self.evalStats.empty();
|
||||||
|
|
||||||
|
var startTime = new Date().getTime();
|
||||||
|
|
||||||
|
var rangeSeconds = self.parseRange(self.rangeInput.val());
|
||||||
|
self.queryForm.find("input[name=range]").val(rangeSeconds);
|
||||||
|
var resolution = self.queryForm.find("input[name=step_input]").val() || Math.max(Math.floor(rangeSeconds / 250), 1);
|
||||||
|
self.queryForm.find("input[name=step]").val(resolution);
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
method: self.queryForm.attr("method"),
|
||||||
|
url: self.queryForm.attr("action"),
|
||||||
|
dataType: "json",
|
||||||
|
data: self.queryForm.serialize(),
|
||||||
|
success: function(json, textStatus) {
|
||||||
|
if (json.Type == "error") {
|
||||||
|
alert(json.Value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
self.data = self.transformData(json);
|
||||||
|
if (self.data.length == 0) {
|
||||||
|
alert("No datapoints found.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
self.updateGraph(true);
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
alert("Error executing query!");
|
||||||
|
},
|
||||||
|
complete: function() {
|
||||||
|
var duration = new Date().getTime() - startTime;
|
||||||
|
self.evalStats.html("Load time: " + duration + "ms, resolution: " + resolution + "s");
|
||||||
|
self.spinner.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.metricToTsName = function(labels) {
|
||||||
|
var tsName = labels["name"] + "{";
|
||||||
|
var labelStrings = [];
|
||||||
|
for (label in labels) {
|
||||||
|
if (label != "name") {
|
||||||
|
labelStrings.push(label + "='" + labels[label] + "'");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tsName += labelStrings.join(",") + "}";
|
||||||
|
return tsName;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.parseValue = function(value) {
|
||||||
|
if (value == "NaN" || value == "Inf" || value == "-Inf") {
|
||||||
|
return 0; // TODO: what should we really do here?
|
||||||
|
} else {
|
||||||
|
return parseFloat(value)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.transformData = function(json) {
|
||||||
|
self = this;
|
||||||
|
var palette = new Rickshaw.Color.Palette();
|
||||||
|
if (json.Type != "matrix") {
|
||||||
|
alert("Result is not of matrix type! Please enter a correct expression.");
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
var data = json.Value.map(function(ts) {
|
||||||
|
return {
|
||||||
|
name: self.metricToTsName(ts.Metric),
|
||||||
|
data: ts.Values.map(function(value) {
|
||||||
|
return {
|
||||||
|
x: value.Timestamp,
|
||||||
|
y: self.parseValue(value.Value)
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
color: palette.color()
|
||||||
|
};
|
||||||
|
});
|
||||||
|
Rickshaw.Series.zeroFill(data);
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.showGraph = function() {
|
||||||
|
var self = this;
|
||||||
|
self.rickshawGraph = new Rickshaw.Graph({
|
||||||
|
element: self.graph[0],
|
||||||
|
height: 800,
|
||||||
|
renderer: (self.stacked.is(":checked") ? "stack" : "line"),
|
||||||
|
interpolation: "linear",
|
||||||
|
series: self.data
|
||||||
|
});
|
||||||
|
|
||||||
|
var xAxis = new Rickshaw.Graph.Axis.Time({ graph: self.rickshawGraph });
|
||||||
|
|
||||||
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
|
graph: self.rickshawGraph,
|
||||||
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||||
|
});
|
||||||
|
|
||||||
|
self.rickshawGraph.render();
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
|
||||||
|
var self = this;
|
||||||
|
if (self.data.length == 0) { return; }
|
||||||
|
if (self.rickshawGraph == null || reloadGraph) {
|
||||||
|
self.graph.empty();
|
||||||
|
self.legend.empty();
|
||||||
|
self.showGraph();
|
||||||
|
} else {
|
||||||
|
self.rickshawGraph.configure({
|
||||||
|
renderer: (self.stacked.is(":checked") ? "stack" : "line"),
|
||||||
|
interpolation: "linear",
|
||||||
|
series: self.data
|
||||||
|
});
|
||||||
|
self.rickshawGraph.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
||||||
|
graph: self.rickshawGraph
|
||||||
|
});
|
||||||
|
|
||||||
|
var legend = new Rickshaw.Graph.Legend({
|
||||||
|
element: self.legend[0],
|
||||||
|
graph: self.rickshawGraph
|
||||||
|
});
|
||||||
|
|
||||||
|
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
|
||||||
|
graph: self.rickshawGraph,
|
||||||
|
legend: legend
|
||||||
|
});
|
||||||
|
|
||||||
|
self.changeHandler();
|
||||||
|
};
|
||||||
|
|
||||||
|
function parseGraphOptionsFromUrl() {
|
||||||
|
var hashOptions = window.location.hash.slice(1);
|
||||||
|
if (!hashOptions) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
var optionsJSON = decodeURIComponent(window.location.hash.slice(1));
|
||||||
|
return JSON.parse(optionsJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
function storeGraphOptionsInUrl(options) {
|
||||||
|
var allGraphsOptions = [];
|
||||||
|
for (var i = 0; i < graphs.length; i++) {
|
||||||
|
allGraphsOptions.push(graphs[i].getOptions());
|
||||||
|
console.log(graphs[i].id);
|
||||||
|
console.log(graphs[i].getOptions());
|
||||||
|
}
|
||||||
|
var optionsJSON = JSON.stringify(allGraphsOptions);
|
||||||
|
window.location.hash = encodeURIComponent(optionsJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addGraph(options) {
|
||||||
|
var graph = new Prometheus.Graph($("#graph_container"), options);
|
||||||
|
graphs.push(graph);
|
||||||
|
graph.onChange(function() {
|
||||||
|
storeGraphOptionsInUrl();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
jQuery.ajaxSetup({
|
||||||
|
cache: false
|
||||||
|
});
|
||||||
|
|
||||||
|
var options = parseGraphOptionsFromUrl();
|
||||||
|
for (var i = 0; i < options.length; i++) {
|
||||||
|
addGraph(options[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#add_graph").click(function() { addGraph({}); });
|
||||||
|
}
|
||||||
|
|
||||||
|
$(init);
|
||||||
@ -1,212 +0,0 @@
|
|||||||
// Graph options we might want:
|
|
||||||
// Grid off/on
|
|
||||||
// Stacked off/on
|
|
||||||
// Area off/on
|
|
||||||
// Legend position
|
|
||||||
// Short link
|
|
||||||
// Graph title
|
|
||||||
// Palette
|
|
||||||
// Background
|
|
||||||
// Enable tooltips
|
|
||||||
// width/height
|
|
||||||
// Axis options
|
|
||||||
// Y-Range min/max
|
|
||||||
// (X-Range min/max)
|
|
||||||
// X-Axis format
|
|
||||||
// Y-Axis format
|
|
||||||
// Y-Axis title
|
|
||||||
// X-Axis title
|
|
||||||
// Log scale
|
|
||||||
|
|
||||||
var graph = null;
|
|
||||||
var data = [];
|
|
||||||
|
|
||||||
var timeFactors = {
|
|
||||||
"y": 60 * 60 * 24 * 365,
|
|
||||||
"w": 60 * 60 * 24 * 7,
|
|
||||||
"d": 60 * 60 * 24,
|
|
||||||
"h": 60 * 60,
|
|
||||||
"m": 60,
|
|
||||||
"s": 1
|
|
||||||
};
|
|
||||||
|
|
||||||
var steps = ["1s", "10s", "1m", "5m", "15m", "30m", "1h", "2h", "6h", "12h",
|
|
||||||
"1d", "2d", "1w", "2w", "4w", "8w", "1y", "2y"];
|
|
||||||
|
|
||||||
function parseRange(rangeText) {
|
|
||||||
var rangeRE = new RegExp("^([0-9]+)([ywdhms]+)$");
|
|
||||||
var matches = rangeText.match(rangeRE);
|
|
||||||
if (matches.length != 3) {
|
|
||||||
return 60;
|
|
||||||
}
|
|
||||||
var value = parseInt(matches[1]);
|
|
||||||
var unit = matches[2];
|
|
||||||
return value * timeFactors[unit];
|
|
||||||
}
|
|
||||||
|
|
||||||
function increaseRange() {
|
|
||||||
var rangeSeconds = parseRange($("#range_input").val());
|
|
||||||
for (var i = 0; i < steps.length; i++) {
|
|
||||||
if (rangeSeconds < parseRange(steps[i])) {
|
|
||||||
$("#range_input").val(steps[i]);
|
|
||||||
submitQuery();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function decreaseRange() {
|
|
||||||
var rangeSeconds = parseRange($("#range_input").val());
|
|
||||||
for (var i = steps.length - 1; i >= 0; i--) {
|
|
||||||
if (rangeSeconds > parseRange(steps[i])) {
|
|
||||||
$("#range_input").val(steps[i]);
|
|
||||||
submitQuery();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitQuery() {
|
|
||||||
$("#spinner").show();
|
|
||||||
$("#eval_stats").empty();
|
|
||||||
|
|
||||||
var form = $("#query_form");
|
|
||||||
var startTime = new Date().getTime();
|
|
||||||
|
|
||||||
var rangeSeconds = parseRange($("#range_input").val());
|
|
||||||
$("#range").val(rangeSeconds);
|
|
||||||
var resolution = $("#step_input").val() || Math.max(Math.floor(rangeSeconds / 250), 1);
|
|
||||||
$("#step").val(resolution);
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
method: form.attr("method"),
|
|
||||||
url: form.attr("action"),
|
|
||||||
dataType: "json",
|
|
||||||
data: form.serialize(),
|
|
||||||
success: function(json, textStatus) {
|
|
||||||
if (json.Type == "error") {
|
|
||||||
alert(json.Value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
data = transformData(json);
|
|
||||||
if (data.length == 0) {
|
|
||||||
alert("No datapoints found.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
updateGraph(true);
|
|
||||||
},
|
|
||||||
error: function() {
|
|
||||||
alert("Error executing query!");
|
|
||||||
},
|
|
||||||
complete: function() {
|
|
||||||
var duration = new Date().getTime() - startTime;
|
|
||||||
$("#eval_stats").html("Load time: " + duration + "ms, resolution: " + resolution + "s");
|
|
||||||
$("#spinner").hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function metricToTsName(labels) {
|
|
||||||
var tsName = labels["name"] + "{";
|
|
||||||
var labelStrings = [];
|
|
||||||
for (label in labels) {
|
|
||||||
if (label != "name") {
|
|
||||||
labelStrings.push(label + "='" + labels[label] + "'");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tsName += labelStrings.join(",") + "}";
|
|
||||||
return tsName;
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseValue(value) {
|
|
||||||
if (value == "NaN" || value == "Inf" || value == "-Inf") {
|
|
||||||
return 0; // TODO: what should we really do here?
|
|
||||||
} else {
|
|
||||||
return parseFloat(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function transformData(json) {
|
|
||||||
var palette = new Rickshaw.Color.Palette();
|
|
||||||
if (json.Type != "matrix") {
|
|
||||||
alert("Result is not of matrix type! Please enter a correct expression.");
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
var data = json.Value.map(function(ts) {
|
|
||||||
return {
|
|
||||||
name: metricToTsName(ts.Metric),
|
|
||||||
data: ts.Values.map(function(value) {
|
|
||||||
return {
|
|
||||||
x: value.Timestamp,
|
|
||||||
y: parseValue(value.Value)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
color: palette.color()
|
|
||||||
};
|
|
||||||
});
|
|
||||||
Rickshaw.Series.zeroFill(data);
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showGraph() {
|
|
||||||
graph = new Rickshaw.Graph({
|
|
||||||
element: document.querySelector("#chart"),
|
|
||||||
height: 800,
|
|
||||||
renderer: ($("#stacked").is(":checked") ? "stack" : "line"),
|
|
||||||
interpolation: "linear",
|
|
||||||
series: data
|
|
||||||
});
|
|
||||||
|
|
||||||
var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph });
|
|
||||||
|
|
||||||
var y_axis = new Rickshaw.Graph.Axis.Y({
|
|
||||||
graph: graph,
|
|
||||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
|
||||||
});
|
|
||||||
|
|
||||||
graph.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateGraph(reloadGraph) {
|
|
||||||
if (graph == null || reloadGraph) {
|
|
||||||
$("#chart").empty();
|
|
||||||
$("#legend").empty();
|
|
||||||
showGraph();
|
|
||||||
} else {
|
|
||||||
graph.configure({
|
|
||||||
renderer: ($("#stacked").is(":checked") ? "stack" : "line"),
|
|
||||||
interpolation: "linear",
|
|
||||||
series: data
|
|
||||||
});
|
|
||||||
graph.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
||||||
graph: graph
|
|
||||||
});
|
|
||||||
|
|
||||||
var legend = new Rickshaw.Graph.Legend({
|
|
||||||
element: document.querySelector("#legend"),
|
|
||||||
graph: graph
|
|
||||||
});
|
|
||||||
|
|
||||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
|
|
||||||
graph: graph,
|
|
||||||
legend: legend
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
jQuery.ajaxSetup({
|
|
||||||
cache: false
|
|
||||||
});
|
|
||||||
$("#spinner").hide();
|
|
||||||
$("#query_form").submit(submitQuery);
|
|
||||||
$("#inc_range").click(increaseRange);
|
|
||||||
$("#dec_range").click(decreaseRange);
|
|
||||||
$("#stacked").change(updateGraph);
|
|
||||||
$("#expr").focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
$(init);
|
|
||||||
Loading…
Reference in new issue