Replacing interface components with Bootstrap.

This commit includes Bootstrap 2.3.2 and swaps a multitude of graph,
status, and other components to Bootstrap-based widgets.

web/static/css/graph.css

@@ -6,10 +6,18 @@ a { color: black; }
 a:hover { color: gray; }
 a:active { color: black; }
 
+.eval_stats {
+  float: right;
+}
+
 .graph_wrapper {
   margin-top: 8px;
 }
 
+.graph_wrapper .input-append, .graph_wrapper select {
+  margin: 2px;
+}
+
 .graph_container {
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -26,6 +34,10 @@ a:active { color: black; }
   border-bottom: 1px solid #aaa;
 }
 
+#add_graph {
+    margin-left: 8px;
+}
+
 .legend {
   display: inline-block;
   vertical-align: top;
@@ -86,14 +98,82 @@ input[title=*]:hover:after {
   content: attr(title);
 }
 
+.config input, .config select {
+  height: 12px;
+  margin-bottom: 0;
+}
+
+.config label {
+  display: inline;
+}
+
 .console {
   white-space: pre;
   overflow: scroll;
 }
 
-.ui-tabs {
-  padding: 0px;
-}
 .ui-widget {
   font-size: 0.8em;
 }
+
+span.input-append {
+  margin-bottom: 0;
+}
+
+select name="insert_metric" {
+  margin-bottom: 0px;
+}
+
+.ui-tabs .ui-tabs-panel {
+  display: block;
+  border-width: 0;
+  padding: .5em 1em;
+  background: none;
+}
+
+.ui-tabs .ui-tabs-nav li {
+  font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 11pt;
+  border-bottom: 0;
+}
+
+#graph_container .grouping_box {
+  padding: 2px;
+}
+
+/* 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;
+}
+
+.config label.checkbox {
+  padding-top: 0;
+}

web/static/css/prometheus.css

@@ -5,14 +5,14 @@ body {
   color: #333;
   background-color: #f2f2f2;
   margin: 0px;
-  padding: 0px;
+  padding: 40px 0 0 0;
+
 }
 
-input:not([type=submit]):not([type=file]):not([type=button]) {
+.error_text {
-  border: 1px solid #aaa;
+  background-color: #f2dede;
-  -webkit-border-radius: 3px;
+  border: 1px solid #c0a0a0;
-     -moz-border-radius: 3px;
+  padding: 0 2px 0 2px;
-          border-radius: 3px;
 }
 
 h2 {
@@ -21,14 +21,13 @@ h2 {
 
 .grouping_box {
   position: relative;
-  padding: 5px;
+  padding: 0 5px 0 5px;
-  margin: 2px;
   background-color: #fff;
   border: 1px solid #ccc;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
-  margin: 0px 8px 2px 8px;
+  margin: 0 8px 2px 8px;
 }
 
 .grouping_box .head, .eval_stats {
@@ -51,7 +50,6 @@ input {
 
 select {
   z-index: 10;
-  width: 150px;
 }
 
 input[name=end_input], input[name=range_input] {
@@ -59,33 +57,15 @@ input[name=end_input], input[name=range_input] {
   margin-right: -4px;
 }
 
-#navigation {
+/*
-  background-color: #333;
+ * This reduces the spacing between the bootstrap navbar and the content below.
-  padding: 3px;
+ */
-  font-size: 13px;
+div.navbar {
-  font-weight: bold;
+  margin-bottom: 2px;
-}
-
-#navigation a {
-  color: #bbb;
-  padding: 5px;
-  text-decoration: none;
-}
-
-#navigation a:visited { color: #bbb }
-#navigation a:active { color: #fff }
-#navigation a:hover { color: #fff }
-
-#add_graph {
-    margin-left: 8px;
 }
 
 .literal_output td {
   font-family: monospace;
 }
 
-.error_text {
+
-  background-color: #f2dede;
-  border: 1px solid #c0a0a0;
-  padding: 0 2px 0 2px;
-}

web/static/js/graph.js

@@ -124,11 +124,11 @@ Prometheus.Graph.prototype.initialize = function() {
   });
   self.spinner.hide();
 
-  self.queryForm.find("input[name=inc_range]").click(function() { self.increaseRange(); });
+  self.queryForm.find("button[name=inc_range]").click(function() { self.increaseRange(); });
-  self.queryForm.find("input[name=dec_range]").click(function() { self.decreaseRange(); });
+  self.queryForm.find("button[name=dec_range]").click(function() { self.decreaseRange(); });
 
-  self.queryForm.find("input[name=inc_end]").click(function() { self.increaseEnd(); });
+  self.queryForm.find("button[name=inc_end]").click(function() { self.increaseEnd(); });
-  self.queryForm.find("input[name=dec_end]").click(function() { self.decreaseEnd(); });
+  self.queryForm.find("button[name=dec_end]").click(function() { self.decreaseEnd(); });
 
   self.insertMetric.change(function() {
     self.expr.selection('replace', {text: self.insertMetric.val(), mode: 'before'})
@@ -509,8 +509,18 @@ Prometheus.Graph.prototype.handleGraphResponse = function(json, textStatus) {
 
 Prometheus.Graph.prototype.handleConsoleResponse = function(text, textStatus) {
   var self = this;
+  var body = "<table class=\"table-striped console_table\"></table>";
   self.consoleTab.removeClass('reload');
-  self.consoleTab.text(text);
+  self.consoleTab.html(body);
+
+  var elements = text.split("\n");
+  var table = $("#console_table");
+  table.find("tr:gt(0)").remove();
+  for (var i = 0; i < elements.length; i++) {
+    var e = "<tr><td>" + elements[i] + "</td></tr>";
+    table.append(e);
+  }
+  console.log(table);
 }
 
 function parseGraphOptionsFromUrl() {

web/static/js/graph_template.handlebar

@@ -3,49 +3,99 @@
             <div class="grouping_box">
               <div class="head">
                 <div class="expr">
-                  <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" size="80" value="{{expr}}">
+                  <span class="input-append">
+                    <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="input-xxlarge">
+                    <input class="btn btn-primary" type="submit" value="Execute" name="submit">
+                  </span>
                   <select name="insert_metric">
-                      <option value="">- Insert Metric -</option>
+                      <option value="">- Insert Metric at Cursor -</option>
                   </select>
-                  <input type="submit" value="Graph" name="submit">
                 </div>
               </div>
               <div class="eval_stats"></div>
               <img src="/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
             </div>
+            <!--
+              TODO: Convert this to Bootstrap navbar.  This requires Javascript
+                    refresh.
+              -->
             <div class="grouping_box tabs">
               <ul>
                 <li><a href="#graph{{id}}">Graph</a></li>
-                <li><a href="#console{{id}}">Console</a></li>
+                <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>
-                  <input type="button" value="-" name="dec_range">
+                  <!-- Extracted to force grouped inputs. -->
-                  <input title="Time range of graph" type="text" name="range_input" id="range_input{{id}}" size="3" value="{{range_input}}"  >
-                  <input type="button" value="+" name="inc_range">
                   <input type="hidden" name="range">
+                  <div class="input-prepend input-append">
 
-                  <input type="button" value="&larr;" name="dec_end">
+                    <button
-                  <input title="End time of graph" placeholder="Until" type="text" name="end_input" id="end{{id}}" size="16" value="{{end  }}">
+                        class="btn btn-mini"
-                  <input type="button" value="&rarr;" name="inc_end">
+                        type="button"
+                        name="dec_range"
+                        title="Shrink the time range.">
+                      <i class="icon-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}}">
+
+                    <button
+                        class="btn btn-mini"
+                        type="button"
+                        name="inc_range"
+                        title="Grow the time range.">
+                      <i class="icon-plus"></i>
+                    </button>
+                  </div>
+
+                  <!-- Extracted to force grouped inputs. -->
                   <input type="hidden" name="end">
+                  <div class="input-prepend input-append">
 
-                  <input title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
+                    <button
+                        class="btn btn-mini"
+                        type="button"
+                        name="dec_end"
+                        title="Rewind the end time.">
+                      <i class="icon-backward"></i>
+                    </button>
+
+                    <input
+                        class="input-medium"
+                        id="end{{id}}"
+                        title="End time of graph"
+                        placeholder="Until"
+                        type="text"
+                        name="end_input"
+                        size="16"
+                        value="{{end}}">
+
+                    <button
+                        class="btn btn-mini"
+                        type="button"
+                        name="inc_end"
+                        title="Advance the end time.">
+                      <i class="icon-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">
-                  <label for="refresh">↻</label>
+
-                  <select title="Auto-refresh interval" name="refresh" class="refresh_interval">
+                  <label class="checkbox inline">
-                    <option>disabled</option>
+                    <input type="checkbox" name="stacked" {{stacked_checked}}>
-                    <option>2m</option>
+                    Stacked
-                    <option>3m</option>
+                  </label>
-                    <option>5m</option>
-                    <option>10m</option>
-                    <option>15m</option>
-                  </select>
-                  <span class="opts">
-                    <input type="checkbox" name="stacked" id="stacked{{id}}" {{stacked_checked}}>
-                    <label for="stacked{{id}}">Stacked</label>
-                  </span>
                 </div>
 
                 <div class="graph_area">

web/templates/_base.html

@@ -4,21 +4,31 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Prometheus Time Series Collection and Processing Server</title>
     <script src="/static/vendor/js/jquery.min.js"></script>
+
+    <link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.css">
     <link type="text/css" rel="stylesheet" href="/static/css/prometheus.css">
+
     {{template "head" .}}
   </head>
 
   <body>
-    <div id="navigation">
+    <div class="navbar navbar-inverse navbar-fixed-top">
-      <a href="/graph">Graph &amp; Console</a>
+      <div class="navbar-inner">
-      <a href="/">Status</a>
+        <div class="container-fluid">
-      <a href="/databases">Databases</a>
+          <a class="brand" href="https://github.com/prometheus/prometheus" target="_blank">Prometheus</a>
-      <a href="/alerts">Alerts</a>
+          <ul class="nav">
-      {{ define "user_dashboard_link" }}{{ end }}
+            <li>{{ define "user_dashboard_link" }}{{ end }}
-      {{ template "user_dashboard_link" .}}
+                {{ template "user_dashboard_link" .}}</li>
-
+            <li><a href="/alerts">Alerts</a></li>
-      <!-- Help should preferentially be the right-most element. -->
+            <li><a href="/graph">Graph &amp; Console</a></li>
+            <li><a href="/">Status</a></li>
+            <li><a href="/databases">Databases</a></li>
+            <li>
               <a href="https://github.com/prometheus/prometheus/wiki" target="_blank">Help</a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
     {{template "content" .}}
   </body>

web/templates/graph.html

@@ -8,6 +8,7 @@
     <link type="text/css" rel="stylesheet" href="/static/vendor/jquery-simple-datetimepicker/jquery.simple-dtpicker.css">
 
     <link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">
+
     <script src="/static/vendor/rickshaw/vendor/d3.min.js"></script>
     <script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
     <script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
@@ -24,5 +25,5 @@
 {{define "content"}}
     <div id="graph_container">
     </div>
-    <div><input type="button" value="Add Graph" id="add_graph"></div>
+    <div><input class="btn btn-primary" type="submit" value="Add Graph" id="add_graph"></div>
 {{end}}

web/templates/status.html

@@ -2,7 +2,7 @@
 
 {{define "content"}}
     <h2>Runtime Information</h2>
-    <div class="grouping_box">
+    <div class="grouping_box table-striped">
       <table>
         <tbody>
           <tr>
@@ -14,7 +14,7 @@
     </div>
     <h2>Build Information</h2>
     <div class="grouping_box">
-      <table>
+      <table class="table-striped">
         <tbody>
           {{range $key, $value := .BuildInfo}}
           <tr>
@@ -81,7 +81,7 @@
 
     <h2>Curation</h2>
     <div class="grouping_box">
-      <table>
+      <table class="table-striped">
         <tr>
           <th>Active</th>
           <td>{{.Curation.Active}}</td>
@@ -104,8 +104,8 @@
     </div>
 
     <h2>Startup Flags</h2>
-    <div class="grouping_box">
+    <div class="grouping_box table-striped">
-      <table>
+      <table class="table-striped">
         <tbody>
           {{range $key, $value := .Flags}}
           <tr>