From 176cddf47f235a45be05274a1e9086d1903c3c10 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Tue, 4 Jul 2023 21:43:49 +0000 Subject: [PATCH] Fix time filter and query related functionalt test in group 3 Signed-off-by: abbyhu2000 --- .../components/dashboard_editor.tsx | 2 +- .../components/dashboard_top_nav.tsx | 18 ++- .../public/application/lib/save_dashboard.ts | 6 +- .../application/lib/update_saved_dashboard.ts | 27 ++++- .../application/utils/get_nav_actions.tsx | 8 +- .../utils/use/use_dashboard_container.tsx | 24 ++-- .../utils/use/use_editor_updates.ts | 8 +- src/plugins/dashboard/public/dashboard.ts | 14 +-- .../saved_dashboards/_saved_dashboard.ts | 111 ------------------ 9 files changed, 66 insertions(+), 152 deletions(-) diff --git a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx index 19ec5b152da..76ffa0479e7 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx +++ b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx @@ -93,7 +93,7 @@ export const DashboardEditor = () => { console.log('isDirty', dashboard.isDirty); } console.log('dashboardContainer', dashboardContainer); - console.log('indexPatterns', indexPatterns) + console.log('indexPatterns', indexPatterns); return (
diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx index 9e60557f2f8..3282dad1f3c 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx +++ b/src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx @@ -21,7 +21,7 @@ interface DashboardTopNavProps { dashboard: Dashboard; currentAppState: DashboardAppState; isEmbeddableRendered: boolean; - indexPatterns: IndexPattern [] + indexPatterns: IndexPattern[]; dashboardContainer?: DashboardContainer; } @@ -41,16 +41,14 @@ const TopNav = ({ currentAppState, isEmbeddableRendered, dashboardContainer, - indexPatterns + indexPatterns, }: DashboardTopNavProps) => { - const [filters, setFilters] = useState([]); const [topNavMenu, setTopNavMenu] = useState(); const [isFullScreenMode, setIsFullScreenMode] = useState(); const { services } = useOpenSearchDashboards(); 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); @@ -75,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( @@ -128,7 +122,6 @@ const TopNav = ({ return ( {}} + 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 index 2b48d862af3..871c8d62b28 100644 --- 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 { 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 index 0baebc0bc3d..bfbb2986579 100644 --- a/src/plugins/dashboard/public/application/lib/update_saved_dashboard.ts +++ b/src/plugins/dashboard/public/application/lib/update_saved_dashboard.ts @@ -34,11 +34,13 @@ 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; @@ -46,19 +48,23 @@ export function updateSavedDashboard( 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 index 9c7abab6868..da0b7da7a8c 100644 --- 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 index ee9c696d4f3..e364a0de293 100644 --- a/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx +++ b/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx @@ -120,7 +120,6 @@ const createDashboardEmbeddable = ( let dashboardContainer: DashboardContainer; let inputSubscription: Subscription | undefined; let outputSubscription: Subscription | undefined; - let panelIndexPatterns: IndexPattern[] = []; const { embeddable, @@ -254,8 +253,8 @@ const createDashboardEmbeddable = ( panelIndexPatterns.push(...embeddableIndexPatterns); }); panelIndexPatterns = uniqBy(panelIndexPatterns, 'id'); - return panelIndexPatterns - } + return panelIndexPatterns; + }; const updateIndexPatternsOperator = pipe( filter((container: DashboardContainer) => !!container && !isErrorEmbeddable(container)), @@ -270,22 +269,19 @@ const createDashboardEmbeddable = ( switchMap((panelIndexPatterns: IndexPattern[]) => { return new Observable((observer) => { if (panelIndexPatterns && panelIndexPatterns.length > 0) { - - if (observer.closed) return; - setIndexPatterns(panelIndexPatterns) - observer.complete(); - + if (observer.closed) return; + setIndexPatterns(panelIndexPatterns); + observer.complete(); } else { data.indexPatterns.getDefault().then((defaultIndexPattern) => { if (observer.closed) return; - setIndexPatterns([defaultIndexPattern as IndexPattern]) + setIndexPatterns([defaultIndexPattern as IndexPattern]); observer.complete(); - }) + }); } - }) - }) - ) - + }); + }) + ); if (dashboardFactory) { return dashboardFactory 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 index bb3b4fe09b1..31feef28e60 100644 --- 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 index 4dc192c4d87..668d3afb09a 100644 --- a/src/plugins/dashboard/public/dashboard.ts +++ b/src/plugins/dashboard/public/dashboard.ts @@ -73,7 +73,7 @@ export class Dashboard { 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 { 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) { diff --git a/src/plugins/dashboard/public/saved_dashboards/_saved_dashboard.ts b/src/plugins/dashboard/public/saved_dashboards/_saved_dashboard.ts index 98923f5aa0d..741c9871f51 100644 --- a/src/plugins/dashboard/public/saved_dashboards/_saved_dashboard.ts +++ b/src/plugins/dashboard/public/saved_dashboards/_saved_dashboard.ts @@ -39,114 +39,3 @@ export const convertToSerializedDashboard = ( filters: savedDashboard.getFilters(), }; }; - -/* export const convertFromSerializedDashboard = ( - serializedDashboard: SerializedDashboard - ): ISavedDashboard => { - const { - id, - timeRestore, - timeTo, - timeFrom, - refreshInterval, - description, - panels, - options, - uiState, - lastSavedTitle, - searchSource, - query, - filters, - } = serializedDashboard; - - return { - id, - timeRestore, - timeTo, - timeFrom, - description, - panelsJSON: JSON.stringify(panels), - optionsJSON: JSON.stringify(options), - uiStateJSON: JSON.stringify(uiState), - lastSavedTitle, - refreshInterval, - searchSource, - getQuery: () => query, - getFilters: () => filters, - }; - }; - - export function createSavedDashboardClass( - services: SavedObjectOpenSearchDashboardsServices - ): new (id: string) => SavedObjectDashboard { - const SavedObjectClass = createSavedObjectClass(services); - class SavedDashboard extends SavedObjectClass { - public static type = 'dashboard'; - public static mapping: Record = { - title: 'text', - hits: 'integer', - description: 'text', - panelsJSON: 'text', - optionsJSON: 'text', - version: 'integer', - timeRestore: 'boolean', - timeTo: 'keyword', - timeFrom: 'keyword', - refreshInterval: { - type: 'object', - properties: { - display: { type: 'keyword' }, - pause: { type: 'boolean' }, - section: { type: 'integer' }, - value: { type: 'integer' }, - }, - }, - }; - // Order these fields to the top, the rest are alphabetical - public static fieldOrder = ['title', 'description']; - public static searchSource = true; - public showInRecentlyAccessed = true; - - constructor(id: string) { - super({ - type: SavedDashboard.type, - mapping: SavedDashboard.mapping, - searchSource: SavedDashboard.searchSource, - extractReferences, - injectReferences, - - // if this is null/undefined then the SavedObject will be assigned the defaults - id, - - // default values that will get assigned if the doc is new - defaults: { - title: '', - hits: 0, - description: '', - panelsJSON: '[]', - optionsJSON: JSON.stringify({ - // for BWC reasons we can't default dashboards that already exist without this setting to true. - useMargins: !id, - hidePanelTitles: false, - }), - version: 1, - timeRestore: false, - timeTo: undefined, - timeFrom: undefined, - refreshInterval: undefined, - }, - }); - this.getFullPath = () => `/app/dashboardsNew#${createDashboardEditUrl(String(this.id))}`; - } - - getQuery() { - return this.searchSource!.getOwnField('query') || { query: '', language: 'kuery' }; - } - - getFilters() { - return this.searchSource!.getOwnField('filter') || []; - } - } - - return (SavedDashboard as unknown) as new (id: string) => SavedObjectDashboard; - }*/