TraceViewer: Fix show log marker in spanbar (#30742)

* TraceViewer: Fix show log marker in spanbar

* Revert changes and use UITooltip and UIPopover

* Change logmarker color

* e2e: wait for trace view

* Record cypress run ONLY FOR TESTING

* Move fixture to e2e

* Get details TEST ONLY

* test

* Use jaeger's theme instead of grafana's

* Revert "Record cypress run ONLY FOR TESTING"

This reverts commit 35c087b3c5.

* Revert "Move fixture to e2e"

This reverts commit fab88cc54c.

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

@@ -1,9 +1,17 @@
-import React from 'react';
-import { ButtonProps, Elements } from '@jaegertracing/jaeger-ui-components';
-import { Button, Input, stylesFactory, useTheme } from '@grafana/ui';
-import { css } from 'emotion';
 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';
+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
@@ -12,15 +20,45 @@ import cx from 'classnames';
 
 // This needs to be static to prevent remounting on every render.
 export const UIElements: Elements = {
-  Popover: (() => null as any) as any,
-  Tooltip: (() => null as any) as any,
+  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}>
+      <Button variant="secondary" onClick={onClick} className={className}>
         {children}
       </Button>
     );