Dropdown filter is freezed

Hi team,

I don't know why, but quite often my dropdown list filter in Kibana Canvas freezes and I m not able at all at selecting any item from it. Moreover, I can't succeeded in selecting with my mouse other elements (for example a data table) in the same page or other pages.
This typically happens when adding more than one page to the report

Does this fact sound new for you?

Thanks,
g.

Hi @Gianluca_De_Pasquale ,

Could you provide stack version and your installation type (cloud, self-hosted), browser version?

Since it is a UX issue, it would be interesting to see some queries from your Canvas workpad.

So far it looks like kibana#114385 that was fixed in 7.14.3 / 7.15.1 and later versions.

Regards, Dima

Hi @dzmitry,

thanks for your response.

The version is the last : 8.5.0, self-hosted, with the browser Microsoft Edge Version 107.0.1418.56 (Official build) (64-bit)

I hope this is clear.

I cannot see my code , because in almost all pages I can not select the elements any more and so I cannot send you what is perfectly written in the expression editor, but it sounds like that (saved on txt file previuosly)

kibana
| selectFilter group="cellnamegroup2"
| essql query="SELECT cellname, vendor_name, region FROM table"
| table paginate=false font={font family="'Helvetica Neue', Helvetica, Arial, sans-serif" color={
if {any {getCell "vendor_name" | compare "eq" to='No'}} then={string "Red"} else={string "Green"}
} size=15 align="right" weight="normal" underline=false italic=false} showHeader=true
|var_set name="vendor"
value={kibana
| selectFilter group="cellnamegroup2" | essql query="SELECT top 1 case when vendor_name='Ericsson' then 'visible' else 'hidden' end as \"case\" FROM network5g_a"}
//value="hidden"
| render 
css={string ".canvasRenderEl{
  display: flex;
  align-items: center;
  padding: 10px;
  height: 50px;
  background-color: #e4e4e4;
  border:2px solid #ec0028;
border-radius: 20px;
visibility:visible;
}"}
containerStyle={containerStyle}

Thanks,
g

Moreover, it seems not dependent on browser, the same is on Google Chrome.

@Gianluca_De_Pasquale

We can't reproduce it locally on 8.5.0, so we need more information.

Can you check if there are any suspicious Kibana server logs?

because in almost all pages

How big is your workpad? Is it ok with you to share it with us? You can use Saved Objects Export functionality for it. Otherwise can use try to make a copy with a single page and see any difference.

Does your browser still function properly? Can you try to disable all the browser extensions if there are any and retest?
If you see any performance issues, can you do this: Record heap snapshots - Chrome Developers

I'm not sure how comfortable you are with sharing har file from Chrome after loaded workpad, that might also help to understand potential root cause.

Thank you, Dima

Hi @Dzmitry ,

created just in time an example with kibana sample e-commerce data. https://we.tl/t-VI5AacF6vm

The issue is on the first page, but probably the root cause in my opinion is in the code on the second page.

Many thanks and at your disposal ,

g.

Hi @Gianluca_De_Pasquale ,

No luck on our side to reproduce the issue with the saved object you have provided. Me and my colleague tested it independently and dropdown always remains accessible.
Just to clarify: is it only dropdown that got frozen or Kibana itself? Can you close workpad and use other Kibana plugins after frozen state?
I also wonder if you see any errors in browser Console (Chrome Dev Tools) when you work with workpad.

Regards, Dima

Hi @Dzmitry ,

many thanks for your work.

It is a really weird error since this error sometimes does actually not happen or I have to click more and more again on the dropdown list until it appears. Moreover, when it happens, also the other table visualization on the same page of the dropdown list turns out to be not selectable. Other around Kibana continue working in any case.

The error on console using Dev Tools is :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution. (1:286)

and below

^ A single error about an inline script not firing due to content security policy is expected! (bootstrap.js:42)

but I don t know whether it is related or not.

Many thanks again,
g.

Hi @Dzmitry ,
I dug in-depth and I found also those:

image

thanks,
g

Hi @Gianluca_De_Pasquale ,

Sorry for the late reply, CSP error shouldn't be an issue as far as I know. The css one states about problem in Safari and you are reporting bug on Chrome, right?

Could you attach the video as a last resort.

Regards, Dima

Hi @Dzmitry ,

it is a very weird and unpredictable error. Here the link for a short video WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free. As you will note, also the data table window on the same page turns out to be unselectable.

The very strange thing is that the dropdown does sometimes properly works, but sometimes (like in the video) not!

Thanks,
g