Data plugin search bar on filter removal doesn't refresh automatically

[praveer (Praveer Nair)]

Hi Team,

I am using data plugin for elastic queries. In my project i have used kibana search bar as below

<navigation.ui.TopNavMenu
      appName={PLUGIN_ID}
      showSearchBar={true}
      useDefaultBehaviors={true}
      indexPatterns={indexPattern ? [indexPattern] : undefined}
      onQuerySubmit={(payload) => onRefreshClick(payload)}
      onFiltersUpdated={(filters) => refresh(filters)}
      onQueryChange={(payload) => refresh(payload)}
    />

In project if i have to add any filter on item click I am using below code

const patternIndex = props.indexPattern;
const filterType = FILTERS.PHRASE;
const newFilter = buildFilter(patternIndex, patternIndex.getFieldByName(filterField), filterType, true, false, filterVal, null, FilterStateStore.APP_STATE);
props.data.query.filterManager.addFilters(newFilter);

But when I remove the applied filter i have to hit refresh button in search bar to reflect the changes.

Can you guys help me out so that on removal of added filter the page should automatically reload. How can I catch filter removal event to the same.

Regards
Praveer.

[Liza_Katz]

Hi there praveer

I have tested this behavior using your filter creation logic, on our latest master branch, and it seems to work properly. Filters are being added and removed from the SearchBar when you add them via the service, without having to refresh it explicitly.

If you're running Kibana from our source code, I've pasted a git patch you can apply to your code to see what I did.

Please let us know if it helps or if you're using a much older version of Kibana where things behave differently.

Liza

[praveer (Praveer Nair)]

Hi Liaz,

Thanks for the help but it's not working.
As in my application I have added search bar in app.tsx and I am passing data plugin as parameter to child component as below

<Route path={http.basePath.get() + "/app/correlationApp/correlationrule"} exact
          render={(props) => (<CorrelationRule http={http} data={data} savedObjectsClient={savedObjectsClient} indexPattern={indexPattern} mngBrdCrmbs={mngBrdCrmbs} query={propQuery} startDate={propStartDate} endDate={propEndDate} globalFilters={globalFilters} listAlerts={listAlerts} updateAlerts={updateAlerts} />)} />

Then in child component I am adding filter like this

const patternIndex = props.indexPattern;
const filterType = FILTERS.PHRASE;
const newFilter = buildFilter(patternIndex, patternIndex.getFieldByName(filterField), filterType, true, false, filterVal, null, FilterStateStore.APP_STATE);
props.data.query.filterManager.addFilters(newFilter);

And once filter is added in useEffect I am checking whether props.data has changed to refresh the component as below

useEffect(() => {
		setStartDate(props.startDate);
		setEndDate(props.endDate);
		setQuery(props.query);
		setShowTrigTimeChart(false);
		setShowAckTimeChart(false);
		setShowUnAckTimeChart(false);
		setShowTimeChart(false);
		setShowPieChart(false);
		setShowAlertList(false);
		console.log("Perms in Correlation rule: ", props.listAlerts);
		const setDefaultIndexPattern = async () => {

			await props.data.indexPatterns.getIdsWithTitle().then((resp) => {
				const indexIdCount = resp.length;
				if (indexIdCount > 0) {
					const correlationPattern = resp.filter(item => item.title === "correlation-*")
					if (correlationPattern.length > 0) {
						getIndexpattern(correlationPattern[0].id)
					} else {
						// createIndexPattern();
					}
				} else {
					// createIndexPattern();
				}
			});
		};
		// setDefaultIndexPattern();
		setPatternIndex(props.indexPattern);
		fetchData();
	}, [props.indexPattern, props.startDate, props.endDate, props.query, props.data, props.data.query, props.listAlerts, props.globalFilters]);

So once filter is added child component refreshes. Now how can I refresh the child component on filter removal. How to update data.filter on filter removal.

Regads
Praveer

[praveer (Praveer Nair)]

Hi @Liza_Katz,

I have also tried following approach to get update on filter add and remove.

data.query.filterManager.getUpdates$().pipe(first()).subscribe(() => {
  console.log("data filter change hit app");
});

But this is getting executed 19 times, to make it execute just single time I also tried using promise as below

data.query.state$.pipe(first()).subscribe(() => {
    console.log("First");
      getFilterUpdate();
  })

  const getFilterUpdate = async () => {
    await data.query.filterManager.getUpdates$().toPromise().then(() => {
      console.log("Promise");
      promiseExec = true;
    })
  }

But promise didn't execute. Can you please help me out on how to subscribe this observable only once.

Regards
Praveer.