mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-26 14:09:41 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #799 from prometheus/multiline-expr-input

Browse source 
Change expression input field to multi-line textarea.
This commit is contained in:
Julius Volz 2015-06-12 17:03:54 +02:00
parent 6247bd5a5a 8bb578c1fe
commit 395a0b3b11
4 changed files with 70 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
web/blob/files.go
View file

File diff suppressed because one or more lines are too long

44
web/blob/static/css/graph.css
View file

@ -101,35 +101,6 @@ select name="insert_metric" {
margin-bottom: 0px;
}
/* Buttons */
.config button {
font-size: 10pt;
margin-right: .3em;
}
.config input {
font-size: 10pt;
}
.config .input-append i {
padding-top: -4px;
margin-top: 0;
}
.config .input-append .btn:first-child i {
margin-right: 4px;
margin-left: 2px;
}
.config .input-append .btn:last-child i {
margin-left: 6px;
}
.config .icon-backward {
background-position: -242px -72px;
}
.datepicker {
font-size: 10pt;
}
@ -183,18 +154,9 @@ input[name="end_input"], input[name="range_input"] {
width: 200px;
}
.expression_input_group {
width: 80%;
}
.expression_input_group .input-group-btn {
/* Without this, the .input-group-btn has "width: auto" and extends to the
* right past the contained button's width */
width: 1px !important;
}
.form-group .input-group .expression_input {
width: auto;
.expression_input {
width: 100% !important;
margin-bottom: 10px;
}
.expression_select {

20
web/blob/static/js/graph.js
View file

@ -52,8 +52,24 @@ Prometheus.Graph.prototype.initialize = function() {
// 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.expr = graphWrapper.find("textarea[name=expr]");
self.expr.keypress(function(e) {
// Enter was pressed without the shift key.
if (e.which == 13 && !e.shiftKey) {
self.queryForm.submit();
e.preventDefault();
}
// Auto-resize the text area on input.
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
$(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
$(this).on('keyup input', function() { resizeTextarea(this); });
});
self.expr.change(storeGraphOptionsInURL);
self.rangeInput = self.queryForm.find("input[name=range_input]");
self.stackedBtn = self.queryForm.find(".stacked_btn");
self.stacked = self.queryForm.find("input[name=stacked]");
@ -191,7 +207,6 @@ Prometheus.Graph.prototype.getOptions = function() {
var options = {};
var optionInputs = [
"expr",
"range_input",
"end_input",
"step_input",
@ -204,6 +219,7 @@ Prometheus.Graph.prototype.getOptions = function() {
options[name] = element.value;
}
});
options["expr"] = self.expr.val();
options["tab"] = self.options["tab"];
return options;
};

18
web/blob/static/js/graph_template.handlebar
View file

@ -2,21 +2,21 @@
<form action="{{ pathPrefix }}/api/query_range" method="GET" class="query_form form-inline">
<div class="row">
<div class="col-lg-10">
<span class="input-group expression_input_group">
<input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="form-control expression_input" data-provide="typeahead" autocomplete="off">
<span class="input-group-btn">
<input class="btn btn-primary execute_btn" type="submit" value="Execute" name="submit">
</span>
</span>
<select class="form-control expression_select" name="insert_metric">
<option value="">- Insert Metric at Cursor -</option>
</select>
<textarea rows="1" placeholder="Expression (press Shift+Enter for newlines)" name="expr" id="expr{{id}}" class="form-control expression_input" data-provide="typeahead" autocomplete="off">{{expr}}</textarea>
</div>
<div class="col-lg-2">
<div class="eval_stats pull-right"></div>
<img src="{{ pathPrefix }}/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
</div>
</div>
<div class="row">
<div class="col-lg-10">
<input class="btn btn-primary execute_btn" type="submit" value="Execute" name="submit">
<select class="form-control expression_select" name="insert_metric">
<option value="">- insert metric at cursor -</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="error alert alert-danger"></div>