[discover-next][bug] add max height to dataset navigator and use memo…

…ization (opensearch-project#7540) * add max heigh. use memoization Signed-off-by: Kawika Avilla <kavilla414@gmail.com> almost working pretty nicely Signed-off-by: Kawika Avilla <kavilla414@gmail.com> a little bit better Signed-off-by: Kawika Avilla <kavilla414@gmail.com> its ok Signed-off-by: Kawika Avilla <kavilla414@gmail.com> * update mock Signed-off-by: Kawika Avilla <kavilla414@gmail.com> * update another mock Signed-off-by: Kawika Avilla <kavilla414@gmail.com> * fix mock for extension Signed-off-by: Kawika Avilla <kavilla414@gmail.com> * rebase fixes Signed-off-by: Kawika Avilla <kavilla414@gmail.com> * update script Signed-off-by: Kawika Avilla <kavilla414@gmail.com> * fix initial load Signed-off-by: Kawika Avilla <kavilla414@gmail.com> --------- Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
ananzh · Jul 30, 2024 · 4a7458a · 4a7458a
1 parent 1d6f0c3
commit 4a7458a
Show file tree

Hide file tree

Showing 28 changed files with 624 additions and 614 deletions.
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "start": "scripts/use_node scripts/opensearch_dashboards --dev",
     "start:docker": "scripts/use_node scripts/opensearch_dashboards --dev --opensearch.hosts=$OPENSEARCH_HOSTS --opensearch.ignoreVersionMismatch=true --server.host=$SERVER_HOST",
     "start:security": "scripts/use_node scripts/opensearch_dashboards --dev --security",
-    "start:enhancements": "scripts/use_node scripts/opensearch_dashboards --dev --uiSettings.overrides['query:enhancements:enabled']=true --uiSettings.overrides['home:useNewHomePage']=true",
+    "start:enhancements": "scripts/use_node scripts/opensearch_dashboards --dev --uiSettings.overrides['query:enhancements:enabled']=true --uiSettings.overrides['home:useNewHomePage']=true --uiSettings.overrides['state:storeInSessionStorage']=true",
     "debug": "scripts/use_node --nolazy --inspect scripts/opensearch_dashboards --dev",
     "debug-break": "scripts/use_node --nolazy --inspect-brk scripts/opensearch_dashboards --dev",
     "lint": "yarn run lint:es && yarn run lint:style",

diff --git a/src/plugins/data/public/antlr/opensearch_sql/code_completion.ts b/src/plugins/data/public/antlr/opensearch_sql/code_completion.ts
@@ -46,7 +46,7 @@ export const getSuggestions = async ({
   services,
 }: QuerySuggestionGetFnArgs): Promise<QuerySuggestion[]> => {
   const { api } = services.uiSettings;
-  const dataSetManager = services.data.query.dataSet;
+  const dataSetManager = services.data.query.dataSetManager;
   const suggestions = getOpenSearchSqlAutoCompleteSuggestions(query, {
     line: position?.lineNumber || selectionStart,
     column: position?.column || selectionEnd,

diff --git a/src/plugins/data/public/query/dataset_manager/dataset_manager.ts b/src/plugins/data/public/query/dataset_manager/dataset_manager.ts
@@ -7,6 +7,7 @@ import { BehaviorSubject } from 'rxjs';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { skip } from 'rxjs/operators';
 import {
+  IndexPattern,
   SIMPLE_DATA_SET_TYPES,
   SimpleDataSet,
   SimpleDataSource,
@@ -24,9 +25,33 @@ export class DataSetManager {
   }
 
   public init = async (indexPatterns: IndexPatternsContract) => {
+    if (!this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) return;
     this.indexPatterns = indexPatterns;
     this.defaultDataSet = await this.fetchDefaultDataSet();
-    return this.defaultDataSet;
+  };
+
+  public initWithIndexPattern = (indexPattern: IndexPattern | null) => {
+    if (!this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) return;
+    if (!indexPattern || !indexPattern.id) {
+      return undefined;
+    }
+
+    this.defaultDataSet = {
+      id: indexPattern.id,
+      title: indexPattern.title,
+      type: SIMPLE_DATA_SET_TYPES.INDEX_PATTERN,
+      timeFieldName: indexPattern.timeFieldName,
+      fields: indexPattern.fields,
+      ...(indexPattern.dataSourceRef
+        ? {
+            dataSourceRef: {
+              id: indexPattern.dataSourceRef?.id,
+              name: indexPattern.dataSourceRef?.name,
+              type: indexPattern.dataSourceRef?.type,
+            } as SimpleDataSource,
+          }
+        : {}),
+    };
   };
 
   public getUpdates$ = () => {
@@ -43,6 +68,13 @@ export class DataSetManager {
    */
   public setDataSet = (dataSet: SimpleDataSet | undefined) => {
     if (!this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) return;
+
+    // if (dataSet) {
+    //   const { fields, ...dataSetWithoutFields } = dataSet;
+    //   this.dataSet$.next(dataSetWithoutFields);
+    // } else {
+    //   this.dataSet$.next(undefined);
+    // }
     this.dataSet$.next(dataSet);
   };
 
@@ -57,11 +89,7 @@ export class DataSetManager {
     }
 
     const indexPattern = await this.indexPatterns?.get(defaultIndexPatternId);
-    if (!indexPattern) {
-      return undefined;
-    }
-
-    if (!indexPattern.id) {
+    if (!indexPattern || !indexPattern.id) {
       return undefined;
     }
 

diff --git a/src/plugins/data/public/query/query_service.ts b/src/plugins/data/public/query/query_service.ts
@@ -37,7 +37,7 @@ import { TimefilterService, TimefilterSetup } from './timefilter';
 import { createSavedQueryService } from './saved_query/saved_query_service';
 import { createQueryStateObservable } from './state_sync/create_global_query_observable';
 import { QueryStringManager, QueryStringContract } from './query_string';
-import { DataSetManager } from './dataset_manager';
+import { DataSetContract, DataSetManager } from './dataset_manager';
 import { buildOpenSearchQuery, getOpenSearchQueryConfig, IndexPatternsService } from '../../common';
 import { getUiSettings } from '../services';
 import { IndexPattern } from '..';
@@ -63,7 +63,7 @@ export class QueryService {
   filterManager!: FilterManager;
   timefilter!: TimefilterSetup;
   queryStringManager!: QueryStringContract;
-  dataSetManager!: DataSetManager;
+  dataSetManager!: DataSetContract;
 
   state$!: ReturnType<typeof createQueryStateObservable>;
 
@@ -83,14 +83,14 @@ export class QueryService {
       filterManager: this.filterManager,
       timefilter: this.timefilter,
       queryString: this.queryStringManager,
-      dataSet: this.dataSetManager,
+      dataSetManager: this.dataSetManager,
     }).pipe(share());
 
     return {
       filterManager: this.filterManager,
       timefilter: this.timefilter,
       queryString: this.queryStringManager,
-      dataSet: this.dataSetManager,
+      dataSetManager: this.dataSetManager,
       state$: this.state$,
     };
   }
@@ -109,7 +109,7 @@ export class QueryService {
       }),
       filterManager: this.filterManager,
       queryString: this.queryStringManager,
-      dataSet: this.dataSetManager,
+      dataSetManager: this.dataSetManager,
       savedQueries: createSavedQueryService(savedObjectsClient),
       state$: this.state$,
       timefilter: this.timefilter,

diff --git a/src/plugins/data/public/query/state_sync/connect_to_query_state.test.ts b/src/plugins/data/public/query/state_sync/connect_to_query_state.test.ts
@@ -90,6 +90,8 @@ setupMock.uiSettings.get.mockImplementation((key: string) => {
       return { from: 'now-15m', to: 'now' };
     case UI_SETTINGS.TIMEPICKER_REFRESH_INTERVAL_DEFAULTS:
       return { pause: false, value: 0 };
+    case UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED:
+      return false;
     default:
       throw new Error(`sync_query test: not mocked uiSetting: ${key}`);
   }

diff --git a/src/plugins/data/public/query/state_sync/connect_to_query_state.ts b/src/plugins/data/public/query/state_sync/connect_to_query_state.ts
@@ -56,13 +56,13 @@ import { validateTimeRange } from '../timefilter';
  */
 export const connectStorageToQueryState = async (
   {
-    dataSet,
+    dataSetManager,
     filterManager,
     queryString,
     state$,
   }: Pick<
     QueryStart | QuerySetup,
-    'timefilter' | 'filterManager' | 'queryString' | 'dataSet' | 'state$'
+    'timefilter' | 'filterManager' | 'queryString' | 'dataSetManager' | 'state$'
   >,
   OsdUrlStateStorage: IOsdUrlStateStorage,
   syncConfig: {
@@ -89,7 +89,7 @@ export const connectStorageToQueryState = async (
       filters: filterManager.getAppFilters(),
       ...(uiSettings &&
         uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED) && {
-          dataSet: dataSet.getDataSet(),
+          dataSet: dataSetManager.getDataSet(),
         }),
     };
 
@@ -106,13 +106,16 @@ export const connectStorageToQueryState = async (
       }
     }
 
-    if (syncConfig.dataSet && !_.isEqual(initialStateFromURL.dataSet, dataSet.getDataSet())) {
+    if (
+      syncConfig.dataSet &&
+      !_.isEqual(initialStateFromURL.dataSet, dataSetManager.getDataSet())
+    ) {
       if (initialStateFromURL.dataSet) {
-        dataSet.setDataSet(_.cloneDeep(initialStateFromURL.dataSet));
+        dataSetManager.setDataSet(_.cloneDeep(initialStateFromURL.dataSet));
       } else {
-        const defaultDataSet = await dataSet.getDefaultDataSet();
+        const defaultDataSet = await dataSetManager.getDefaultDataSet();
         if (defaultDataSet) {
-          dataSet.setDataSet(defaultDataSet);
+          dataSetManager.setDataSet(defaultDataSet);
         }
       }
     }
@@ -150,7 +153,7 @@ export const connectStorageToQueryState = async (
               }
 
               if (syncConfig.dataSet && changes.dataSet) {
-                newState.dataSet = dataSet.getDataSet();
+                newState.dataSet = dataSetManager.getDataSet();
               }
 
               return newState;
@@ -182,11 +185,11 @@ export const connectToQueryState = <S extends QueryState>(
     timefilter: { timefilter },
     filterManager,
     queryString,
-    dataSet,
+    dataSetManager,
     state$,
   }: Pick<
     QueryStart | QuerySetup,
-    'timefilter' | 'filterManager' | 'dataSet' | 'queryString' | 'state$'
+    'timefilter' | 'filterManager' | 'dataSetManager' | 'queryString' | 'state$'
   >,
   stateContainer: BaseStateContainer<S>,
   syncConfig: {
@@ -278,7 +281,7 @@ export const connectToQueryState = <S extends QueryState>(
   }
 
   if (syncConfig.dataSet && !initialState.dataSet) {
-    initialState.dataSet = dataSet.getDefaultDataSet();
+    initialState.dataSet = dataSetManager.getDefaultDataSet();
     initialDirty = true;
   }
 
@@ -320,7 +323,7 @@ export const connectToQueryState = <S extends QueryState>(
             }
           }
           if (syncConfig.dataSet && changes.dataSet) {
-            newState.dataSet = dataSet.getDataSet();
+            newState.dataSet = dataSetManager.getDataSet();
           }
           return newState;
         })
@@ -382,14 +385,14 @@ export const connectToQueryState = <S extends QueryState>(
       }
 
       if (syncConfig.dataSet) {
-        const currentDataSet = dataSet.getDataSet();
+        const currentDataSet = dataSetManager.getDataSet();
         if (!_.isEqual(state.dataSet, currentDataSet)) {
           if (state.dataSet) {
-            dataSet.setDataSet(state.dataSet);
+            dataSetManager.setDataSet(state.dataSet);
           } else {
-            const defaultDataSet = await dataSet.getDefaultDataSet();
+            const defaultDataSet = dataSetManager.getDefaultDataSet();
             if (defaultDataSet) {
-              dataSet.setDataSet(defaultDataSet);
+              dataSetManager.setDataSet(defaultDataSet);
               stateContainer.set({ ...stateContainer.get(), dataSet: defaultDataSet });
             }
           }

diff --git a/src/plugins/data/public/query/state_sync/create_global_query_observable.ts b/src/plugins/data/public/query/state_sync/create_global_query_observable.ts
@@ -42,20 +42,20 @@ export function createQueryStateObservable({
   timefilter: { timefilter },
   filterManager,
   queryString,
-  dataSet,
+  dataSetManager,
 }: {
   timefilter: TimefilterSetup;
   filterManager: FilterManager;
   queryString: QueryStringContract;
-  dataSet: DataSetContract;
+  dataSetManager: DataSetContract;
 }): Observable<{ changes: QueryStateChange; state: QueryState }> {
   return new Observable((subscriber) => {
     const state = createStateContainer<QueryState>({
       time: timefilter.getTime(),
       refreshInterval: timefilter.getRefreshInterval(),
       filters: filterManager.getFilters(),
       query: queryString.getQuery(),
-      dataSet: dataSet.getDataSet(),
+      dataSet: dataSetManager.getDataSet(),
     });
 
     let currentChange: QueryStateChange = {};
@@ -64,9 +64,9 @@ export function createQueryStateObservable({
         currentChange.query = true;
         state.set({ ...state.get(), query: queryString.getQuery() });
       }),
-      dataSet.getUpdates$().subscribe(() => {
+      dataSetManager.getUpdates$().subscribe(() => {
         currentChange.dataSet = true;
-        state.set({ ...state.get(), dataSet: dataSet.getDataSet() });
+        state.set({ ...state.get(), dataSet: dataSetManager.getDataSet() });
       }),
       timefilter.getTimeUpdate$().subscribe(() => {
         currentChange.time = true;

diff --git a/src/plugins/data/public/query/state_sync/sync_state_with_url.test.ts b/src/plugins/data/public/query/state_sync/sync_state_with_url.test.ts
@@ -60,6 +60,8 @@ setupMock.uiSettings.get.mockImplementation((key: string) => {
       return 'kuery';
     case UI_SETTINGS.TIMEPICKER_REFRESH_INTERVAL_DEFAULTS:
       return { pause: false, value: 0 };
+    case UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED:
+      return false;
     default:
       throw new Error(`sync_query test: not mocked uiSetting: ${key}`);
   }

diff --git a/src/plugins/data/public/query/state_sync/sync_state_with_url.ts b/src/plugins/data/public/query/state_sync/sync_state_with_url.ts
@@ -50,23 +50,23 @@ const GLOBAL_STATE_STORAGE_KEY = '_g';
 export const syncQueryStateWithUrl = (
   query: Pick<
     QueryStart | QuerySetup,
-    'filterManager' | 'timefilter' | 'queryString' | 'dataSet' | 'state$'
+    'filterManager' | 'timefilter' | 'queryString' | 'dataSetManager' | 'state$'
   >,
   osdUrlStateStorage: IOsdUrlStateStorage,
   uiSettings?: CoreStart['uiSettings']
 ) => {
   const {
     timefilter: { timefilter },
     filterManager,
-    dataSet,
+    dataSetManager,
   } = query;
   const defaultState: QueryState = {
     time: timefilter.getTime(),
     refreshInterval: timefilter.getRefreshInterval(),
     filters: filterManager.getGlobalFilters(),
     ...(uiSettings &&
       uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED) && {
-        dataSet: dataSet.getDataSet(),
+        dataSet: dataSetManager.getDataSet(),
       }),
   };
 

diff --git a/src/plugins/data/public/ui/dataset_navigator/_dataset_navigator.scss b/src/plugins/data/public/ui/dataset_navigator/_dataset_navigator.scss
@@ -6,16 +6,42 @@
 .dataSetNavigator {
   padding: $euiSizeXS;
   color: $euiColorPrimaryText;
+  max-height: 60vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: $euiColorMediumShade $euiColorLightestShade;
 
   &__icon {
     margin-right: 4px;
   }
-}
 
-.dataSetNavigatorFormWrapper {
-  padding: $euiSizeS;
+  &__loading {
+    padding: $euiSizeS;
+  }
+
+  &:not(:hover)::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $euiColorLightestShade;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $euiColorMediumShade;
+    border-radius: 4px;
+  }
+
+  &__menu {
+    width: 365px;
+  }
 }
 
-.dataSetNavigator__loading {
+.dataSetNavigatorFormWrapper {
   padding: $euiSizeS;
 }
diff --git a/src/plugins/data/public/ui/dataset_navigator/create_dataset_navigator.tsx b/src/plugins/data/public/ui/dataset_navigator/create_dataset_navigator.tsx
@@ -12,15 +12,15 @@ import { DataSetContract } from '../../query';
 export function createDataSetNavigator(
   savedObjectsClient: SavedObjectsClientContract,
   http: HttpStart,
-  dataSet: DataSetContract
+  dataSetManager: DataSetContract
 ) {
   // Return a function that takes props, omitting the dependencies from the props type
   return (props: Omit<DataSetNavigatorProps, 'savedObjectsClient' | 'http' | 'dataSet'>) => (
     <DataSetNavigator
       {...props}
       savedObjectsClient={savedObjectsClient}
       http={http}
-      dataSet={dataSet}
+      dataSetManager={dataSetManager}
     />
   );
 }