Loki: Remove usage of store from app/core/store and use localStorage directly (#80023)

Loki: Remove usage of store from  and use localStorage directly

public/app/plugins/datasource/loki/LanguageProvider.test.ts

@@ -13,18 +13,6 @@ import { LabelType, LokiQueryType } from './types';
 
 jest.mock('./responseUtils');
 
-jest.mock('app/store/store', () => ({
-  store: {
-    getState: jest.fn().mockReturnValue({
-      explore: {
-        left: {
-          mode: 'Logs',
-        },
-      },
-    }),
-  },
-}));
-
 const mockTimeRange = {
   from: dateTime(1546372800000),
   to: dateTime(1546380000000),

public/app/plugins/datasource/loki/LogContextProvider.test.ts

@@ -18,22 +18,6 @@ import {
 import { createLokiDatasource } from './mocks';
 import { LokiQuery } from './types';
 
-jest.mock('app/core/store', () => {
-  return {
-    get(item: string) {
-      return window.localStorage.getItem(item);
-    },
-    getBool(key: string, defaultValue?: boolean) {
-      const item = window.localStorage.getItem(key);
-      if (item === null) {
-        return defaultValue;
-      } else {
-        return item === 'true';
-      }
-    },
-  };
-});
-
 const defaultLanguageProviderMock = {
   start: jest.fn(),
   fetchSeriesLabels: jest.fn(() => ({ bar: ['baz'], xyz: ['abc'] })),

public/app/plugins/datasource/loki/LogContextProvider.ts

@@ -19,7 +19,6 @@ import { LabelParser, LabelFilter, LineFilters, PipelineStage, Logfmt, Json } fr
 import { Labels } from '@grafana/schema';
 import { notifyApp } from 'app/core/actions';
 import { createSuccessNotification } from 'app/core/copy/appNotification';
-import store from 'app/core/store';
 import { dispatch } from 'app/store/store';
 
 import { LokiContextUi } from './components/LokiContextUi';
@@ -222,7 +221,7 @@ export class LogContextProvider {
 
   prepareExpression(contextFilters: ContextFilter[], query: LokiQuery | undefined): string {
     let preparedExpression = this.processContextFiltersToExpr(contextFilters, query);
-    if (store.getBool(SHOULD_INCLUDE_PIPELINE_OPERATIONS, false)) {
+    if (window.localStorage.getItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS) === 'true') {
       preparedExpression = this.processPipelineStagesToExpr(preparedExpression, query);
     }
     return preparedExpression;
@@ -343,10 +342,13 @@ export class LogContextProvider {
 
     // Secondly we check for preserved labels and update enabled state of filters based on that
     let preservedLabels: undefined | PreservedLabels = undefined;
-    try {
-      preservedLabels = JSON.parse(store.get(LOKI_LOG_CONTEXT_PRESERVED_LABELS));
-      // Do nothing when error occurs
-    } catch (e) {}
+    const preservedLabelsString = window.localStorage.getItem(LOKI_LOG_CONTEXT_PRESERVED_LABELS);
+    if (preservedLabelsString) {
+      try {
+        preservedLabels = JSON.parse(preservedLabelsString);
+        // Do nothing when error occurs
+      } catch (e) {}
+    }
 
     if (!preservedLabels) {
       // If we don't have preservedLabels, we return contextFilters as they are

public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx

@@ -16,22 +16,6 @@ jest.mock('@grafana/runtime', () => ({
   reportInteraction: () => null,
 }));
 
-jest.mock('app/core/store', () => {
-  return {
-    set() {},
-    get() {},
-    getBool(key: string, defaultValue?: boolean) {
-      const item = window.localStorage.getItem(key);
-      if (item === null) {
-        return defaultValue;
-      } else {
-        return item === 'true';
-      }
-    },
-    delete() {},
-  };
-});
-
 const setupProps = (): LokiContextUiProps => {
   const defaults: LokiContextUiProps = {
     logContextProvider: Object.assign({}, mockLogContextProvider) as unknown as LogContextProvider,

public/app/plugins/datasource/loki/components/LokiContextUi.tsx

@@ -18,7 +18,6 @@ import {
   Tooltip,
   useStyles2,
 } from '@grafana/ui';
-import store from 'app/core/store';
 
 import { RawQuery } from '../../prometheus/querybuilder/shared/RawQuery';
 import {
@@ -115,9 +114,9 @@ export function LokiContextUi(props: LokiContextUiProps) {
 
   const [initialized, setInitialized] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(store.getBool(IS_LOKI_LOG_CONTEXT_UI_OPEN, false));
+  const [isOpen, setIsOpen] = useState(window.localStorage.getItem(IS_LOKI_LOG_CONTEXT_UI_OPEN) === 'true');
   const [includePipelineOperations, setIncludePipelineOperations] = useState(
-    store.getBool(SHOULD_INCLUDE_PIPELINE_OPERATIONS, false)
+    window.localStorage.getItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS) === 'true'
   );
 
   const timerHandle = React.useRef<number>();
@@ -180,7 +179,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
         }
       });
 
-      store.set(LOKI_LOG_CONTEXT_PRESERVED_LABELS, JSON.stringify(preservedLabels));
+      window.localStorage.setItem(LOKI_LOG_CONTEXT_PRESERVED_LABELS, JSON.stringify(preservedLabels));
       setLoading(false);
     }, 1500);
 
@@ -265,8 +264,8 @@ export function LokiContextUi(props: LokiContextUiProps) {
                 }));
               });
               // We are removing the preserved labels from local storage so we can preselect the labels in the UI
-              store.delete(LOKI_LOG_CONTEXT_PRESERVED_LABELS);
-              store.delete(SHOULD_INCLUDE_PIPELINE_OPERATIONS);
+              window.localStorage.removeItem(LOKI_LOG_CONTEXT_PRESERVED_LABELS);
+              window.localStorage.removeItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS);
               setIncludePipelineOperations(false);
             }}
           />
@@ -277,7 +276,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
         collapsible={true}
         isOpen={isOpen}
         onToggle={() => {
-          store.set(IS_LOKI_LOG_CONTEXT_UI_OPEN, !isOpen);
+          window.localStorage.setItem(IS_LOKI_LOG_CONTEXT_UI_OPEN, (!isOpen).toString());
           setIsOpen((isOpen) => !isOpen);
           reportInteraction('grafana_explore_logs_loki_log_context_toggled', {
             logRowUid: row.uid,
@@ -404,7 +403,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
                       logRowUid: row.uid,
                       action: e.currentTarget.checked ? 'enable' : 'disable',
                     });
-                    store.set(SHOULD_INCLUDE_PIPELINE_OPERATIONS, e.currentTarget.checked);
+                    window.localStorage.setItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS, e.currentTarget.checked.toString());
                     setIncludePipelineOperations(e.currentTarget.checked);
                     if (runContextQuery) {
                       runContextQuery();

public/app/plugins/datasource/loki/querybuilder/state.ts

@@ -1,5 +1,3 @@
-import store from 'app/core/store';
-
 import { QueryEditorMode } from '../../prometheus/querybuilder/shared/types';
 import { LokiQuery, LokiQueryType } from '../types';
 
@@ -8,7 +6,7 @@ const queryEditorModeDefaultLocalStorageKey = 'LokiQueryEditorModeDefault';
 export function changeEditorMode(query: LokiQuery, editorMode: QueryEditorMode, onChange: (query: LokiQuery) => void) {
   // If empty query store new mode as default
   if (query.expr === '') {
-    store.set(queryEditorModeDefaultLocalStorageKey, editorMode);
+    window.localStorage.setItem(queryEditorModeDefaultLocalStorageKey, editorMode);
   }
 
   onChange({ ...query, editorMode });
@@ -20,7 +18,7 @@ export function getDefaultEditorMode(expr: string) {
     return QueryEditorMode.Code;
   }
 
-  const value: string | undefined = store.get(queryEditorModeDefaultLocalStorageKey);
+  const value: string | null = window.localStorage.getItem(queryEditorModeDefaultLocalStorageKey);
   switch (value) {
     case 'code':
       return QueryEditorMode.Code;