From 07c76747f0e06c1ae8c74e02389a0f988a908878 Mon Sep 17 00:00:00 2001
From: Johannes 'fish' Ziemke <github@freigeist.org>
Date: Mon, 25 Mar 2013 16:06:36 +0100
Subject: [PATCH] Clean up of graph UI's form.

- Removed unnecessary spaces and labels.
- Aligned elements for cleaner look.
---
 web/static/css/prometheus.css | 27 +++++++++++++---
 web/static/graph.html         | 61 ++++++++++++++++++-----------------
 2 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/web/static/css/prometheus.css b/web/static/css/prometheus.css
index 27c45ae755..c085d0f868 100644
--- a/web/static/css/prometheus.css
+++ b/web/static/css/prometheus.css
@@ -4,6 +4,8 @@ body {
   line-height: 20px;
   color: #333333;
   background-color: #eee;
+  margin: 0px;
+  padding: 0px;
 }
 
 input:not([type=submit]):not([type=file]):not([type=button]) {
@@ -24,6 +26,15 @@ input:not([type=submit]):not([type=file]):not([type=button]) {
           border-radius: 4px;
 }
 
+.grouping_box .head, .eval_stats {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.grouping_box .head .opts {
+  float: right;
+}
+
 .graph {
   min-height: 400px;
   overflow-x: hidden;
@@ -31,14 +42,20 @@ input:not([type=submit]):not([type=file]):not([type=button]) {
 
 div.legend {
   display: block;
+  overflow: scroll;
 }
 
-form {
-  display: inline-block;
+input {
+  margin: 0;
+  border: 1px solid black;
 }
 
-.eval_stats {
-  display: inline;
-  vertical-align: top;
+select {
+  z-index: 10;
+  width: 150px;
 }
 
+input[name=end_input], input[name=range_input] {
+  margin-left: -4px;
+  margin-right: -4px;
+}
diff --git a/web/static/graph.html b/web/static/graph.html
index da6f6d7c11..f1fd52fc26 100644
--- a/web/static/graph.html
+++ b/web/static/graph.html
@@ -20,6 +20,8 @@
     <script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
 
     <script src="vendor/js/handlebars.js"></script>
+    <script src="vendor/js/jquery.selection.js"></script>
+    <script src="vendor/js/jquery.hotkeys.js"></script>
 
     <script src="js/graph.js"></script>
 
@@ -27,38 +29,37 @@
       <div id="graph_wrapper{{id}}">
         <div class="grouping_box">
           <form action="/api/query_range" method="GET" class="query_form">
-            <label for="expr{{id}}">Expression:</label>
-            <input type="text" name="expr" id="expr{{id}}" size="80" value="{{expr}}">
-            <select name="insert_metric">
-                <option value="">- Insert Metric -</option>
-            </select>
-
-            <br>
-
-            <label for="range_input{{id}}">Range:</label>
-            <input type="button" value="-" name="dec_range">
-            <input type="text" name="range_input" id="range_input{{id}}" size="5" value="{{range_input}}">
-            <input type="hidden" name="range">
-            <input type="button" value="+" name="inc_range">
-
-            <label for="end{{id}}">End:</label>
-            <input type="button" value="<<" name="dec_end">
-            <input type="text" name="end_input" id="end{{id}}" value="{{end}}">
-            <input type="button" value=">>" name="inc_end">
-            <input type="hidden" name="end">
-
-            <label for="step_input{{id}}">Resolution (s):</label>
-            <input type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="4">
-            <input type="hidden" name="step">
-
-            <input type="checkbox" name="stacked" id="stacked{{id}}" {{stacked_checked}}>
-            <label for="stacked{{id}}">Stacked</label>
-
-            <input type="submit" value="Graph" name="submit">
-
+            <div class="head">
+              <div class="expr">
+                <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" size="80" value="{{expr}}">
+                <select name="insert_metric">
+                    <option value="">- Insert Metric -</option>
+                </select>
+              </div>
+              <div class="config">
+                <label for="range_input{{id}}">Range:</label>
+                <input type="button" value="-" name="dec_range">
+                <input type="text" name="range_input" id="range_input{{id}}" size="2" value="{{range_input}}">
+                <input type="hidden" name="range">
+                <input type="button" value="+" name="inc_range">
+    
+                <input type="button" value="&larr;" name="dec_end">
+                <input placeholder="Until" type="text" name="end_input" id="end{{id}}" size="16" value="{{end}}">
+                <input type="button" value="&rarr;" name="inc_end">
+                <input type="hidden" name="end">
+    
+                <input placeholder="Resolution (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="10">
+                <input type="hidden" name="step">
+                <span class="opts">
+                  <input type="checkbox" name="stacked" id="stacked{{id}}" {{stacked_checked}}>
+                  <label for="stacked{{id}}">Stacked</label>
+                  <input type="submit" value="Graph" name="submit">
+                </span>
+              </div>
+            </div>
+            <div class="eval_stats"></div>
           </form>
           <img src="img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
-          <div class="eval_stats"></div>
         </div>
         <div class="grouping_box">
           <div class="graph_container">