Tracing: Fix incorrect indentations due to reoccurring spanIDs (#41919)

* Create unique keys for trace rows

* Add tests

* Fix tests

* Update public/app/features/explore/TraceView/TraceView.test.tsx

* Trigger Build

public/app/features/explore/TraceView/TraceView.test.tsx

@@ -143,6 +143,26 @@ describe('TraceView', () => {
     table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' });
     expect(table.innerHTML).toContain('client-uuid-3');
   });
+
+  it('resets detail view for new trace with the identical spanID', () => {
+    const store = configureStore();
+    const { rerender } = render(
+      <Provider store={store}>
+        <TraceView exploreId={ExploreId.left} dataFrames={[frameOld]} splitOpenFn={() => {}} />
+      </Provider>
+    );
+    const span = screen.getAllByText('', { selector: 'div[data-test-id="span-view"]' })[2];
+    userEvent.click(span);
+    //Process is in detail view
+    expect(screen.getByText(/Process/)).toBeInTheDocument();
+
+    rerender(
+      <Provider store={store}>
+        <TraceView exploreId={ExploreId.left} dataFrames={[frameNew]} splitOpenFn={() => {}} />
+      </Provider>
+    );
+    expect(screen.queryByText(/Process/)).not.toBeInTheDocument();
+  });
 });
 
 const response: TraceData & { spans: TraceSpanData[] } = {

public/app/features/explore/TraceView/TraceView.tsx

@@ -18,7 +18,9 @@ import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { getTimeZone } from 'app/features/profile/state/selectors';
 import { StoreState } from 'app/types';
 import { ExploreId } from 'app/types/explore';
-import React, { useCallback, useMemo, useState } from 'react';
+import { isEqual } from 'lodash';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import { usePrevious } from 'react-use';
 import { useSelector } from 'react-redux';
 import { createSpanLinkFactory } from './createSpanLink';
 import { UIElements } from './uiElements';
@@ -39,6 +41,10 @@ type Props = {
 };
 
 export function TraceView(props: Props) {
+  // At this point we only show single trace
+  const frame = props.dataFrames[0];
+  const prevFrame = usePrevious(frame);
+
   const { expandOne, collapseOne, childrenToggle, collapseAll, childrenHiddenIDs, expandAll } = useChildrenState();
   const {
     detailStates,
@@ -50,7 +56,16 @@ export function TraceView(props: Props) {
     detailTagsToggle,
     detailWarningsToggle,
     detailStackTracesToggle,
+    clearDetailStates,
   } = useDetailState();
+
+  // Clear detail state when new trace arrives
+  useEffect(() => {
+    if (frame && prevFrame && !isEqual(prevFrame, frame)) {
+      clearDetailStates();
+    }
+  }, [frame, prevFrame, clearDetailStates]);
+
   const { removeHoverIndentGuideId, addHoverIndentGuideId, hoverIndentGuideIds } = useHoverIndentGuide();
   const { viewRange, updateViewRangeTime, updateNextViewRangeTime } = useViewRange();
 
@@ -63,8 +78,6 @@ export function TraceView(props: Props) {
    */
   const [slim, setSlim] = useState(false);
 
-  // At this point we only show single trace.
-  const frame = props.dataFrames[0];
   const traceProp = useMemo(() => transformDataFrames(frame), [frame]);
   const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);
   const dataSourceName = useSelector((state: StoreState) => state.explore[props.exploreId]?.datasourceInstance?.name);

public/app/features/explore/TraceView/useDetailState.test.ts

@@ -3,6 +3,18 @@ import { useDetailState } from './useDetailState';
 import { TraceLog } from '@jaegertracing/jaeger-ui-components/src/types/trace';
 
 describe('useDetailState', () => {
+  it('clears detail state', async () => {
+    const { result } = renderHook(() => useDetailState());
+    expect(result.current.detailStates.size).toBe(0);
+
+    act(() => result.current.toggleDetail('span1'));
+    expect(result.current.detailStates.size).toBe(1);
+    expect(result.current.detailStates.has('span1')).toBe(true);
+
+    act(() => result.current.clearDetailStates());
+    expect(result.current.detailStates.size).toBe(0);
+  });
+
   it('toggles detail', async () => {
     const { result } = renderHook(() => useDetailState());
     expect(result.current.detailStates.size).toBe(0);

public/app/features/explore/TraceView/useDetailState.ts

@@ -9,6 +9,8 @@ import { TraceLog } from '@jaegertracing/jaeger-ui-components/src/types/trace';
 export function useDetailState() {
   const [detailStates, setDetailStates] = useState(new Map<string, DetailState>());
 
+  const clearDetailStates = useCallback(() => setDetailStates(new Map<string, DetailState>()), [setDetailStates]);
+
   const toggleDetail = useCallback(
     function toggleDetail(spanID: string) {
       const newDetailStates = new Map(detailStates);
@@ -38,6 +40,7 @@ export function useDetailState() {
 
   return {
     detailStates,
+    clearDetailStates,
     toggleDetail,
     detailLogItemToggle,
     detailLogsToggle: useCallback(