From a7293eaecaf9ee9f47c9d3495cf70887acabe656 Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Mon, 28 Nov 2022 15:01:54 -0500 Subject: [PATCH] fix(frontend): remove flamegraph (#1596) --- k8s/tracetest.beta.yaml | 2 +- web/package-lock.json | 46 +------------- web/package.json | 5 +- web/public/index.html | 2 +- .../RunDetailTest/Visualization.tsx | 62 +++++++------------ .../RunDetailTrace/RunDetailTrace.tsx | 16 +++-- .../RunDetailTrace/Visualization.tsx | 56 ++++++----------- .../components/Flame/Flame.styled.tsx | 5 -- .../Visualization/components/Flame/Flame.tsx | 30 --------- .../Flame/__tests__/FlameView.test.tsx | 36 ----------- .../components/Switch/Switch.styled.ts | 8 +-- .../components/Switch/Switch.tsx | 8 +-- web/src/services/Flamegraph.service.ts | 43 ------------- 13 files changed, 56 insertions(+), 263 deletions(-) delete mode 100644 web/src/components/Visualization/components/Flame/Flame.styled.tsx delete mode 100644 web/src/components/Visualization/components/Flame/Flame.tsx delete mode 100644 web/src/components/Visualization/components/Flame/__tests__/FlameView.test.tsx delete mode 100644 web/src/services/Flamegraph.service.ts diff --git a/k8s/tracetest.beta.yaml b/k8s/tracetest.beta.yaml index 07db0c5413..e3ee59b032 100644 --- a/k8s/tracetest.beta.yaml +++ b/k8s/tracetest.beta.yaml @@ -17,7 +17,7 @@ demo: otelCart: http://otel-cartservice.otel-demo:7070 otelCheckout: http://otel-checkoutservice.otel-demo:5050 -experimentalFeatures: ["flamegraph"] +experimentalFeatures: [] telemetry: dataStores: diff --git a/web/package-lock.json b/web/package-lock.json index 494699d41e..48e8d485bc 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -18,8 +18,6 @@ "@emotion/react": "11.9.0", "@lezer/highlight": "1.0.0", "@opentelemetry/semantic-conventions": "1.3.0", - "@pyroscope/flamegraph": "0.25.2-1679-ab8cd3f.0", - "@pyroscope/models": "0.4.5", "@reduxjs/toolkit": "1.8.4", "@sentry/react": "6.19.7", "@sentry/tracing": "6.19.7", @@ -67,8 +65,7 @@ "react-use": "17.4.0", "redux-first-history": "5.0.12", "styled-components": "5.3.3", - "typescript": "~4.1.5", - "zod": "3.19.1" + "typescript": "~4.1.5" }, "devDependencies": { "@craco/craco": "6.4.3", @@ -4530,24 +4527,6 @@ "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, - "node_modules/@pyroscope/flamegraph": { - "version": "0.25.2-1679-ab8cd3f.0", - "resolved": "https://registry.npmjs.org/@pyroscope/flamegraph/-/flamegraph-0.25.2-1679-ab8cd3f.0.tgz", - "integrity": "sha512-FQJlphSWo/+JSI5xjr5xGTqAFYx2oA6yTWYAIzxmM38dx0GFVM//m9gN509KBWM8n7YJR7YoeqI7sPzPazLM3Q==", - "peerDependencies": { - "react": ">=16.14.0", - "react-dom": ">=16.14.0", - "true-myth": "^5.1.2" - } - }, - "node_modules/@pyroscope/models": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/@pyroscope/models/-/models-0.4.5.tgz", - "integrity": "sha512-00h8CZbzjG/9eI08swcRJ/KgiA8B0OBXvnPzmcn6F1etV1Dytdun2yuDuJ+vNQ+9Hohd7kzI5/fHlpeS+7EUpw==", - "peerDependencies": { - "zod": "^3.11.6" - } - }, "node_modules/@reduxjs/toolkit": { "version": "1.8.4", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.4.tgz", @@ -38089,14 +38068,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/zod": { - "version": "3.19.1", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.19.1.tgz", - "integrity": "sha512-LYjZsEDhCdYET9ikFu6dVPGp2YH9DegXjdJToSzD9rO6fy4qiRYFoyEYwps88OseJlPyl2NOe2iJuhEhL7IpEA==", - "funding": { - "url": "https://github.com/sponsors/colinhacks" - } - }, "node_modules/zustand": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", @@ -41399,16 +41370,6 @@ "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, - "@pyroscope/flamegraph": { - "version": "0.25.2-1679-ab8cd3f.0", - "resolved": "https://registry.npmjs.org/@pyroscope/flamegraph/-/flamegraph-0.25.2-1679-ab8cd3f.0.tgz", - "integrity": "sha512-FQJlphSWo/+JSI5xjr5xGTqAFYx2oA6yTWYAIzxmM38dx0GFVM//m9gN509KBWM8n7YJR7YoeqI7sPzPazLM3Q==" - }, - "@pyroscope/models": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/@pyroscope/models/-/models-0.4.5.tgz", - "integrity": "sha512-00h8CZbzjG/9eI08swcRJ/KgiA8B0OBXvnPzmcn6F1etV1Dytdun2yuDuJ+vNQ+9Hohd7kzI5/fHlpeS+7EUpw==" - }, "@reduxjs/toolkit": { "version": "1.8.4", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.4.tgz", @@ -67118,11 +67079,6 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" }, - "zod": { - "version": "3.19.1", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.19.1.tgz", - "integrity": "sha512-LYjZsEDhCdYET9ikFu6dVPGp2YH9DegXjdJToSzD9rO6fy4qiRYFoyEYwps88OseJlPyl2NOe2iJuhEhL7IpEA==" - }, "zustand": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", diff --git a/web/package.json b/web/package.json index dfe409c830..7ac717255c 100644 --- a/web/package.json +++ b/web/package.json @@ -14,8 +14,6 @@ "@emotion/react": "11.9.0", "@lezer/highlight": "1.0.0", "@opentelemetry/semantic-conventions": "1.3.0", - "@pyroscope/flamegraph": "0.25.2-1679-ab8cd3f.0", - "@pyroscope/models": "0.4.5", "@reduxjs/toolkit": "1.8.4", "@sentry/react": "6.19.7", "@sentry/tracing": "6.19.7", @@ -63,8 +61,7 @@ "react-use": "17.4.0", "redux-first-history": "5.0.12", "styled-components": "5.3.3", - "typescript": "~4.1.5", - "zod": "3.19.1" + "typescript": "~4.1.5" }, "scripts": { "start": "craco start", diff --git a/web/public/index.html b/web/public/index.html index a0bb37a1c5..d8b196472f 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -68,7 +68,7 @@ env: getTemplateValue('{{ .Env }}', '', parser.toString), demoEnabled: getTemplateValue('{{ .DemoEnabled }}', '["pokeshop", "otel"]', parser.toArray), demoEndpoints: getTemplateValue('{{ .DemoEndpoints }}', '{"PokeshopHttp": "http://demo-pokemon-api.demo.svc.cluster.local", "PokeshopGrpc": "demo-pokemon-api.demo.svc.cluster.local:8082", "OtelFrontend": "http://otel-frontend:8084" }', parser.toObject), - experimentalFeatures: getTemplateValue('{{ .ExperimentalFeatures }}', '["flamegraph"]', parser.toArray), + experimentalFeatures: getTemplateValue('{{ .ExperimentalFeatures }}', '[]', parser.toArray), }; var base = document.createElement('base'); diff --git a/web/src/components/RunDetailTest/Visualization.tsx b/web/src/components/RunDetailTest/Visualization.tsx index 2bc3f26556..139b15a6a9 100644 --- a/web/src/components/RunDetailTest/Visualization.tsx +++ b/web/src/components/RunDetailTest/Visualization.tsx @@ -1,3 +1,6 @@ +import {useCallback, useEffect} from 'react'; +import {Node, NodeChange} from 'react-flow-renderer'; + import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace'; import SkeletonDiagram from 'components/SkeletonDiagram'; import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider'; @@ -5,8 +8,6 @@ import DAG from 'components/Visualization/components/DAG'; import Timeline from 'components/Visualization/components/Timeline'; import {TestState} from 'constants/TestRun.constants'; import {useSpan} from 'providers/Span/Span.provider'; -import {useCallback, useEffect} from 'react'; -import {Node, NodeChange} from 'react-flow-renderer'; import {useAppDispatch, useAppSelector} from 'redux/hooks'; import {initNodes, onNodesChange as onNodesChangeAction} from 'redux/slices/DAG.slice'; import DAGSelectors from 'selectors/DAG.selectors'; @@ -14,7 +15,6 @@ import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service'; import TraceDiagramAnalyticsService from 'services/Analytics/TraceDiagramAnalytics.service'; import {TSpan} from 'types/Span.types'; import {TTestRunState} from 'types/TestRun.types'; -import {Flame} from '../Visualization/components/Flame/Flame'; export interface IProps { runState: TTestRunState; @@ -69,43 +69,27 @@ const Visualization = ({runState, spans, type}: IProps) => { if (runState !== TestState.FINISHED) { return ; } - return ( - <> - {type === VisualizationType.Dag && ( - 0 || isOpen} - matchedSpans={matchedSpans} - nodes={nodes} - onNavigateToSpan={onNavigateToSpan} - onNodesChange={onNodesChange} - onNodeClick={onNodeClick} - selectedSpan={focusedSpan} - /> - )} - - {type === VisualizationType.Timeline && ( - 0 || isOpen} - matchedSpans={matchedSpans} - onNavigateToSpan={onNavigateToSpan} - onNodeClick={onNodeClickTimeline} - selectedSpan={selectedSpan?.id ?? ''} - spans={spans} - /> - )} - {type === VisualizationType.Flame && ( - 0 || isOpen} - matchedSpans={matchedSpans} - onNavigateToSpan={onNavigateToSpan} - onNodeClick={onNodeClickTimeline} - selectedSpan={selectedSpan?.id ?? ''} - spans={spans} - /> - )} - + return type === VisualizationType.Dag ? ( + 0 || isOpen} + matchedSpans={matchedSpans} + nodes={nodes} + onNavigateToSpan={onNavigateToSpan} + onNodesChange={onNodesChange} + onNodeClick={onNodeClick} + selectedSpan={focusedSpan} + /> + ) : ( + 0 || isOpen} + matchedSpans={matchedSpans} + onNavigateToSpan={onNavigateToSpan} + onNodeClick={onNodeClickTimeline} + selectedSpan={selectedSpan?.id ?? ''} + spans={spans} + /> ); }; diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.tsx b/web/src/components/RunDetailTrace/RunDetailTrace.tsx index 491cb839f7..c10fc7a1b8 100644 --- a/web/src/components/RunDetailTrace/RunDetailTrace.tsx +++ b/web/src/components/RunDetailTrace/RunDetailTrace.tsx @@ -1,10 +1,11 @@ +import {useCallback, useState} from 'react'; +import {useNavigate} from 'react-router-dom'; +import {useAppSelector} from 'redux/hooks'; + import Drawer from 'components/Drawer'; import SpanDetail from 'components/SpanDetail'; import Switch from 'components/Visualization/components/Switch'; import {TestState} from 'constants/TestRun.constants'; -import {useCallback, useState} from 'react'; -import {useNavigate} from 'react-router-dom'; -import {useAppSelector} from 'redux/hooks'; import SpanSelectors from 'selectors/Span.selectors'; import TraceSelectors from 'selectors/Trace.selectors'; import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service'; @@ -21,7 +22,6 @@ interface IProps { export enum VisualizationType { Dag, Timeline, - Flame, } const RunDetailTrace = ({run, testId}: IProps) => { @@ -41,11 +41,9 @@ const RunDetailTrace = ({run, testId}: IProps) => { leftPanel={} rightPanel={ - {visualizationType !== VisualizationType.Flame && ( - - - - )} + + + diff --git a/web/src/components/RunDetailTrace/Visualization.tsx b/web/src/components/RunDetailTrace/Visualization.tsx index efdab2c7c6..3c2abadd4b 100644 --- a/web/src/components/RunDetailTrace/Visualization.tsx +++ b/web/src/components/RunDetailTrace/Visualization.tsx @@ -11,7 +11,6 @@ import {TSpan} from 'types/Span.types'; import {TTestRunState} from 'types/TestRun.types'; import {useDrawer} from '../Drawer/Drawer'; import DAG from '../Visualization/components/DAG'; -import {Flame} from '../Visualization/components/Flame/Flame'; import Timeline from '../Visualization/components/Timeline'; import {VisualizationType} from './RunDetailTrace'; @@ -71,41 +70,26 @@ const Visualization = ({runState, spans, type}: IProps) => { return ; } - return ( - <> - {type === VisualizationType.Dag && ( - - )} - {type === VisualizationType.Timeline && ( - - )} - {type === VisualizationType.Flame && ( - - )} - + return type === VisualizationType.Dag ? ( + + ) : ( + ); }; diff --git a/web/src/components/Visualization/components/Flame/Flame.styled.tsx b/web/src/components/Visualization/components/Flame/Flame.styled.tsx deleted file mode 100644 index b3514b012c..0000000000 --- a/web/src/components/Visualization/components/Flame/Flame.styled.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` - padding: 24px; -`; diff --git a/web/src/components/Visualization/components/Flame/Flame.tsx b/web/src/components/Visualization/components/Flame/Flame.tsx deleted file mode 100644 index 93e4ff8866..0000000000 --- a/web/src/components/Visualization/components/Flame/Flame.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import {convertJaegerTraceToProfile, FlamegraphRenderer} from '@pyroscope/flamegraph'; -import '@pyroscope/flamegraph/dist/index.css'; -import {useMemo} from 'react'; -import FlameGraphService from 'services/Flamegraph.service'; -import {TSpan} from 'types/Span.types'; -import {useTestRun} from '../../../../providers/TestRun/TestRun.provider'; -import * as S from './Flame.styled'; - -interface IProps { - isMatchedMode: boolean; - matchedSpans: string[]; - selectedSpan: string; - spans: TSpan[]; - width?: number; - onNavigateToSpan(spanId: string): void; - onNodeClick(spanId: string): void; -} - -export const Flame: React.FC = ({spans}) => { - const {run} = useTestRun(); - const profile = useMemo( - () => convertJaegerTraceToProfile(FlameGraphService.convertTracetestSpanToJaeger(run.trace?.traceId || '', spans)), - [spans, run.trace?.traceId] - ); - return ( - - - - ); -}; diff --git a/web/src/components/Visualization/components/Flame/__tests__/FlameView.test.tsx b/web/src/components/Visualization/components/Flame/__tests__/FlameView.test.tsx deleted file mode 100644 index 1260d7c3af..0000000000 --- a/web/src/components/Visualization/components/Flame/__tests__/FlameView.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import FlamegraphService from 'services/Flamegraph.service'; -import {TSpan} from 'types/Span.types'; - -describe('Flame View Test', () => { - const traceId = '1'; - const s1 = {id: '1', parentId: '', name: 'one'} as TSpan; - const s2 = {id: '2', parentId: '1', name: 'two'} as TSpan; - const s3 = {id: '3', parentId: '2', name: 'three'} as TSpan; - const spans = [s1, s2, s3]; - - test('parentReferences', () => { - expect(FlamegraphService.parentReferences(traceId, spans, s2)).toStrictEqual([ - { - refType: 'CHILD_OF', - spanID: s1.id, - traceID: traceId, - }, - ]); - }); - - test('tracetestSpanToJagerSpan', () => { - expect(FlamegraphService.tracetestSpanToJagerSpan(traceId, spans, s1)).toStrictEqual({ - operationName: s1.name, - duration: 0, - processID: '', - references: FlamegraphService.parentReferences(traceId, spans, s1), - spanID: s1.id, - startTime: 0, - tags: [], - traceID: traceId, - warnings: [], - flags: '', - logs: {fields: [], timestamp: 0}, - }); - }); -}); diff --git a/web/src/components/Visualization/components/Switch/Switch.styled.ts b/web/src/components/Visualization/components/Switch/Switch.styled.ts index de5c85019d..4cc51f89ba 100644 --- a/web/src/components/Visualization/components/Switch/Switch.styled.ts +++ b/web/src/components/Visualization/components/Switch/Switch.styled.ts @@ -1,4 +1,4 @@ -import {BarsOutlined, ClusterOutlined, PicCenterOutlined} from '@ant-design/icons'; +import {BarsOutlined, ClusterOutlined} from '@ant-design/icons'; import styled from 'styled-components'; export const Container = styled.div` @@ -22,9 +22,3 @@ export const TimelineIcon = styled(BarsOutlined)<{$isSelected?: boolean}>` cursor: pointer; font-size: ${({theme}) => theme.size.xl}; `; - -export const FlameIcon = styled(PicCenterOutlined)<{$isSelected?: boolean}>` - color: ${({$isSelected = false, theme}) => ($isSelected ? theme.color.primary : theme.color.textSecondary)}; - cursor: pointer; - font-size: ${({theme}) => theme.size.xl}; -`; diff --git a/web/src/components/Visualization/components/Switch/Switch.tsx b/web/src/components/Visualization/components/Switch/Switch.tsx index 655b459cdf..4e4fc4e68c 100644 --- a/web/src/components/Visualization/components/Switch/Switch.tsx +++ b/web/src/components/Visualization/components/Switch/Switch.tsx @@ -1,12 +1,11 @@ import {Tooltip} from 'antd'; import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace'; -import ExperimentalFeature from '../../../../utils/ExperimentalFeature'; import * as S from './Switch.styled'; interface IProps { - type: VisualizationType; onChange(type: VisualizationType): void; + type: VisualizationType; } const Switch = ({onChange, type}: IProps) => ( @@ -20,11 +19,6 @@ const Switch = ({onChange, type}: IProps) => ( onClick={() => onChange(VisualizationType.Timeline)} /> - {ExperimentalFeature.isEnabled('flamegraph') && ( - - onChange(VisualizationType.Flame)} /> - - )} ); diff --git a/web/src/services/Flamegraph.service.ts b/web/src/services/Flamegraph.service.ts deleted file mode 100644 index d3ddf9ca31..0000000000 --- a/web/src/services/Flamegraph.service.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {Trace} from '@pyroscope/models'; -import {TSpan} from '../types/Span.types'; - -type Span = Trace['spans'][number]; - -const FlameGraphService = () => ({ - parentReferences(traceId: string, spans: TSpan[], current: TSpan): Span['references'] { - const parent = spans.find(s => s.id === current.parentId); - if (!parent) return []; - return [ - { - refType: 'CHILD_OF', - spanID: parent.id, - traceID: traceId, - }, - ]; - }, - tracetestSpanToJagerSpan(id: string, spans: TSpan[], s: TSpan): Span { - const milliseconds = 1000; - return { - operationName: s.name, - duration: ((s.endTime || 0) - (s.startTime || 0)) * milliseconds, - processID: '', - references: this.parentReferences(id, spans, s), - spanID: s.id, - startTime: (s.startTime || 0) * milliseconds, - tags: [], - traceID: id, - warnings: [], - flags: '', - logs: {fields: [], timestamp: 0}, - }; - }, - convertTracetestSpanToJaeger(traceID: string, spans: TSpan[]): Trace { - return { - traceID, - spans: spans.map(s => this.tracetestSpanToJagerSpan(traceID, spans, s)), - processes: {p1: {serviceName: '', tags: []}, p2: {serviceName: '', tags: []}}, - }; - }, -}); - -export default FlameGraphService();