Line filter: add case sensitive line filter state to local storage (#956

) * feat: add case sensitive line filter state to local storage
grafana · Dec 17, 2024 · e52ae58 · e52ae58
1 parent da3ff3f
commit e52ae58
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/project-words.txt b/project-words.txt
@@ -504,3 +504,4 @@ keycombo
 capslock
 pageup
 pagedown
+linefilter
diff --git a/src/Components/ServiceScene/LineFilterScene.tsx b/src/Components/ServiceScene/LineFilterScene.tsx
@@ -8,6 +8,7 @@ import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'se
 import { SearchInput } from './Breakdowns/SearchInput';
 import { LineFilterIcon } from './LineFilterIcon';
 import { getLineFilterVariable } from '../../services/variableGetters';
+import { getLineFilterCase, setLineFilterCase } from '../../services/store';
 
 interface LineFilterState extends SceneObjectState {
   lineFilter: string;
@@ -20,7 +21,7 @@ export class LineFilterScene extends SceneObjectBase<LineFilterState> {
   constructor(state?: Partial<LineFilterState>) {
     super({
       lineFilter: state?.lineFilter || '',
-      caseSensitive: false,
+      caseSensitive: getLineFilterCase(false),
       ...state,
     });
     this.addActivationHandler(this.onActivate);
@@ -66,11 +67,17 @@ export class LineFilterScene extends SceneObjectBase<LineFilterState> {
   };
 
   onCaseSensitiveToggle = (newState: 'sensitive' | 'insensitive') => {
+    const caseSensitive = newState === 'sensitive';
+
+    // Set value to scene state
     this.setState({
-      caseSensitive: newState === 'sensitive',
+      caseSensitive,
     });
 
-    this.updateFilter(this.state.lineFilter);
+    // Set value in local storage
+    setLineFilterCase(caseSensitive);
+
+    this.updateFilter(this.state.lineFilter, false);
   };
 
   updateVariableDebounced = debounce((search: string) => {

diff --git a/src/services/store.ts b/src/services/store.ts
@@ -236,6 +236,22 @@ export function setLogsVisualizationType(type: string) {
   localStorage.setItem(VISUALIZATION_TYPE_LOCALSTORAGE_KEY, type);
 }
 
+// Line filter options
+const LINE_FILTER_OPTIONS_LOCALSTORAGE_KEY = `${pluginJson.id}.linefilter.option`;
+export function setLineFilterCase(caseSensitive: boolean) {
+  let storedValue = caseSensitive.toString();
+  if (!caseSensitive) {
+    storedValue = '';
+  }
+
+  localStorage.setItem(`${LINE_FILTER_OPTIONS_LOCALSTORAGE_KEY}.caseSensitive`, storedValue);
+}
+
+export function getLineFilterCase(defaultValue: boolean): boolean {
+  const storedValue = localStorage.getItem(`${LINE_FILTER_OPTIONS_LOCALSTORAGE_KEY}.caseSensitive`);
+  return storedValue === 'true' ? true : defaultValue;
+}
+
 // Panel options
 const PANEL_OPTIONS_LOCALSTORAGE_KEY = `${pluginJson.id}.panel.option`;
 export interface PanelOptions {