ui: only keep name in store_matches param (#6371)

We are doing store matching on the `name` field hence only keep that
field in the URL because otherwise the URL could get quite lengthy with
external labelsets inside of it.

Besides unit tests, I have also tested locally:
- Enable store filtering;
- Select store(-s);
- Copy/paste URL into the new tab and see that the same stores are
  loaded like expected;
- See that URL only has names in them.

Signed-off-by: Giedrius Statkevičius <giedrius.statkevicius@vinted.com>

pkg/ui/react-app/src/utils/index.ts

@@ -264,7 +264,7 @@ export const toQueryString = ({ key, options }: PanelMeta): string => {
     formatWithKey('max_source_resolution', maxSourceResolution),
     formatWithKey('deduplicate', useDeduplication ? 1 : 0),
     formatWithKey('partial_response', usePartialResponse ? 1 : 0),
-    formatWithKey('store_matches', JSON.stringify(storeMatches)),
+    formatWithKey('store_matches', JSON.stringify(storeMatches, ['name'])),
     formatWithKey('engine', engine),
     time ? `${formatWithKey('end_input', time)}&${formatWithKey('moment_input', time)}` : '',
     isPresent(resolution) ? formatWithKey('step_input', resolution) : '',

pkg/ui/react-app/src/utils/utils.test.ts

@@ -204,20 +204,6 @@ describe('Utils', () => {
     const stores: any = [
       {
         name: 'thanos_sidecar_one:10901',
-        lastCheck: '2020-09-20T11:35:18.250713478Z',
-        lastError: null,
-        labelSets: [
-          {
-            labels: [
-              {
-                name: 'monitor',
-                value: 'prometheus_one',
-              },
-            ],
-          },
-        ],
-        minTime: 1600598100000,
-        maxTime: 9223372036854776000,
       },
     ];
 
@@ -256,7 +242,7 @@ describe('Utils', () => {
       },
     ];
     const query =
-      '?g0.expr=rate(node_cpu_seconds_total%7Bmode%3D%22system%22%7D%5B1m%5D)&g0.tab=0&g0.stacked=0&g0.range_input=1h&g0.max_source_resolution=raw&g0.deduplicate=1&g0.partial_response=0&g0.store_matches=%5B%5D&g0.engine=prometheus&g0.end_input=2019-10-25%2023%3A37%3A00&g0.moment_input=2019-10-25%2023%3A37%3A00&g1.expr=node_filesystem_avail_bytes&g1.tab=1&g1.stacked=0&g1.range_input=1h&g1.max_source_resolution=auto&g1.deduplicate=0&g1.partial_response=1&g1.store_matches=%5B%7B%22name%22%3A%22thanos_sidecar_one%3A10901%22%2C%22lastCheck%22%3A%222020-09-20T11%3A35%3A18.250713478Z%22%2C%22lastError%22%3Anull%2C%22labelSets%22%3A%5B%7B%22labels%22%3A%5B%7B%22name%22%3A%22monitor%22%2C%22value%22%3A%22prometheus_one%22%7D%5D%7D%5D%2C%22minTime%22%3A1600598100000%2C%22maxTime%22%3A9223372036854776000%7D%5D&g1.engine=prometheus';
+      '?g0.expr=rate(node_cpu_seconds_total%7Bmode%3D%22system%22%7D%5B1m%5D)&g0.tab=0&g0.stacked=0&g0.range_input=1h&g0.max_source_resolution=raw&g0.deduplicate=1&g0.partial_response=0&g0.store_matches=%5B%5D&g0.engine=prometheus&g0.end_input=2019-10-25%2023%3A37%3A00&g0.moment_input=2019-10-25%2023%3A37%3A00&g1.expr=node_filesystem_avail_bytes&g1.tab=1&g1.stacked=0&g1.range_input=1h&g1.max_source_resolution=auto&g1.deduplicate=0&g1.partial_response=1&g1.store_matches=%5B%7B%22name%22%3A%22thanos_sidecar_one%3A10901%22%7D%5D&g1.engine=prometheus';
 
     describe('decodePanelOptionsFromQueryString', () => {
       it('returns [] when query is empty', () => {
@@ -296,11 +282,9 @@ describe('Utils', () => {
         expect(parseOption('partial_response=1')).toEqual({ usePartialResponse: true });
       });
       it('it should parse store_matches', () => {
-        expect(
-          parseOption(
-            'store_matches=%5B%7B%22name%22%3A%22thanos_sidecar_one%3A10901%22%2C%22lastCheck%22%3A%222020-09-20T11%3A35%3A18.250713478Z%22%2C%22lastError%22%3Anull%2C%22labelSets%22%3A%5B%7B%22labels%22%3A%5B%7B%22name%22%3A%22monitor%22%2C%22value%22%3A%22prometheus_one%22%7D%5D%7D%5D%2C%22minTime%22%3A1600598100000%2C%22maxTime%22%3A9223372036854776000%7D%5D'
-          )
-        ).toEqual({ storeMatches: stores });
+        expect(parseOption('store_matches=%5B%7B%22name%22%3A%22thanos_sidecar_one%3A10901%22%7D%5D')).toEqual({
+          storeMatches: stores,
+        });
       });
 
       describe('step_input', () => {