#196996)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[DataUsage][Serverless] Data usage charts enhancements
(#196559)](#196559)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT
[{"author":{"name":"Ash","email":"1849116+ashokaditya@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-18T13:10:30Z","message":"[DataUsage][Serverless]
Data usage charts enhancements (#196559)\n\n## Summary\r\n\r\nfollow up
of:\r\n- /pull/195556\r\n\r\nAdds a lot of enhancements to
the datastream dropdown including:\r\n\r\n- [x] shows storage sizes on
the data stream dropdown\r\n- [x] preselects all data streams on the
first page load\r\n- [x] updates selected data streams to URL
params\r\n- [x] selects data streams based on URL load\r\n- [x] doesn't
allow deselecting all data streams\r\n- [x] cancels older API
requests\r\n\r\n### screen\r\n![Screenshot 2024-10-16 at 16
57\r\n43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72)\r\n\r\n###
clip\r\n\r\n![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e)\r\n\r\nrelated
PRs\r\n- /pull/193966 \r\n \r\n### Checklist\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-
[ ] [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- [ ] [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 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":"13e19cb645e3e3b037ea40809dfbfdaf93529169","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0"],"number":196559,"url":"https://github.com/elastic/kibana/pull/196559","mergeCommit":{"message":"[DataUsage][Serverless]
Data usage charts enhancements (#196559)\n\n## Summary\r\n\r\nfollow up
of:\r\n- /pull/195556\r\n\r\nAdds a lot of enhancements to
the datastream dropdown including:\r\n\r\n- [x] shows storage sizes on
the data stream dropdown\r\n- [x] preselects all data streams on the
first page load\r\n- [x] updates selected data streams to URL
params\r\n- [x] selects data streams based on URL load\r\n- [x] doesn't
allow deselecting all data streams\r\n- [x] cancels older API
requests\r\n\r\n### screen\r\n![Screenshot 2024-10-16 at 16
57\r\n43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72)\r\n\r\n###
clip\r\n\r\n![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e)\r\n\r\nrelated
PRs\r\n- /pull/193966 \r\n \r\n### Checklist\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-
[ ] [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- [ ] [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 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":"13e19cb645e3e3b037ea40809dfbfdaf93529169"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196559","number":196559,"mergeCommit":{"message":"[DataUsage][Serverless]
Data usage charts enhancements (#196559)\n\n## Summary\r\n\r\nfollow up
of:\r\n- /pull/195556\r\n\r\nAdds a lot of enhancements to
the datastream dropdown including:\r\n\r\n- [x] shows storage sizes on
the data stream dropdown\r\n- [x] preselects all data streams on the
first page load\r\n- [x] updates selected data streams to URL
params\r\n- [x] selects data streams based on URL load\r\n- [x] doesn't
allow deselecting all data streams\r\n- [x] cancels older API
requests\r\n\r\n### screen\r\n![Screenshot 2024-10-16 at 16
57\r\n43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72)\r\n\r\n###
clip\r\n\r\n![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e)\r\n\r\nrelated
PRs\r\n- /pull/193966 \r\n \r\n### Checklist\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-
[ ] [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- [ ] [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 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":"13e19cb645e3e3b037ea40809dfbfdaf93529169"}},{"branch":"8.16","label":"v8.16.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/196876","number":196876,"state":"MERGED","mergeCommit":{"sha":"79e7c86a094093c8fb40d9152ab84d6f773a3eea","message":"[8.16]
[DataUsage][Serverless] Data usage charts enhancements (#196559)
(#196876)\n\n# Backport\n\nThis will backport the following commits from
`main` to `8.16`:\n- [[DataUsage][Serverless] Data usage charts
enhancements\n(#196559)](https://github.com/elastic/kibana/pull/196559)\n\n<!---
Backport version: 9.4.3 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT\n[{\"author\":{\"name\":\"Ash\",\"email\":\"1849116+ashokaditya@users.noreply.github.com\"},\"sourceCommit\":{\"committedDate\":\"2024-10-18T13:10:30Z\",\"message\":\"[DataUsage][Serverless]\nData
usage charts enhancements (#196559)\\n\\n## Summary\\r\\n\\r\\nfollow
up\nof:\\r\\n- /pull/195556\\r\\n\\r\\nAdds a lot of
enhancements to\nthe datastream dropdown including:\\r\\n\\r\\n- [x]
shows storage sizes on\nthe data stream dropdown\\r\\n- [x] preselects
all data streams on the\nfirst page load\\r\\n- [x] updates selected
data streams to URL\nparams\\r\\n- [x] selects data streams based on URL
load\\r\\n- [x] doesn't\nallow deselecting all data streams\\r\\n- [x]
cancels older API\nrequests\\r\\n\\r\\n### screen\\r\\n![Screenshot
2024-10-16 at
16\n57\\r\\n43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72)\\r\\n\\r\\n###\nclip\\r\\n\\r\\n![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e)\\r\\n\\r\\nrelated\nPRs\\r\\n-
/pull/193966 \\r\\n \\r\\n### Checklist\\r\\n- [x]
Any\ntext added follows
[EUI's\nwriting\\r\\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),\nuses\\r\\nsentence
case text and
includes\n[i18n\\r\\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\\r\\n-\n[
] [Unit
or\nfunctional\\r\\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\\r\\nwere\nupdated
or added to match the most common scenarios\\r\\n- [ ]
[Flaky\nTest\\r\\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)\nwas\\r\\nused
on any tests changed\\r\\n- [x] Any UI touched in this PR does\nnot
create any new axe failures\\r\\n(run axe
in\nbrowser:\\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-\n[x]
This renders correctly on smaller devices using
a\nresponsive\\r\\nlayout. (You can test this
[in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x]
This was checked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nkibanamachine\n<42973632+kibanamachine@users.noreply.github.com>\",\"sha\":\"13e19cb645e3e3b037ea40809dfbfdaf93529169\",\"branchLabelMapping\":{\"^v9.0.0$\":\"main\",\"^v8.17.0$\":\"8.x\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"release_note:skip\",\"v9.0.0\",\"v8.16.0\",\"backport:version\"],\"title\":\"[DataUsage][Serverless]\nData
usage
charts\nenhancements\",\"number\":196559,\"url\":\"https://github.com/elastic/kibana/pull/196559\",\"mergeCommit\":{\"message\":\"[DataUsage][Serverless]\nData
usage charts enhancements (#196559)\\n\\n## Summary\\r\\n\\r\\nfollow
up\nof:\\r\\n- /pull/195556\\r\\n\\r\\nAdds a lot of
enhancements to\nthe datastream dropdown including:\\r\\n\\r\\n- [x]
shows storage sizes on\nthe data stream dropdown\\r\\n- [x] preselects
all data streams on the\nfirst page load\\r\\n- [x] updates selected
data streams to URL\nparams\\r\\n- [x] selects data streams based on URL
load\\r\\n- [x] doesn't\nallow deselecting all data streams\\r\\n- [x]
cancels older API\nrequests\\r\\n\\r\\n### screen\\r\\n![Screenshot
2024-10-16 at
16\n57\\r\\n43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72)\\r\\n\\r\\n###\nclip\\r\\n\\r\\n![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e)\\r\\n\\r\\nrelated\nPRs\\r\\n-
/pull/193966 \\r\\n \\r\\n### Checklist\\r\\n- [x]
Any\ntext added follows
[EUI's\nwriting\\r\\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),\nuses\\r\\nsentence
case text and
includes\n[i18n\\r\\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\\r\\n-\n[
] [Unit
or\nfunctional\\r\\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\\r\\nwere\nupdated
or added to match the most common scenarios\\r\\n- [ ]
[Flaky\nTest\\r\\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)\nwas\\r\\nused
on any tests changed\\r\\n- [x] Any UI touched in this PR does\nnot
create any new axe failures\\r\\n(run axe
in\nbrowser:\\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-\n[x]
This renders correctly on smaller devices using
a\nresponsive\\r\\nlayout. (You can test this
[in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x]
This was checked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nkibanamachine\n<42973632+kibanamachine@users.noreply.github.com>\",\"sha\":\"13e19cb645e3e3b037ea40809dfbfdaf93529169\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[\"8.16\"],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v9.0.0\",\"branchLabelMappingKey\":\"^v9.0.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/196559\",\"number\":196559,\"mergeCommit\":{\"message\":\"[DataUsage][Serverless]\nData
usage charts enhancements (#196559)\\n\\n## Summary\\r\\n\\r\\nfollow
up\nof:\\r\\n- /pull/195556\\r\\n\\r\\nAdds a lot of
enhancements to\nthe datastream dropdown including:\\r\\n\\r\\n- [x]
shows storage sizes on\nthe data stream dropdown\\r\\n- [x] preselects
all data streams on the\nfirst page load\\r\\n- [x] updates selected
data streams to URL\nparams\\r\\n- [x] selects data streams based on URL
load\\r\\n- [x] doesn't\nallow deselecting all data streams\\r\\n- [x]
cancels older API\nrequests\\r\\n\\r\\n### screen\\r\\n![Screenshot
2024-10-16 at
16\n57\\r\\n43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72)\\r\\n\\r\\n###\nclip\\r\\n\\r\\n![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e)\\r\\n\\r\\nrelated\nPRs\\r\\n-
/pull/193966 \\r\\n \\r\\n### Checklist\\r\\n- [x]
Any\ntext added follows
[EUI's\nwriting\\r\\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),\nuses\\r\\nsentence
case text and
includes\n[i18n\\r\\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\\r\\n-\n[
] [Unit
or\nfunctional\\r\\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\\r\\nwere\nupdated
or added to match the most common scenarios\\r\\n- [ ]
[Flaky\nTest\\r\\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)\nwas\\r\\nused
on any tests changed\\r\\n- [x] Any UI touched in this PR does\nnot
create any new axe failures\\r\\n(run axe
in\nbrowser:\\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-\n[x]
This renders correctly on smaller devices using
a\nresponsive\\r\\nlayout. (You can test this
[in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x]
This was checked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nkibanamachine\n<42973632+kibanamachine@users.noreply.github.com>\",\"sha\":\"13e19cb645e3e3b037ea40809dfbfdaf93529169\"}},{\"branch\":\"8.16\",\"label\":\"v8.16.0\",\"branchLabelMappingKey\":\"^v(\\\\d+).(\\\\d+).\\\\d+$\",\"isSourceBranch\":false,\"state\":\"NOT_CREATED\"}]}]\nBACKPORT-->\n\nCo-authored-by:
Ash
<1849116+ashokaditya@users.noreply.github.com>"}},{"branch":"8.x","label":"v8.17.0","labelRegex":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->