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

[cascandaliato (Carmelo Scandaliato)]

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.

[wylie (Wylie Conlon)]

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

[cascandaliato (Carmelo Scandaliato)]

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?

[ylasri (Yassine LASRI)]

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

[cascandaliato (Carmelo Scandaliato)]

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.