andreimatei · koorosh · Dec 29, 2021 · Dec 22, 2021 · Jan 20, 2022
diff --git a/Makefile b/Makefile
@@ -1211,7 +1211,7 @@ ARCHIVE_EXTRAS = \
 	$(BUILDINFO) \
 	$(SQLPARSER_TARGETS) \
 	$(OPTGEN_TARGETS) \
-	pkg/ui/assets.ccl.installed pkg/ui/assets.oss.installed
+	pkg/ui/distccl/assets pkg/ui/distoss/assets pkg/ui/dist_vendor
 
 # TODO(benesch): Make this recipe use `git ls-files --recurse-submodules`
 # instead of scripts/ls-files.sh once Git v2.11 is widely deployed.
@@ -1442,7 +1442,7 @@ ui-watch ui-watch-secure: $(UI_CCL_DLLS) pkg/ui/yarn.opt.installed
 ui-clean: ## Remove build artifacts.
 	find pkg/ui/distccl/assets pkg/ui/distoss/assets -mindepth 1 -not -name .gitkeep -delete
 	rm -rf pkg/ui/assets.ccl.installed pkg/ui/assets.oss.installed
-	rm -rf pkg/ui/dist/*
+	rm -rf pkg/ui/dist_vendor/*
 	rm -f $(UI_PROTOS_CCL) $(UI_PROTOS_OSS)
 	rm -f pkg/ui/workspaces/db-console/*manifest.json
 	rm -rf pkg/ui/workspaces/cluster-ui/dist

diff --git a/pkg/server/debug/BUILD.bazel b/pkg/server/debug/BUILD.bazel
@@ -29,6 +29,8 @@ go_library(
         "//pkg/util/log/severity",
         "//pkg/util/stop",
         "//pkg/util/timeutil",
+        "//pkg/util/tracing",
+        "//pkg/util/tracing/tracingui",
         "//pkg/util/uint128",
         "@com_github_cockroachdb_errors//:errors",
         "@com_github_cockroachdb_pebble//tool",

diff --git a/pkg/server/debug/server.go b/pkg/server/debug/server.go
@@ -32,6 +32,8 @@ import (
 	"github.com/cockroachdb/cockroach/pkg/storage"
 	"github.com/cockroachdb/cockroach/pkg/util/log"
 	"github.com/cockroachdb/cockroach/pkg/util/stop"
+	"github.com/cockroachdb/cockroach/pkg/util/tracing"
+	"github.com/cockroachdb/cockroach/pkg/util/tracing/tracingui"
 	"github.com/cockroachdb/errors"
 	pebbletool "github.com/cockroachdb/pebble/tool"
 	metrics "github.com/rcrowley/go-metrics"
@@ -61,14 +63,18 @@ var _ = func() *settings.StringSetting {
 
 // Server serves the /debug/* family of tools.
 type Server struct {
-	st  *cluster.Settings
-	mux *http.ServeMux
-	spy logSpy
+	ambientCtx log.AmbientContext
+	st         *cluster.Settings
+	mux        *http.ServeMux
+	spy        logSpy
 }
 
 // NewServer sets up a debug server.
 func NewServer(
-	st *cluster.Settings, hbaConfDebugFn http.HandlerFunc, profiler pprofui.Profiler,
+	ambientContext log.AmbientContext,
+	st *cluster.Settings,
+	hbaConfDebugFn http.HandlerFunc,
+	profiler pprofui.Profiler,
 ) *Server {
 	mux := http.NewServeMux()
 
@@ -137,9 +143,10 @@ func NewServer(
 	})
 
 	return &Server{
-		st:  st,
-		mux: mux,
-		spy: spy,
+		ambientCtx: ambientContext,
+		st:         st,
+		mux:        mux,
+		spy:        spy,
 	}
 }
 
@@ -232,6 +239,12 @@ func (ds *Server) RegisterClosedTimestampSideTransport(
 		})
 }
 
+// RegisterTracez registers the /debug/tracez handler, which renders snapshots
+// of active spans.
+func (ds *Server) RegisterTracez(tr *tracing.Tracer) {
+	tracingui.RegisterHTTPHandlers(ds.ambientCtx, ds.mux, tr)
+}
+
 // ServeHTTP serves various tools under the /debug endpoint.
 func (ds *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	handler, _ := ds.mux.Handler(r)

diff --git a/pkg/server/server.go b/pkg/server/server.go
@@ -834,7 +834,7 @@ func NewServer(cfg Config, stopper *stop.Stopper) (*Server, error) {
 	}
 	sStatus.setStmtDiagnosticsRequester(sqlServer.execCfg.StmtDiagnosticsRecorder)
 	sStatus.baseStatusServer.sqlServer = sqlServer
-	debugServer := debug.NewServer(st, sqlServer.pgServer.HBADebugFn(), sStatus)
+	debugServer := debug.NewServer(cfg.BaseConfig.AmbientCtx, st, sqlServer.pgServer.HBADebugFn(), sStatus)
 	node.InitLogger(sqlServer.execCfg)
 
 	*lateBoundServer = Server{
@@ -1958,6 +1958,7 @@ func (s *Server) PreStart(ctx context.Context) error {
 		return errors.Wrapf(err, "failed to register engines with debug server")
 	}
 	s.debug.RegisterClosedTimestampSideTransport(s.ctSender, s.node.storeCfg.ClosedTimestampReceiver)
+	s.debug.RegisterTracez(s.cfg.Tracer)
 
 	s.ctSender.Run(ctx, state.nodeID)
 

diff --git a/pkg/server/tenant.go b/pkg/server/tenant.go
@@ -211,7 +211,7 @@ func StartTenant(
 	)
 
 	mux := http.NewServeMux()
-	debugServer := debug.NewServer(args.Settings, s.pgServer.HBADebugFn(), s.execCfg.SQLStatusServer)
+	debugServer := debug.NewServer(baseCfg.AmbientCtx, args.Settings, s.pgServer.HBADebugFn(), s.execCfg.SQLStatusServer)
 	mux.Handle("/", debugServer)
 	mux.Handle("/_status/", gwMux)
 	mux.HandleFunc("/health", func(w http.ResponseWriter, req *http.Request) {

diff --git a/pkg/ui/.gitignore b/pkg/ui/.gitignore
@@ -14,6 +14,7 @@ assets.oss.installed
 # Generated intermediates
 .cache-loader
 dist*/**
+dist_vendor
 !dist*/_empty_assets/assets/index.html
 !distccl/assets/.gitkeep
 !distccl/distccl.go

diff --git a/pkg/ui/BUILD.bazel b/pkg/ui/BUILD.bazel
@@ -1,8 +1,16 @@
 load("@io_bazel_rules_go//go:def.bzl", "go_library")
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
 
 go_library(
     name = "ui",
-    srcs = ["ui.go"],
+    srcs = [
+        "tracing_ui.go",
+        "ui.go",
+    ],
+    embedsrcs = [
+        "dist_vendor/list.min.js",
+        "templates/tracing/html_template.html",
+    ],
     importpath = "github.com/cockroachdb/cockroach/pkg/ui",
     visibility = ["//visibility:public"],
     deps = [
@@ -35,3 +43,11 @@ EOF
 """,
     visibility = ["//pkg/ui:__subpackages__"],
 )
+
+genrule(
+    name = "listjs",
+    srcs = ["@npm//:node_modules/list.js/dist/list.min.js"],
+    outs = ["dist_vendor/list.min.js"],
+    cmd = "cp ./$(location @npm//:node_modules/list.js/dist/list.min.js) $@",
+    tools = ["@npm//list.js"],
+)
diff --git a/pkg/ui/templates/tracing/html_template.html b/pkg/ui/templates/tracing/html_template.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    .sort.asc, .sort.desc {
+      background-color: yellow;
+    }
+    .sort.asc::after {
+      content: "\002B06";
+      padding-left: 3px;
+    }
+    .sort.desc::after {
+      content: "\002B07";
+      padding-left: 3px
+    }
+
+    .link-button {
+      background: none!important;
+      border: none;
+      padding: 0!important;
+      font-family: arial, sans-serif;
+      color: #069;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+  </style>
+</head>
+
+<script src="/debug/assets/list.min.js" type="text/javascript"></script>
+
+<a href="?snap=new">Take a snapshot of current operations</a>
+<div style="float:right">
+Stored snapshots (ID: capture time):
+{{$id := .SnapshotID}}
+{{range $i, $s := .AllSnapshots}}
+  <span style="{{if ne $i 0}}margin-left:0.5em;{{end}}">
+    {{if eq $s.ID $id}}
+      [current] {{$s.ID}}: {{formatTimeNoMillis .CapturedAt}}
+    {{else}}
+      <a href="?snap={{$s.ID}}">{{$s.ID}}: {{formatTimeNoMillis .CapturedAt}}</a>
+    {{end}}
+  </span>
+{{end}}
+</div>
+
+<p>Spans currently open: {{len .SpansList.Spans}}. Snapshot captured at: {{formatTime .CapturedAt}} UTC. Page generated at: {{formatTime .Now}} UTC.</p>
+{{if ne .Err nil}}
+<p><b>There was an error producing this snapshot; it might be incomplete: {{.Err}}</b></p>
+{{end}}
+
+<div id="spans-list">
+  <table>
+    <thead>
+    <input class="search" placeholder="Search" />
+    <tr>
+      <th>
+        <button class="sort link-button" data-sort="operation"> Operation </button>
+      </th>
+      <th>
+        <button class="sort link-button" data-sort="startTimeMicros"> Started at </button>
+      </th>
+      <th>
+        <button class="sort link-button" data-sort="goroutineID"> Goroutine ID </button>
+      </th>
+    </tr>
+    </thead>
+    <tbody class="list">
+      <!-- This will be populated by spansList. -->
+    </tbody>
+  </table>
+</div>
+
+<script>
+
+// Some fields are strings because JS doesn't do 64-bit numbers properly.
+var values = [
+  {{$capturedAt := .CapturedAt}}
+  {{$stacks := .SpansList.Stacks}}
+  {{range .SpansList.Spans}}
+    {
+      operation: {{.Operation}},
+      spanID: "{{.SpanID}}",
+      startTime: {{formatTime .StartTime}},
+      relativeTime: {{since .StartTime $capturedAt}},
+      startTimeMicros: {{timeRaw .StartTime}},
+      goroutineID: {{.GoroutineID}},
+      traceID: "{{.TraceID}}",
+      stack: {{index $stacks .GoroutineID}}
+    },
+  {{end}}
+];
+
+function toggleStackVisibility(spanID) {
+  var div = document.getElementById("stack-"+spanID);
+  if (div.style.display === "none") {
+    div.style.display = "block";
+  } else {
+    div.style.display = "none";
+  }
+};
+
+
+// openTrace opens the requested trace in a new window.
+function openTrace(traceID) {
+   const urlParams = new URLSearchParams(window.location.search);
+   const snapID = urlParams.get('snap');
+   window.open(`show-trace?snap=${snapID}&trace=${traceID}`, "_blank");
+}
+
+var options = {
+  valueNames: ['operation', 'startTime', 'relativeTime', 'goroutineID', 'spanID', 'stack', 'traceID'],
+  item: function (values) {
+    return `
+        <tr>
+          <td>
+            ${values.operation} <a href="javascript:openTrace('${values.traceID}')">[+]</a>
+          </td>
+          <td>
+            <div style="min-width:12em">
+              <span class="startTime"></span>
+              <span class="relativeTime" style="float:right"></span>
+            </div>
+          </td>>
+          <td style="text-align:center">
+            <div class="goroutineID link-button" onclick="toggleStackVisibility('${values.spanID}');"></div>
+            <div style="display:none; text-align:left;" id="stack-${values.spanID}"><pre>${values.stack}</pre></div>
+          </td>
+        </tr>`;
+  },
+};
+
+// Create the list of spans.
+var spansList = new List('spans-list', options, values);
+// Start with spans sorted newest first.
+spansList.sort('startTimeMicros', {order: "desc"});
+
+</script>
+</html>
diff --git a/pkg/ui/tracing_ui.go b/pkg/ui/tracing_ui.go
@@ -0,0 +1,36 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+package ui
+
+import (
+	"embed"
+	"io/fs"
+)
+
+// This file deals with embedding assets used by /debug/tracez.
+
+//go:embed dist_vendor/list.min.js
+var listJS embed.FS
+
+//go:embed templates/tracing/html_template.html
+// SpansTableTemplateSrc contains a template used by /debug/tracez
+var SpansTableTemplateSrc string
+
+// ListJS exposes list.js package
+var ListJS fs.FS
+
+func init() {
+	f, err := fs.Sub(listJS, "dist_vendor")
+	if err != nil {
+		panic(err)
+	}
+	ListJS = f
+}
diff --git a/pkg/ui/workspaces/db-console/BUILD.bazel b/pkg/ui/workspaces/db-console/BUILD.bazel
@@ -130,6 +130,7 @@ DEPENDENCIES = [
     "@npm//highlight.js",
     "@npm//lodash",
     "@npm//long",
+    "@npm//list.js",
     "@npm//mini-create-react-context",
     "@npm//moment",
     "@npm//nvd3",

diff --git a/pkg/ui/workspaces/db-console/package.json b/pkg/ui/workspaces/db-console/package.json
@@ -29,6 +29,7 @@
     "connected-react-router": "^6.9.1",
     "create-react-context": "^0.3.0",
     "highlight.js": "^10.6.0",
+    "list.js": "^2.3.1",
     "lodash": "^4.17.21",
     "long": "^4.0.0",
     "mini-create-react-context": "^0.3.2",

diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/debug/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/debug/index.tsx
@@ -330,6 +330,7 @@ export default function Debug() {
       </DebugTable>
       <DebugTable heading="Tracing and Profiling Endpoints (local node only)">
         <DebugTableRow title="Tracing">
+          <DebugTableLink name="Active operations" url="debug/tracez" />
           <DebugTableLink name="Requests" url="debug/requests" />
           <DebugTableLink name="Events" url="debug/events" />
           <DebugTableLink

diff --git a/pkg/ui/workspaces/db-console/webpack.app.js b/pkg/ui/workspaces/db-console/webpack.app.js
@@ -52,6 +52,14 @@ module.exports = (env, argv) => {
     new RemoveBrokenDependenciesPlugin(),
     new CopyWebpackPlugin([
       { from: path.resolve(__dirname, "favicon.ico"), to: "favicon.ico" },
+      {
+        from: path.resolve(
+          !isBazelBuild ? __dirname : "",
+          !isBazelBuild ? "../.." : "",
+          "node_modules/list.js/dist/list.min.js",
+        ),
+        to: path.resolve(__dirname, "../../dist_vendor/list.min.js"),
+      },
     ]),
     // use WebpackBar instead of webpack dashboard to fit multiple webpack dev server outputs (db-console and cluster-ui)
     new WebpackBar({

diff --git a/pkg/ui/yarn-vendor b/pkg/ui/yarn-vendor
diff --git a/pkg/ui/yarn.lock b/pkg/ui/yarn.lock
@@ -11461,6 +11461,13 @@ linkify-it@^2.0.0:
   dependencies:
     uc.micro "^1.0.1"
 
+list.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/list.js/-/list.js-2.3.1.tgz#48961989ffe52b0505e352f7a521f819f51df7e7"
+  integrity sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg==
+  dependencies:
+    string-natural-compare "^2.0.2"
+
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -16399,6 +16406,11 @@ string-length@^3.1.0:
     astral-regex "^1.0.0"
     strip-ansi "^5.2.0"
 
+string-natural-compare@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-2.0.3.tgz#9dbe1dd65490a5fe14f7a5c9bc686fc67cb9c6e4"
+  integrity sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==
+
 string-replace-webpack-plugin@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/string-replace-webpack-plugin/-/string-replace-webpack-plugin-0.1.3.tgz#73c657e759d66cfe80ae1e0cf091aa256d0e715c"