From 46f7bd2820dd2d3ad52a0408bd33a8fb39df459d Mon Sep 17 00:00:00 2001
From: Stuart Nelson <stuartnelson3@gmail.com>
Date: Fri, 9 Jan 2015 13:55:01 +0100
Subject: [PATCH] graph controls

---
 web/static/css/graph.css               | 41 ++++++++++++++++-
 web/static/js/graph_template.handlebar | 64 +++++++++++++-------------
 2 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/web/static/css/graph.css b/web/static/css/graph.css
index 6c83e06cb..322d9884f 100644
--- a/web/static/css/graph.css
+++ b/web/static/css/graph.css
@@ -51,6 +51,7 @@ a:active { color: black; }
 }
 
 .y_axis {
+  overflow: hidden;
   position: absolute;
   top: 1px;
   bottom: 0;
@@ -198,10 +199,46 @@ select name="insert_metric" {
 }
 
 input[name="end_input"], input[name="range_input"] {
-  margin-left: -4px;
-  margin-right: -4px;
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 .error {
   margin: 2px;
 }
+
+.btn {
+  border-radius: 0;
+}
+
+.prometheus_input_group {
+  display: inline-block;
+  margin: 10px 0;
+  overflow: auto;
+}
+
+.prometheus_input_group .prometheus_checkbox {
+  height: 25px;
+  line-height: 2;
+}
+
+.prometheus_input_group .input {
+  width: 100px;
+  height: 29px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.prometheus_input_group .date_input {
+  width: 200px;
+}
diff --git a/web/static/js/graph_template.handlebar b/web/static/js/graph_template.handlebar
index 315b569cc..2c1501d41 100644
--- a/web/static/js/graph_template.handlebar
+++ b/web/static/js/graph_template.handlebar
@@ -28,52 +28,48 @@
                 <li><a href="#console{{id}}">Tabular</a></li>
               </ul>
               <div id="graph{{id}}" class="graph_container reload">
-                <div class="config">
-                  <label for="range_input{{id}}">Range:</label>
+                <div>
                   <!-- Extracted to force grouped inputs. -->
                   <input type="hidden" name="range">
-                  <div class="input-prepend input-append">
-
+                  <div class="prometheus_input_group">
                     <button
-                        class="btn btn-mini"
-                        type="button"
-                        name="dec_range"
-                        title="Shrink the time range.">
-                      <i class="icon-minus"></i>
+                      class="btn btn-default pull-left"
+                      type="button"
+                      name="dec_range"
+                      title="Shrink the time range.">
+                      <i class="glyphicon glyphicon-minus"></i>
                     </button>
-
                     <input
-                        class="input-mini"
-                        id="range_input{{id}}"
-                        title="Time range of graph"
-                        type="text"
-                        name="range_input"
-                        size="3"
-                        value="{{range_input}}">
-
+                      class="pull-left input"
+                      id="range_input{{id}}"
+                      title="Time range of graph"
+                      type="text"
+                      name="range_input"
+                      size="3"
+                      value="{{range_input}}">
                     <button
-                        class="btn btn-mini"
+                        class="btn btn-default pull-left"
                         type="button"
                         name="inc_range"
                         title="Grow the time range.">
-                      <i class="icon-plus"></i>
+                      <i class="glyphicon glyphicon-plus"></i>
                     </button>
                   </div>
 
                   <!-- Extracted to force grouped inputs. -->
                   <input type="hidden" name="end">
-                  <div class="input-prepend input-append">
+                  <div class="prometheus_input_group">
 
                     <button
-                        class="btn btn-mini"
+                        class="btn btn-default pull-left"
                         type="button"
                         name="dec_end"
                         title="Rewind the end time.">
-                      <i class="icon-backward"></i>
+                      <i class="glyphicon glyphicon-backward"></i>
                     </button>
 
                     <input
-                        class="input-medium"
+                        class="pull-left date_input input"
                         id="end{{id}}"
                         title="End time of graph"
                         placeholder="Until"
@@ -83,22 +79,26 @@
                         value="{{end}}">
 
                     <button
-                        class="btn btn-mini"
+                        class="btn btn-default pull-left"
                         type="button"
                         name="inc_end"
                         title="Advance the end time.">
-                      <i class="icon-forward"></i>
+                      <i class="glyphicon glyphicon-forward"></i>
                     </button>
                   </div>
 
 
-                  <input class="input-small" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
-                  <input type="hidden" name="step">
+                  <div class="prometheus_input_group">
+                    <input class="input" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
+                    <input type="hidden" name="step">
+                  </div>
 
-                  <label class="checkbox inline">
-                    <input type="checkbox" name="stacked" {{stacked_checked}}>
-                    Stacked
-                  </label>
+                  <div class="prometheus_input_group checkbox">
+                    <label class="prometheus_checkbox">
+                      <input type="checkbox" name="stacked" {{stacked_checked}}>
+                      Stacked
+                    </label>
+                  </div>
                 </div>
 
                 <div class="graph_area">