Add trace visualization as a FlameGraph (#976)

* feat: flamegraph visualization

Signed-off-by: pavelpashkovsky <pavelpashkovsky@gmail.com>

* fix: updated copyright

Signed-off-by: pavelpashkovsky <pavelpashkovsky@gmail.com>

* chore: added convertJaegerTraceToProfile test, basic UI test, snapshot

Signed-off-by: pavelpashkovsky <pavelpashkovsky@gmail.com>

Signed-off-by: pavelpashkovsky <pavelpashkovsky@gmail.com>

packages/jaeger-ui/package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@jaegertracing/plexus": "0.2.0",
+    "@pyroscope/flamegraph": "0.18.4-1379-557f0b4.0",
     "@types/classnames": "^2.2.7",
     "@types/deep-freeze": "^0.1.1",
     "@types/history": "^4.7.2",

packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/__snapshots__/index.test.js.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TraceFlamegraph /> renders as expected 1`] = `
+<div
+  className="Flamegraph-wrapper"
+>
+  <dg
+    colorMode="light"
+    profile={
+      Object {
+        "flamebearer": Object {
+          "levels": Array [
+            Array [
+              0,
+              1181596,
+              0,
+              0,
+            ],
+            Array [
+              0,
+              1181596,
+              213262,
+              1,
+            ],
+            Array [
+              0,
+              968334,
+              1268,
+              2,
+            ],
+            Array [
+              0,
+              967066,
+              733,
+              3,
+            ],
+            Array [
+              0,
+              966333,
+              966333,
+              4,
+            ],
+          ],
+          "maxSelf": 0,
+          "names": Array [
+            "total",
+            "load-generator: OrderVehicle",
+            "load-generator: HTTP GET",
+            "ride-sharing-app: BikeHandler",
+            "ride-sharing-app: FindNearestVehicle",
+          ],
+          "numTicks": 1181596,
+        },
+        "metadata": Object {
+          "format": "single",
+          "sampleRate": 1000000,
+          "spyName": "tracing",
+          "units": "trace_samples",
+        },
+        "version": 1,
+      }
+    }
+  />
+</div>
+`;

packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.css

@@ -0,0 +1,18 @@
+/*
+Copyright (c) 2022 The Jaeger Authors.
+
+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.
+*/
+.Flamegraph-wrapper {
+  padding: 0 calc(1rem - 5px);
+}

packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.test.js

@@ -0,0 +1,71 @@
+// Copyright (c) 2022 The Jaeger Authors.
+//
+// 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.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { convertJaegerTraceToProfile } from '@pyroscope/flamegraph';
+
+import TraceFlamegraph from './index';
+
+const testTrace = require('./testTrace.json');
+
+const profile = convertJaegerTraceToProfile(testTrace.data);
+
+describe('convertJaegerTraceToProfile', () => {
+  it('returns correct profile format', () => {
+    expect(profile.version).toBe(1);
+
+    expect(Array.isArray(profile.flamebearer.levels)).toBe(true);
+    expect(profile.flamebearer.levels[0].every(el => typeof el === 'number')).toBe(true);
+    expect(Array.isArray(profile.flamebearer.names)).toBe(true);
+    expect(profile.flamebearer.names.every(el => typeof el === 'string')).toBe(true);
+    expect(typeof profile.flamebearer.numTicks).toBe('number');
+
+    expect(typeof profile.metadata.format).toBe('string');
+    expect(typeof profile.metadata.sampleRate).toBe('number');
+    expect(typeof profile.metadata.spyName).toBe('string');
+    expect(typeof profile.metadata.units).toBe('string');
+  });
+});
+
+describe('<TraceFlamegraph />', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    const props = { trace: testTrace };
+    wrapper = shallow(<TraceFlamegraph {...props} />);
+  });
+
+  it('renders as expected', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('does not explode', () => {
+    expect(wrapper).toBeDefined();
+    expect(wrapper.find('.Flamegraph-wrapper').length).toBe(1);
+  });
+
+  it('renders profile table and flamegraph', () => {
+    expect(wrapper).toBeDefined();
+    expect(wrapper.html().includes('flamegraph-table')).toBe(true);
+    expect(wrapper.html().includes('flamegraph-view')).toBe(true);
+  });
+
+  it('may show no profile', () => {
+    const props = {};
+    wrapper = shallow(<TraceFlamegraph {...props} />);
+    expect(wrapper).toBeDefined();
+    expect(wrapper.html().includes('no-profiling-data')).toBe(true);
+  });
+});

packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2022 The Jaeger Authors.
+//
+// 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.
+import React from 'react';
+import { FlamegraphRenderer, convertJaegerTraceToProfile } from '@pyroscope/flamegraph';
+
+import '@pyroscope/flamegraph/dist/index.css';
+import './index.css';
+
+const TraceFlamegraph = ({ trace }: any) => {
+  const convertedProfile = trace && trace.data ? convertJaegerTraceToProfile(trace.data) : null;
+
+  return (
+    <div className="Flamegraph-wrapper">
+      <FlamegraphRenderer colorMode="light" profile={convertedProfile} />
+    </div>
+  );
+};
+
+export default TraceFlamegraph;