Fix stores filtering resets on reload (thanos-io#6063)

* Fix stores filtering resets on reload `g0.store_matches` parameter appears in the url but doesn't applies in the frontend. Looks like it has been done on purpose and by removing a small piece of code fixes this issue. variable named `debugMode` is used for the store filtering checkbox which is an unappropriate name. Using `enableStoreFiltering` variable to represent the state of checkbox. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Regenerate bindata.go Signed-off-by: Pradyumna Krishna <git@onpy.in> Signed-off-by: Pradyumna Krishna <git@onpy.in>
ngraham20 · Apr 17, 2023 · d2bd2eb · d2bd2eb
1 parent 4ce5d7a
commit d2bd2eb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 48 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.test.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.test.tsx
@@ -10,7 +10,7 @@ describe('PanelList', () => {
     [
       { id: 'use-local-time-checkbox', label: 'Use local time', default: false },
       { id: 'query-history-checkbox', label: 'Enable query history', default: false },
-      { id: 'debug-mode-checkbox', label: 'Enable Store Filtering', default: false },
+      { id: 'store-filtering-checkbox', label: 'Enable Store Filtering', default: false },
       { id: 'autocomplete-checkbox', label: 'Enable autocomplete', default: true },
       { id: 'highlighting-checkbox', label: 'Enable highlighting', default: true },
       { id: 'linter-checkbox', label: 'Enable linter', default: true },

diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.tsx
@@ -55,8 +55,6 @@ export const PanelListContent: FC<PanelListProps> = ({
       storeList.push(...stores[type]);
     }
     setStoreData(storeList);
-    // Clear selected stores for each panel.
-    panels.forEach((panel: PanelMeta) => (panel.options.storeMatches = []));
     !panels.length && addPanel();
     window.onpopstate = () => {
       const panels = decodePanelOptionsFromQueryString(window.location.search);
@@ -142,7 +140,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
   const [delta, setDelta] = useState(0);
   const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);
   const [enableQueryHistory, setEnableQueryHistory] = useLocalStorage('enable-query-history', false);
-  const [debugMode, setDebugMode] = useState(false);
+  const [enableStoreFiltering, setEnableStoreFiltering] = useLocalStorage('enable-store-filtering', false);
   const [enableAutocomplete, setEnableAutocomplete] = useLocalStorage('enable-autocomplete', true);
   const [enableHighlighting, setEnableHighlighting] = useLocalStorage('enable-syntax-highlighting', true);
   const [enableLinter, setEnableLinter] = useLocalStorage('enable-linter', true);
@@ -198,9 +196,9 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
           </Checkbox>
           <Checkbox
             wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
-            id="debug-mode-checkbox"
-            defaultChecked={debugMode}
-            onChange={({ target }) => setDebugMode(target.checked)}
+            id="store-filtering-checkbox"
+            defaultChecked={enableStoreFiltering}
+            onChange={({ target }) => setEnableStoreFiltering(target.checked)}
           >
             Enable Store Filtering
           </Checkbox>
@@ -263,7 +261,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         pathPrefix={pathPrefix}
         useLocalTime={useLocalTime}
         metrics={metricsRes.data}
-        stores={debugMode ? storesRes.data : {}}
+        stores={enableStoreFiltering ? storesRes.data : {}}
         enableAutocomplete={enableAutocomplete}
         enableHighlighting={enableHighlighting}
         enableLinter={enableLinter}