From 9172ff35edec600c4add8668b570451335100609 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 15 May 2023 13:36:11 +0100
Subject: [PATCH] [v10.0.x] FlameGraph: Fix table sort being reset when search
 changes (#68454)

FlameGraph: Fix table sort being reset when search changes (#68409)

(cherry picked from commit a0942bd1df75f9629e6535f8db112d653e53957e)

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>
---
 .../TopTable/FlameGraphTopTableContainer.tsx   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx b/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx
index 13cdc4f7368..45a27cb43b8 100644
--- a/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx
+++ b/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { applyFieldOverrides, CoreApp, DataFrame, DataLinkClickEvent, Field, FieldType } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Table, useStyles2 } from '@grafana/ui';
+import { Table, TableSortByFieldState, useStyles2 } from '@grafana/ui';
 
 import { PIXELS_PER_LEVEL, TOP_TABLE_COLUMN_WIDTH } from '../../constants';
 import { FlameGraphDataContainer } from '../FlameGraph/dataTransform';
@@ -50,7 +50,7 @@ const FlameGraphTopTableContainer = ({
     }
   };
 
-  const initialSortBy = [{ displayName: 'Self', desc: true }];
+  const [sort, setSort] = useState<TableSortByFieldState[]>([{ displayName: 'Self', desc: true }]);
 
   return (
     <div className={styles.topTableContainer} data-testid="topTable">
@@ -61,7 +61,17 @@ const FlameGraphTopTableContainer = ({
           }
 
           const frame = buildTableDataFrame(data, width, onSymbolClick);
-          return <Table initialSortBy={initialSortBy} data={frame} width={width} height={height} />;
+          return (
+            <Table
+              initialSortBy={sort}
+              onSortByChange={(s) => {
+                setSort(s);
+              }}
+              data={frame}
+              width={width}
+              height={height}
+            />
+          );
         }}
       </AutoSizer>
     </div>