Make all URLs relative to support proxies.

This makes all URLs relative instead of absolute to enable people to run Prometheus behind a Proxy with a different path (like http://myproxy/prometheus/). The caveat is that this now codifies assumptions for the relative path depths for all pages. For example, consoles templates are now always assumed to be one path level from the root (because the common header and console library adds '../' to all their URLs). Currently we don't have example consoles in subdirectories of "consoles", but this would disallow that for the future (or we could add later support for detecting somehow what the right depth is based on the console file we're loading). This fixes #519
prometheus · Mar 11, 2015 · 24a2a94 · 24a2a94
1 parent 7de2cf2
commit 24a2a94
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 47 deletions.
diff --git a/console_libraries/menu.lib b/console_libraries/menu.lib
@@ -12,12 +12,12 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="/">Prometheus</a>
+      <a class="navbar-brand" href="../">Prometheus</a>
     </div>
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
-        <li><a href="/alerts">Alerts</a></li>
+        <li><a href="../alerts">Alerts</a></li>
         <li><a href="https://www.pagerduty.com/">PagerDuty</a></li>
       </div>
     </ul>

diff --git a/console_libraries/prom.lib b/console_libraries/prom.lib
@@ -1,15 +1,15 @@
 {{/* vim: set ft=html: */}}
 {{/* Load Prometheus console library JS/CSS. Should go in <head> */}}
 {{ define "prom_console_head" }}
-<link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">
-<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
-<link type="text/css" rel="stylesheet" href="/static/css/prom_console.css">
-<script src="/static/vendor/rickshaw/vendor/d3.v3.js"></script>
-<script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
-<script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
-<script src="/static/vendor/js/jquery.min.js"></script>
-<script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
-<script src="/static/js/prom_console.js"></script>
+<link type="text/css" rel="stylesheet" href="../static/vendor/rickshaw/rickshaw.min.css">
+<link type="text/css" rel="stylesheet" href="../static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
+<link type="text/css" rel="stylesheet" href="../static/css/prom_console.css">
+<script src="../static/vendor/rickshaw/vendor/d3.v3.js"></script>
+<script src="../static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
+<script src="../static/vendor/rickshaw/rickshaw.min.js"></script>
+<script src="../static/vendor/js/jquery.min.js"></script>
+<script src="../static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
+<script src="../static/js/prom_console.js"></script>
 {{ end }}
 
 {{/* Top of all pages. */}}
@@ -38,7 +38,7 @@ renderTemplate is the name of the template to use to render the value.
 */}}
 {{ define "prom_query_drilldown" }}
 {{ $expr := .arg0 }}{{ $suffix := (or .arg1 "") }}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop") }}
-<a class="prom_query_drilldown" href="{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{ else }}-{{ end }}</a>
+<a class="prom_query_drilldown" href="../{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{ else }}-{{ end }}</a>
 {{ end }}
 
 {{ define "prom_path" }}/consoles/{{ .Path }}?{{ range $param, $value := .Params }}{{ $param }}={{ $value }}&amp;{{ end }}{{ end }}"

diff --git a/rules/helpers.go b/rules/helpers.go
@@ -210,12 +210,12 @@ func TableLinkForExpression(expr string) string {
 	// See also:
 	// http://stackoverflow.com/questions/1634271/url-encoding-the-space-character-or-20.
 	urlData := url.QueryEscape(fmt.Sprintf(`[{"expr":%q,"tab":1}]`, expr))
-	return fmt.Sprintf("/graph#%s", strings.Replace(urlData, "+", "%20", -1))
+	return fmt.Sprintf("graph#%s", strings.Replace(urlData, "+", "%20", -1))
 }
 
 // GraphLinkForExpression creates an escaped relative link to the graph view of
 // the provided expression.
 func GraphLinkForExpression(expr string) string {
 	urlData := url.QueryEscape(fmt.Sprintf(`[{"expr":%q,"tab":0}]`, expr))
-	return fmt.Sprintf("/graph#%s", strings.Replace(urlData, "+", "%20", -1))
+	return fmt.Sprintf("graph#%s", strings.Replace(urlData, "+", "%20", -1))
 }
diff --git a/templates/templates_test.go b/templates/templates_test.go
@@ -135,12 +135,12 @@ func TestTemplateExpansion(t *testing.T) {
 		{
 			// graphLink.
 			text:   "{{ graphLink \"up\" }}",
-			output: "/graph#%5B%7B%22expr%22%3A%22up%22%2C%22tab%22%3A0%7D%5D",
+			output: "graph#%5B%7B%22expr%22%3A%22up%22%2C%22tab%22%3A0%7D%5D",
 		},
 		{
 			// tableLink.
 			text:   "{{ tableLink \"up\" }}",
-			output: "/graph#%5B%7B%22expr%22%3A%22up%22%2C%22tab%22%3A1%7D%5D",
+			output: "graph#%5B%7B%22expr%22%3A%22up%22%2C%22tab%22%3A1%7D%5D",
 		},
 		{
 			// tmpl.

diff --git a/web/static/js/graph.js b/web/static/js/graph.js
@@ -158,7 +158,7 @@ Prometheus.Graph.prototype.populateInsertableMetrics = function() {
   var self = this;
   $.ajax({
       method: "GET",
-      url: "/api/metrics",
+      url: "api/metrics",
       dataType: "json",
       success: function(json, textStatus) {
         var availableMetrics = [];
@@ -310,7 +310,7 @@ Prometheus.Graph.prototype.submitQuery = function() {
     url  = self.queryForm.attr("action");
     success = function(json, textStatus) { self.handleGraphResponse(json, textStatus); };
   } else {
-    url  = "/api/query";
+    url  = "api/query";
     success = function(text, textStatus) { self.handleConsoleResponse(text, textStatus); };
   }
 
@@ -607,7 +607,7 @@ function init() {
   });
 
   $.ajax({
-    url: "/static/js/graph_template.handlebar",
+    url: "static/js/graph_template.handlebar",
     success: function(data) {
       graphTemplate = Handlebars.compile(data);
       var options = parseGraphOptionsFromURL();

diff --git a/web/static/js/graph_template.handlebar b/web/static/js/graph_template.handlebar
@@ -1,5 +1,5 @@
         <div id="graph_wrapper{{id}}" class="graph_wrapper">
-          <form action="/api/query_range" method="GET" class="query_form form-inline">
+          <form action="api/query_range" method="GET" class="query_form form-inline">
             <div class="row">
               <div class="col-lg-10">
                 <span class="input-group expression_input_group">
@@ -14,7 +14,7 @@
               </div>
               <div class="col-lg-2">
                 <div class="eval_stats pull-right"></div>
-                <img src="/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
+                <img src="static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
               </div>
             </div>
             <div class="row">

diff --git a/web/static/js/prom_console.js b/web/static/js/prom_console.js
@@ -476,7 +476,7 @@ PromConsole.Graph.prototype.dispatch = function() {
   var pending_requests = this.params.expr.length;
   for (var i = 0; i < this.params.expr.length; ++i) {
     var endTime = this.params.endTime;
-    var url = "/api/query_range?expr=" + encodeURIComponent(this.params.expr[i])
+    var url = "../api/query_range?expr=" + encodeURIComponent(this.params.expr[i])
       + "&step=" + this.params.duration / this.graphTd.offsetWidth
       + "&range=" + this.params.duration + "&end=" + endTime;
     var xhr = new XMLHttpRequest();
@@ -513,7 +513,7 @@ PromConsole.Graph.prototype.dispatch = function() {
   }
 
   var loadingImg = document.createElement("img");
-  loadingImg.src = '/static/img/ajax-loader.gif';
+  loadingImg.src = '../static/img/ajax-loader.gif';
   loadingImg.alt = 'Loading...';
   loadingImg.className = 'prom_graph_loading';
   this.graphTd.appendChild(loadingImg);
@@ -579,6 +579,6 @@ PromConsole._graphsToSlashGraphURL = function(exprs) {
   for (var i = 0; i < exprs.length; ++i) {
     data.push({'expr': exprs[i], 'tab': 0});
   }
-  return '/graph#' + encodeURIComponent(JSON.stringify(data));
+  return '../graph#' + encodeURIComponent(JSON.stringify(data));
 
 };
diff --git a/web/templates/_base.html b/web/templates/_base.html
@@ -3,10 +3,10 @@
   <head>
     <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>
+    <script src="static/vendor/js/jquery.min.js"></script>
 
-    <link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
-    <link type="text/css" rel="stylesheet" href="/static/css/prometheus.css">
+    <link type="text/css" rel="stylesheet" href="static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
+    <link type="text/css" rel="stylesheet" href="static/css/prometheus.css">
 
     {{template "head" .}}
   </head>
@@ -21,17 +21,17 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="/">Prometheus</a>
+          <a class="navbar-brand" href="./">Prometheus</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-left">
             {{$consoles := getConsoles}}
             {{if $consoles}}
             <li><a href="{{$consoles}}">Consoles</a></li>
             {{ end }}
-            <li><a href="/alerts">Alerts</a></li>
-            <li><a href="/graph">Graph</a></li>
-            <li><a href="/">Status</a></li>
+            <li><a href="alerts">Alerts</a></li>
+            <li><a href="graph">Graph</a></li>
+            <li><a href="./">Status</a></li>
             <li>
               <a href="http://prometheus.io" target="_blank">Help</a>
             </li>

diff --git a/web/templates/alerts.html b/web/templates/alerts.html
@@ -1,6 +1,6 @@
 {{define "head"}}
-    <link type="text/css" rel="stylesheet" href="/static/css/alerts.css">
-    <script src="/static/js/alerts.js"></script>
+    <link type="text/css" rel="stylesheet" href="static/css/alerts.css">
+    <script src="static/js/alerts.js"></script>
 {{end}}
 
 {{define "content"}}

diff --git a/web/templates/graph.html b/web/templates/graph.html
@@ -1,22 +1,22 @@
 {{define "head"}}
-    <script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
+    <script src="static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
 
-    <link type="text/css" rel="stylesheet" href="/static/css/graph.css">
+    <link type="text/css" rel="stylesheet" href="static/css/graph.css">
 
-    <link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">
-    <link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
+    <link type="text/css" rel="stylesheet" href="static/vendor/rickshaw/rickshaw.min.css">
+    <link type="text/css" rel="stylesheet" href="static/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
 
-    <script src="/static/vendor/rickshaw/vendor/d3.v3.js"></script>
-    <script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
-    <script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
-    <script src="/static/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
-    <script src="/static/vendor/bootstrap3-typeahead/bootstrap3-typeahead.min.js"></script>
+    <script src="static/vendor/rickshaw/vendor/d3.v3.js"></script>
+    <script src="static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
+    <script src="static/vendor/rickshaw/rickshaw.min.js"></script>
+    <script src="static/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
+    <script src="static/vendor/bootstrap3-typeahead/bootstrap3-typeahead.min.js"></script>
 
-    <script src="/static/vendor/js/handlebars.js"></script>
-    <script src="/static/vendor/js/jquery.selection.js"></script>
-    <script src="/static/vendor/js/jquery.hotkeys.js"></script>
+    <script src="static/vendor/js/handlebars.js"></script>
+    <script src="static/vendor/js/jquery.selection.js"></script>
+    <script src="static/vendor/js/jquery.hotkeys.js"></script>
 
-    <script src="/static/js/graph.js"></script>
+    <script src="static/js/graph.js"></script>
 
     <script id="graph_template" type="text/x-handlebars-template"></script>
 {{end}}

diff --git a/web/web.go b/web/web.go
@@ -197,5 +197,5 @@ func MustBuildServerURL() string {
 	if err != nil {
 		panic(err)
 	}
-	return fmt.Sprintf("http://%s:%s", hostname, port)
+	return fmt.Sprintf("http://%s:%s/", hostname, port)
 }