How to acess search bar query string in kibana custom plugin

Elastic Stack Kibana
1

Hi to all,
I have been learning kibana visualization development from @timroes and @JuanCarniglia blogs and plugin.
I am currently developing kibana-4.4.1 visualization plugin and i need to apply big search bar (at the top on kibana dashoard and above filter_bar) query string and also extract date range filter applied on a kibana dashboard. Anyone please help.

2

Hi @tarun_kumar,

About the search bar, may I ask why you are unable to simply use the filter bar itself? It is also capable of doing text searches. Providing two search/filter bars on the same page might be a confusing UX for the user.

To extract the date range filter applied to the dashboard, look into using the timefilter Angular service provided by Kibana. Once injected, you can call its getBounds method to get an object with min and max properties. You can see an example usage here.

3

Hi @shaunak sir,
Thanks a lot for your reply. I am sorry I couldn't put my question correctly.
What I actually meant was that I wish to extract/retrieve existing search bar query string and date range filter into my visualization plugins so that I could use them to get filtered response from REST service that I am using to populate my kibana plugin visualizations.

I wish I am clear enough this time.

Best regards
Tarun kumar

4

I haven't attempted to reuse the search bar yet, but I have reused the date/time picker. You will want to dive into the Kibana code and look closely at what it needs to work correctly. Everything I know is from looking at the Discover built-in plugin.

Basically you will want to use the kbn-top-nav directive:

<kbn-top-nav name="myapp" config="ctrl.topNavMenu">

I have my configuration unset, but you can look at the Discover plugin to see what that sends in. The one hidden nugget is that directive needs something in $scope of it's parent (sad day Angular again).

First inject the timefilter dependency into your controller. Attach that to scope: $scope.timefilter = timefilter. That will expose things that the directive needs. You can then get the time range from that timefilter:

In my case I do gte and lte for all picks:

import dateMath from '@elastic/datemath';
...
    this.timeRange = {
      gte: dateMath.parse(this.timefilter.time.from),
      lte: dateMath.parse(this.timefilter.time.to, true)
    };

For specifics you need to look at the code base for that directive directly. Basically reverse engineer it to see what it needs and what it returns.

I haven't found much documentation around these super internal bits of the codebase. So guess/check and experimentation is the best way. And no one will slap your hand if you copy/paste things that work from the built in plugins :slight_smile:

5

Thanks a lot @Kikketer and @shaunak
With your help I am now able to extract timefilter by injecting timefilter into controller and getBounds() gives me from & to time as well.
But I am still not able to exract query in search bar.
Mean time i would extract query from window.location.href and apply a watcher on it.
But thats a bad solution sadly.
@spalger would you please help me extracting search query in search bar in my visualization.

6

Thanks a lot all,
Below is solution for query_string from query Search field. state.query would give me the query_string as :

$scope.$watch(getAppState, function (appState) {
   $scope.state = appState;

       console.log("printing $state here WATCHER...");
       console.log($scope.state);
       console.log($scope.state.query.query_string.query);
       console.log();
 },true);

getAppState service would be needed to injected to Controller like timefilter.

7

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