[Discover] Display Cache Time and Clear Cache Button

changelogs/fragments/8214.yml

@@ -0,0 +1,2 @@
+feat:
+- Add last updated time and cache refresh button to Discover Advanced Dataset Selector ([#8214](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8214))

src/plugins/data/common/storage/storage.ts

@@ -61,6 +61,10 @@
       if (ourKey != null) ours.push(ourKey);
     });
   }
+
+  clear(): void {
+    this.engine.clear();
+  }
 }
 
 export function createStorage(deps: { engine: IStorageEngine; prefix: string }) {

src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts

@@ -23,17 +23,26 @@ describe('DatasetService', () => {
     service = new DatasetService(uiSettings, sessionStorage);
   });
 
-  test('registerType and getType', () => {
-    const mockType = {
-      id: 'test-type',
-      title: 'Test Type',
-      meta: { icon: { type: 'test' } },
-      toDataset: jest.fn(),
-      fetch: jest.fn(),
-      fetchFields: jest.fn(),
-      supportedLanguages: jest.fn(),
-    };
+  const mockResult = {
+    id: 'test-structure',
+    title: 'Test Structure',
+    type: 'test-type',
+    children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
+  };
+
+  const mockPath: DataStructure[] = [{ id: 'root', title: 'Root', type: 'root' }];
+
+  const mockType = {
+    id: 'test-type',
+    title: 'Test Type',
+    meta: { icon: { type: 'test' } },
+    toDataset: jest.fn(),
+    fetch: jest.fn().mockResolvedValue(mockResult),
+    fetchFields: jest.fn(),
+    supportedLanguages: jest.fn(),
+  };
 
+  test('registerType and getType', () => {
     service.registerType(mockType);
     expect(service.getType('test-type')).toBe(mockType);
   });
@@ -52,25 +61,9 @@ describe('DatasetService', () => {
   });
 
   test('fetchOptions caches and returns data structures', async () => {
-    const mockType = {
-      id: 'test-type',
-      title: 'Test Type',
-      meta: { icon: { type: 'test' } },
-      toDataset: jest.fn(),
-      fetch: jest.fn().mockResolvedValue({
-        id: 'test-structure',
-        title: 'Test Structure',
-        type: 'test-type',
-        children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
-      }),
-      fetchFields: jest.fn(),
-      supportedLanguages: jest.fn(),
-    };
-
     service.registerType(mockType);
 
-    const path: DataStructure[] = [{ id: 'root', title: 'Root', type: 'root' }];
-    const result = await service.fetchOptions(mockDataPluginServices, path, 'test-type');
+    const result = await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
 
     expect(result).toEqual({
       id: 'test-structure',
@@ -79,8 +72,30 @@ describe('DatasetService', () => {
       children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
     });
 
-    const cachedResult = await service.fetchOptions(mockDataPluginServices, path, 'test-type');
+    const cachedResult = await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
     expect(cachedResult).toEqual(result);
     expect(mockType.fetch).toHaveBeenCalledTimes(2);
   });
+
+  test('clear cache', async () => {
+    service.registerType(mockType);
+
+    await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
+    expect(sessionStorage.keys().length === 1);
+
+    service.clearCache();
+    expect(sessionStorage.keys().length === 0);
+  });
+
+  test('caching object correctly sets last cache time', async () => {
+    service.registerType(mockType);
+
+    const time = Date.now();
+
+    Date.now = jest.fn(() => time);
+
+    await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
+
+    expect(service.getLastCacheTime()).toEqual(time);
+  });
 });

src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts

@@ -138,6 +138,7 @@
   }
 
   private cacheDataStructure(dataType: string, dataStructure: DataStructure) {
+    this.setLastCacheTime(Date.now());
     const cachedDataStructure: CachedDataStructure = {
       id: dataStructure.id,
       title: dataStructure.title,
@@ -164,6 +165,18 @@
     });
   }
 
+  public clearCache(): void {
+    this.sessionStorage.clear();
+  }
+
+  public getLastCacheTime(): number | undefined {
+    return Number(this.sessionStorage.get('lastCacheTime')) || undefined;
+  }
+
+  private setLastCacheTime(time: number): void {
+    this.sessionStorage.set('lastCacheTime', time);
+  }
+
   private async fetchDefaultDataset(): Promise<Dataset | undefined> {
     const defaultIndexPatternId = this.uiSettings.get('defaultIndex');
     if (!defaultIndexPatternId) {

src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx

@@ -7,6 +7,8 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiIcon,
   EuiLink,
   EuiModalBody,
@@ -19,6 +21,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import moment from 'moment';
 import { BaseDataset, DATA_STRUCTURE_META_TYPES, DataStructure } from '../../../common';
 import { QueryStringContract } from '../../query';
 import { IDataPluginServices } from '../../types';
@@ -38,6 +41,7 @@ export const DatasetExplorer = ({
   onNext: (dataset: BaseDataset) => void;
   onCancel: () => void;
 }) => {
+  const uiSettings = services.uiSettings;
   const [explorerDataset, setExplorerDataset] = useState<BaseDataset | undefined>(undefined);
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -68,31 +72,71 @@ export const DatasetExplorer = ({
   return (
     <>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <h1>
-            <FormattedMessage
-              id="data.explorer.datasetSelector.advancedSelector.title.step1"
-              defaultMessage="Step 1: Select data"
-            />
-          </h1>
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="data.explorer.datasetSelector.advancedSelector.description"
-                defaultMessage="Select from those available to you. "
-              />
-              <EuiLink
-                href={`${services.http.basePath.get()}/app/management/opensearch-dashboards/dataSources`}
-                target="_blank"
-              >
+        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={true}>
+            <EuiModalHeaderTitle>
+              <h1>
                 <FormattedMessage
-                  id="data.explorer.datasetSelector.advancedSelector.dataSourceManagement.title"
-                  defaultMessage="Manage data sources"
+                  id="data.explorer.datasetSelector.advancedSelector.title.step1"
+                  defaultMessage="Step 1: Select data"
                 />
-              </EuiLink>
-            </p>
-          </EuiText>
-        </EuiModalHeaderTitle>
+              </h1>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="data.explorer.datasetSelector.advancedSelector.description"
+                    defaultMessage="Select from those available to you. "
+                  />
+                  <EuiLink
+                    href={`${services.http.basePath.get()}/app/management/opensearch-dashboards/dataSources`}
+                    target="_blank"
+                  >
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.dataSourceManagement.title"
+                      defaultMessage="Manage data sources"
+                    />
+                  </EuiLink>
+                </p>
+              </EuiText>
+            </EuiModalHeaderTitle>
+          </EuiFlexItem>
+          {queryString.getDatasetService().getLastCacheTime() && (
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="xs">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s">
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.lastUpdatedTime"
+                      defaultMessage={`Last updated at: ${moment(
+                        queryString.getDatasetService().getLastCacheTime()
+                      )
+                        .format(uiSettings.get('dateFormat'))
+                        .toString()}. `}
+                    />
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    onClick={() => {
+                      queryString.getDatasetService().clearCache();
+                      onCancel();
+                    }}
+                    size="xs"
+                    iconSide="left"
+                    iconType="refresh"
+                    iconGap="s"
+                    flush="both"
+                  >
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.refreshCacheButton"
+                      defaultMessage="Refresh Cache"
+                    />
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       </EuiModalHeader>
       <EuiModalBody>
         <div