feat(LogsTablePanel): add wrap text support

Author: matyax

src/Components/ServiceScene/LogsTablePanelScene.tsx

@@ -26,7 +26,7 @@ import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '..
 import { areArraysEqual } from '../../services/comparison';
 import { getAllLabelsFromDataFrame } from '../../services/labels';
 import { setControlsExpandedStateFromLocalStorage } from '../../services/scenes';
-import { getLogOption, setDisplayedFieldsInStorage } from '../../services/store';
+import { getBooleanLogOption, getLogOption, setDisplayedFieldsInStorage, setLogOption } from '../../services/store';
 import { clearVariables } from '../../services/variableHelpers';
 import { PanelMenu } from '../Panels/PanelMenu';
 import { DEFAULT_URL_COLUMNS, DETECTED_LEVEL, LEVEL } from '../Table/constants';
@@ -102,7 +102,10 @@ export class LogsTablePanelScene extends SceneObjectBase<LogsTableSceneState> {
   }
 
   protected onOptionsChange(options: DeepPartial<Options>, prevOptions: DeepPartial<Options>) {
-    console.log('options change', options);
+    // todo: Update after Grafana >= 13.1
+    if ('wrapText' in options && 'wrapText' in prevOptions && options.wrapText !== prevOptions.wrapText) {
+      setLogOption('wrapText', Boolean(options.wrapText));
+    }
   }
 
   public onActivate() {
@@ -112,6 +115,7 @@ export class LogsTablePanelScene extends SceneObjectBase<LogsTableSceneState> {
       ...defaultOptions,
       // Could do url columns
       displayedFields: parentScene.state.displayedFields,
+      wrapText: getBooleanLogOption('wrapText', true),
     }));
 
     // @todo set field defaults

src/services/store.ts

@@ -296,7 +296,10 @@ export function getLogOption<T>(option: keyof Options, defaultValue: T): T {
   return localStorageResult ? (localStorageResult as T) : defaultValue;
 }
 
-export function getBooleanLogOption(option: keyof Options | 'controlsExpanded', defaultValue: boolean): boolean {
+export function getBooleanLogOption(
+  option: keyof Options | 'controlsExpanded' | 'wrapText',
+  defaultValue: boolean
+): boolean {
   const localStorageResult = localStorage.getItem(`${LOG_OPTIONS_LOCALSTORAGE_KEY}.${option}`);
   if (localStorageResult === null) {
     return defaultValue;
@@ -305,7 +308,7 @@ export function getBooleanLogOption(option: keyof Options | 'controlsExpanded',
 }
 
 export function setLogOption(
-  option: keyof Options | 'maxLines' | 'controlsExpanded',
+  option: keyof Options | 'maxLines' | 'controlsExpanded' | 'wrapText',
   value: string | number | boolean
 ) {
   let storedValue = value.toString();