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

**URL:** <https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [November 19, 2020, 4:55pm UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022 "2020-11-19T16:55:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cascandaliato](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cascandaliato/32/79337_2.png) [@cascandaliato](https://discuss.elastic.co/u/cascandaliato)\
**Post date:** [November 19, 2020, 4:55pm UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022/1 "2020-11-19T16:55:40Z")

</div>

Hello,

I've followed [these instructions](https://www.elastic.co/guide/en/kibana/master/development.html) to scaffold a new plugin project (starting from `master`) and the plugin page comes with a time filter:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/3/339f071b418d47af1780ed85355c12e34d10655b.png)

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.

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [November 19, 2020, 6:20pm UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022/2 "2020-11-19T18:20:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cascandaliato](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cascandaliato/32/79337_2.png) [@cascandaliato](https://discuss.elastic.co/u/cascandaliato)\
**Post date:** [November 20, 2020, 11:37am UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022/3 "2020-11-20T11:37:54Z")

</div>

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](https://us1.discourse-cdn.com/elastic/original/3X/6/8/68ed7d14f45f884a7d220b922956d2a69425ab4f.png)

---

<div class="post-metadata">

**Author:** ![ylasri](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ylasri/32/86120_2.png) [@ylasri](https://discuss.elastic.co/u/ylasri)\
**Post date:** [November 20, 2020, 11:43am UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022/4 "2020-11-20T11:43:10Z")

</div>

Here is an [example](https://github.com/elastic/kibana/blob/master/examples/search_examples/public/components/app.tsx) on how to user TopNavMenu thay may help you

---

<div class="post-metadata">

**Author:** ![cascandaliato](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cascandaliato/32/79337_2.png) [@cascandaliato](https://discuss.elastic.co/u/cascandaliato)\
**Post date:** [November 23, 2020, 9:30am UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022/5 "2020-11-23T09:30:23Z")

</div>

Thank you @ylasri.

Note: I scaffolded my plugin using the [Kibana Plugin Generator](https://www.elastic.co/guide/en/kibana/current/external-plugin-development.html#automatic-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

```auto
[...]
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`

```auto
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`

```auto
import { DataPublicPluginStart } from '../../../../src/plugins/data/public';

[...]

interface PlatformEventsTimelineAppDeps {
  [...]
  data: DataPublicPluginStart;
}

```

- finally, add `"data"` to the `requiredPlugins` property in `kibana.json`

```json
   "requiredPlugins": ["navigation", "data"],

```

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 21, 2020, 9:30am UTC](https://discuss.elastic.co/t/how-can-i-read-the-timefilter-range-within-an-external-plugin/256022/6 "2020-12-21T09:30:35Z")

</div>

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