Improve graph UI.

- resize graphs on browser resize
- move status field to upper right corner to save some space
- align the legend width to the graph's width

web/static/css/prometheus.css

@@ -23,3 +23,22 @@ input:not([type=submit]):not([type=file]):not([type=button]) {
      -moz-border-radius: 4px;
           border-radius: 4px;
 }
+
+.graph {
+  min-height: 400px;
+  overflow-x: hidden;
+}
+
+div.legend {
+  display: block;
+}
+
+form {
+  display: inline-block;
+}
+
+.eval_stats {
+  display: inline;
+  vertical-align: top;
+}
+

web/static/graph.html

@@ -56,10 +56,9 @@
 
             <input type="submit" value="Graph" name="submit">
 
-            <img src="img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
-
-            <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">

web/static/js/graph.js

@@ -321,8 +321,8 @@ Prometheus.Graph.prototype.showGraph = function() {
   var self = this;
   self.rickshawGraph = new Rickshaw.Graph({
     element: self.graph[0],
-    height: Math.max($(window).height() - 200, 100),
-    width: Math.max($(window).width() - 200, 200),
+    height: Math.max(self.graph.innerHeight(), 100),
+    width: Math.max(self.graph.innerWidth(), 200),
     renderer: (self.stacked.is(":checked") ? "stack" : "line"),
     interpolation: "linear",
     series: self.data
@@ -370,6 +370,14 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
 
   self.changeHandler();
 };
+Prometheus.Graph.prototype.resizeGraph = function() {
+  var self = this;
+  self.rickshawGraph.configure({
+    height: Math.max(self.graph.innerHeight(), 100),
+    width: Math.max(self.graph.innerWidth(), 200),
+  });
+  self.rickshawGraph.render();
+};
 
 function parseGraphOptionsFromUrl() {
   var hashOptions = window.location.hash.slice(1);
@@ -395,6 +403,9 @@ function addGraph(options) {
   graph.onChange(function() {
     storeGraphOptionsInUrl();
   });
+  $(window).resize(function() {
+    graph.resizeGraph();
+  });
 }
 
 function init() {