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.

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

[ES|QL] Adds the ability to breakdown the histogram in Discover #193820

Merged
merged 20 commits into from
Oct 1, 2024

Conversation

stratoula
Copy link
Contributor

@stratoula stratoula commented Sep 24, 2024

Summary

Part of #186369

It enables the users to breakdown the histogram visualization in Discover.

meow

Checklist

@stratoula stratoula changed the title Breakdown esql discover [ES|QL] Adds the ability to breakdown the histogram in Discover Sep 24, 2024
@kibanamachine
Copy link
Contributor

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#7010

[✅] test/functional/apps/discover/esql/config.ts: 25/25 tests passed.

see run history

@stratoula stratoula added v9.0.0 v8.16.0 Feature:Discover Discover Application Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph) es-lint Feature:ES|QL ES|QL related features in Kibana backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) release_note:feature Makes this part of the condensed release notes and removed es-lint labels Sep 25, 2024
@stratoula stratoula marked this pull request as ready for review September 25, 2024 11:02
@stratoula stratoula requested review from a team as code owners September 25, 2024 11:02
@elasticmachine
Copy link
Contributor

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

@jughosta
Copy link
Contributor

We should make sure to unskip functional tests before merging the PR #184600

@stratoula
Copy link
Contributor Author

@jughosta who is on it?

@jughosta
Copy link
Contributor

The test should be enabled now. Hopefully, it won't get skipped again before we merge.

@stratoula
Copy link
Contributor Author

Thanx Jul 🙌 I will update tomorrow and hopefully it will pass to my PR

Copy link
Member

@kertal kertal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work @stratoula!
Some initial testing feedback, it seems filter out is creating the same filter like "Filter for"
Discover_-_Elastic

While testing with a totally nuts field to breakdown by, edge case testing, I was wondering, shouldn't we limit the values displayed in the histogram? Or maybe don't render it in this case, since it doesn't make much sense?

You can test it here: https://kertal-pr-193820-breakdown-esql-discover.kbndev.co/app/r/s/YngOs
Bildschirmfoto 2024-09-27 um 17 41 50

@kertal kertal requested a review from a team September 27, 2024 15:57
@stratoula
Copy link
Contributor Author

stratoula commented Sep 30, 2024

@kertal nice catch about the filter out but unfortunately it happens in main too and is irrelevant with this PR. I will create an issue but you can check in main this scenario

image

Updated: Here is the bug issue #194373

About the limit this is not very easy (at least from the ES|QL query) due to the double breakdkown (time and field) and I can't set a limit size in the legend either (if I am not mistaken). So I am not sure how we could tackle it tbh. 🤔

The maximum number of values will be 1000 (taken under consideration that the query will return 1000 rows with different values so I think we are ok. (Also it feels like an edge case?)

Copy link
Contributor

@jughosta jughosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great! Left a couple of suggestions.

return esqlColumns.map((column) => ({
name: column.name,
displayName: column.name,
type: column.meta?.type,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use convertDatatableColumnToDataViewFieldSpec here too for consistency in how types are treated and map as new DataViewField(convertDatatableColumnToDataViewFieldSpec(column))

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might also want to filter out unsupported field types with fieldSupportsBreakdown for ES|QL case too.

Copy link
Contributor Author

@stratoula stratoula Oct 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice suggestion, implemented here 9e731df

Note: I don't filter out as we do with the dataview mode as they are not the same operations. Here you can group by with all the filed types. But I added a filter out for unsupported fields as these are not supported by the BY operator e757a54

Comment on lines 93 to 102
if (esqlColumns) {
const breakdownColumn = esqlColumns?.find((column) => column.name === chosenOption?.value);
breakdownField = breakdownColumn
? new DataViewField(convertDatatableColumnToDataViewFieldSpec(breakdownColumn))
: undefined;
} else {
breakdownField = chosenOption?.value
? dataView.fields.find((currentField) => currentField.name === chosenOption.value)
: undefined;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could simplify this: remove if case and go through fields array instead (considering it consists of data view fields or derived fields with new DataViewField(convertDatatableColumnToDataViewFieldSpec(column)))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure! Done here 9e731df

}): Suggestion | undefined => {
const { dataView, query, timeRange } = queryParams;
const { dataView, query, timeRange, columns } = queryParams;
const breakdownColumn = columns?.find((column) => column.name === breakdownField?.name);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const breakdownColumn = columns?.find((column) => column.name === breakdownField?.name);
const breakdownColumn = breakdownField?.name ? columns?.find((column) => column.name === breakdownField.name) : undefined;

^^ so we don't iterate through all the columns unless there is a breakdown field.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 9e731df

}): string => {
const queryInterval = interval ?? computeInterval(timeRange, this.services.data);
const language = getAggregateQueryMode(query);
const safeQuery = removeDropCommandsFromESQLQuery(query[language]);
const breakdown = breakdownColumn
? `, ${breakdownColumn.name} | sort ${breakdownColumn.name} asc`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall we escape column name?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should, nice catch. Done here 9e731df

const currentQuery =
suggestionType === UnifiedHistogramSuggestionType.histogramForESQL && isTextBased && timeRange
? {
esql: this.getESQLHistogramQuery({ dataView, query, timeRange }),
esql: this.getESQLHistogramQuery({ dataView, query, timeRange, breakdownColumn }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
esql: this.getESQLHistogramQuery({ dataView, query, timeRange, breakdownColumn }),
esql: this.getESQLHistogramQuery({ dataView, query, timeRange, breakdownColumn: breakdownField?.name ? columns?.find((column) => column.name === breakdownField.name) : undefined}),

Same, iterate only if necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 9e731df

@stratoula
Copy link
Contributor Author

/ci

@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
unifiedHistogram 36 37 +1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
lens 1.5MB 1.5MB +88.0B
unifiedHistogram 67.9KB 69.4KB +1.5KB
total +1.6KB
Unknown metric groups

API count

id before after diff
unifiedHistogram 71 72 +1

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @stratoula

Copy link
Contributor

@jughosta jughosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks! 👍

@stratoula stratoula merged commit dfe00f2 into elastic:main Oct 1, 2024
22 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11122563398

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 1, 2024
…tic#193820)

## Summary

Part of elastic#186369

It enables the users to breakdown the histogram visualization in
Discover.

![meow](https://github.com/user-attachments/assets/d5fdaa41-0a69-4caf-9da2-1221dcfd5ce2)

### Checklist

- [x] 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)
- [x] [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
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] 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))
- [x] 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))
- [x] 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>
(cherry picked from commit dfe00f2)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Oct 1, 2024
…#193820) (#194534)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ES|QL] Adds the ability to breakdown the histogram in Discover
(#193820)](#193820)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Stratoula
Kalafateli","email":"efstratia.kalafateli@elastic.co"},"sourceCommit":{"committedDate":"2024-10-01T09:29:32Z","message":"[ES|QL]
Adds the ability to breakdown the histogram in Discover (#193820)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/186369\r\n\r\nIt enables the
users to breakdown the histogram visualization
in\r\nDiscover.\r\n\r\n\r\n![meow](https://github.com/user-attachments/assets/d5fdaa41-0a69-4caf-9da2-1221dcfd5ce2)\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"dfe00f20dd3d8d051b5682f7abdc75df2464e3fd","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","v9.0.0","release_note:feature","Team:DataDiscovery","backport:prev-minor","Feature:ES|QL","v8.16.0"],"title":"[ES|QL]
Adds the ability to breakdown the histogram in
Discover","number":193820,"url":"https://github.com/elastic/kibana/pull/193820","mergeCommit":{"message":"[ES|QL]
Adds the ability to breakdown the histogram in Discover (#193820)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/186369\r\n\r\nIt enables the
users to breakdown the histogram visualization
in\r\nDiscover.\r\n\r\n\r\n![meow](https://github.com/user-attachments/assets/d5fdaa41-0a69-4caf-9da2-1221dcfd5ce2)\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"dfe00f20dd3d8d051b5682f7abdc75df2464e3fd"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193820","number":193820,"mergeCommit":{"message":"[ES|QL]
Adds the ability to breakdown the histogram in Discover (#193820)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/186369\r\n\r\nIt enables the
users to breakdown the histogram visualization
in\r\nDiscover.\r\n\r\n\r\n![meow](https://github.com/user-attachments/assets/d5fdaa41-0a69-4caf-9da2-1221dcfd5ce2)\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"dfe00f20dd3d8d051b5682f7abdc75df2464e3fd"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
seanrathier pushed a commit to seanrathier/kibana that referenced this pull request Oct 2, 2024
…tic#193820)

## Summary

Part of elastic#186369

It enables the users to breakdown the histogram visualization in
Discover.


![meow](https://github.com/user-attachments/assets/d5fdaa41-0a69-4caf-9da2-1221dcfd5ce2)


### Checklist

- [x] 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)
- [x] [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
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] 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))
- [x] 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))
- [x] 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
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Feature:Discover Discover Application Feature:ES|QL ES|QL related features in Kibana release_note:feature Makes this part of the condensed release notes Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph) v8.16.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants