Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ES|QL] Create and edit visualizations from the dashboard #165928

Closed
stratoula opened this issue Sep 7, 2023 · 2 comments · Fixed by #171973
Closed

[ES|QL] Create and edit visualizations from the dashboard #165928

stratoula opened this issue Sep 7, 2023 · 2 comments · Fixed by #171973
Assignees
@stratoula
Labels
enhancement New value added to drive a business result epic Feature:ES|QL ES|QL related features in Kibana impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@stratoula
Copy link
Contributor

Describe the feature:
Atm you can add an ES|QL on a dashboard and edit the chart configuration but you can't edit the query.

image

We want to enhance the current flyout with query update and suggestions rendering.

Also we want to add a new chart type (ES|QL charts) in dashboard panels.
@stratoula stratoula added enhancement New value added to drive a business result Team:Visualizations Visualization editors, elastic-charts and infrastructure impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Feature:ES|QL ES|QL related features in Kibana labels Sep 7, 2023
@elasticmachine
Copy link
Contributor

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

@stratoula stratoula self-assigned this Sep 7, 2023
This was referenced Oct 27, 2023
Closed
Merged
kibanamachine added a commit to olegsu/kibana that referenced this issue Nov 23, 2023
@stratoula @kibanamachine
[ES|QL] Edits query in the dashboard (elastic#169911)
b55dae3 
## Summary

Part of elastic#165928
Closes elastic#144498

Allows the user to edit the ES|QL query from the dashboard. Also allows
the user to select one of the suggestions.

<img width="1886" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/9961c154-e414-4ce1-bff5-33ec5c30db69">
<img width="1883" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/6e8971d3-4a35-466f-804a-b8df58b09394">

### Testing
Navigate to Discover ES|QL mode and save a Lens chart to a dashboard.
Click the edit Visualization.

### Important notes
- We can very easily enable suggestions for the dataview panels but I am
going to do it on a follow up PR to keep this PR clean
- Creation is going to be added on a follow up PR
- Warnings are not rendered in the editor because I am using the limit 0
for performance reasons. We need to find another way to depict them via
the embeddable or store. It will be on a follow up PR.
- Errors are being displayed though. The user is not allowed to apply
the changes when an error occurs.
- Creating ES|QL charts from dashboard will happen to a follow up PR

### Running queries which don't return numeric fields
In these cases (i.e. `from logstash-* | keep clientip` we are returning
a table. I had to change the datatable logic for text based datasource
to not depend to isBucketed flag. This is something we had foreseen from
the [beginning of text based
languages](elastic#144498)

<img width="1879" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/ca4b66fd-560d-4c1e-881d-b173458a06ae">

### Running queries which return a lot of fields
For queries with many fields Lens is going to suggest a huge table
trying to add the fields to the different dimensions. This is not
something we want:
- not performant
- user possibly will start removing fields from the dimensions
- this table is unreadable

For this reason we decided to select the first 5 fields and then the
user can easily adjust the dimensions with the fields they want.

<img width="1215" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/07d7ee78-0085-41b1-98a0-a77eefbc0dcd">


### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@stratoula stratoula mentioned this issue Dec 1, 2023
Merged
6 tasks
@stratoula
Copy link
Contributor Author

@MichaelMarcialis for the add ES|QL panel I will need an icon. You have an icon on your mocks but I am not sure if it already exists. Can you help me with this? Thanx!

@MichaelMarcialis MichaelMarcialis mentioned this issue Dec 6, 2023
Merged
6 tasks
stratoula added a commit that referenced this issue Dec 20, 2023
@stratoula @kibanamachine
[ES|QL] Creates charts from the dashboard (#171973)
0503b82 
## Summary

Closes #165928

Enables the creation of ES|QL charts from the dashboard.


![esql](https://github.com/elastic/kibana/assets/17003240/86dd5594-d130-4fb7-b495-29ddbaee5e5b)

The implementation is using UIActions which I think is the correct way
to register a new panel action to a dashboard. Lens is responsible to
register the ESQL panel action and owns the code.

### How it works
- A new ES|QL panel has been added to the dashboard toolbar registered
by a ui action
- A new panel is been created with a default esql query `from
<default_dataview_index_pattern> | limit 10`
- This results to a datatable and opens the flyout
- If a user clicks cancel  then the embeddable is being removed

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@stratoula stratoula

Labels
enhancement New value added to drive a business result epic Feature:ES|QL ES|QL related features in Kibana impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[ES|QL] Creates charts from the dashboard stratoula/kibana
3 participants
@timductive @elasticmachine @stratoula