TraceView: refactor UI components injection (#44289)

* Remove UIDivider

* Update TracePageSearchBar buttons

* Remove UIButton

* Remove UIInput

* Remove LoadingIndicator

* Remove UIIcon

* Remove UITooltip

* Remove UIDropdown

* Remove UIMenu

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

@@ -18,7 +18,6 @@ import {
   TraceTimelineViewer,
   transformTraceData,
   TTraceTimeline,
-  UIElementsContext,
 } from '@jaegertracing/jaeger-ui-components';
 import { TraceToLogsData } from 'app/core/components/TraceToLogsSettings';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -29,7 +28,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { changePanelState } from '../state/explorePane';
 import { createSpanLinkFactory } from './createSpanLink';
-import { UIElements } from './uiElements';
 import { useChildrenState } from './useChildrenState';
 import { useDetailState } from './useDetailState';
 import { useHoverIndentGuide } from './useHoverIndentGuide';
@@ -77,7 +75,7 @@ export function TraceView(props: Props) {
   const [slim, setSlim] = useState(false);
 
   const traceProp = useMemo(() => transformDataFrames(frame), [frame]);
-  const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);
+  const { search, setSearch, spanFindMatches, clearSearch } = useSearch(traceProp?.spans);
 
   const datasource = useSelector(
     (state: StoreState) => state.explore[props.exploreId]?.datasourceInstance ?? undefined
@@ -115,10 +113,10 @@ export function TraceView(props: Props) {
   }
 
   return (
-    <UIElementsContext.Provider value={UIElements}>
+    <>
       <TracePageHeader
         canCollapse={false}
-        clearSearch={noop}
+        clearSearch={clearSearch}
         focusUiFindMatches={noop}
         hideMap={false}
         hideSummary={false}
@@ -126,17 +124,14 @@ export function TraceView(props: Props) {
         onSlimViewClicked={onSlimViewClicked}
         onTraceGraphViewClicked={noop}
         prevResult={noop}
-        resultCount={0}
+        resultCount={spanFindMatches?.size ?? 0}
         slimView={slim}
-        textFilter={null}
         trace={traceProp}
-        traceGraphView={false}
         updateNextViewRangeTime={updateNextViewRangeTime}
         updateViewRangeTime={updateViewRangeTime}
         viewRange={viewRange}
         searchValue={search}
         onSearchValueChange={setSearch}
-        hideSearchButtons={true}
         timeZone={timeZone}
       />
       <TraceTimelineViewer
@@ -175,7 +170,7 @@ export function TraceView(props: Props) {
         focusedSpanId={focusedSpanId}
         createFocusSpanLink={createFocusSpanLink}
       />
-    </UIElementsContext.Provider>
+    </>
   );
 }
 

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

@@ -1,95 +0,0 @@
-import { GrafanaTheme } from '@grafana/data';
-import {
-  Button,
-  Input,
-  Popover,
-  PopoverController,
-  stylesFactory,
-  Tooltip as GrafanaTooltip,
-  useTheme,
-} from '@grafana/ui';
-import { ButtonProps, Elements, PopoverProps, TooltipProps } from '@jaegertracing/jaeger-ui-components';
-import cx from 'classnames';
-import { css } from '@emotion/css';
-import React, { useRef } from 'react';
-
-/**
- * Right now Jaeger components need some UI elements to be injected. This is to get rid of AntD UI library that was
- * used by default.
- */
-
-// This needs to be static to prevent remounting on every render.
-export const UIElements: Elements = {
-  Popover({ children, content, overlayClassName }: PopoverProps) {
-    const popoverRef = useRef<HTMLElement>(null);
-
-    return (
-      <PopoverController content={content} hideAfter={300}>
-        {(showPopper, hidePopper, popperProps) => {
-          return (
-            <>
-              {popoverRef.current && (
-                <Popover
-                  {...popperProps}
-                  referenceElement={popoverRef.current}
-                  wrapperClassName={overlayClassName}
-                  onMouseLeave={hidePopper}
-                  onMouseEnter={showPopper}
-                />
-              )}
-
-              {React.cloneElement(children, {
-                ref: popoverRef,
-                onMouseEnter: showPopper,
-                onMouseLeave: hidePopper,
-              })}
-            </>
-          );
-        }}
-      </PopoverController>
-    );
-  },
-  Tooltip({ children, title }: TooltipProps) {
-    return <GrafanaTooltip content={title}>{children}</GrafanaTooltip>;
-  },
-  Icon: (() => null as any) as any,
-  Dropdown: (() => null as any) as any,
-  Menu: (() => null as any) as any,
-  MenuItem: (() => null as any) as any,
-  Button({ onClick, children, className }: ButtonProps) {
-    return (
-      <Button variant="secondary" onClick={onClick} className={className}>
-        {children}
-      </Button>
-    );
-  },
-  Divider,
-  Input(props) {
-    return <Input {...props} />;
-  },
-  InputGroup({ children, className, style }) {
-    return (
-      <span className={className} style={style}>
-        {children}
-      </span>
-    );
-  },
-};
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    Divider: css`
-      display: inline-block;
-      background: ${theme.isDark ? '#242424' : '#e8e8e8'};
-      width: 1px;
-      height: 0.9em;
-      margin: 0 8px;
-      vertical-align: middle;
-    `,
-  };
-});
-
-function Divider({ className }: { className?: string }) {
-  const styles = getStyles(useTheme());
-  return <div style={{}} className={cx(styles.Divider, className)} />;
-}

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { filterSpans, TraceSpan } from '@jaegertracing/jaeger-ui-components';
 
 /**
@@ -7,9 +7,13 @@ import { filterSpans, TraceSpan } from '@jaegertracing/jaeger-ui-components';
  */
 export function useSearch(spans?: TraceSpan[]) {
   const [search, setSearch] = useState('');
-  const spanFindMatches: Set<string> | undefined | null = useMemo(() => {
+  const spanFindMatches: Set<string> | undefined = useMemo(() => {
     return search && spans ? filterSpans(search, spans) : undefined;
   }, [search, spans]);
 
-  return { search, setSearch, spanFindMatches };
+  const clearSearch = useCallback(() => {
+    setSearch('');
+  }, [setSearch]);
+
+  return { search, setSearch, spanFindMatches, clearSearch };
 }