Add trace visualization as a FlameGraph

packages/jaeger-ui/package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@jaegertracing/plexus": "0.2.0",
+    "@pyroscope/flamegraph": "0.17.2",
     "@types/classnames": "^2.2.7",
     "@types/deep-freeze": "^0.1.1",
     "@types/history": "^4.7.2",

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.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 = convertJaegerTraceToProfile(trace.data);
+
+  return (
+    <div className="Flamegraph-wrapper">
+      <FlamegraphRenderer colorMode="light" profile={convertedProfile} />
+    </div>
+  );
+};
+
+export default TraceFlamegraph;

packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx

@@ -51,6 +51,10 @@ const MENU_ITEMS = [
     viewType: ETraceViewType.TraceSpansView,
     label: 'Trace Spans Table',
   },
+  {
+    viewType: ETraceViewType.TraceFlamegraph,
+    label: 'Trace Flamegraph',
+  },
 ];
 
 export default function AltViewOptions(props: Props) {

packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap

@@ -35,6 +35,14 @@ exports[`AltViewOptions renders correctly 1`] = `
           Trace Spans Table
         </a>
       </MenuItem>
+      <MenuItem>
+        <a
+          onClick={[Function]}
+          role="button"
+        >
+          Trace Flamegraph
+        </a>
+      </MenuItem>
       <MenuItem>
         <Link
           onClick={[MockFunction]}

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

@@ -57,6 +57,7 @@ import filterSpans from '../../utils/filter-spans';
 import updateUiFind from '../../utils/update-ui-find';
 import TraceStatistics from './TraceStatistics/index';
 import TraceSpanView from './TraceSpanView/index';
+import TraceFlamegraph from './TraceFlamegraph/index';
 
 import './index.css';
 
@@ -410,6 +411,8 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
       view = <TraceStatistics trace={data} uiFindVertexKeys={spanFindMatches} uiFind={uiFind} />;
     } else if (ETraceViewType.TraceSpansView === viewType && headerHeight) {
       view = <TraceSpanView trace={data} uiFindVertexKeys={spanFindMatches} uiFind={uiFind} />;
+    } else if (ETraceViewType.TraceFlamegraph === viewType && headerHeight) {
+      view = <TraceFlamegraph trace={trace} />;
     }
 
     return (

packages/jaeger-ui/src/components/TracePage/types.tsx

@@ -61,4 +61,5 @@ export enum ETraceViewType {
   TraceGraph = 'TraceGraph',
   TraceStatistics = 'TraceStatistics',
   TraceSpansView = 'TraceSpansView',
+  TraceFlamegraph = 'TraceFlamegraph',
 }

yarn.lock

@@ -1517,6 +1517,11 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
+"@pyroscope/flamegraph@0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@pyroscope/flamegraph/-/flamegraph-0.17.2.tgz#b8d95e9d8de9526fa79339690869e8c2c1c5e75e"
+  integrity sha512-dS4yvX9n61f7SqXhsZnkl7SM03d6DtXy1KRnlHbiLb1IwyiV9iHazQdkaTcQHOu90go2I2JkxCJlT+/O9kyz0A==
+
 "@sinonjs/commons@^1", "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.4.0.tgz#7b3ec2d96af481d7a0321252e7b1c94724ec5a78"