From 7b9bf8d3e5df2886aa6c2fa60443117079376393 Mon Sep 17 00:00:00 2001
From: Stuart Nelson <stuartnelson3@gmail.com>
Date: Fri, 9 Jan 2015 14:12:52 +0100
Subject: [PATCH] Query header.

---
 web/static/css/graph.css               |  8 ++++++++
 web/static/js/graph_template.handlebar | 14 ++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/web/static/css/graph.css b/web/static/css/graph.css
index 322d9884f..8e32b7e2f 100644
--- a/web/static/css/graph.css
+++ b/web/static/css/graph.css
@@ -242,3 +242,11 @@ input[name="end_input"], input[name="range_input"] {
 .prometheus_input_group .date_input {
   width: 200px;
 }
+
+.form-group .input-group .expression_input {
+  width: 450px;
+}
+
+.expression_select {
+  max-width: 350px;
+}
diff --git a/web/static/js/graph_template.handlebar b/web/static/js/graph_template.handlebar
index 2c1501d41..b610c22db 100644
--- a/web/static/js/graph_template.handlebar
+++ b/web/static/js/graph_template.handlebar
@@ -1,16 +1,18 @@
         <div id="graph_wrapper{{id}}" class="graph_wrapper">
-          <form action="/api/query_range" method="GET" class="query_form">
+          <form action="/api/query_range" method="GET" class="query_form form-inline">
             <div class="grouping_box">
               <div class="head">
-                <div class="expr">
+                <div class="form-group">
                   <span class="input-group">
-                    <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="form-control">
+                    <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="form-control expression_input">
                     <span class="input-group-btn">
                       <input class="btn btn-primary" type="submit" value="Execute" name="submit">
                     </span>
                   </span>
-                  <select name="insert_metric">
-                      <option value="">- Insert Metric at Cursor -</option>
+                </div>
+                <div class="form-group">
+                  <select class="form-control expression_select" name="insert_metric">
+                    <option value="">- Insert Metric at Cursor -</option>
                   </select>
                 </div>
               </div>
@@ -93,7 +95,7 @@
                     <input type="hidden" name="step">
                   </div>
 
-                  <div class="prometheus_input_group checkbox">
+                  <div class="prometheus_input_group">
                     <label class="prometheus_checkbox">
                       <input type="checkbox" name="stacked" {{stacked_checked}}>
                       Stacked