mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Tracing: Remove collapsing of header (#24153)
This commit is contained in:
parent
224aa4dde8
commit
9962f6961e
@ -35,7 +35,7 @@ export const withTheme = <P extends Themeable, S extends {} = {}>(Component: Rea
|
||||
return WithTheme as Hoisted;
|
||||
};
|
||||
|
||||
export function useTheme() {
|
||||
export function useTheme(): GrafanaTheme {
|
||||
return useContext(ThemeContextMock || ThemeContext);
|
||||
}
|
||||
/** Hook for using memoized styles with access to the theme. */
|
||||
|
@ -72,6 +72,11 @@ export type Theme = {
|
||||
type: ThemeType;
|
||||
servicesColorPalette: string[];
|
||||
borderStyle: string;
|
||||
components?: {
|
||||
TraceName?: {
|
||||
fontSize?: number | string;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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`;
|
||||
}
|
||||
}
|
||||
|
@ -14,6 +14,7 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import { css } from 'emotion';
|
||||
import cx from 'classnames';
|
||||
|
||||
import BreakableText from './BreakableText';
|
||||
import LoadingIndicator from './LoadingIndicator';
|
||||
@ -21,11 +22,16 @@ import { fetchedState, FALLBACK_TRACE_NAME } from '../constants';
|
||||
|
||||
import { FetchedState, TNil } from '../types';
|
||||
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 {
|
||||
TraceName: css`
|
||||
label: TraceName;
|
||||
font-size: ${safeSize(theme.components?.TraceName?.fontSize, 'unset')};
|
||||
`,
|
||||
TraceNameError: css`
|
||||
label: TraceNameError;
|
||||
color: #c00;
|
||||
`,
|
||||
};
|
||||
@ -42,7 +48,7 @@ export default function TraceName(props: Props) {
|
||||
const { className, error, state, traceName } = props;
|
||||
const isErred = state === fetchedState.ERROR;
|
||||
let title: string | React.ReactNode = traceName || FALLBACK_TRACE_NAME;
|
||||
const styles = getStyles();
|
||||
const styles = getStyles(useTheme());
|
||||
let errorCssClass = '';
|
||||
if (isErred) {
|
||||
errorCssClass = styles.TraceNameError;
|
||||
@ -61,5 +67,5 @@ export default function TraceName(props: Props) {
|
||||
const text = String(traceName || FALLBACK_TRACE_NAME);
|
||||
title = <BreakableText text={text} />;
|
||||
}
|
||||
return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;
|
||||
return <span className={cx(styles.TraceName, errorCssClass, className)}>{title}</span>;
|
||||
}
|
||||
|
@ -56,7 +56,16 @@ export function TraceView(props: Props) {
|
||||
|
||||
const theme = useTheme();
|
||||
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]
|
||||
);
|
||||
const traceTimeline: TTraceTimeline = useMemo(
|
||||
@ -75,7 +84,7 @@ export function TraceView(props: Props) {
|
||||
<ThemeProvider value={traceTheme}>
|
||||
<UIElementsContext.Provider value={UIElements}>
|
||||
<TracePageHeader
|
||||
canCollapse={true}
|
||||
canCollapse={false}
|
||||
clearSearch={useCallback(() => {}, [])}
|
||||
focusUiFindMatches={useCallback(() => {}, [])}
|
||||
hideMap={false}
|
||||
|
Loading…
Reference in New Issue
Block a user