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 ;
}