[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 <abigailhu2000@gmail.com>

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);

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);
 }

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,18 +22,14 @@ export const useEditorUpdates = (
 
   const {
     timefilter: { timefilter },
-    filterManager,
-    queryString,
-    state$,
   } = services.data.query;
 
   useEffect(() => {
     if (appState && dashboardInstance && dashboardContainer) {
       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(() => {

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,

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(

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 () {