[Obs ai assistant][ESQL] Visualizes a query #174677

stratoula · 2024-01-11T11:12:15Z

Summary

This PR

Adds a new CTA (Visualize query) on the generated ES|QL queries

Clicking the CTA, requests from Lens to suggest a chart based on the given query

The embeddable has 2 actions:

Edit the embeddable
Save the embeddable on a dashboard

Editing the embeddable opens a push flyout where the user can

Change the query
Change the chart configuration (colors, dimensions etc)
Click one of the chart suggestions

With clicking the apply button, the new chart configuration is saved to the conversation
User can save the ES|QL chart on a dashboard. From there they can continue editing the chart (we also display the same inline editing flyout giving a seamless experience)

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests 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)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…fix'

stratoula · 2024-01-17T09:13:40Z

packages/kbn-visualization-utils/src/get_lens_attributes.ts

+import type { AggregateQuery, Query, Filter } from '@kbn/es-query';
+import type { Suggestion } from './types';
+
+export const getLensAttributesFromSuggestion = ({


ℹ️ I can reuse it in Lens but I will do it on a follow up PR. I moved it on the package because othwerise it creates circular dependencies.

stratoula · 2024-01-17T09:15:40Z

packages/kbn-visualization-utils/src/types.ts

+  | 'reorder'
+  | 'layers';
+
+export interface Suggestion<T = unknown, V = unknown> {


ℹ️ Same as above. This can be reused in Lens and unified-histogram but I will do it on a follow up PR

stratoula · 2024-01-17T09:16:29Z

packages/kbn-field-types/src/kbn_field_types.ts

@@ -49,3 +48,18 @@ export const castEsToKbnFieldTypeName = (esType: ES_FIELD_TYPES | string): KBN_F
 */
 export const getFilterableKbnTypeNames = (): string[] =>
  registeredKbnTypes.filter((type) => type.filterable).map((type) => type.name);
+
+export function normalizeType(type: string) {


ℹ️ I just moved this helper here as we are duplicating this code in many places.

It seems like this function takes an Elasticsearch field type and translates it to a Kibana field type? If so, perhaps we could call this function something like

esFieldTypeToKibanaFieldType

normalizeType could mean practically anything. (I know you didn't name this function BTW—still thought the comment was worth making 🤷‍♂️ )

Yeah this is fair, I just moved it and didnt think to rename. I addressed it here e843fec

…fix'

…ry/index.ts Co-authored-by: Milton Hultgren <miltonhultgren@gmail.com>

…stratoula/kibana into obs-ai-assistant-visualize-esql

…t-visualize-esql

CoenWarmer · 2024-01-30T14:36:21Z

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx

-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlyout>
+    <MultiPaneFlyout


@miltonhultgren Your PR should take precedence over this implementation

@miltonhultgren I've integrated your work in this PR. Thank you, it helped a lot!

No no, thank you! 🙌🏼

CoenWarmer · 2024-02-02T17:04:54Z

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx

@@ -104,6 +106,7 @@ export function ChatBody({
  knowledgeBase: UseKnowledgeBaseResult;
  currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'>;
  startedFrom?: StartedFrom;
+  chatFlyoutSecondSlotHandler?: ChatFlyoutSecondSlotHandler;


I believe it's good enough for now. Lets merge it and see if we can improve it later. An Eui solution would be preferable.

…fix'

…stratoula/kibana into obs-ai-assistant-visualize-esql

stratoula · 2024-02-05T07:54:20Z

Thanx for integrating the conversations list Coen! Some things have broken now though and I think we can't merge it without fixing them first:

Clicking on the palettes opens a new dimension panel which is broken
Something goes wrong with the styling of the editing flyout when is rendered in the conversations app

It should look exactly as it looks when it is opened from the flyout. No padding, entire header is white

In the conversations app the palette configuration renders correctly but if you check the header you will see that is cut off

The width is much smaller than the one it goes before the changes. I am fine with that if this is what you want, I am just mentioning the difference here. (check my comment below to see the width difference)

stratoula · 2024-02-05T08:06:02Z

This is how it looked before 4547567

Conversation app

Assistant on a flyout

…stratoula/kibana into obs-ai-assistant-visualize-esql

kibana-ci · 2024-02-05T15:54:28Z

💛 Build succeeded, but was flaky

Failed CI Steps

FTR Configs #45

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`aiops`	429	430	+1
`apm`	1607	1608	+1
`charts`	121	122	+1
`dataVisualizer`	610	611	+1
`discover`	709	710	+1
`eventAnnotationListing`	465	466	+1
`expressionHeatmap`	155	156	+1
`expressionMetricVis`	96	97	+1
`expressionPartitionVis`	170	171	+1
`expressionTagcloud`	144	145	+1
`expressionXY`	230	231	+1
`graph`	260	261	+1
`lens`	1252	1253	+1
`logsExplorer`	664	665	+1
`ml`	1895	1896	+1
`observabilityAIAssistant`	225	239	+14
`securitySolution`	4951	4952	+1
`stackAlerts`	132	133	+1
`textBasedLanguages`	52	53	+1
`visTypeTimelion`	48	49	+1
`visTypeTimeseries`	382	383	+1
total			+34

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
`@kbn/field-types`	16	18	+2
`@kbn/visualization-utils`	3	9	+6
`lens`	560	561	+1
total			+9

Async chunks

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

id	before	after	diff
`apm`	3.2MB	3.2MB	-23.0B
`lens`	1.4MB	1.4MB	+120.0B
`lists`	137.6KB	137.6KB	-19.0B
`observabilityAIAssistant`	151.0KB	161.5KB	+10.5KB
total			+10.6KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/visualization-utils`	0	1	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`data`	415.6KB	415.6KB	+21.0B
`observabilityAIAssistant`	14.5KB	14.5KB	+58.0B
total			+79.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/field-types`	20	22	+2
`@kbn/visualization-utils`	4	10	+6
`lens`	661	662	+1
total			+9

async chunk count

id	before	after	diff
`observabilityAIAssistant`	6	7	+1

ESLint disabled line counts

id	before	after	diff
`observabilityAIAssistant`	8	9	+1

Total ESLint disabled count

id	before	after	diff
`observabilityAIAssistant`	10	11	+1

History

💚 Build #191243 succeeded d79102c
💚 Build #191211 succeeded 98fc8da
💔 Build #191210 failed dac6998
💔 Build #191156 failed d76002e
💔 Build #191143 failed 029a531
💛 Build #190480 was flaky 4547567

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

## Summary This PR 1. Adds a new CTA (Visualize query) on the generated ES|QL queries <img width="965" alt="image" src="https://github.com/elastic/kibana/assets/17003240/3ec3176a-23e1-4329-9d27-a01c6ff8aa92"> 2. Clicking the CTA, requests from Lens to suggest a chart based on the given query <img width="955" alt="image" src="https://github.com/elastic/kibana/assets/17003240/466da7d8-f6c4-4c46-9b51-a7fad5e31e55"> 3. The embeddable has 2 actions: - Edit the embeddable - Save the embeddable on a dashboard 4. Editing the embeddable opens a push flyout where the user can - Change the query - Change the chart configuration (colors, dimensions etc) - Click one of the chart suggestions ![ai_assistant](https://github.com/elastic/kibana/assets/17003240/11fb6a55-60a6-491c-9540-060bebdfaa4a) 5. With clicking the apply button, the new chart configuration is saved to the conversation 6. User can save the ES|QL chart on a dashboard. From there they can continue editing the chart (we also display the same inline editing flyout giving a seamless experience) ### Checklist Delete any items that are not applicable to this PR. - [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] 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> Co-authored-by: Dario Gieselaar <dario.gieselaar@elastic.co> Co-authored-by: Milton Hultgren <miltonhultgren@gmail.com> Co-authored-by: Coen Warmer <coen.warmer@gmail.com>

@timestamp

) - Resolves #167887 ## Summary On Discover page user can see a visualization for data view and ES|QL modes. For ES|QL mode it's also allowed to customize the visualization. This PR allows to save such customization together with a saved search. In more details, various types of Lens visualization can be shown on Discover page: - If in the default (data view) mode, Unified Histogram shows a "formBased" histogram (`type: UnifiedHistogramSuggestionType.histogramForDataView` in this PR) - If in the ES|QL mode, 2 scenarios are possible (so far only these are customizable): - If Lens has suggestions for the current query, Unified Histogram shows one of them (`type: UnifiedHistogramSuggestionType.lensSuggestion` in this PR) Example query: `from kibana_sample_data_logs | stats avg(bytes) by message.keyword` - If Lens suggestion list is empty, Unified Histogram shows a "textBased" histogram (`type: UnifiedHistogramSuggestionType.histogramForESQL` in this PR). Example query: `from kibana_sample_data_logs | limit 10` The main flow is that Unified Histogram first picks a suggestion (one of `UnifiedHistogramSuggestionType` type), then calculates lens attributes which are necessary to build Lens embeddable. With a saved search we are saving those calculated lens attributes under `savedSearch.visContext`. For handling this logic, I refactored `useLensSuggestion`, `getLensAttributes` into `LensVisService`. Restoring a saved customization adds complexity to the flow as it should pick now not just any available suggestion but the suggestion which matches to the previously saved lens attributes. Changes to the current query, time range, time field etc can make the current vis context incompatible and we have to drop the vis customization. This PR already includes this logic of invalidating the stored lens attributes if they are not compatible any more. New vis context will override the previous one when user presses Save for the current search. Until then, we try to restore the customization from the previously saved vis context (for example when the query changes back to the compatible one). What can invalidate the saved vis context and drop the user's customization: - data view id - data view time field name - query/filters - time range if it has a different time interval - text based columns affect what lens suggestions are available Flow of creating a new search: ![1](https://github.com/elastic/kibana/assets/1415710/9274d895-cedb-454a-9a9d-3b0cf600d801) Flow of editing a saved search: ![2](https://github.com/elastic/kibana/assets/1415710/086ce4a0-f679-4d96-892b-631bcfee7ee3) <details> <summary>Previous details</summary> - Previous approach #174373 (saving current suggestion instead of lens attributes) - Previous approach #174783 (saving lens attributes but it's based on existing hooks) But I was stuck with how to make "Unsaved changes" badge work well when user tries to revert changes. For testing in ES|QL mode I use `from kibana_sample_data_logs | limit 10` as query, customize color of a lens histogram, and save it with a saved search. Next I check 2 cases: 1. edit query limit `from kibana_sample_data_logs | limit 100`, see that vis customization gets reset which is expected, press "Revert changes" in the "Unsaved changes" badge => notice that reset did not work 2. edit only histogram color, press "Revert changes" in the "Unsaved changes" badge => notice that reset did not work Here are some nuances with the state management I am seeing which together do not allow to successfully revert unsaved changes: - For ES|QL histogram lens attributes include a modified query `from kibana_sample_data_logs | limit 10 | EVAL timestamp=DATE_TRUNC(30 second, @timestamp) | stats results = count(*) by timestamp | rename timestamp as "@timestamp every 30 second"` which means that not only changes to the original query but also a different time interval invalidates the saved lens attributes. - In ES|QL mode, `query` prop update is delayed for `UnifiedHistogramContainer` component until Discover finishes the documents fetch https://github.com/elastic/kibana/blob/fc2ec957fe78900967da26c80817aea8a0bd2c65/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts#L346 which means that Discover should make a request on revert changes. And It's not happening for (2) as it does not make sense for Discover to trigger refetch if only `visContext` changes so we should find another way. With (1) there is another problem that Discover `visContext` state gets hijacked by lens attributes invalidation logic (as query is not sync yet to UnifiedHistogram) before fetch is completed or get [a chance to be fired](https://github.com/elastic/kibana/blob/6038f92b1fcaeedf635a0eab68fd9cdadd1103d3/src/plugins/discover/public/application/main/hooks/utils/build_state_subscribe.ts#L51-L54). I tried delaying `externalVisContext` prop update too (to keep in sync with `query` update) but it does not help https://github.com/elastic/kibana/blob/fc2ec957fe78900967da26c80817aea8a0bd2c65/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts#L437 - Unified Histogram should signal to Discover to start a refetch when current suggestion changes https://github.com/elastic/kibana/blob/fc2ec957fe78900967da26c80817aea8a0bd2c65/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts#L289 - for some reason this logic is required for "Revert changes" to work as it triggers the refetch. I would expect Discover on its own to notice the change in query and refetch data but it does not seem to be the case. </details> <details> <summary>Other challenges</summary> - [ ] Since we are starting to save lens attributes inside a saved search object (similar to how Dashboard saves lens vis by value), we should integrate Lens migrations into saved search migrations logic. I made a quick PoC how it could look like here jughosta@4529711 This showed that adding Lens plugin as a dependency to saved search plugin causes lots of circular deps in Kibana. To resolve that I am suggesting to spit saved search plugin into 2 plugins #174939 - not the best solution but it seems impossible to split lens plugins instead. Updates here: - [x] revert the code regarding migrations and saved search plugin split - [x] create a github issue to handle client side migrations once their API is available #179151 - [x] Discover syncs app state with URL which means that the new `visContext` (large lens attributes object) ends up in the URL too. We should exclude `visContext` from URL sync as it can make the URL too long. Updates here: we are not using appState for this any more - [x] Changes from #171081 would need to be refactored and integrated into the new `LensVisService`. - [x] Refactor after #177790 - [x] Handle a case when no chart is available for current ES|QL query - [ ] For ES|QL histogram lens attributes include a modified query `from kibana_sample_data_logs | limit 10 | EVAL timestamp=DATE_TRUNC(30 second, @timestamp) | stats results = count(*) by timestamp | rename timestamp as "@timestamp every 30 second"` which means that not only changes to the original query but also a different time range can reset the customization of lens vis as it gets a different time interval based on current time range - New update from Stratoula: - [ ] would it help to persist response of `onApplyCb` instead of lens attributes? <= the shape does not seem to be different and it works as it is so I'm keeping lens attributes - [x] use new `getLensAttributes` from #174677 </details> 10x flaky test https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5578 ### Checklist - [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] 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> Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

[Obs ai assistant][ESQL] Visualizes a query

0548517

stratoula mentioned this pull request Jan 11, 2024

[Obs ai assistant][ESQL] Visualizes a query #173076

Closed

kibanamachine and others added 13 commits January 11, 2024 11:24

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

9132a88

…fix'

Make CI happy again

a60baff

Merge branch 'main' into obs-ai-assistant-visualize-esql

e90f370

Happy CI, happy life

e59aa6c

Merge branch 'main' into obs-ai-assistant-visualize-esql

ccbc3ae

Make the assistant flyout work with the inline editing component

09ff297

Fixes jest test

b6a37f1

Merge branch 'main' into obs-ai-assistant-visualize-esql

08bd3f4

Merge branch 'main' into obs-ai-assistant-visualize-esql

bba1b4e

Add unit test in getAttributed function

df0c56a

Minor tweaks

2016b6a

Cleanup

e7a171a

More cleanup

704b8f5

stratoula commented Jan 17, 2024

View reviewed changes

kibanamachine and others added 5 commits January 17, 2024 09:19

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

2bb0c06

…fix'

Write some tests

5628842

Simplifications

5e71490

Merge branch 'main' into obs-ai-assistant-visualize-esql

60a1d40

Fix CI

1b4e2da

stratoula marked this pull request as ready for review January 17, 2024 16:01

stratoula requested review from a team as code owners January 17, 2024 16:01

stratoula added release_note:enhancement backport:skip This commit does not require backporting labels Jan 17, 2024

stratoula and others added 2 commits January 31, 2024 14:53

Update x-pack/plugins/observability_ai_assistant/server/functions/que…

2c5bd3b

…ry/index.ts Co-authored-by: Milton Hultgren <miltonhultgren@gmail.com>

Merge branch 'main' into obs-ai-assistant-visualize-esql

4547567

elastic deleted a comment from kibana-ci Jan 31, 2024

CoenWarmer added 3 commits February 2, 2024 17:49

Integrate Conversation List and Edit Visualisation

7894fbd

Merge branch 'obs-ai-assistant-visualize-esql' of https://github.com/…

4d69406

…stratoula/kibana into obs-ai-assistant-visualize-esql

Merge branch 'main' of github.com:elastic/kibana into obs-ai-assistan…

029a531

…t-visualize-esql

CoenWarmer approved these changes Feb 2, 2024

View reviewed changes

CoenWarmer and others added 7 commits February 2, 2024 18:19

Fix import

f874e16

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

d76002e

…fix'

Clean translations

2a13505

Merge branch 'obs-ai-assistant-visualize-esql' of https://github.com/…

dac6998

…stratoula/kibana into obs-ai-assistant-visualize-esql

Fix types

98fc8da

Merge branch 'main' into obs-ai-assistant-visualize-esql

9f39185

Fix intl console warning

d79102c

CoenWarmer and others added 4 commits February 5, 2024 14:32

Styling fixes

df07b85

Merge branch 'obs-ai-assistant-visualize-esql' of https://github.com/…

66924a0

…stratoula/kibana into obs-ai-assistant-visualize-esql

Make ui vis editor sidebar slightly wider

5705307

Merge with main and resolve conflicts

0d7c31b

stratoula merged commit 25898e6 into elastic:main Feb 5, 2024
23 checks passed

stratoula added release_note:feature Makes this part of the condensed release notes and removed release_note:enhancement labels Feb 25, 2024

miltonhultgren mentioned this pull request Mar 7, 2024

[Obs AI Assistant] Show Conversations list in flyout #175226

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Obs ai assistant][ESQL] Visualizes a query #174677

[Obs ai assistant][ESQL] Visualizes a query #174677

stratoula commented Jan 11, 2024 •

edited

stratoula Jan 17, 2024

stratoula Jan 17, 2024

stratoula Jan 17, 2024

drewdaemon Jan 18, 2024

stratoula Jan 20, 2024

CoenWarmer Jan 30, 2024

CoenWarmer Feb 2, 2024

miltonhultgren Feb 2, 2024

CoenWarmer Feb 2, 2024

stratoula commented Feb 5, 2024 •

edited

stratoula commented Feb 5, 2024

kibana-ci commented Feb 5, 2024

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

[Obs ai assistant][ESQL] Visualizes a query #174677

[Obs ai assistant][ESQL] Visualizes a query #174677

Conversation

stratoula commented Jan 11, 2024 • edited

Summary

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stratoula commented Feb 5, 2024 • edited

stratoula commented Feb 5, 2024

kibana-ci commented Feb 5, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

stratoula commented Jan 11, 2024 •

edited

stratoula commented Feb 5, 2024 •

edited