Tempo: Embed flame graph in span details (#77537)

* Embed flame graph

* Update test

* Update test

* Use toggle

* Update test

* Add tests

* Use const

* Cleanup

* Update profile tag

* Move flame graph out of tags, remove request and other cleanup + tests

* Update test

* Set flame graph by profile id and simplify logic

* Cleanup and redrawListView

* Create/use feature toggle

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -108,6 +108,7 @@ export interface FeatureToggles {
   awsAsyncQueryCaching?: boolean;
   splitScopes?: boolean;
   traceToProfiles?: boolean;
+  tracesEmbeddedFlameGraph?: boolean;
   permissionsFilterRemoveSubquery?: boolean;
   prometheusConfigOverhaulAuth?: boolean;
   configurableSchedulerTick?: boolean;

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx

@@ -44,6 +44,7 @@ type Props = {
   onFocusPillClick: () => void;
   onSandwichPillClick: () => void;
   colorScheme: ColorScheme | ColorSchemeDiff;
+  showFlameGraphOnly?: boolean;
   collapsing?: boolean;
 };
 
@@ -62,6 +63,7 @@ const FlameGraph = ({
   onFocusPillClick,
   onSandwichPillClick,
   colorScheme,
+  showFlameGraphOnly,
   collapsing,
 }: Props) => {
   const styles = getStyles();
@@ -117,6 +119,7 @@ const FlameGraph = ({
     totalProfileTicks,
     totalProfileTicksRight,
     totalViewTicks,
+    showFlameGraphOnly,
     collapsedMap,
     setCollapsedMap,
     collapsing,

packages/grafana-flamegraph/src/FlameGraph/FlameGraphCanvas.tsx

@@ -32,6 +32,7 @@ type Props = {
   totalProfileTicks: number;
   totalProfileTicksRight?: number;
   totalViewTicks: number;
+  showFlameGraphOnly?: boolean;
 
   collapsedMap: CollapsedMap;
   setCollapsedMap: (collapsedMap: CollapsedMap) => void;
@@ -56,6 +57,7 @@ const FlameGraphCanvas = ({
   root,
   direction,
   depth,
+  showFlameGraphOnly,
   collapsedMap,
   setCollapsedMap,
   collapsing,
@@ -182,7 +184,7 @@ const FlameGraphCanvas = ({
         totalTicks={totalViewTicks}
         collapseConfig={tooltipItem ? collapsedMap.get(tooltipItem) : undefined}
       />
-      {clickedItemData && (
+      {!showFlameGraphOnly && clickedItemData && (
         <FlameGraphContextMenu
           itemData={clickedItemData}
           collapsing={collapsing}

packages/grafana-flamegraph/src/FlameGraphContainer.tsx

@@ -54,6 +54,11 @@ export type Props = {
    */
   vertical?: boolean;
 
+  /**
+   * If true only the flamegraph will be rendered.
+   */
+  showFlameGraphOnly?: boolean;
+
   /**
    * Disable behaviour where similar items in the same stack will be collapsed into single item.
    */
@@ -70,6 +75,7 @@ const FlameGraphContainer = ({
   stickyHeader,
   extraHeaderElements,
   vertical,
+  showFlameGraphOnly,
   disableCollapsing,
 }: Props) => {
   const [focusedItemData, setFocusedItemData] = useState<ClickedItemData>();
@@ -143,35 +149,37 @@ const FlameGraphContainer = ({
     // isn't already provided.
     <ThemeContext.Provider value={theme}>
       <div ref={sizeRef} className={styles.container}>
-        <FlameGraphHeader
-          search={search}
-          setSearch={setSearch}
-          selectedView={selectedView}
-          setSelectedView={(view) => {
-            setSelectedView(view);
-            onViewSelected?.(view);
-          }}
-          containerWidth={containerWidth}
-          onReset={() => {
-            resetFocus();
-            resetSandwich();
-          }}
-          textAlign={textAlign}
-          onTextAlignChange={(align) => {
-            setTextAlign(align);
-            onTextAlignSelected?.(align);
-          }}
-          showResetButton={Boolean(focusedItemData || sandwichItem)}
-          colorScheme={colorScheme}
-          onColorSchemeChange={setColorScheme}
-          stickyHeader={Boolean(stickyHeader)}
-          extraHeaderElements={extraHeaderElements}
-          vertical={vertical}
-          isDiffMode={Boolean(dataContainer.isDiffFlamegraph())}
-        />
+        {!showFlameGraphOnly && (
+          <FlameGraphHeader
+            search={search}
+            setSearch={setSearch}
+            selectedView={selectedView}
+            setSelectedView={(view) => {
+              setSelectedView(view);
+              onViewSelected?.(view);
+            }}
+            containerWidth={containerWidth}
+            onReset={() => {
+              resetFocus();
+              resetSandwich();
+            }}
+            textAlign={textAlign}
+            onTextAlignChange={(align) => {
+              setTextAlign(align);
+              onTextAlignSelected?.(align);
+            }}
+            showResetButton={Boolean(focusedItemData || sandwichItem)}
+            colorScheme={colorScheme}
+            onColorSchemeChange={setColorScheme}
+            stickyHeader={Boolean(stickyHeader)}
+            extraHeaderElements={extraHeaderElements}
+            vertical={vertical}
+            isDiffMode={Boolean(dataContainer.isDiffFlamegraph())}
+          />
+        )}
 
         <div className={styles.body}>
-          {selectedView !== SelectedView.FlameGraph && (
+          {!showFlameGraphOnly && selectedView !== SelectedView.FlameGraph && (
             <FlameGraphTopTableContainer
               data={dataContainer}
               onSymbolClick={onSymbolClick}
@@ -204,6 +212,7 @@ const FlameGraphContainer = ({
               onFocusPillClick={resetFocus}
               onSandwichPillClick={resetSandwich}
               colorScheme={colorScheme}
+              showFlameGraphOnly={showFlameGraphOnly}
               collapsing={!disableCollapsing}
             />
           )}

packages/grafana-flamegraph/src/index.ts

@@ -1,2 +1,3 @@
 export { default as FlameGraph, type Props } from './FlameGraphContainer';
 export { checkFields, getMessageCheckFieldsResult } from './FlameGraph/dataTransform';
+export { data } from './FlameGraph/testData/dataNestedSet';