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

 		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

 {{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">
       <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>
 
       <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>
 
     {{.HTMLBody}}
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, {{.Nodes}});</script>
+  <script>viewer(new URL(window.location.href), {{.Nodes}});</script>
 </body>
 </html>
 {{end}}
   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();
   }
 
       bindSort('namehdr', 'Name');
     }
 
-    viewer({{.BaseURL}}, {{.Nodes}});
+    viewer(new URL(window.location.href), {{.Nodes}});
     makeTopTable({{.Total}}, {{.Top}});
   </script>
 </body>
     {{.HTMLBody}}
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, null);</script>
+  <script>viewer(new URL(window.location.href), null);</script>
 </body>
 </html>
 {{end}}
     </pre>
   </div>
   {{template "script" .}}
-  <script>viewer({{.BaseURL}}, null);</script>
+  <script>viewer(new URL(window.location.href), null);</script>
 </body>
 </html>
 {{end}}
     <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

 
 // webArgs contains arguments passed to templates in webhtml.go.
 type webArgs struct {
-	BaseURL    string
 	Title      string
 	Errors     []string
 	Total      int64
 		}
 		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)
 }
 
 }
 
 // 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()
 		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,
 	})
 		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,
 	})
 	}
 
 	legend := report.ProfileLabels(rpt)
-	ui.render(w, "/disasm", "plaintext", rpt, errList, legend, webArgs{
+	ui.render(w, "plaintext", rpt, errList, legend, webArgs{
 		TextBody: out.String(),
 	})
 
 	}
 
 	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()),
 	})
 }
 	}
 
 	legend := report.ProfileLabels(rpt)
-	ui.render(w, "/peek", "plaintext", rpt, errList, legend, webArgs{
+	ui.render(w, "plaintext", rpt, errList, legend, webArgs{
 		TextBody: out.String(),
 	})
 }