Logs panel: update internal displayed fields when the prop changes (grafana#92418)

Author: matyax

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(<LogsPanel {...props} options={{ ...props.options, displayedFields: ['app'] }} />);
+
+      expect(screen.getByText('app=common_app')).toBeInTheDocument();
+    });
+
     it('enables the behavior with a default implementation', async () => {
       setup({
         data: {

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 <PanelDataErrorView fieldConfig={fieldConfig} panelId={id} data={data} needsStringField />;
   }