[Dashboard De-Angular] Fix filter and query related functional tests …

…in functional test group 3 (opensearch-project#4495) * fix index pattern window Signed-off-by: abbyhu2000 <[email protected]> * Fix time filter and query related functionalt test in group 3 Signed-off-by: abbyhu2000 <[email protected]> --------- Signed-off-by: abbyhu2000 <[email protected]>
abbyhu2000 · Jul 7, 2023 · a1d5e15 · a1d5e15
1 parent 669a2f7
commit a1d5e15
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 171 deletions.
diff --git a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx
@@ -39,7 +39,7 @@ export const DashboardEditor = () => {
  savedDashboardInstance
  );
 
- const { dashboardContainer } = useDashboardContainer(
+ const { dashboardContainer, indexPatterns } = useDashboardContainer(
  services,
  isChromeVisible,
  eventEmitter,
@@ -93,6 +93,7 @@ export const DashboardEditor = () => {
  console.log('isDirty', dashboard.isDirty);
  }
  console.log('dashboardContainer', dashboardContainer);
+ console.log('indexPatterns', indexPatterns);
 
  return (
  <div>
@@ -109,6 +110,7 @@ export const DashboardEditor = () => {
  dashboard={dashboard}
  currentAppState={currentAppState}
  isEmbeddableRendered={isEmbeddableRendered}
+ indexPatterns={indexPatterns}
  dashboardContainer={dashboardContainer}
  />
  )}

diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { uniqBy } from 'lodash';
 import React, { memo, useState, useEffect } from 'react';
 import { Filter, IndexPattern } from 'src/plugins/data/public';
 import { useCallback } from 'react';
@@ -13,7 +12,6 @@ import { getTopNavConfig } from '../top_nav/get_top_nav_config';
 import { DashboardAppStateContainer, DashboardAppState, DashboardServices } from '../../types';
 import { getNavActions } from '../utils/get_nav_actions';
 import { DashboardContainer } from '../embeddable';
-import { isErrorEmbeddable } from '../../embeddable_plugin';
 import { Dashboard } from '../../dashboard';
 
 interface DashboardTopNavProps {
@@ -23,6 +21,7 @@ interface DashboardTopNavProps {
  dashboard: Dashboard;
  currentAppState: DashboardAppState;
  isEmbeddableRendered: boolean;
+ indexPatterns: IndexPattern[];
  dashboardContainer?: DashboardContainer;
 }
 
@@ -42,16 +41,14 @@ const TopNav = ({
  currentAppState,
  isEmbeddableRendered,
  dashboardContainer,
+ indexPatterns,
 }: DashboardTopNavProps) => {
- const [filters, setFilters] = useState<Filter[]>([]);
  const [topNavMenu, setTopNavMenu] = useState<any>();
  const [isFullScreenMode, setIsFullScreenMode] = useState<any>();
- const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>();
 
  const { services } = useOpenSearchDashboards<DashboardServices>();
  const { TopNavMenu } = services.navigation.ui;
- const { data, dashboardConfig, setHeaderActionMenu } = services;
- const { query: queryService } = data;
+ const { dashboardConfig, setHeaderActionMenu } = services;
 
  const location = useLocation();
  const queryParameters = new URLSearchParams(location.search);
@@ -76,10 +73,6 @@ const TopNav = ({
  const shouldShowNavBarComponent = (forceShow: boolean): boolean =>
  (forceShow || isChromeVisible) && !currentAppState?.fullScreenMode;
 
- useEffect(() => {
- setFilters(queryService.filterManager.getFilters());
- }, [services, queryService]);
-
  useEffect(() => {
  if (isEmbeddableRendered) {
  const navActions = getNavActions(
@@ -112,33 +105,6 @@ const TopNav = ({
  setIsFullScreenMode(currentAppState?.fullScreenMode);
  }, [currentAppState, services]);
 
- useEffect(() => {
- const asyncSetIndexPattern = async () => {
- if (dashboardContainer) {
- let panelIndexPatterns: IndexPattern[] = [];
- dashboardContainer.getChildIds().forEach((id) => {
- const embeddableInstance = dashboardContainer.getChild(id);
- if (isErrorEmbeddable(embeddableInstance)) return;
- const embeddableIndexPatterns = (embeddableInstance.getOutput() as any).indexPatterns;
- if (!embeddableIndexPatterns) return;
- panelIndexPatterns.push(...embeddableIndexPatterns);
- });
- panelIndexPatterns = uniqBy(panelIndexPatterns, 'id');
-
- if (panelIndexPatterns.length > 0) {
- setIndexPatterns(panelIndexPatterns);
- } else {
- const defaultIndex = await services.data.indexPatterns.getDefault();
- if (defaultIndex) {
- setIndexPatterns([defaultIndex]);
- }
- }
- }
- };
-
- asyncSetIndexPattern();
- }, [dashboardContainer, stateContainer, currentAppState, services.data.indexPatterns]);
-
  const shouldShowFilterBar = (forceHide: boolean): boolean =>
  !forceHide && (currentAppState.filters!.length > 0 || !currentAppState?.fullScreenMode);
 
@@ -156,7 +122,6 @@ const TopNav = ({
  return (
  <TopNavMenu
  appName={'dashboard'}
- savedQueryId={currentAppState?.savedQuery}
  config={showTopNavMenu ? topNavMenu : undefined}
  className={isFullScreenMode ? 'osdTopNavMenu-isFullScreen' : undefined}
  screenTitle={currentAppState.title}
@@ -169,7 +134,10 @@ const TopNav = ({
  indexPatterns={indexPatterns}
  showSaveQuery={services.dashboardCapabilities.saveQuery as boolean}
  savedQuery={undefined}
- onSavedQueryIdChange={() => {}}
+ onSavedQueryIdChange={(savedQueryId?: string) => {
+ stateContainer.transitions.set('savedQuery', savedQueryId);
+ }}
+ savedQueryId={currentAppState?.savedQuery}
  onQuerySubmit={handleRefresh}
  setMenuMountPoint={isEmbeddedExternally ? undefined : setHeaderActionMenu}
  />

diff --git a/src/plugins/dashboard/public/application/lib/save_dashboard.ts b/src/plugins/dashboard/public/application/lib/save_dashboard.ts
@@ -33,6 +33,7 @@ import { SavedObjectSaveOpts } from 'src/plugins/saved_objects/public';
 import { updateSavedDashboard } from './update_saved_dashboard';
 
 import { DashboardAppStateContainer } from '../../types';
+import { Dashboard } from '../../dashboard';
 
 /**
  * Saves the dashboard.
@@ -43,11 +44,12 @@ export function saveDashboard(
  timeFilter: TimefilterContract,
  stateContainer: DashboardAppStateContainer,
  savedDashboard: any,
- saveOptions: SavedObjectSaveOpts
+ saveOptions: SavedObjectSaveOpts,
+ dashboard: Dashboard
 ): Promise<string> {
  const appState = stateContainer.getState();
 
- updateSavedDashboard(savedDashboard, appState, timeFilter);
+ updateSavedDashboard(savedDashboard, appState, timeFilter, dashboard);
 
  return savedDashboard.save(saveOptions).then((id: string) => {
  if (id) {

diff --git a/src/plugins/dashboard/public/application/lib/update_saved_dashboard.ts b/src/plugins/dashboard/public/application/lib/update_saved_dashboard.ts
@@ -34,31 +34,37 @@ import { FilterUtils } from './filter_utils';
 import { SavedObjectDashboard } from '../../saved_dashboards';
 import { DashboardAppState } from '../../types';
 import { opensearchFilters } from '../../../../data/public';
+import { Dashboard } from '../../dashboard';
 
 export function updateSavedDashboard(
  savedDashboard: SavedObjectDashboard,
  appState: DashboardAppState,
- timeFilter: TimefilterContract
+ timeFilter: TimefilterContract,
+ dashboard: Dashboard
 ) {
  savedDashboard.title = appState.title;
  savedDashboard.description = appState.description;
  savedDashboard.timeRestore = appState.timeRestore;
  savedDashboard.panelsJSON = JSON.stringify(appState.panels);
  savedDashboard.optionsJSON = JSON.stringify(appState.options);
 
- savedDashboard.timeFrom = savedDashboard.timeRestore
+ const timeFrom = savedDashboard.timeRestore
  ? FilterUtils.convertTimeToUTCString(timeFilter.getTime().from)
  : undefined;
- savedDashboard.timeTo = savedDashboard.timeRestore
+ const timeTo = savedDashboard.timeRestore
  ? FilterUtils.convertTimeToUTCString(timeFilter.getTime().to)
  : undefined;
+
  const timeRestoreObj: RefreshInterval = _.pick(timeFilter.getRefreshInterval(), [
  'display',
  'pause',
  'section',
  'value',
  ]) as RefreshInterval;
- savedDashboard.refreshInterval = savedDashboard.timeRestore ? timeRestoreObj : undefined;
+ const refreshInterval = savedDashboard.timeRestore ? timeRestoreObj : undefined;
+ savedDashboard.timeFrom = timeFrom;
+ savedDashboard.timeTo = timeTo;
+ savedDashboard.refreshInterval = refreshInterval;
 
  // save only unpinned filters
  const unpinnedFilters = appState.filters.filter(
@@ -68,4 +74,17 @@ export function updateSavedDashboard(
 
  // save the queries
  savedDashboard.searchSource.setField('query', appState.query as Query);
+
+ dashboard.setState({
+ title: appState.title,
+ description: appState.description,
+ timeRestore: appState.timeRestore,
+ panels: appState.panels,
+ options: appState.options,
+ timeFrom,
+ timeTo,
+ refreshInterval,
+ query: appState.query as Query,
+ filters: unpinnedFilters,
+ });
 }
diff --git a/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx b/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx
@@ -373,7 +373,13 @@ export const getNavActions = (
  async function save(saveOptions: SavedObjectSaveOpts) {
  const timefilter = queryService.timefilter.timefilter;
  try {
- const id = await saveDashboard(timefilter, stateContainer, savedDashboard, saveOptions);
+ const id = await saveDashboard(
+ timefilter,
+ stateContainer,
+ savedDashboard,
+ saveOptions,
+ dashboard
+ );
 
  if (id) {
  notifications.toasts.addSuccess({

diff --git a/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx b/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from 'react';
-import { cloneDeep, isEqual } from 'lodash';
+import { cloneDeep, isEqual, uniqBy } from 'lodash';
 import { EMPTY, Observable, Subscription, merge, of, pipe } from 'rxjs';
 import {
  catchError,
@@ -62,6 +62,7 @@ export const useDashboardContainer = (
  appState?: DashboardAppStateContainer
 ) => {
  const [dashboardContainer, setDashboardContainer] = useState<DashboardContainer>();
+ const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>([]);
 
  useEffect(() => {
  const getDashboardContainer = async () => {
@@ -71,7 +72,8 @@ export const useDashboardContainer = (
  savedDashboardInstance,
  services,
  appState,
- dashboard
+ dashboard,
+ setIndexPatterns
  );
 
  setDashboardContainer(dashboardContainerEmbeddable);
@@ -105,14 +107,15 @@ export const useDashboardContainer = (
  }
  }, [dashboardContainer, services]);
 
- return { dashboardContainer };
+ return { dashboardContainer, indexPatterns };
 };
 
 const createDashboardEmbeddable = (
  savedDash: any,
  dashboardServices: DashboardServices,
  appState: DashboardAppStateContainer,
- dashboard: Dashboard
+ dashboard: Dashboard,
+ setIndexPatterns: React.Dispatch<React.SetStateAction<IndexPattern[]>>
 ) => {
  let dashboardContainer: DashboardContainer;
  let inputSubscription: Subscription | undefined;
@@ -240,6 +243,45 @@ const createDashboardEmbeddable = (
  expandedPanelId: appStateData.expandedPanelId,
  };
  };
+ const setCurrentIndexPatterns = () => {
+ let panelIndexPatterns: IndexPattern[] = [];
+ dashboardContainer.getChildIds().forEach((id) => {
+ const embeddableInstance = dashboardContainer.getChild(id);
+ if (isErrorEmbeddable(embeddableInstance)) return;
+ const embeddableIndexPatterns = (embeddableInstance.getOutput() as any).indexPatterns;
+ if (!embeddableIndexPatterns) return;
+ panelIndexPatterns.push(...embeddableIndexPatterns);
+ });
+ panelIndexPatterns = uniqBy(panelIndexPatterns, 'id');
+ return panelIndexPatterns;
+ };
+
+ const updateIndexPatternsOperator = pipe(
+ filter((container: DashboardContainer) => !!container && !isErrorEmbeddable(container)),
+ map(setCurrentIndexPatterns),
+ distinctUntilChanged((a, b) =>
+ deepEqual(
+ a.map((ip) => ip.id),
+ b.map((ip) => ip.id)
+ )
+ ),
+ // using switchMap for previous task cancellation
+ switchMap((panelIndexPatterns: IndexPattern[]) => {
+ return new Observable((observer) => {
+ if (panelIndexPatterns && panelIndexPatterns.length > 0) {
+ if (observer.closed) return;
+ setIndexPatterns(panelIndexPatterns);
+ observer.complete();
+ } else {
+ data.indexPatterns.getDefault().then((defaultIndexPattern) => {
+ if (observer.closed) return;
+ setIndexPatterns([defaultIndexPattern as IndexPattern]);
+ observer.complete();
+ });
+ }
+ });
+ })
+ );
 
  if (dashboardFactory) {
  return dashboardFactory
@@ -321,7 +363,8 @@ const createDashboardEmbeddable = (
  )
  .pipe(
  mapTo(dashboardContainer),
- startWith(dashboardContainer) // to trigger initial index pattern update
+ startWith(dashboardContainer), // to trigger initial index pattern update
+ updateIndexPatternsOperator
  )
  .subscribe();
 

diff --git a/src/plugins/dashboard/public/application/utils/use/use_editor_updates.ts b/src/plugins/dashboard/public/application/utils/use/use_editor_updates.ts
@@ -43,7 +43,13 @@ export const useEditorUpdates = (
  if (changes) {
  dashboardContainer.updateInput(changes);
 
- if (changes.filters || changes.query || changes.timeRange || changes.refreshConfig) {
+ if (changes.timeRange || changes.refreshConfig) {
+ if (dashboardInstance.timeRestore) {
+ dashboard.isDirty = true;
+ }
+ }
+
+ if (changes.filters || changes.query) {
  dashboard.isDirty = true;
  }
  }

diff --git a/src/plugins/dashboard/public/dashboard.ts b/src/plugins/dashboard/public/dashboard.ts
@@ -73,7 +73,7 @@ export class Dashboard<TDashboardParams = DashboardParams> {
  this.filters = cloneDeep(dashboardState.filters);
  }
 
- async setState(state: PartialDashboardState) {
+ setState(state: PartialDashboardState) {
  if (state.id) {
  this.id = state.id;
  }
@@ -109,12 +109,12 @@ export class Dashboard<TDashboardParams = DashboardParams> {
  if (state.searchSource) {
  this.searchSource = state.searchSource;
  }
- // if (state.query) {
- // this.query = this.getQuery(state.query);
- // }
- // if (state.filters) {
- // this.filters = this.getFilters(state.filters);
- // }
+ if (state.query) {
+  this.query = state.query;
+ }
+ if (state.filters) {
+  this.filters = state.filters;
+ }
  }
 
  public setIsDirty(value: boolean) {