Tracing: Performance optimization (#23474)

* Add integration with Jeager
Add Jaeger datasource and modify derived fields in loki to allow for opening a trace in Jager in separate split.
Modifies build so that this branch docker images are pushed to docker hub
Add a traceui dir with docker-compose and provision files for demoing.:wq

* Enable docker logger plugin to send logs to loki

* Add placeholder zipkin datasource

* Fixed rebase issues, added enhanceDataFrame to non-legacy code path

* Trace selector for jaeger query field

* Fix logs default mode for Loki

* Fix loading jaeger query field services on split

* Updated grafana image in traceui/compose file

* Fix prettier error

* Hide behind feature flag, clean up unused code.

* Fix tests

* Fix tests

* Cleanup code and review feedback

* Remove traceui directory

* Remove circle build changes

* Fix feature toggles object

* Fix merge issues

* Add trace ui in Explore

* WIP

* WIP

* WIP

* Make jaeger datasource return trace data instead of link

* Allow js in jest tests

* Return data from Jaeger datasource

* Take yarn.lock from master

* Fix missing component

* Update yarn lock

* Fix some ts and lint errors

* Fix merge

* Fix type errors

* Make tests pass again

* Add tests

* Fix es5 compatibility

* Add header with minimap

* Fix sizing issue due to column resizer handle

* Fix issues with sizing, search functionality, duplicate react, tests

* Refactor TraceView component, fix tests

* Fix type errors

* Add dark theme styling

* Add tests for hooks

* More color changes

* Fix tests to deal with additional theme wrappers.

* Add memoization

* Fix duplicate identifier

Co-authored-by: David Kaltschmidt <david.kaltschmidt@gmail.com>

packages/jaeger-ui-components/src/Theme.tsx

@@ -50,18 +50,22 @@ export function ThemeConsumer(props: ThemeConsumerProps) {
   return (
     <ThemeContext.Consumer>
       {(value: ThemeOptions | undefined) => {
-        const mergedTheme: Theme = value
-          ? {
-              ...defaultTheme,
-              ...value,
-            }
-          : defaultTheme;
-        return props.children(mergedTheme);
+        const theme = memoizedThemeMerge(value);
+        return props.children(theme);
       }}
     </ThemeContext.Consumer>
   );
 }
 
+const memoizedThemeMerge = memoizeOne(value => {
+  return value
+    ? {
+        ...defaultTheme,
+        ...value,
+      }
+    : defaultTheme;
+});
+
 type WrappedWithThemeComponent<Props> = React.ComponentType<Omit<Props, 'theme'>> & {
   wrapped: React.ComponentType<Props>;
 };

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -34,6 +34,7 @@ import { getTraceLinks } from '../model/link-patterns';
 import ExternalLinks from '../common/ExternalLinks';
 import { createStyle } from '../Theme';
 import { uTxMuted } from '../uberUtilityStyles';
+import { useMemo } from 'react';
 
 const getStyles = createStyle((theme: Theme) => {
   const TracePageHeaderOverviewItemValueDetail = css`
@@ -222,7 +223,7 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
     return null;
   }
 
-  const links = getTraceLinks(trace);
+  const links = useMemo(() => getTraceLinks(trace), [trace]);
 
   const summaryItems =
     !hideSummary &&

packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx

@@ -24,6 +24,7 @@ import { TNil } from '../types';
 import { UIButton, UIInputGroup } from '../uiElementsContext';
 import { createStyle } from '../Theme';
 import { ubFlexAuto, ubJustifyEnd } from '../uberUtilityStyles';
+import { memo } from 'react';
 
 export const getStyles = createStyle(() => {
   return {
@@ -71,7 +72,7 @@ type TracePageSearchBarProps = {
   hideSearchButtons?: boolean;
 };
 
-export default function TracePageSearchBar(props: TracePageSearchBarProps) {
+export default memo(function TracePageSearchBar(props: TracePageSearchBarProps) {
   const {
     clearSearch,
     focusUiFindMatches,
@@ -141,4 +142,4 @@ export default function TracePageSearchBar(props: TracePageSearchBarProps) {
       </UIInputGroup>
     </div>
   );
-}
+});