Kibana 6.5 custom visualisation not receiving filters

Hi,

I have written a custom visualisation for Kibana 6.5, which has its own custom request and response handlers. It queries elasticsearch and returns all the data for the chosen time period in its raw format. I want to be able to filter this data by using the built-in kibana filters, however I do not believe I have written my requestHandler.js class to handle these. I know that the requestHandler takes 3 parameters: params , queryFilter and timeFilter . I already use timeFilter to search for the given time period, but can I use the other two to pass the values from chosen filters from kibana into the query? Is that how it would work? I have seen in this documentation on filter context that you can add a filter to the query. Is this the correct approach?

My code is below for my current visualisation and the request handler, can anyone advise on how I can include filters into my query to ES?

self_changing_vis.js

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

import { SelfChangingEditor } from './self_changing_editor';
import { SelfChangingComponent } from './self_changing_components';

import { Schemas } from 'ui/vis/editors/default/schemas';
import optionsTemplate from './options_template.html';
import { RequestHandlerProvider } from './requestHandler.js';
import handleResponse  from './responseHandler.js';


const myResponseHandler = (vis, response) => {
  // transform the response (based on vis object?)
  console.log('1: ', response);
  console.log('2 : ', vis);
  return response;
};

function SelfChangingVisType(Private) {
  const VisFactory = Private(VisFactoryProvider);
  const RequestHandler = Private(RequestHandlerProvider);

  return VisFactory.createReactVisualization({
    name: 'self_changing_vis',
    title: 'Skyplot',
    icon: 'visControls',
    description: 'This visualization is able to change its own settings, that you could also set in the editor.',
    visConfig: {
      component: SelfChangingComponent,
      defaults: {
        counter: 0,
        constellation: 'GPS'
      },
    },
    editor: 'default',
    editorConfig: {
      optionsTemplate: optionsTemplate,
      schemas: new Schemas([
        {
          group: 'metrics',
          name: 'metric',
          title: 'Metric',
          min: 1,
          aggFilter: ['!derivative', '!geo_centroid'],
          defaults: [
            { type: 'count', schema: 'metric' }
          ]
        }, {
          group: 'buckets',
          name: 'segment',
          title: 'Bucket Split',
          min: 0,
          max: 1,
          aggFilter: ['!geohash_grid', '!filter']
        }
      ]),
    },
    requestHandler: RequestHandler.handle,
    responseHandler: handleResponse,
  });
}

VisTypesRegistryProvider.register(SelfChangingVisType);

requestHandler.js

const getRequestBody = (params, queryFilter, timeFilter) => {
  console.log('params: ', params);
  console.log('queryFilter: ', queryFilter);
  const requestBody = {
    size: 10000,
    'query': {
      'bool': {
        'must': [
          {
            'range': {
              'timestamp': {
                'gte': timeFilter.from,
                'lte': timeFilter.to
              }
            }
          }
        ]
      }
    },
    'sort': [
        {
            'timestamp': {
                'order': 'asc'
             }
        }
    ]
  };
  return requestBody;
};

export function RequestHandlerProvider(Private, es) {
  return {
    handle(vis) {
      const { timeFilter, queryFilter } = vis.API;
      return new Promise(resolve => {
        const params = vis.params;
        const requestBody = getRequestBody(params, queryFilter, timeFilter._time);
        es.search({
          index: 'observed_range_error',
          body: requestBody
        }).then(result => resolve(result));
      });
    }
  };
}

@ppisljar / @lukeelmers can we get some help on this topic please?

Thanks,
Bhavya

Hi @bhavyarm, thanks for replying. But is no one from the team able to assist me with this?

Hello, first sorry for late reply.

in src/ui/public/vis/request_handlers/request_handlers.d.ts you can find the definition of request handler:

export interface RequestHandlerParams {
  searchSource: SearchSource;
  aggs: AggConfigs;
  timeRange?: TimeRange;
  query?: Query;
  filters?: Filters;
  forceFetch: boolean;
  queryFilter: QueryFilter;
  uiState: PersistedState;
  partialRows?: boolean;
  metricsAtAllLevels?: boolean;
  minimalColumns?: boolean;
}

export type RequestHandler = <T>(vis: Vis, params: RequestHandlerParams) => T;

one of the parameters there is the filter arrray filters
queryFilter is actually service that allows you to talk to the filter bar (push new filters)

so to go back to your example ....

change handle(vis) to handle(vis, params) and then you can destructure params:
const { filters, query, timeRange } = params;

how those filters can be used to produce es query ? best to check our default request handler src/ui/public/vis/request_handlers/courier.js

Hi,

Apologies for my delayed response. Thank you very much for this, however I have tried doing what you suggested by destructuring the params with const { filters, query, timeRange } = params;but then it tells me that the filters value is undefined?

Is your approach correct for kibana version 6.5? Because I've noticed that in the example I was using before that it says to get the params using const params = vsi.params , unless these are different params?

Can you advise on what is going wrong here?

`

Hi,

@ppisljar is there no alternatives you can suggest here? It's become a real blocker for me as I can't find a way to get this working. Perhaps @timroes or @lukeelmers could help? They've both been really helpful in the past regarding custom visualisations.

Thanks!

vis.params are parameters for your visualization, what you defined as visConfig in your visualization definition.
params passed to request handler are completely different, and are the ones i listed above.

can you check whats in the params that are passed as the second argument to your custom request handler handle function ?

all mentioned above is relevant for 6.5 (and will not work in the latest version of kibana)

@ppisljar I updated my code to log the params in the handle method:

handle(vis, params) {
  console.log('handle params: ', params);
  .....

I've attached a screenshot with the output of this. This is the output of me applying a filer of "constellation: GALILEO" to the visualisation. I can't make much sense of it. Is there anything you can spot in it that is abnormal?

Thanks

thats indeed weird. is your code available somewhere, that would allow me to test it out ?

Hi @ppisljar

Sorry again for delayed response. I have uploaded the source code here for what I have written. If you are able to test it that would be fantastic, as I am really stuck with this and have no idea why it is not working. Even if you can't test but could spot where I am going wrong, that would be really helpful!

Please let me know once you have downloaded a copy of the code so I can remove the link so others cannot access it.

Thanks!

@ppisljar Have you had a chance to look at this yet?

@bhavyarm @ppisljar is there no one able to offer any help on this?

sorry for delay, i will try to get back to you in a few days

Thank you, much appreciated!

Hi @ppisljar,

Have you had a chance to look at this?

sorry again for late reply. Seems passing filters in did not yet work in that version, so to get the filters in your request handler you should do:

params.searchSource.getField('filter')

and to get query do:

params.searchSource.getField('query')

good luck!