Change expression input field to multi-line textarea.

Also, rearrange and clean up some things to make this work.
The textarea starts as a single line, but auto-expands when entering
multiple lines (e.g. via Shift+Enter). Pressing just "Enter" still
executes the expression.

web/blob/static/css/graph.css

@@ -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 {

web/blob/static/js/graph.js

@@ -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;
 };

web/blob/static/js/graph_template.handlebar

@@ -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>