From e603f23c4ce0732f6b9def395bc7a5a76ea1846e Mon Sep 17 00:00:00 2001 From: pavelpashkovsky Date: Fri, 5 Aug 2022 11:09:16 +0300 Subject: [PATCH] feat: flamegraph visualization Signed-off-by: pavelpashkovsky --- packages/jaeger-ui/package.json | 1 + .../TracePage/TraceFlamegraph/index.css | 18 +++++++++++ .../TracePage/TraceFlamegraph/index.tsx | 30 +++++++++++++++++++ .../TracePageHeader/AltViewOptions.tsx | 4 +++ .../__snapshots__/AltViewOptions.test.js.snap | 8 +++++ .../src/components/TracePage/index.tsx | 3 ++ .../src/components/TracePage/types.tsx | 1 + yarn.lock | 5 ++++ 8 files changed, 70 insertions(+) create mode 100644 packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.css create mode 100644 packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json index 8869371acd..56cfcff500 100644 --- a/packages/jaeger-ui/package.json +++ b/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", diff --git a/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.css b/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.css new file mode 100644 index 0000000000..8c4a81f62e --- /dev/null +++ b/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.css @@ -0,0 +1,18 @@ +/* +Copyright (c) 2017 Uber Technologies, Inc. + +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); +} diff --git a/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx b/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx new file mode 100644 index 0000000000..095b1a892f --- /dev/null +++ b/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx @@ -0,0 +1,30 @@ +// Copyright (c) 2017 Uber Technologies, Inc. +// +// 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 ( +
+ +
+ ); +}; + +export default TraceFlamegraph; diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx index d08d908760..4bd5d88d01 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx +++ b/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) { diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap index 92af781600..39b7c0c02d 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap @@ -35,6 +35,14 @@ exports[`AltViewOptions renders correctly 1`] = ` Trace Spans Table + + + Trace Flamegraph + + { view = ; } else if (ETraceViewType.TraceSpansView === viewType && headerHeight) { view = ; + } else if (ETraceViewType.TraceFlamegraph === viewType && headerHeight) { + view = ; } return ( diff --git a/packages/jaeger-ui/src/components/TracePage/types.tsx b/packages/jaeger-ui/src/components/TracePage/types.tsx index 8a11f6bed1..7a90b65c0e 100644 --- a/packages/jaeger-ui/src/components/TracePage/types.tsx +++ b/packages/jaeger-ui/src/components/TracePage/types.tsx @@ -61,4 +61,5 @@ export enum ETraceViewType { TraceGraph = 'TraceGraph', TraceStatistics = 'TraceStatistics', TraceSpansView = 'TraceSpansView', + TraceFlamegraph = 'TraceFlamegraph', } diff --git a/yarn.lock b/yarn.lock index d49477b4cf..142539f670 100644 --- a/yarn.lock +++ b/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"