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 @@ - ajax_spinner - -
+ ajax_spinner +
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() {