adding recent datasets to session storage

Signed-off-by: Sean Li <[email protected]>
sejli · Oct 3, 2024 · 62d035b · 62d035b
1 parent e961b88
commit 62d035b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 33 deletions.
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
@@ -114,6 +114,7 @@ describe('DatasetService', () => {
     service.addRecentDataset(mockDataset1);
     expect(service.getRecentDataset(mockDataset1.id)).toEqual(mockDataset1);
     expect(service.getRecentDatasets().length).toEqual(1);
+    expect(sessionStorage.get('recentDatasets')).toContainEqual(mockDataset1);
   });
 
   test('getRecentDatasets returns all datasets', () => {
@@ -134,6 +135,7 @@ describe('DatasetService', () => {
         timeFieldName: 'timestamp',
       };
       expect(service.getRecentDatasets()).toContainEqual(mockDataset);
+      expect(sessionStorage.get('recentDatasets')).toContainEqual(mockDataset);
     }
   });
 

diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
@@ -36,6 +36,7 @@ export class DatasetService {
     this.recentDatasets = new LRUCache({
       max: this.uiSettings.get(UI_SETTINGS.SEARCH_MAX_RECENT_DATASETS),
     });
+    this.deserializeRecentDatasets();
   }
 
   /**
@@ -67,20 +68,34 @@ export class DatasetService {
     return this.defaultDataset;
   }
 
+  private serializeRecentDatasets(): void {
+    this.sessionStorage.set('recentDatasets', this.getRecentDatasets());
+  }
+
+  private deserializeRecentDatasets(): void {
+    const cacheData = this.sessionStorage.get('recentDatasets');
+    if (cacheData) {
+      cacheData.forEach((dataset: Dataset) => this.addRecentDataset(dataset, false));
+    }
+  }
+
   public getRecentDataset(datasetID: string | undefined): Dataset | undefined {
     if (datasetID) {
       return this.recentDatasets.get(datasetID);
     }
   }
 
   public getRecentDatasets(): Dataset[] {
-    return Array.from(this.recentDatasets.values());
+    return this.recentDatasets.values();
   }
 
-  public addRecentDataset(dataset: Dataset | undefined): void {
+  public addRecentDataset(dataset: Dataset | undefined, serialize: boolean = true): void {
     if (dataset) {
       this.recentDatasets.set(dataset.id, dataset);
     }
+    if (serialize) {
+      this.serializeRecentDatasets();
+    }
   }
 
   public async cacheDataset(dataset: Dataset): Promise<void> {

diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -17,10 +17,9 @@ import { FormattedMessage } from '@osd/i18n/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toMountPoint } from '../../../../opensearch_dashboards_react/public';
 import { Dataset, DEFAULT_DATA } from '../../../common';
+import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
-import { getQueryService } from '../../services';
-import { DatasetServiceContract } from '../../query';
 
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
@@ -45,7 +44,8 @@ export const DatasetSelector = ({
 }: DatasetSelectorProps) => {
   const isMounted = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [datasets, setDatasets] = useState<Array<{ dataset: Dataset; recent: boolean }>>([]);
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [indexPatterns, setIndexPatterns] = useState<Dataset[]>([]);
   const { overlays } = services;
   const datasetService = getQueryService().queryString.getDatasetService();
   const datasetIcon =
@@ -59,25 +59,17 @@ export const DatasetSelector = ({
       const typeConfig = datasetService.getType(DEFAULT_DATA.SET_TYPES.INDEX_PATTERN);
       if (!typeConfig) return;
 
-      const recentDatasets = datasetService.getRecentDatasets();
-
       const fetchedIndexPatternDataStructures = await typeConfig.fetch(services, []);
+
       const fetchedDatasets =
         fetchedIndexPatternDataStructures.children?.map((pattern) =>
           typeConfig.toDataset([pattern])
         ) ?? [];
-      const filteredFetchedDatasets = fetchedDatasets.filter(
-        (dataset) => !recentDatasets.some((ds) => ds.id === dataset.id)
-      );
-      const allDatasets = [
-        ...recentDatasets.map((ds) => ({ dataset: ds, recent: true })),
-        ...filteredFetchedDatasets.map((ds) => ({ dataset: ds, recent: false }))
-      ]
-      setDatasets(allDatasets);
+      setIndexPatterns(fetchedDatasets);
 
       // If no dataset is selected, select the first one
-      if (!selectedDataset && allDatasets.length > 0) {
-        setSelectedDataset(allDatasets[0].dataset);
+      if (!selectedDataset && fetchedDatasets.length > 0) {
+        setSelectedDataset(fetchedDatasets[0]);
       }
     };
 
@@ -90,6 +82,11 @@ export const DatasetSelector = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datasetService]);
 
+  useEffect(() => {
+    const recentDatasets = datasetService.getRecentDatasets();
+    setDatasets([...recentDatasets, ...indexPatterns]);
+  }, [isOpen, datasetService, indexPatterns]);
+
   const togglePopover = useCallback(async () => {
     setIsOpen(!isOpen);
   }, [isOpen]);
@@ -100,8 +97,7 @@ export const DatasetSelector = ({
     const buildDatasetOptions = (
       groupLabel: string,
       ds: Dataset[],
-      selectedDatasetId: string | undefined,
-      dsService: DatasetServiceContract
+      selectedDatasetId: string | undefined
     ): EuiSelectableOption[] => {
       const datasetOptions: EuiSelectableOption[] = [
         {
@@ -118,33 +114,27 @@ export const DatasetSelector = ({
           prepend: <EuiIcon type={datasetService.getType(type)!.meta.icon.type} />,
         });
       });
-      return datasetOptions;
+      return datasetOptions.length > 1 ? datasetOptions : [];
     };
-
     const recentDatasetOptions = buildDatasetOptions(
       'Recently selected data',
-      datasets.filter((ds) => ds.recent).map((ds) => ds.dataset),
-      selectedDataset?.id,
-      datasetService
+      datasetService.getRecentDatasets(),
+      selectedDataset?.id
     );
     const indexPatternOptions = buildDatasetOptions(
       'Index patterns',
-      datasets.filter((ds) => !ds.recent).map((ds) => ds.dataset),
-      selectedDataset?.id,
-      datasetService
+      indexPatterns.filter((indexPattern) => !datasetService.getRecentDataset(indexPattern.id)),
+      selectedDataset?.id
     );
+
     return [...recentDatasetOptions, ...indexPatternOptions];
-  }, [datasets, selectedDataset?.id, datasetService]);
+  }, [indexPatterns, selectedDataset?.id, datasetService]);
 
   const handleOptionChange = useCallback(
     (newOptions: EuiSelectableOption[]) => {
       const selectedOption = newOptions.find((option) => option.checked === 'on');
       if (selectedOption) {
-        const recentDatasets = datasets.filter((ds) => ds.recent).map((ds) => ds.dataset);
-        const indexPatterns = datasets.filter((ds) => !ds.recent).map((ds) => ds.dataset);
-        const foundDataset = [...recentDatasets, ...indexPatterns].find(
-          (dataset) => dataset.id === selectedOption.key
-        );
+        const foundDataset = datasets.find((dataset) => dataset.id === selectedOption.key);
         if (foundDataset) {
           closePopover();
           setSelectedDataset(foundDataset);