Allow serving web ui at arbitrary root (#348)

Previously, the web UI was hard-coded to be served at `/` but
applications which are *embedding* the ui are unlikely to host it there.

This change makes the links between the various ui pages relative,
addressing this problem.

To make sure this doesn't rot, the internal http server now serves the
ui at /ui/ (redirecting there from the root).

I think we can all agree that the ui code and JavaScript is kind of a
haphazard affair. I performed a great deal of clicking around to make
sure the semantics didn't change and interestingly spent some time
trying to fix semantics I later realized weren't actually there: I
thought that when navigating to another page from a focused search (say
`flamegraph?f=x`) the focus would be carried over. This doesn't seem to
be the case, however.

The point being, there's no test coverage and setting it up is way
beyond what I can do here. I'm happy to manually verify whatever
sequence of clicks is suggested, though.

Touches https://github.com/cockroachdb/cockroach/pull/24145.

internal/driver/flamegraph.go

@@ -92,7 +92,7 @@ func (ui *webInterface) flamegraph(w http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	ui.render(w, "/flamegraph", "flamegraph", rpt, errList, config.Labels, webArgs{
+	ui.render(w, "flamegraph", rpt, errList, config.Labels, webArgs{
 		FlameGraph: template.JS(b),
 		Nodes:      nodeArr,
 	})

internal/driver/webhtml.go

@@ -233,7 +233,7 @@ table tr td {
 {{define "header"}}
 <div class="header">
   <div class="title">
-    <h1><a href="/">pprof</a></h1>
+    <h1><a href="./">pprof</a></h1>
   </div>
 
   <div id="view" class="menu-item">
@@ -242,12 +242,12 @@ table tr td {
       <i class="downArrow"></i>
     </div>
     <div class="submenu">
-      <a title="{{.Help.top}}"  href="/top" id="topbtn">Top</a>
-      <a title="{{.Help.graph}}" href="/" id="graphbtn">Graph</a>
-      <a title="{{.Help.flamegraph}}" href="/flamegraph" id="flamegraph">Flame Graph</a>
-      <a title="{{.Help.peek}}" href="/peek" id="peek">Peek</a>
-      <a title="{{.Help.list}}" href="/source" id="list">Source</a>
-      <a title="{{.Help.disasm}}" href="/disasm" id="disasm">Disassemble</a>
+      <a title="{{.Help.top}}"  href="./top" id="topbtn">Top</a>
+      <a title="{{.Help.graph}}" href="./" id="graphbtn">Graph</a>
+      <a title="{{.Help.flamegraph}}" href="./flamegraph" id="flamegraph">Flame Graph</a>
+      <a title="{{.Help.peek}}" href="./peek" id="peek">Peek</a>
+      <a title="{{.Help.list}}" href="./source" id="list">Source</a>
+      <a title="{{.Help.disasm}}" href="./disasm" id="disasm">Disassemble</a>
     </div>
   </div>
 
@@ -257,12 +257,12 @@ table tr td {
       <i class="downArrow"></i>
     </div>
     <div class="submenu">
-      <a title="{{.Help.focus}}" href="{{.BaseURL}}" id="focus">Focus</a>
-      <a title="{{.Help.ignore}}" href="{{.BaseURL}}" id="ignore">Ignore</a>
-      <a title="{{.Help.hide}}" href="{{.BaseURL}}" id="hide">Hide</a>
-      <a title="{{.Help.show}}" href="{{.BaseURL}}" id="show">Show</a>
+      <a title="{{.Help.focus}}" href="?" id="focus">Focus</a>
+      <a title="{{.Help.ignore}}" href="?" id="ignore">Ignore</a>
+      <a title="{{.Help.hide}}" href="?" id="hide">Hide</a>
+      <a title="{{.Help.show}}" href="?" id="show">Show</a>
       <hr>
-      <a title="{{.Help.reset}}" href="{{.BaseURL}}">Reset</a>
+      <a title="{{.Help.reset}}" href="?">Reset</a>
     </div>
   </div>
 
@@ -295,7 +295,7 @@ table tr td {
     {{.HTMLBody}}
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, {{.Nodes}});</script>
+  <script>viewer(new URL(window.location.href), {{.Nodes}});</script>
 </body>
 </html>
 {{end}}
@@ -597,7 +597,7 @@ function viewer(baseUrl, nodes) {
   function handleKey(e) {
     if (e.keyCode != 13) return;
     window.location.href =
-        updateUrl(new URL({{.BaseURL}}, window.location.href), 'f');
+        updateUrl(new URL(window.location.href), 'f');
     e.preventDefault();
   }
 
@@ -963,7 +963,7 @@ function viewer(baseUrl, nodes) {
       bindSort('namehdr', 'Name');
     }
 
-    viewer({{.BaseURL}}, {{.Nodes}});
+    viewer(new URL(window.location.href), {{.Nodes}});
     makeTopTable({{.Total}}, {{.Top}});
   </script>
 </body>
@@ -986,7 +986,7 @@ function viewer(baseUrl, nodes) {
     {{.HTMLBody}}
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, null);</script>
+  <script>viewer(new URL(window.location.href), null);</script>
 </body>
 </html>
 {{end}}
@@ -1007,7 +1007,7 @@ function viewer(baseUrl, nodes) {
     </pre>
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, null);</script>
+  <script>viewer(new URL(window.location.href), null);</script>
 </body>
 </html>
 {{end}}
@@ -1044,7 +1044,7 @@ function viewer(baseUrl, nodes) {
     <div id="flamegraphdetails" class="flamegraph-details"></div>
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, {{.Nodes}});</script>
+  <script>viewer(new URL(window.location.href), {{.Nodes}});</script>
   <script>{{template "d3script" .}}</script>
   <script>{{template "d3tipscript" .}}</script>
   <script>{{template "d3flamegraphscript" .}}</script>

internal/driver/webui.go

@@ -69,7 +69,6 @@ func (ec *errorCatcher) PrintErr(args ...interface{}) {
 
 // webArgs contains arguments passed to templates in webhtml.go.
 type webArgs struct {
-	BaseURL    string
 	Title      string
 	Errors     []string
 	Total      int64
@@ -172,7 +171,15 @@ func defaultWebServer(args *plugin.HTTPServerArgs) error {
 		}
 		h.ServeHTTP(w, req)
 	})
-	s := &http.Server{Handler: handler}
+
+	// We serve the ui at /ui/ and redirect there from the root. This is done
+	// to surface any problems with serving the ui at a non-root early. See:
+	//
+	// https://github.com/google/pprof/pull/348
+	mux := http.NewServeMux()
+	mux.Handle("/ui/", http.StripPrefix("/ui", handler))
+	mux.Handle("/", http.RedirectHandler("/ui/", http.StatusTemporaryRedirect))
+	s := &http.Server{Handler: mux}
 	return s.Serve(ln)
 }
 
@@ -248,11 +255,10 @@ func (ui *webInterface) makeReport(w http.ResponseWriter, req *http.Request,
 }
 
 // render generates html using the named template based on the contents of data.
-func (ui *webInterface) render(w http.ResponseWriter, baseURL, tmpl string,
+func (ui *webInterface) render(w http.ResponseWriter, tmpl string,
 	rpt *report.Report, errList, legend []string, data webArgs) {
 	file := getFromLegend(legend, "File: ", "unknown")
 	profile := getFromLegend(legend, "Type: ", "unknown")
-	data.BaseURL = baseURL
 	data.Title = file + " " + profile
 	data.Errors = errList
 	data.Total = rpt.Total()
@@ -297,7 +303,7 @@ func (ui *webInterface) dot(w http.ResponseWriter, req *http.Request) {
 		nodes = append(nodes, n.Info.Name)
 	}
 
-	ui.render(w, "/", "graph", rpt, errList, legend, webArgs{
+	ui.render(w, "graph", rpt, errList, legend, webArgs{
 		HTMLBody: template.HTML(string(svg)),
 		Nodes:    nodes,
 	})
@@ -332,7 +338,7 @@ func (ui *webInterface) top(w http.ResponseWriter, req *http.Request) {
 		nodes = append(nodes, item.Name)
 	}
 
-	ui.render(w, "/top", "top", rpt, errList, legend, webArgs{
+	ui.render(w, "top", rpt, errList, legend, webArgs{
 		Top:   top,
 		Nodes: nodes,
 	})
@@ -354,7 +360,7 @@ func (ui *webInterface) disasm(w http.ResponseWriter, req *http.Request) {
 	}
 
 	legend := report.ProfileLabels(rpt)
-	ui.render(w, "/disasm", "plaintext", rpt, errList, legend, webArgs{
+	ui.render(w, "plaintext", rpt, errList, legend, webArgs{
 		TextBody: out.String(),
 	})
 
@@ -378,7 +384,7 @@ func (ui *webInterface) source(w http.ResponseWriter, req *http.Request) {
 	}
 
 	legend := report.ProfileLabels(rpt)
-	ui.render(w, "/source", "sourcelisting", rpt, errList, legend, webArgs{
+	ui.render(w, "sourcelisting", rpt, errList, legend, webArgs{
 		HTMLBody: template.HTML(body.String()),
 	})
 }
@@ -399,7 +405,7 @@ func (ui *webInterface) peek(w http.ResponseWriter, req *http.Request) {
 	}
 
 	legend := report.ProfileLabels(rpt)
-	ui.render(w, "/peek", "plaintext", rpt, errList, legend, webArgs{
+	ui.render(w, "plaintext", rpt, errList, legend, webArgs{
 		TextBody: out.String(),
 	})
 }