Tracing: Remove collapsing of header (#24153)

packages/grafana-ui/src/themes/ThemeContext.tsx

@@ -35,7 +35,7 @@ export const withTheme = <P extends Themeable, S extends {} = {}>(Component: Rea
   return WithTheme as Hoisted;
   return WithTheme as Hoisted;
 };
 };
 
 
-export function useTheme() {
+export function useTheme(): GrafanaTheme {
   return useContext(ThemeContextMock || ThemeContext);
   return useContext(ThemeContextMock || ThemeContext);
 }
 }
 /** Hook for using memoized styles with access to the theme. */
 /** Hook for using memoized styles with access to the theme. */

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

@@ -72,6 +72,11 @@ export type Theme = {
   type: ThemeType;
   type: ThemeType;
   servicesColorPalette: string[];
   servicesColorPalette: string[];
   borderStyle: string;
   borderStyle: string;
+  components?: {
+    TraceName?: {
+      fontSize?: number | string;
+    };
+  };
 };
 };
 
 
 export const defaultTheme: Theme = {
 export const defaultTheme: Theme = {
@@ -199,3 +204,19 @@ export function autoColor(theme: Theme, hex: string, base?: string) {
     return newColor.isLight() ? newColor.darken(5).toHex8String() : newColor.lighten(5).toHex8String();
     return newColor.isLight() ? newColor.darken(5).toHex8String() : newColor.lighten(5).toHex8String();
   }
   }
 }
 }
+
+/**
+ * With theme overrides you can use both number or string (for things like rem units) so this makes sure we convert
+ * the value accordingly or use fallback if not set
+ */
+export function safeSize(size: number | string | undefined, fallback: string): string {
+  if (!size) {
+    return fallback;
+  }
+
+  if (typeof size === 'string') {
+    return size;
+  } else {
+    return `${size}px`;
+  }
+}

packages/jaeger-ui-components/src/common/TraceName.tsx

@@ -14,6 +14,7 @@
 
 
 import * as React from 'react';
 import * as React from 'react';
 import { css } from 'emotion';
 import { css } from 'emotion';
+import cx from 'classnames';
 
 
 import BreakableText from './BreakableText';
 import BreakableText from './BreakableText';
 import LoadingIndicator from './LoadingIndicator';
 import LoadingIndicator from './LoadingIndicator';
@@ -21,11 +22,16 @@ import { fetchedState, FALLBACK_TRACE_NAME } from '../constants';
 
 
 import { FetchedState, TNil } from '../types';
 import { FetchedState, TNil } from '../types';
 import { ApiError } from '../types/api-error';
 import { ApiError } from '../types/api-error';
-import { createStyle } from '../Theme';
+import { createStyle, safeSize, Theme, useTheme } from '../Theme';
 
 
-const getStyles = createStyle(() => {
+const getStyles = createStyle((theme: Theme) => {
   return {
   return {
+    TraceName: css`
+      label: TraceName;
+      font-size: ${safeSize(theme.components?.TraceName?.fontSize, 'unset')};
+    `,
     TraceNameError: css`
     TraceNameError: css`
+      label: TraceNameError;
       color: #c00;
       color: #c00;
     `,
     `,
   };
   };
@@ -42,7 +48,7 @@ export default function TraceName(props: Props) {
   const { className, error, state, traceName } = props;
   const { className, error, state, traceName } = props;
   const isErred = state === fetchedState.ERROR;
   const isErred = state === fetchedState.ERROR;
   let title: string | React.ReactNode = traceName || FALLBACK_TRACE_NAME;
   let title: string | React.ReactNode = traceName || FALLBACK_TRACE_NAME;
-  const styles = getStyles();
+  const styles = getStyles(useTheme());
   let errorCssClass = '';
   let errorCssClass = '';
   if (isErred) {
   if (isErred) {
     errorCssClass = styles.TraceNameError;
     errorCssClass = styles.TraceNameError;
@@ -61,5 +67,5 @@ export default function TraceName(props: Props) {
     const text = String(traceName || FALLBACK_TRACE_NAME);
     const text = String(traceName || FALLBACK_TRACE_NAME);
     title = <BreakableText text={text} />;
     title = <BreakableText text={text} />;
   }
   }
-  return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;
+  return <span className={cx(styles.TraceName, errorCssClass, className)}>{title}</span>;
 }
 }

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

@@ -56,7 +56,16 @@ export function TraceView(props: Props) {
 
 
   const theme = useTheme();
   const theme = useTheme();
   const traceTheme = useMemo(
   const traceTheme = useMemo(
-    () => ({ type: theme.isDark ? ThemeType.Dark : ThemeType.Light, servicesColorPalette: colors } as ThemeOptions),
+    () =>
+      ({
+        type: theme.isDark ? ThemeType.Dark : ThemeType.Light,
+        servicesColorPalette: colors,
+        components: {
+          TraceName: {
+            fontSize: theme.typography.size.lg,
+          },
+        },
+      } as ThemeOptions),
     [theme]
     [theme]
   );
   );
   const traceTimeline: TTraceTimeline = useMemo(
   const traceTimeline: TTraceTimeline = useMemo(
@@ -75,7 +84,7 @@ export function TraceView(props: Props) {
     <ThemeProvider value={traceTheme}>
     <ThemeProvider value={traceTheme}>
       <UIElementsContext.Provider value={UIElements}>
       <UIElementsContext.Provider value={UIElements}>
         <TracePageHeader
         <TracePageHeader
-          canCollapse={true}
+          canCollapse={false}
           clearSearch={useCallback(() => {}, [])}
           clearSearch={useCallback(() => {}, [])}
           focusUiFindMatches={useCallback(() => {}, [])}
           focusUiFindMatches={useCallback(() => {}, [])}
           hideMap={false}
           hideMap={false}