elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.62k stars 8.22k forks source link

KQL Parse error look incorrect due to text wrapping in toast notification #49377

Open Bargs opened 5 years ago

Bargs commented 5 years ago

Kibana version: master, haven't checked if it was introduced earlier

KQL parse errors were originally developed to be displayed in the old notification area at the top of the application. This was important because the arrow pointing at the location of the error depended on the text not wrapping. At some point those errors were updated to be displayed in a toast, and now they look broken:

image

Per the toast guidelines in the EUI docs we should probably display an abbreviated error message in the toast with a button to display the full message including the arrow in a larger modal.

elasticmachine commented 5 years ago

Pinging @elastic/kibana-app (Team:KibanaApp)

elasticmachine commented 4 years ago

Pinging @elastic/kibana-app-arch (Team:AppArch)

flash1293 commented 4 years ago

I think I fixed that as part of a different PR, will check and report back.

lukasolson commented 2 years ago

Just checked, this is still an issue.

elasticmachine commented 1 year ago

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

kertal commented 1 year ago

Works as expected in Discover

Bildschirmfoto 2023-04-26 um 11 19 16

Seems it could be improved in Lens

Bildschirmfoto 2023-04-26 um 11 21 14

Seems it could need improvement on a Dashboard (Lens and saved searches displayed here)

Bildschirmfoto 2023-04-26 um 11 25 01
kertal commented 1 year ago

I checked if it's an easy fix, but I think just enabling newlines in the markdown component doesn't make this error message More useful

Image

Also the used Markdown renderer is marked to be deprecated:

/* @deprecated use Markdown from @kbn/shared-ux-markdown /

Removing from @elastic/kibana-data-discovery ownership since it needs work on the embeddable rendering, that's not just a little fix

elasticmachine commented 1 year ago

Pinging @elastic/kibana-presentation (Team:Presentation)

elasticmachine commented 1 year ago

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

kertal commented 1 year ago

removing Feature:Search & Feature:KQL tags, because it's about how multi line errors are rendered

davismcphee commented 1 year ago

fyi, this is how we make it work in the Discover error:

white-space: break-spaces;
font-family: ${euiTheme.font.familyCode};
stratoula commented 1 year ago

@kertal can you help me with this? I see this in main, it should be displayed differently?

image
kertal commented 1 year ago

@stratoula I can't see if there's a newline in this example ... like here

Since the text align is left, and the newline is rendered, the last part of the error, this ascii arrow makes sense. it wouldn't if it was als rendered without newlines, and centered

davismcphee commented 1 year ago

@stratoula @kertal It's also necessary to use font-family: ${euiTheme.font.familyCode}; on the text to enable a monospace font, or the arrow still won't line up.

Misaligned //()dfdsfsdf --^

Aligned

//()dfdsfsdf
--^
ThomThomson commented 1 year ago

I'm not sure that this is an issue that we could fix on the Dashboard side. Aren't the errors there are surfaced on the Dashboard arising from the Lens / Saved search Embeddables?

stratoula commented 1 year ago

@ThomThomson have you checked maps?

ThomThomson commented 1 year ago

Ah hah, good call! I will swap this from feature:dashboard to feature:maps. Should be an easy fix

Screen Shot 2023-05-10 at 9 03 53 AM
davismcphee commented 1 year ago

@ThomThomson This might not be related to Dashboard directly, but it does seem to be related to embeddables. The issue isn't with the errors themselves, it's the component displaying them which seems to be src/plugins/embeddable/public/lib/panel/embeddable_panel_error.tsx. If that component used the CSS linked in my comment, it should fix the issue on the embeddables side.