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.