Replace canvas-rendered flamegraph with new WebGL-rendered flamegraph (…

…#69)

* Use new WebGL-rendered Elastic flamegraph

* Add helper method for caller-callee diagram

* Bump default image name for local build

* Decode stacktraces returned from queries

* Decode run-length encoded bytes

* Rename mappings to query

This is just a file rename to make the intent clear.

* Bump @elastic/charts to 46.7.0

Makefile

@@ -1,6 +1,6 @@
 NODE_VERSION    = $(shell cat .node-version)
 
-KIBANA_VERSION ?= 8.1.x
+KIBANA_VERSION ?= 8.2.x
 NETWORK        ?= apm-integration-testing
 PORT           ?= 5601
 

package.json

@@ -106,7 +106,7 @@
     "@elastic/apm-rum": "^5.11.1",
     "@elastic/apm-rum-react": "^1.4.1",
     "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace",
-    "@elastic/charts": "46.0.1",
+    "@elastic/charts": "46.7.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.3.3",

src/plugins/profiling/common/callercallee.test.ts

@@ -7,11 +7,172 @@
  */
 
 import {
+  createCallerCalleeDiagram,
   createCallerCalleeIntermediateNode,
   fromCallerCalleeIntermediateNode,
 } from './callercallee';
 import { createStackFrameMetadata, hashFrameGroup } from './profiling';
 
+enum stackTraceID {
+  A = 'yU2Oct2ct0HkxJ7-pRcPkg==',
+  B = 'Xt8aKN70PDXpMDLCOmojzQ==',
+  C = '8OauxYq2WK4_tBqM4xkIwA==',
+  D = 'nQWGdRxvqVjwlLmQWH1Phw==',
+  E = '2KciEEWALlol3b6x95PHcw==',
+  F = 'BxRgiXa4h9Id6BjdPPHK8Q==',
+}
+
+enum fileID {
+  A = 'Ncujji3wC1nL73TTEyFBhA==',
+  B = 'T2vdys5d7j85az1aP86zCg==',
+  C = 'jMaTVVjYv7cecd0C4HguGw==',
+  D = 'RLkjnlfcvSJN2Wph9WUuOQ==',
+  E = 'gnEsgxvvEODj6iFYMQWYlA==',
+  F = 'Gf4xoLc8QuAHU49Ch_CFOA==',
+  G = 'ZCOCZlls7r2cbG1HchkbVg==',
+  H = 'Og7kGWGe9qiCunkaXDffHQ==',
+  I = 'WAE6T1TeDsjDMOuwX4Ynxg==',
+}
+
+enum frameID {
+  A = 'ZNiZco1zgh0nJI6hPllMaQAAAAABkPp6',
+  B = 'abl5r8Vvvb2Y7NaDZW1QLQAAAAAAZmzG',
+  C = 'gnEsgxvvEODj6iFYMQWYlAAAAAAGTnjJ',
+  D = 'gnEsgxvvEODj6iFYMQWYlAAAAAAGTnwG',
+  E = 'gnEsgxvvEODj6iFYMQWYlAAAAAAGYRMy',
+  F = 'gnEsgxvvEODj6iFYMQWYlAAAAAAGYV1J',
+  G = 'gnEsgxvvEODj6iFYMQWYlAAAAAAGEz_F',
+  H = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAAABjhI',
+  I = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAAAAcit',
+  J = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAAAAfiT',
+  K = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAAAAf7J',
+  L = 'ZCOCZlls7r2cbG1HchkbVgAAAAABGAwE',
+  M = 'Og7kGWGe9qiCunkaXDffHQAAAAAAAAvT',
+  N = 'WAE6T1TeDsjDMOuwX4YnxgAAAAAAABRR',
+  O = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAAABloA',
+  P = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAABV97Q',
+  Q = 'Gf4xoLc8QuAHU49Ch_CFOAAAAAABV9CG',
+  R = 'gnEsgxvvEODj6iFYMQWYlAAAAAAEBDLw',
+  S = 'gnEsgxvvEODj6iFYMQWYlAAAAAAD05_D',
+}
+
+const events = new Map([
+  [stackTraceID.A, 16],
+  [stackTraceID.B, 9],
+  [stackTraceID.C, 7],
+  [stackTraceID.D, 5],
+  [stackTraceID.E, 2],
+  [stackTraceID.F, 1],
+]);
+
+const stackTraces = new Map([
+  [
+    stackTraceID.A,
+    {
+      FileID: [fileID.A, fileID.B, fileID.C, fileID.D],
+      FrameID: [frameID.A, frameID.A, frameID.A, frameID.B],
+      Type: [3, 3, 3, 3],
+    },
+  ],
+  [
+    stackTraceID.B,
+    {
+      FileID: [fileID.E, fileID.E, fileID.E, fileID.E, fileID.E],
+      FrameID: [frameID.C, frameID.D, frameID.E, frameID.F, frameID.G],
+      Type: [3, 3, 3, 3, 3],
+    },
+  ],
+  [
+    stackTraceID.C,
+    {
+      FileID: [fileID.F, fileID.F, fileID.F, fileID.F],
+      FrameID: [frameID.H, frameID.I, frameID.J, frameID.K],
+      Type: [3, 3, 3, 3],
+    },
+  ],
+  [
+    stackTraceID.D,
+    {
+      FileID: [fileID.G, fileID.H, fileID.I],
+      FrameID: [frameID.L, frameID.M, frameID.N],
+      Type: [3, 8, 8],
+    },
+  ],
+  [
+    stackTraceID.E,
+    {
+      FileID: [fileID.F, fileID.F, fileID.F],
+      FrameID: [frameID.O, frameID.P, frameID.Q],
+      Type: [3, 3, 3],
+    },
+  ],
+  [
+    stackTraceID.F,
+    {
+      FileID: [fileID.E, fileID.E],
+      FrameID: [frameID.R, frameID.S],
+      Type: [3, 3],
+    },
+  ],
+]);
+
+const defaultStackFrame = {
+  FileName: '',
+  FunctionName: '',
+  FunctionOffset: 0,
+  LineNumber: 0,
+  SourceType: 0,
+};
+
+const stackFrames = new Map([
+  [
+    frameID.A,
+    {
+      FileName: 'ThreadPoolExecutor.java',
+      FunctionName: 'java.lang.Runnable java.util.concurrent.ThreadPoolExecutor.getTask()',
+      FunctionOffset: 26,
+      LineNumber: 1061,
+      SourceType: 5,
+    },
+  ],
+  [
+    frameID.B,
+    { FileName: '', FunctionName: 'sock_sendmsg', FunctionOffset: 0, LineNumber: 0, SourceType: 0 },
+  ],
+  [frameID.C, defaultStackFrame],
+  [frameID.D, defaultStackFrame],
+  [frameID.E, defaultStackFrame],
+  [frameID.F, defaultStackFrame],
+  [frameID.G, defaultStackFrame],
+  [frameID.H, defaultStackFrame],
+  [frameID.I, defaultStackFrame],
+  [frameID.J, defaultStackFrame],
+  [frameID.K, defaultStackFrame],
+  [
+    frameID.L,
+    { FileName: '', FunctionName: 'udp_sendmsg', FunctionOffset: 0, LineNumber: 0, SourceType: 0 },
+  ],
+  [frameID.M, defaultStackFrame],
+  [frameID.N, defaultStackFrame],
+  [frameID.O, defaultStackFrame],
+  [frameID.P, defaultStackFrame],
+  [frameID.Q, defaultStackFrame],
+  [frameID.R, defaultStackFrame],
+  [frameID.S, defaultStackFrame],
+]);
+
+const executables = new Map([
+  [fileID.A, { FileName: '' }],
+  [fileID.B, { FileName: '' }],
+  [fileID.C, { FileName: '' }],
+  [fileID.D, { FileName: 'libglapi.so.0.0.0' }],
+  [fileID.E, { FileName: '' }],
+  [fileID.F, { FileName: '' }],
+  [fileID.G, { FileName: '' }],
+  [fileID.H, { FileName: '' }],
+  [fileID.I, { FileName: '' }],
+]);
+
 describe('Caller-callee operations', () => {
   test('1', () => {
     const parentFrame = createStackFrameMetadata({
@@ -51,4 +212,9 @@ describe('Caller-callee operations', () => {
     expect(graph.Callees[0].Samples).toEqual(10);
     expect(graph.Callees[1].Samples).toEqual(10);
   });
+
+  test('2', () => {
+    const root = createCallerCalleeDiagram(events, stackTraces, stackFrames, executables);
+    expect(root.Samples).toEqual(40);
+  });
 });

src/plugins/profiling/common/callercallee.ts

@@ -10,9 +10,11 @@ import { clone } from 'lodash';
 
 import {
   compareFrameGroup,
+  createStackFrameMetadata,
   defaultGroupBy,
   FrameGroup,
   FrameGroupID,
+  groupStackFrameMetadataByStackTrace,
   hashFrameGroup,
   StackFrameMetadata,
   StackTraceID,
@@ -263,3 +265,19 @@ export function fromCallerCalleeIntermediateNode(
 
   return node;
 }
+
+export function createCallerCalleeDiagram(
+  events: Map<StackTraceID, number>,
+  stackTraces: Map<StackTraceID, StackTrace>,
+  stackFrames: Map<StackFrameID, StackFrame>,
+  executables: Map<FileID, Executable>
+): CallerCalleeNode {
+  const rootFrame = createStackFrameMetadata();
+  const frameMetadataForTraces = groupStackFrameMetadataByStackTrace(
+    stackTraces,
+    stackFrames,
+    executables
+  );
+  const root = createCallerCalleeIntermediateRoot(rootFrame, events, frameMetadataForTraces);
+  return fromCallerCalleeIntermediateNode(root);
+}