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

Hello,

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?

image

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,
      [...]
    ) => {
      ReactDOM.render(
        <MyPluginApp
          [...]
          data={data}
        />,
        element
      );
      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.

2 Likes