Flame Graph support on Web UI

CONTRIBUTORS

@@ -11,4 +11,5 @@
 Raul Silvera <rsilvera@google.com>
 Tipp Moseley <tipp@google.com>
 Hyoun Kyu Cho <netforce@google.com>
+Martin Spier <spiermar@gmail.com>
 

internal/driver/flamegraph.go

@@ -0,0 +1,105 @@
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package driver
+
+import (
+	"encoding/json"
+	"fmt"
+	"html/template"
+	"math"
+	"net/http"
+	"strings"
+
+	"github.com/google/pprof/internal/graph"
+	"github.com/google/pprof/internal/report"
+)
+
+type treeNode struct {
+	Name      string      `json:"n"`
+	Cum       int64       `json:"v"`
+	CumFormat string      `json:"l"`
+	Percent   string      `json:"p"`
+	Children  []*treeNode `json:"c"`
+}
+
+// percentage computes the percentage of total of a value, and encodes
+// it as a string. At least two digits of precision are printed.
+func percentage(value, total int64) string {
+	var ratio float64
+	if total != 0 {
+		ratio = math.Abs(float64(value)/float64(total)) * 100
+	}
+	return fmt.Sprintf("%5.2f%%", ratio)
+}
+
+// flamegraph generates a web page containing a flamegraph.
+func (ui *webInterface) flamegraph(w http.ResponseWriter, req *http.Request) {
+	// Force the call tree so that the graph is a tree.
+	rpt, errList := ui.makeReport(w, req, []string{"svg"}, "call_tree", "true")
+	if rpt == nil {
+		return // error already reported
+	}
+
+	// Generate dot graph.
+	g, config := report.GetDOT(rpt)
+	var nodes []*treeNode
+	nroots := 0
+	rootValue := int64(0)
+	nodeMap := map[*graph.Node]*treeNode{}
+	// Make all nodes and the map, collect the roots.
+	for _, n := range g.Nodes {
+		v := n.CumValue()
+		node := &treeNode{
+			Name:      n.Info.PrintableName(),
+			Cum:       v,
+			CumFormat: config.FormatValue(v),
+			Percent:   strings.TrimSpace(percentage(v, config.Total)),
+		}
+		nodes = append(nodes, node)
+		if len(n.In) == 0 {
+			nodes[nroots], nodes[len(nodes)-1] = nodes[len(nodes)-1], nodes[nroots]
+			nroots++
+			rootValue += v
+		}
+		nodeMap[n] = node
+	}
+	// Populate the child links.
+	for _, n := range g.Nodes {
+		node := nodeMap[n]
+		for child := range n.Out {
+			node.Children = append(node.Children, nodeMap[child])
+		}
+	}
+
+	rootNode := &treeNode{
+		Name:      "root",
+		Cum:       rootValue,
+		CumFormat: config.FormatValue(rootValue),
+		Percent:   strings.TrimSpace(percentage(rootValue, config.Total)),
+		Children:  nodes[0:nroots],
+	}
+
+	// JSON marshalling flame graph
+	b, err := json.Marshal(rootNode)
+	if err != nil {
+		http.Error(w, "error serializing flame graph", http.StatusInternalServerError)
+		ui.options.UI.PrintErr(err)
+		return
+	}
+
+	ui.render(w, "/flamegraph", "flamegraph", rpt, errList, config.Labels, webArgs{
+		FlameGraph: template.JS(b),
+	})
+}

internal/driver/webhtml.go

@@ -15,9 +15,15 @@
 package driver
 
 import "html/template"
+import "github.com/google/pprof/third_party/d3"
+import "github.com/google/pprof/third_party/d3tip"
+import "github.com/google/pprof/third_party/d3flamegraph"
 
 // addTemplates adds a set of template definitions to templates.
 func addTemplates(templates *template.Template) {
+	template.Must(templates.Parse(d3.Source))
+	template.Must(templates.Parse(d3tip.Source))
+	template.Must(templates.Parse(d3flamegraph.Source))
 	template.Must(templates.Parse(`
 {{define "css"}}
 <style type="text/css">
@@ -193,6 +199,7 @@ View
 <div class="menu">
 <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>
@@ -961,5 +968,117 @@ makeTopTable({{.Total}}, {{.Top}})
 </body>
 </html>
 {{end}}
+
+{{define "flamegraph" -}}
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>{{.Title}}</title>
+{{template "css" .}}
+<style type="text/css">{{template "d3flamegraphcss" .}}</style>
+<style type="text/css">
+.flamegraph-content {
+    width: 90%;
+    min-width: 80%;
+    margin-left: 5%;
+}
+.flamegraph-details {
+    height: 1.2em;
+    width: 90%;
+    min-width: 90%;
+    margin-left: 5%;
+    padding-bottom: 41px;
+}
+</style>
+</head>
+<body>
+{{template "header" .}}
+<div id="bodycontainer">
+  <div class="flamegraph-content">
+    <div id="chart"></div>
+  </div>
+  <div id="flamegraphdetails" class="flamegraph-details"></div>
+</div>
+{{template "script" .}}
+<script>viewer({{.BaseURL}}, {{.Nodes}})</script>
+<script>{{template "d3script" .}}</script>
+<script>{{template "d3tipscript" .}}</script>
+<script>{{template "d3flamegraphscript" .}}</script>
+<script type="text/javascript">
+    var data = {{.FlameGraph}};
+    var label = function(d) {
+        return d.data.n + " (" + d.data.p + ", " + d.data.l + ")";
+    };
+
+    var width = document.getElementById("chart").clientWidth;
+
+    var flameGraph = d3.flameGraph()
+        .width(width)
+        .cellHeight(18)
+        .minFrameSize(1)
+        .transitionDuration(750)
+        .transitionEase(d3.easeCubic)
+        .sort(true)
+        .title("")
+        .label(label)
+        .details(document.getElementById("flamegraphdetails"));
+
+    var tip = d3.tip()
+        .direction("s")
+        .offset([8, 0])
+        .attr('class', 'd3-flame-graph-tip')
+        .html(function(d) { return "name: " + d.data.n + ", value: " + d.data.l; });
+
+    flameGraph.tooltip(tip);
+
+    d3.select("#chart")
+        .datum(data)
+        .call(flameGraph);
+
+    function clear() {
+        flameGraph.clear();
+    }
+
+    function resetZoom() {
+        flameGraph.resetZoom();
+    }
+
+    window.addEventListener("resize", function() {
+        var width = document.getElementById("chart").clientWidth;
+        var graphs = document.getElementsByClassName("d3-flame-graph");
+        if (graphs.length > 0) {
+            graphs[0].setAttribute("width", width);
+        }
+        flameGraph.width(width);
+        flameGraph.resetZoom();
+    }, true);
+
+    var searchbox = document.getElementById("searchbox");
+    var searchAlarm = null;
+
+    function selectMatching() {
+      searchAlarm = null;
+
+      if (searchbox.value != "") {
+        flameGraph.search(searchbox.value);
+      } else {
+        flameGraph.clear();
+      }
+    }
+
+    function handleSearch() {
+      // Delay expensive processing so a flurry of key strokes is handled once.
+      if (searchAlarm != null) {
+        clearTimeout(searchAlarm);
+      }
+      searchAlarm = setTimeout(selectMatching, 300);
+    }
+
+    searchbox.addEventListener("input", handleSearch);
+</script>
+</body>
+</html>
+{{end}}
 `))
 }

internal/driver/webui.go

@@ -69,16 +69,17 @@ 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
-	Legend   []string
-	Help     map[string]string
-	Nodes    []string
-	HTMLBody template.HTML
-	TextBody string
-	Top      []report.TextItem
+	BaseURL    string
+	Title      string
+	Errors     []string
+	Total      int64
+	Legend     []string
+	Help       map[string]string
+	Nodes      []string
+	HTMLBody   template.HTML
+	TextBody   string
+	Top        []report.TextItem
+	FlameGraph template.JS
 }
 
 func serveWebInterface(hostport string, p *profile.Profile, o *plugin.Options, wantBrowser bool) error {
@@ -115,11 +116,12 @@ func serveWebInterface(hostport string, p *profile.Profile, o *plugin.Options, w
 		Host:     host,
 		Port:     port,
 		Handlers: map[string]http.Handler{
-			"/":       http.HandlerFunc(ui.dot),
-			"/top":    http.HandlerFunc(ui.top),
-			"/disasm": http.HandlerFunc(ui.disasm),
-			"/source": http.HandlerFunc(ui.source),
-			"/peek":   http.HandlerFunc(ui.peek),
+			"/":           http.HandlerFunc(ui.dot),
+			"/top":        http.HandlerFunc(ui.top),
+			"/disasm":     http.HandlerFunc(ui.disasm),
+			"/source":     http.HandlerFunc(ui.source),
+			"/peek":       http.HandlerFunc(ui.peek),
+			"/flamegraph": http.HandlerFunc(ui.flamegraph),
 		},
 	}
 

internal/driver/webui_test.go

@@ -80,6 +80,7 @@ func TestWebInterface(t *testing.T) {
 			[]string{"300ms.*F1", "200ms.*300ms.*F2"}, false},
 		{"/disasm?f=" + url.QueryEscape("F[12]"),
 			[]string{"f1:asm", "f2:asm"}, false},
+		{"/flamegraph", []string{"File: testbin", "\"n\":\"root\"", "\"n\":\"F1\"", "function tip", "function flameGraph", "function hierarchy"}, false},
 	}
 	for _, c := range testcases {
 		if c.needDot && !haveDot {

third_party/d3/LICENSE

@@ -0,0 +1,27 @@
+Copyright 2010-2017 Mike Bostock
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the author nor the names of contributors may be used to
+  endorse or promote products derived from this software without specific prior
+  written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.