[ES|QL] Query History Design Review

[MichaelMarcialis]

ES|QL History Design Review

Hey, @stratoula. Thanks so much for putting together the ES|QL run query history PR! As it merged while I was out on PTO, I wanted to give it a design test drive. It works great! Well done, as usual.

For my review, I've put together some initial design notes below. Let me know if they make sense or if they warrant further discussion. In the mean time, I will attempt to quickly mock up these suggestions in Figma to give you have some visual reference for what I'm suggesting below. Stay tuned.

CCing @andreadelrio as well, in case she has any other issues to add.

General Experience

• The status icons are currently 12x12px. Can we increase them to the default 16x16px size?

• Can we add tooltips for the status icons to indicate if each query was run successfully, or with warnings, or with errors?

• The conditional presence of the accordion icon buttons causes any subsequent query text to be misaligned with any other row in the history table that doesn't have an accordion icon button. The hope was that the accordion buttons if/when present would occupy their own space in the column, allowing all text to remain vertically aligned. Would it be possible to implement such a change?

  

• It appears that the current accordion icon buttons for truncated queries do not retain the standard icon button square ratio. Would it be possible to fix it so the icon buttons retain their correct ratio?

  

• The conditional accordion icon buttons are using the primary blue color. Can we change this to the text gray color instead?

• Query text currently appears in the default EUI sans-serif font (Inter). Would it be possible to use our monospaced font for the query instead? Perhaps the code block component could be used here (for both stylistic and semantic purposes)?

• The line height for multi-line queries appears a bit excessive at the moment. Would it be possible to tighten up the line height to more closely align with what we use for our monospaced code blocks in EUI?

• Change the run button's playFilled icon to play.

• Change the copy-to-clipboard button's copy icon to copyClipboard.

• I believe it's now possible to change the text in the super date picker's update button. Per our previous slack conversation, can we change the "Update" text to be "Run"? The alternative "Refresh" text can stay as is.

Compact Experience

• The bottom border of the editor's footer no longer appears when recent queries are hidden.

  

• When recent queries are being shown, there appears to be a 2px border between editor footer and history table. This should be 1px.

  

• When recent queries are being shown, there appears to be a 2px border when scrolled to the bottom of the table (likely due to the table's last row bottom border). Would it be possible to remove the last table row's border to fix this?

  

• The "Last duration column" contents should be right aligned.

Expanded Experience

• The accordion toggle buttons for larger, truncated queries don't appear in expanded editor mode initial. They only appear when the user goes back to compact mode, then returns to expanded mode. At that point, the truncated queries will correctly show the toggle buttons. Can we fix this bug?

  

• The "Last duration column" contents should be right aligned.

Inline Experience

• The "Submit feedback" and "Show recent queries" icon buttons don't appear to have any accompanying tooltips. Would it be possible to add some to better match the wireframes?

  

• There appears to be a 2px border between editor footer and history table. This should be 1px.

  

• There appears to be a 2px border between the history table and visualization configuration. This should be 1px.

  

[elasticmachine]

Pinging @elastic/kibana-esql (Team:ESQL)

[stratoula]

@MichaelMarcialis thanx a lot for your review. I see comments that are irrelevant with the change query history though 🤔 Does it make sense to split them into another issue?

[stratoula]

Adding some comments:

As they do not currently function as a mode toggle, there is no need to conditionally disable either of the pipe formatting buttons. Their current behavior is to apply the desired formatting once, but not enforce it thereafter. Unless we plan to change this behavior, I think they should always be enabled to avoid confusion.

This is irrelevant with the query history changes. Let's create an ER for this if possible to discuss. I personally like that the change that is not going to be applied is disabled tbh

The table headers currently scroll out of view when scrolling the down the history table. This means the users may not have a point of reference as to what each column represents on longer history tables. Do we have some way to fix/freeze the table header row so that it always remains in view, even as the user scrolls down the table?

I would like to avoid adding more custom styles in this table which already has plenty of custom styles and it was very difficult to make it responsive 🙏

The "Time ran" column only shows absolute time currently. Can we change it to show a relative time up to a reasonable limit (ex. 24 hours) before switching over to absolute time to better match the wireframes?

This Time ran column was the most difficult think to implement tbh. Changing to relative adds more complexity. I will create an ER for this but not sure how easy it is to tackle this

• There are multiple comments about the editor look and feel that used to exist before the query history being landed, should be moved to another issue with the title Query editor design review

With a multi-line query populated, when transitioning from expanded to compact editor modes, I saw the string undefinedundefined appearing absolutely position in the line number area. I assume this is a bug. Possible to fix?

This is a bug, but has not been created by the query history. I will create a bug issue to track this,

It was suggested in the wireframes that we would make some (hopefully) slight layout adjustments to the interface when the ES|QL editor is in expanded mode. Would it be possible to include those changes, or is this a significant effort that needs to be discussed further? Suggestions included:

This is a big change, I can create an ER for this.

So with that being said I am going to clean up this issue a bit to enhancements, bug fix irrelevant with history, design review irrelevant with history. I will leave here only the comments that are related with the query history component.

[stratoula]

Based on my comments above I created the following issues:

• [ES|QL] Query history enhancements #180572 Things that need investigation on the query history component
• General design improvements [ES|QL] Design improvements on the editor #180571
• bug [ES|QL] Multiline query in expanded mode shows undefined #180570

I leave here the design review for query history, I will take care of it but due to the offsite it might not make it for 8.14.

[stratoula]

I am ticking the things that I have done in this PR #180579, it doesnt mean that they are merged :D

[MichaelMarcialis]

@stratoula: Thanks for the creating those separate issues. As promised in the original issue comment, I've put together some quick high-fidelity mockups as a visual reference to accompany this design review. In addition to the points mentioned above, these mockups also suggest the following key changes:

• Changed order of documentation and expand buttons so that documentation comes first.

• Change documentation icon from documentation to iInCircle.

• Changed feedback icon from discuss to editorComment.

• Used newly created icon for the "Show/Hide recent queries" button. I'll work to get this new icon added to EUI for you to use here. Stay tuned.

• Suggested removal of borders between table rows. Instead, we can rely on the zebra striped background color alone to visually separate the rows.

• The table rows were intended to alternate between gray and a slightly darker shade of gray, rather than the current gray and white background colors. My reasoning for this was to reserve the white background only for the query editor area for greatest prominence. I'm proposing that we alternate between gray (euiTheme.colors.lightestShade) and a slightly darker/shaded gray (3% darkened euiTheme.colors.lightestShade) for the zebra striping.

• Added a medium shadow to the editor when opened in compact mode.

• Increased the history panel's height in compact mode.

• Reduced flyout header/body/footer padding for inline editor to 8px.

• Changed the inline editor's run/refresh button to be icon only and utilize the default primary button styling.

Compact Experience

Expanded Experience

Inline Experience