Fix dashboard to refresh visualizations when the refresh button is clicked

src/legacy/core_plugins/kibana/public/dashboard/actions/embeddables.ts

@@ -32,6 +32,7 @@ export enum EmbeddableActionTypeKeys {
   SET_STAGED_FILTER = 'SET_STAGED_FILTER',
   CLEAR_STAGED_FILTERS = 'CLEAR_STAGED_FILTERS',
   EMBEDDABLE_ERROR = 'EMBEDDABLE_ERROR',
+  REQUEST_RELOAD = 'REQUEST_RELOAD',
 }
 
 export interface EmbeddableIsInitializingAction
@@ -58,6 +59,8 @@ export interface SetStagedFilterAction
 
 export interface ClearStagedFiltersAction
   extends KibanaAction<EmbeddableActionTypeKeys.CLEAR_STAGED_FILTERS, undefined> {}
+export interface RequestReload
+  extends KibanaAction<EmbeddableActionTypeKeys.REQUEST_RELOAD, undefined> {}
 
 export interface EmbeddableErrorActionPayload {
   error: string | object;
@@ -88,6 +91,8 @@ export const embeddableError = createAction<EmbeddableErrorActionPayload>(
   EmbeddableActionTypeKeys.EMBEDDABLE_ERROR
 );
 
+export const requestReload = createAction(EmbeddableActionTypeKeys.REQUEST_RELOAD);
+
 /**
  * The main point of communication from the embeddable to the dashboard. Any time state in the embeddable
  * changes, this function will be called. The data is then extracted from EmbeddableState and stored in

src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -231,8 +231,6 @@ app.directive('dashboardApp', function ($injector) {
         $scope.indexPatterns = dashboardStateManager.getPanelIndexPatterns();
       };
 
-      $scope.$watch('model.query', $scope.updateQueryAndFetch);
-
       $scope.$listenAndDigestAsync(timefilter, 'fetch', () => {
         dashboardStateManager.handleTimeChange(timefilter.getTime());
         // Currently discover relies on this logic to re-fetch. We need to refactor it to rely instead on the

src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.js

@@ -39,6 +39,7 @@ import {
   updateFilters,
   updateQuery,
   closeContextMenu,
+  requestReload,
 } from './actions';
 import { stateMonitorFactory } from 'ui/state_management/state_monitor_factory';
 import { createPanelState } from './panel';
@@ -220,6 +221,7 @@ export class DashboardStateManager {
     )) {
       store.dispatch(updateFilters(dashboardFilters));
     }
+    store.dispatch(requestReload());
   }
 
   _handleStoreChanges() {

src/legacy/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js

@@ -117,6 +117,10 @@ class DashboardPanelUi extends React.Component {
       this.embeddable.onContainerStateChanged(nextProps.containerState);
     }
 
+    if (this.embeddable && nextProps.lastReloadRequestTime !== this.props.lastReloadRequestTime) {
+      this.embeddable.reload();
+    }
+
     return nextProps.error !== this.props.error ||
       nextProps.initialized !== this.props.initialized;
   }
@@ -177,6 +181,7 @@ DashboardPanelUi.propTypes = {
   embeddableFactory: PropTypes.shape({
     create: PropTypes.func,
   }).isRequired,
+  lastReloadRequestTime: PropTypes.number.isRequired,
   embeddableStateChanged: PropTypes.func.isRequired,
   embeddableIsInitialized: PropTypes.func.isRequired,
   embeddableError: PropTypes.func.isRequired,

src/legacy/core_plugins/kibana/public/dashboard/panel/dashboard_panel_container.js

@@ -48,13 +48,15 @@ const mapStateToProps = ({ dashboard }, { embeddableFactory, panelId }) => {
   } else {
     error = (embeddable && getEmbeddableError(dashboard, panelId)) || '';
   }
+  const lastReloadRequestTime = embeddable ? embeddable.lastReloadRequestTime : 0;
   const initialized = embeddable ? getEmbeddableInitialized(dashboard, panelId) : false;
   return {
     error,
     viewOnlyMode: getFullScreenMode(dashboard) || getViewMode(dashboard) === DashboardViewMode.VIEW,
     containerState: getContainerState(dashboard, panelId),
     initialized,
-    panel: getPanel(dashboard, panelId)
+    panel: getPanel(dashboard, panelId),
+    lastReloadRequestTime,
   };
 };
 

src/legacy/core_plugins/kibana/public/dashboard/reducers/embeddables.ts

@@ -39,6 +39,7 @@ const embeddableIsInitializing = (
     initialized: false,
     metadata: {},
     stagedFilter: undefined,
+    lastReloadRequestTime: 0,
   },
 });
 
@@ -88,6 +89,16 @@ const deleteEmbeddable = (embeddables: EmbeddablesMap, panelId: PanelId): Embedd
   return embeddablesCopy;
 };
 
+const setReloadRequestTime = (
+  embeddables: EmbeddablesMap,
+  lastReloadRequestTime: number
+): EmbeddablesMap => {
+  return _.mapValues<EmbeddablesMap>(embeddables, embeddable => ({
+    ...embeddable,
+    lastReloadRequestTime,
+  }));
+};
+
 export const embeddablesReducer: Reducer<EmbeddablesMap> = (
   embeddables = {},
   action
@@ -105,6 +116,8 @@ export const embeddablesReducer: Reducer<EmbeddablesMap> = (
       return embeddableError(embeddables, action.payload);
     case PanelActionTypeKeys.DELETE_PANEL:
       return deleteEmbeddable(embeddables, action.payload);
+    case EmbeddableActionTypeKeys.REQUEST_RELOAD:
+      return setReloadRequestTime(embeddables, new Date().getTime());
     default:
       return embeddables;
   }

src/legacy/core_plugins/kibana/public/dashboard/selectors/types.ts

@@ -58,6 +58,10 @@ export interface EmbeddableReduxState {
   readonly error?: string | object;
   readonly initialized: boolean;
   readonly stagedFilter?: object;
+  /**
+   * Timestamp of the last time this embeddable was requested to reload.
+   */
+  readonly lastReloadRequestTime: number;
 }
 
 export interface PanelsMap {

src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts

@@ -192,6 +192,12 @@ export class VisualizeEmbeddable extends Embeddable {
     }
   }
 
+  public reload() {
+    if (this.handler) {
+      this.handler.reload();
+    }
+  }
+
   /**
    * Retrieve the panel title for this panel from the container state.
    * This will either return the overwritten panel title or the visualization title.

src/ui/public/embeddable/embeddable.ts

@@ -58,6 +58,7 @@ interface EmbeddableOptions {
   render?: (domNode: HTMLElement, containerState: ContainerState) => void;
   destroy?: () => void;
   onContainerStateChanged?: (containerState: ContainerState) => void;
+  reload?: () => void;
 }
 
 export abstract class Embeddable {
@@ -78,6 +79,10 @@ export abstract class Embeddable {
     if (options.onContainerStateChanged) {
       this.onContainerStateChanged = options.onContainerStateChanged;
     }
+
+    if (options.reload) {
+      this.reload = options.reload;
+    }
   }
 
   public abstract onContainerStateChanged(containerState: ContainerState): void;
@@ -99,4 +104,8 @@ export abstract class Embeddable {
   public destroy(): void {
     return;
   }
+
+  public reload(): void {
+    return;
+  }
 }

src/ui/public/visualize/loader/embedded_visualize_handler.ts

@@ -297,6 +297,13 @@ export class EmbeddedVisualizeHandler {
     this.listeners.removeListener(RENDER_COMPLETE_EVENT, listener);
   }
 
+  /**
+   * Force the fetch of new data and renders the chart again.
+   */
+  public reload = () => {
+    this.fetchAndRender(true);
+  };
+
   private onRenderCompleteListener = () => {
     this.listeners.emit(RENDER_COMPLETE_EVENT);
     this.element.removeAttribute(LOADING_ATTRIBUTE);
@@ -365,13 +372,6 @@ export class EmbeddedVisualizeHandler {
     this.fetchAndRender();
   };
 
-  /**
-   * Force the fetch of new data and renders the chart again.
-   */
-  private reload = () => {
-    this.fetchAndRender(true);
-  };
-
   private fetch = (forceFetch: boolean = false) => {
     this.dataLoaderParams.aggs = this.vis.getAggConfig();
     this.dataLoaderParams.forceFetch = forceFetch;