diff --git a/public/app/plugins/panel/logs/LogsPanel.test.tsx b/public/app/plugins/panel/logs/LogsPanel.test.tsx index 7b7a034f35e..12520a140a6 100644 --- a/public/app/plugins/panel/logs/LogsPanel.test.tsx +++ b/public/app/plugins/panel/logs/LogsPanel.test.tsx @@ -481,6 +481,33 @@ describe('LogsPanel', () => { expect(screen.getByText('logline text')).toBeInTheDocument(); }); + it('updates the provided fields instead of the log line', async () => { + const { rerender, props } = setup({ + data: { + series, + }, + options: { + showLabels: false, + showTime: false, + wrapLogMessage: false, + showCommonLabels: false, + prettifyLogMessage: false, + sortOrder: LogsSortOrder.Descending, + dedupStrategy: LogsDedupStrategy.none, + enableLogDetails: true, + onClickHideField: undefined, + onClickShowField: undefined, + }, + }); + + expect(await screen.findByRole('row')).toBeInTheDocument(); + expect(screen.getByText('logline text')).toBeInTheDocument(); + + rerender(); + + expect(screen.getByText('app=common_app')).toBeInTheDocument(); + }); + it('enables the behavior with a default implementation', async () => { setup({ data: { diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx index f9a78596387..b1269af69c0 100644 --- a/public/app/plugins/panel/logs/LogsPanel.tsx +++ b/public/app/plugins/panel/logs/LogsPanel.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; import * as React from 'react'; import { @@ -305,6 +305,12 @@ export const LogsPanel = ({ [displayedFields] ); + useEffect(() => { + if (options.displayedFields) { + setDisplayedFields(options.displayedFields); + } + }, [options.displayedFields]); + if (!data || logRows.length === 0) { return ; }