Skip to content

Commit

Permalink
Flame Graph support on Web UI (google#188)
Browse files Browse the repository at this point in the history
Implements google#166.
  • Loading branch information
spiermar authored and Gabriel Marin committed Dec 17, 2020
1 parent 1f7037c commit 738874e
Show file tree
Hide file tree
Showing 12 changed files with 6,303 additions and 16 deletions.
2 changes: 1 addition & 1 deletion CONTRIBUTORS
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
Raul Silvera <rsilvera@google.com>
Tipp Moseley <tipp@google.com>
Hyoun Kyu Cho <netforce@google.com>
Martin Spier <spiermar@gmail.com>
Taco de Wolff <tacodewolff@gmail.com>

95 changes: 95 additions & 0 deletions internal/driver/flamegraph.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
// 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"
"html/template"
"net/http"
"strings"

"github.com/google/pprof/internal/graph"
"github.com/google/pprof/internal/measurement"
"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"`
}

// 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.
// Also do not trim the tree so that the flame graph contains all functions.
rpt, errList := ui.makeReport(w, req, []string{"svg"}, "call_tree", "true", "trim", "false")
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(measurement.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(measurement.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),
})
}
120 changes: 120 additions & 0 deletions internal/driver/webhtml.go
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,16 @@
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(`{{define "d3script"}}` + d3.JSSource + `{{end}}`))
template.Must(templates.Parse(`{{define "d3tipscript"}}` + d3tip.JSSource + `{{end}}`))
template.Must(templates.Parse(`{{define "d3flamegraphscript"}}` + d3flamegraph.JSSource + `{{end}}`))
template.Must(templates.Parse(`{{define "d3flamegraphcss"}}` + d3flamegraph.CSSSource + `{{end}}`))
template.Must(templates.Parse(`
{{define "css"}}
<style type="text/css">
Expand Down Expand Up @@ -245,6 +252,7 @@ View
<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>
Expand Down Expand Up @@ -1016,5 +1024,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}}
`))
}
32 changes: 17 additions & 15 deletions internal/driver/webui.go
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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),
},
}

Expand Down
1 change: 1 addition & 0 deletions internal/driver/webui_test.go
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
27 changes: 27 additions & 0 deletions third_party/d3/LICENSE
Original file line number Diff line number Diff line change
@@ -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.
Loading

0 comments on commit 738874e

Please sign in to comment.