Logs Panel: Table UI - Explore default state (#79653)

* save explore visualisation type in local storage

public/app/features/explore/Logs/Logs.test.tsx

@@ -18,7 +18,7 @@ import { organizeFieldsTransformer } from '@grafana/data/src/transformations/tra
 import { config } from '@grafana/runtime';
 import { extractFieldsTransformer } from 'app/features/transformers/extractFields/extractFields';
 
-import { Logs } from './Logs';
+import { Logs, visualisationTypeKey } from './Logs';
 import { getMockElasticFrame, getMockLokiFrame } from './utils/testMocks.test';
 
 const reportInteraction = jest.fn();
@@ -480,6 +480,20 @@ describe('Logs', () => {
       expect(table).toBeInTheDocument();
     });
 
+    it('should use default state from localstorage - table', async () => {
+      localStorage.setItem(visualisationTypeKey, 'table');
+      setup({});
+      const table = await screen.findByTestId('logRowsTable');
+      expect(table).toBeInTheDocument();
+    });
+
+    it('should use default state from localstorage - logs', async () => {
+      localStorage.setItem(visualisationTypeKey, 'logs');
+      setup({});
+      const table = await screen.findByTestId('logRows');
+      expect(table).toBeInTheDocument();
+    });
+
     it('should change visualisation to table on toggle (elastic)', async () => {
       setup({}, getMockElasticFrame());
       const logsSection = screen.getByRole('radio', { name: 'Show results in table visualisation' });

public/app/features/explore/Logs/Logs.tsx

@@ -137,6 +137,16 @@ const DEDUP_OPTIONS = [
   LogsDedupStrategy.signature,
 ];
 
+export const visualisationTypeKey = 'grafana.explore.logs.visualisationType';
+
+const getDefaultVisualisationType = (): LogsVisualisationType => {
+  const visualisationType = store.get(visualisationTypeKey);
+  if (visualisationType === 'table') {
+    return 'table';
+  }
+  return 'logs';
+};
+
 class UnthemedLogs extends PureComponent<Props, State> {
   flipOrderTimer?: number;
   cancelFlippingTimer?: number;
@@ -157,7 +167,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
     contextOpen: false,
     contextRow: undefined,
     tableFrame: undefined,
-    visualisationType: this.props.panelState?.logs?.visualisationType ?? 'logs',
+    visualisationType: this.props.panelState?.logs?.visualisationType ?? getDefaultVisualisationType(),
     logsContainer: undefined,
   };
 
@@ -219,9 +229,12 @@ class UnthemedLogs extends PureComponent<Props, State> {
       );
     }
     if (this.props.panelState?.logs?.visualisationType !== prevProps.panelState?.logs?.visualisationType) {
+      const visualisationType = this.props.panelState?.logs?.visualisationType ?? getDefaultVisualisationType();
+
       this.setState({
-        visualisationType: this.props.panelState?.logs?.visualisationType ?? 'logs',
+        visualisationType: visualisationType,
       });
+      store.set(visualisationTypeKey, visualisationType);
     }
   }
 
@@ -436,7 +449,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
     const urlState = getUrlStateFromPaneState(getState().explore.panes[this.props.exploreId]!);
     urlState.panelsState = {
       ...this.props.panelState,
-      logs: { id: row.uid, visualisationType: this.state.visualisationType ?? 'logs' },
+      logs: { id: row.uid, visualisationType: this.state.visualisationType ?? getDefaultVisualisationType() },
     };
     urlState.range = {
       from: new Date(this.props.absoluteRange.from).toISOString(),