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

import React, { useState } from 'react';
import {
  KeyValuePair,
  Link,
  Span,
  Trace,
  TraceTimelineViewer,
  TTraceTimeline,
  UIElementsContext,
  transformTraceData,
  SpanData,
  TraceData,
  TracePageHeader,
} from '@jaegertracing/jaeger-ui-components';
import { UIElements } from './uiElements';
import { useViewRange } from './useViewRange';
import { useSearch } from './useSearch';
import { useChildrenState } from './useChildrenState';
import { useDetailState } from './useDetailState';
import { useHoverIndentGuide } from './useHoverIndentGuide';

type Props = {
  trace: TraceData & { spans: SpanData[] };
};

export function TraceView(props: Props) {
  const { expandOne, collapseOne, childrenToggle, collapseAll, childrenHiddenIDs, expandAll } = useChildrenState();
  const {
    detailStates,
    toggleDetail,
    detailLogItemToggle,
    detailLogsToggle,
    detailProcessToggle,
    detailReferencesToggle,
    detailTagsToggle,
    detailWarningsToggle,
  } = useDetailState();
  const { removeHoverIndentGuideId, addHoverIndentGuideId, hoverIndentGuideIds } = useHoverIndentGuide();
  const { viewRange, updateViewRangeTime, updateNextViewRangeTime } = useViewRange();

  /**
   * Keeps state of resizable name column width
   */
  const [spanNameColumnWidth, setSpanNameColumnWidth] = useState(0.25);
  /**
   * State of the top minimap, slim means it is collapsed.
   */
  const [slim, setSlim] = useState(false);

  const traceProp = transformTraceData(props.trace);
  const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);

  return (
    <UIElementsContext.Provider value={UIElements}>
      <TracePageHeader
        canCollapse={true}
        clearSearch={() => {}}
        focusUiFindMatches={() => {}}
        hideMap={false}
        hideSummary={false}
        nextResult={() => {}}
        onSlimViewClicked={() => setSlim(!slim)}
        onTraceGraphViewClicked={() => {}}
        prevResult={() => {}}
        resultCount={0}
        slimView={slim}
        textFilter={null}
        trace={traceProp}
        traceGraphView={false}
        updateNextViewRangeTime={updateNextViewRangeTime}
        updateViewRangeTime={updateViewRangeTime}
        viewRange={viewRange}
        searchValue={search}
        onSearchValueChange={setSearch}
        hideSearchButtons={true}
      />
      <TraceTimelineViewer
        registerAccessors={() => {}}
        scrollToFirstVisibleSpan={() => {}}
        findMatchesIDs={spanFindMatches}
        trace={traceProp}
        traceTimeline={
          {
            childrenHiddenIDs,
            detailStates,
            hoverIndentGuideIds,
            shouldScrollToFirstUiFindMatch: false,
            spanNameColumnWidth,
            traceID: '50b96206cf81dd64',
          } as TTraceTimeline
        }
        updateNextViewRangeTime={updateNextViewRangeTime}
        updateViewRangeTime={updateViewRangeTime}
        viewRange={viewRange}
        focusSpan={() => {}}
        createLinkToExternalSpan={() => ''}
        setSpanNameColumnWidth={setSpanNameColumnWidth}
        collapseAll={collapseAll}
        collapseOne={collapseOne}
        expandAll={expandAll}
        expandOne={expandOne}
        childrenToggle={childrenToggle}
        clearShouldScrollToFirstUiFindMatch={() => {}}
        detailLogItemToggle={detailLogItemToggle}
        detailLogsToggle={detailLogsToggle}
        detailWarningsToggle={detailWarningsToggle}
        detailReferencesToggle={detailReferencesToggle}
        detailProcessToggle={detailProcessToggle}
        detailTagsToggle={detailTagsToggle}
        detailToggle={toggleDetail}
        setTrace={(trace: Trace | null, uiFind: string | null) => {}}
        addHoverIndentGuideId={addHoverIndentGuideId}
        removeHoverIndentGuideId={removeHoverIndentGuideId}
        linksGetter={(span: Span, items: KeyValuePair[], itemIndex: number) => [] as Link[]}
        uiFind={search}
      />
    </UIElementsContext.Provider>
  );
}