fix(frontend): remove flamegraph (#1596)

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:

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",

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');

web/src/components/RunDetailTest/Visualization.tsx

@@ -1,20 +1,20 @@
+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';
 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';
 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 <SkeletonDiagram />;
   }
-  return (
-    <>
-      {type === VisualizationType.Dag && (
-        <DAG
-          edges={edges}
-          isMatchedMode={matchedSpans.length > 0 || isOpen}
-          matchedSpans={matchedSpans}
-          nodes={nodes}
-          onNavigateToSpan={onNavigateToSpan}
-          onNodesChange={onNodesChange}
-          onNodeClick={onNodeClick}
-          selectedSpan={focusedSpan}
-        />
-      )}
-
-      {type === VisualizationType.Timeline && (
-        <Timeline
-          isMatchedMode={matchedSpans.length > 0 || isOpen}
-          matchedSpans={matchedSpans}
-          onNavigateToSpan={onNavigateToSpan}
-          onNodeClick={onNodeClickTimeline}
-          selectedSpan={selectedSpan?.id ?? ''}
-          spans={spans}
-        />
-      )}
 
-      {type === VisualizationType.Flame && (
-        <Flame
-          isMatchedMode={matchedSpans.length > 0 || isOpen}
-          matchedSpans={matchedSpans}
-          onNavigateToSpan={onNavigateToSpan}
-          onNodeClick={onNodeClickTimeline}
-          selectedSpan={selectedSpan?.id ?? ''}
-          spans={spans}
-        />
-      )}
-    </>
+  return type === VisualizationType.Dag ? (
+    <DAG
+      edges={edges}
+      isMatchedMode={matchedSpans.length > 0 || isOpen}
+      matchedSpans={matchedSpans}
+      nodes={nodes}
+      onNavigateToSpan={onNavigateToSpan}
+      onNodesChange={onNodesChange}
+      onNodeClick={onNodeClick}
+      selectedSpan={focusedSpan}
+    />
+  ) : (
+    <Timeline
+      isMatchedMode={matchedSpans.length > 0 || isOpen}
+      matchedSpans={matchedSpans}
+      onNavigateToSpan={onNavigateToSpan}
+      onNodeClick={onNodeClickTimeline}
+      selectedSpan={selectedSpan?.id ?? ''}
+      spans={spans}
+    />
   );
 };
 

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={<SpanDetail onCreateTestSpec={handleOnCreateSpec} searchText={searchText} span={span} />}
         rightPanel={
           <S.Section>
-            {visualizationType !== VisualizationType.Flame && (
-              <S.SearchContainer>
-                <Search runId={run.id} testId={testId} />
-              </S.SearchContainer>
-            )}
+            <S.SearchContainer>
+              <Search runId={run.id} testId={testId} />
+            </S.SearchContainer>
 
             <S.VisualizationContainer>
               <S.SwitchContainer>

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 <SkeletonDiagram />;
   }
 
-  return (
-    <>
-      {type === VisualizationType.Dag && (
-        <DAG
-          edges={edges}
-          isMatchedMode={isMatchedMode}
-          matchedSpans={matchedSpans}
-          nodes={nodes}
-          onNavigateToSpan={onNavigateToSpan}
-          onNodesChange={onNodesChange}
-          onNodeClick={onNodeClick}
-          selectedSpan={selectedSpan}
-        />
-      )}
-      {type === VisualizationType.Timeline && (
-        <Timeline
-          isMatchedMode={isMatchedMode}
-          matchedSpans={matchedSpans}
-          onNavigateToSpan={onNavigateToSpan}
-          onNodeClick={onNodeClickTimeline}
-          selectedSpan={selectedSpan}
-          spans={spans}
-        />
-      )}
-      {type === VisualizationType.Flame && (
-        <Flame
-          isMatchedMode={isMatchedMode}
-          matchedSpans={matchedSpans}
-          onNavigateToSpan={onNavigateToSpan}
-          onNodeClick={onNodeClickTimeline}
-          selectedSpan={selectedSpan}
-          spans={spans}
-        />
-      )}
-    </>
+  return type === VisualizationType.Dag ? (
+    <DAG
+      edges={edges}
+      isMatchedMode={isMatchedMode}
+      matchedSpans={matchedSpans}
+      nodes={nodes}
+      onNavigateToSpan={onNavigateToSpan}
+      onNodesChange={onNodesChange}
+      onNodeClick={onNodeClick}
+      selectedSpan={selectedSpan}
+    />
+  ) : (
+    <Timeline
+      isMatchedMode={isMatchedMode}
+      matchedSpans={matchedSpans}
+      onNavigateToSpan={onNavigateToSpan}
+      onNodeClick={onNodeClickTimeline}
+      selectedSpan={selectedSpan}
+      spans={spans}
+    />
   );
 };