From d1ec33196451ff840ee4717c0b6e3fb2f4fdeb18 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Fri, 23 Jun 2023 14:48:16 -0700 Subject: [PATCH] [Dashboard De-Angular] Enable time filter functionalities (#4364) * Fix time filter on dashboard * Save dashboard with time restore * Dashboard be able to save query and app filter * Enable functional test for dashboard * Fix comments and add ui bootstrap back Signed-off-by: abbyhu2000 --- .../components/dashboard_editor.tsx | 1 + .../application/lib/update_saved_dashboard.ts | 11 +++++--- .../utils/use/use_editor_updates.ts | 25 +++++++++++++++---- .../utils/use/use_saved_dashboard_instance.ts | 17 +++++++++++++ src/plugins/dashboard/public/plugin.tsx | 4 +-- test/functional/apps/dashboard/index.js | 2 +- 6 files changed, 48 insertions(+), 12 deletions(-) diff --git a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx index a70f5224ec1b..ee64a0bedc82 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx +++ b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx @@ -55,6 +55,7 @@ export const DashboardEditor = () => { console.log('savedDashboardInstance', savedDashboardInstance); console.log('appState', appState); + console.log('appStateData', appState?.getState()); console.log('currentAppState', currentAppState); console.log('isEmbeddableRendered', isEmbeddableRendered); console.log('dashboardContainer', dashboardContainer); 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 64ed0e86a6fd..0baebc0bc3d5 100644 --- a/src/plugins/dashboard/public/application/lib/update_saved_dashboard.ts +++ b/src/plugins/dashboard/public/application/lib/update_saved_dashboard.ts @@ -29,7 +29,7 @@ */ import _ from 'lodash'; -import { RefreshInterval, TimefilterContract } from 'src/plugins/data/public'; +import { Query, RefreshInterval, TimefilterContract } from 'src/plugins/data/public'; import { FilterUtils } from './filter_utils'; import { SavedObjectDashboard } from '../../saved_dashboards'; import { DashboardAppState } from '../../types'; @@ -61,8 +61,11 @@ export function updateSavedDashboard( savedDashboard.refreshInterval = savedDashboard.timeRestore ? timeRestoreObj : undefined; // save only unpinned filters - const unpinnedFilters = savedDashboard - .getFilters() - .filter((filter) => !opensearchFilters.isFilterPinned(filter)); + const unpinnedFilters = appState.filters.filter( + (filter) => !opensearchFilters.isFilterPinned(filter) + ); savedDashboard.searchSource.setField('filter', unpinnedFilters); + + // save the queries + savedDashboard.searchSource.setField('query', appState.query as Query); } 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 11dd0e4a45ac..2a2a116d97b4 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 @@ -5,6 +5,7 @@ import EventEmitter from 'events'; import { useEffect, useState } from 'react'; +import { merge } from 'rxjs'; import { DashboardAppState, DashboardAppStateContainer, DashboardServices } from '../../../types'; import { DashboardContainer } from '../../embeddable'; @@ -21,9 +22,6 @@ export const useEditorUpdates = ( const { timefilter: { timefilter }, - filterManager, - queryString, - state$, } = services.data.query; useEffect(() => { @@ -31,8 +29,7 @@ export const useEditorUpdates = ( const initialState = appState.getState(); setCurrentAppState(initialState); - const unsubscribeStateUpdates = appState.subscribe((state) => { - setCurrentAppState(state); + const refreshDashboardContainer = () => { if (dashboardContainer.getChangesFromAppStateForContainerState) { const changes = dashboardContainer.getChangesFromAppStateForContainerState( dashboardContainer @@ -41,6 +38,23 @@ export const useEditorUpdates = ( dashboardContainer.updateInput(changes); } } + }; + + const unsubscribeStateUpdates = appState.subscribe((state) => { + setCurrentAppState(state); + refreshDashboardContainer(); + }); + + // Need to add subscription for time filter specifically because app state is not tracking time filters + // since they are part of the global state, not app state + // However, we still need to update the dashboard container with the correct time filters because dashboard + // container embeddable needs them to correctly pass them down and update its child visualization embeddables + const timeFilterChange$ = merge( + timefilter.getRefreshIntervalUpdate$(), + timefilter.getTimeUpdate$() + ); + timeFilterChange$.subscribe(() => { + refreshDashboardContainer(); }); return () => { @@ -54,6 +68,7 @@ export const useEditorUpdates = ( services, dashboardContainer, isEmbeddableRendered, + timefilter, ]); useEffect(() => { diff --git a/src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts b/src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts index e24527faf242..77454301d2cb 100644 --- a/src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts +++ b/src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts @@ -57,6 +57,23 @@ export const useSavedDashboardInstance = ( } else if (dashboardIdFromUrl) { try { savedDashboard = await savedDashboards.get(dashboardIdFromUrl); + + // Update time filter to match the saved dashboard if time restore has been set to true when saving the dashboard + // We should only set the time filter according to time restore once when we are loading the dashboard + if (savedDashboard.timeRestore) { + if (savedDashboard.timeFrom && savedDashboard.timeTo) { + services.data.query.timefilter.timefilter.setTime({ + from: savedDashboard.timeFrom, + to: savedDashboard.timeTo, + }); + } + if (savedDashboard.refreshInterval) { + services.data.query.timefilter.timefilter.setRefreshInterval( + savedDashboard.refreshInterval + ); + } + } + chrome.recentlyAccessed.add( savedDashboard.getFullPath(), savedDashboard.title, diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 7f6342ad0362..b787ffe47122 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -444,8 +444,8 @@ export class DashboardPlugin }, }; - // TODO: need to add UI bootstrap - // initAngularBootstrap(); + // TODO: delete this when discover de-angular is completed + initAngularBootstrap(); core.application.register(app); urlForwarding.forwardApp( diff --git a/test/functional/apps/dashboard/index.js b/test/functional/apps/dashboard/index.js index 4b3d4dfc96ee..c26f8f0966e7 100644 --- a/test/functional/apps/dashboard/index.js +++ b/test/functional/apps/dashboard/index.js @@ -51,7 +51,7 @@ export default function ({ getService, loadTestFile }) { await opensearchArchiver.unload('logstash_functional'); } - describe.skip('dashboard app', function () { + describe('dashboard app', function () { // This has to be first since the other tests create some embeddables as side affects and our counting assumes // a fresh index. describe('using current data', function () {