diff --git a/web/static/css/prometheus.css b/web/static/css/prometheus.css
index 2a563b085..27c45ae75 100644
--- a/web/static/css/prometheus.css
+++ b/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;
+}
+
diff --git a/web/static/graph.html b/web/static/graph.html
index 46360e674..da6f6d7c1 100644
--- a/web/static/graph.html
+++ b/web/static/graph.html
@@ -56,10 +56,9 @@
-
-
-
diff --git a/web/static/js/graph.js b/web/static/js/graph.js
index aa87e9a0f..d226b00c1 100644
--- a/web/static/js/graph.js
+++ b/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() {