How can I read the timefilter range within an external plugin?


I've followed these instructions to scaffold a new plugin project (starting from master) and the plugin page comes with a time filter:

How can I read the time range selected by the user?

Some old posts refer to import { timefilter } from 'ui/timefilter'; but I cannot find this package.

The timefilter component is part of the data plugin, specifically data.query.timefilter. You can get the current range using data.query.timefilter.timefilter.getTime().

Thank you.

I see a data plugin under src/plugins/data.

How do I invoke it? Is the infrastructure passing me an instance through my plugin/app props?


Here is an example on how to user TopNavMenu thay may help you

Thank you @ylasri.

Note: I scaffolded my plugin using the Kibana Plugin Generator so every path below is relative to plugins/myPlugin/.

This is how I solved it:

  • in public/types.ts, add a DataPublicPluginStart field to the AppPluginStartDependencies interface
    import { DataPublicPluginStart } from '../../../src/plugins/data/public';
    export interface AppPluginStartDependencies {
      data: DataPublicPluginStart;
  • then propagate the data field into the renderApp function in public/applications.tsx
    export const renderApp = (
      { navigation, data }: AppPluginStartDependencies,
    ) => {
      return () => ReactDOM.unmountComponentAtNode(element);
  • and in the MyPluginAppDeps interface in public/components/app.tsx
    import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
    interface PlatformEventsTimelineAppDeps {
      data: DataPublicPluginStart;
  • finally, add "data" to the requiredPlugins property in kibana.json
       "requiredPlugins": ["navigation", "data"],

These might be obvious instructions but it took me some time to figure out the dependency injection mechanism.


This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.