diff --git a/public/app/features/logs/components/panel/InfiniteScroll.tsx b/public/app/features/logs/components/panel/InfiniteScroll.tsx index 3c7de64b6be..fd5fb15a014 100644 --- a/public/app/features/logs/components/panel/InfiniteScroll.tsx +++ b/public/app/features/logs/components/panel/InfiniteScroll.tsx @@ -72,7 +72,7 @@ export const InfiniteScroll = ({ const lastEvent = useRef(null); const countRef = useRef(0); const lastLogOfPage = useRef([]); - const styles = useStyles2(getStyles, virtualization); + const styles = useStyles2(getStyles, virtualization, displayedFields); const resetStateTimeout = useRef | null>(null); const scrollToLogLineRef = useRef(undefined); const noScrollRef = useRef(undefined); diff --git a/public/app/features/logs/components/panel/LogLine.tsx b/public/app/features/logs/components/panel/LogLine.tsx index 292f35ea75a..a1914607600 100644 --- a/public/app/features/logs/components/panel/LogLine.tsx +++ b/public/app/features/logs/components/panel/LogLine.tsx @@ -202,7 +202,7 @@ const LogLineComponent = memo( {/* A button element could be used but in Safari it prevents text selection. Fallback available for a11y in LogLineMenu */} {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
+ {' '} ); @@ -448,12 +448,12 @@ const LogLineBody = ({ log, styles }: { log: LogListModel; styles: LogLineStyles highlightClassName={styles.matchHighLight} /> ) : ( - {log.body} + {log.body} ); } return ( - + {' '} ); @@ -468,7 +468,30 @@ export function getGridTemplateColumns(dimensions: LogFieldDimension[], displaye } export type LogLineStyles = ReturnType; -export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtualization) => { +export const getStyles = ( + theme: GrafanaTheme2, + virtualization: LogLineVirtualization | undefined = undefined, + displayedFields: string[] = [] +) => { + const base = tinycolor(theme.colors.background.primary); + + let maxContrast = theme.isDark + ? tinycolor(theme.colors.text.maxContrast).darken(10).toRgbString() + : tinycolor(theme.colors.text.maxContrast).lighten(10).toRgbString(); + let colorDefault = theme.isDark + ? theme.colors.text.primary + : tinycolor(theme.colors.text.maxContrast).lighten(30).toRgbString(); + const contrast1 = tinycolor.readability(base, maxContrast); + const contrast2 = tinycolor.readability(base, colorDefault); + + if (!displayedFields.length || (displayedFields.length === 1 && displayedFields.includes(LOG_LINE_BODY_FIELD_NAME))) { + colorDefault = theme.colors.text.primary; + maxContrast = theme.colors.text.primary; + } else if (contrast1 < contrast2) { + colorDefault = maxContrast; + maxContrast = theme.colors.text.primary; + } + const colors = { critical: '#B877D9', error: theme.colors.error.text, @@ -477,8 +500,9 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali trace: '#6ed0e0', info: '#6CCF8E', metadata: theme.colors.text.secondary, - default: theme.colors.text.primary, + default: colorDefault, parsedField: theme.colors.text.secondary, + logLineBody: maxContrast, }; const hoverColor = tinycolor(theme.colors.background.canvas).darken(11).toRgbString(); @@ -490,8 +514,6 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali gap: theme.spacing(0.5), flexDirection: 'row', fontFamily: theme.typography.fontFamilyMonospace, - fontSize: theme.typography.fontSize, - lineHeight: theme.typography.body.lineHeight, wordBreak: 'break-all', '&:hover': { background: hoverColor, @@ -509,7 +531,7 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali }, '& .log-syntax-highlight': { '.log-token-string': { - color: colors.default, + color: colors.logLineBody, }, '.log-token-duration': { color: theme.colors.success.text, @@ -540,6 +562,9 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali color: theme.components.textHighlight.text, backgroundColor: theme.components.textHighlight.background, }, + '&.log-line-body': { + color: colors.logLineBody, + }, }, '& .no-highlighting': { color: theme.colors.text.primary, @@ -553,6 +578,10 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali fontSize: theme.typography.bodySmall.fontSize, lineHeight: theme.typography.bodySmall.lineHeight, }), + fontSizeDefault: css({ + fontSize: theme.typography.fontSize, + lineHeight: theme.typography.body.lineHeight, + }), detailsDisplayed: css({ background: tinycolor(theme.colors.background.canvas) .darken(theme.isDark ? 2 : 5) diff --git a/public/app/features/logs/components/panel/LogList.test.tsx b/public/app/features/logs/components/panel/LogList.test.tsx index 6d0ad667527..468cd63a3b3 100644 --- a/public/app/features/logs/components/panel/LogList.test.tsx +++ b/public/app/features/logs/components/panel/LogList.test.tsx @@ -457,7 +457,7 @@ describe('LogList', () => { // Default displayed fields expect(screen.getByText('Log line')).toBeInTheDocument(); - expect(screen.getByText('OTel attributes')).toBeInTheDocument(); + expect(screen.getByText('Log attributes')).toBeInTheDocument(); // Suggested field expect(screen.getByText('scope_name')).toBeInTheDocument(); diff --git a/public/app/features/logs/components/panel/LogList.tsx b/public/app/features/logs/components/panel/LogList.tsx index 8a8a9b085dc..4e457fc5b24 100644 --- a/public/app/features/logs/components/panel/LogList.tsx +++ b/public/app/features/logs/components/panel/LogList.tsx @@ -550,7 +550,7 @@ const LogListComponent = ({ function getStyles( theme: GrafanaTheme2, dimensions: LogFieldDimension[], - displayedFields: string[], + displayedFields: string[] = [], { showTime }: { showTime: boolean } ) { const columns = showTime ? dimensions : dimensions.filter((_, index) => index > 0); diff --git a/public/app/features/logs/components/panel/processing.ts b/public/app/features/logs/components/panel/processing.ts index 0f3ea0ac6b1..dcb391c8e07 100644 --- a/public/app/features/logs/components/panel/processing.ts +++ b/public/app/features/logs/components/panel/processing.ts @@ -364,7 +364,7 @@ export function getNormalizedFieldName(field: string) { if (field === LOG_LINE_BODY_FIELD_NAME) { return t('logs.log-line-details.log-line-field', 'Log line'); } else if (field === OTEL_LOG_LINE_ATTRIBUTES_FIELD_NAME) { - return t('logs.log-line-details.log-attributes-field', 'OTel attributes'); + return t('logs.log-line-details.log-attributes-field', 'Log attributes'); } return field; } diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 41abf7bbd9c..90c8f67b1bf 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -9937,7 +9937,7 @@ "inline-mode": "Display inline", "link-value-tooltip": "Link value", "links-section": "Links", - "log-attributes-field": "OTel attributes", + "log-attributes-field": "Log attributes", "log-line-field": "Log line", "log-line-section": "Log line", "move-displayed-field-down": "Move down",