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

[Lens][Embeddable refactor] Follow ups #195355

Open
dej611 opened this issue Oct 8, 2024 · 1 comment
Open

[Lens][Embeddable refactor] Follow ups #195355

dej611 opened this issue Oct 8, 2024 · 1 comment
Assignees
Labels
enhancement New value added to drive a business result Feature:Lens Team:Visualizations Visualization editors, elastic-charts and infrastructure technical debt Improvement of the software architecture and operational architecture

Comments

@dej611
Copy link
Contributor

dej611 commented Oct 8, 2024

This is a set of follow ups after the Lens Embeddable refactor gets merged:

@dej611 dej611 added enhancement New value added to drive a business result Feature:Lens Team:Visualizations Visualization editors, elastic-charts and infrastructure technical debt Improvement of the software architecture and operational architecture labels Oct 8, 2024
@elasticmachine
Copy link
Contributor

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

dej611 added a commit that referenced this issue Nov 26, 2024
## Summary

This PR contains the refactor of the Lens embeddable with the new React
architecture.

fix #174957
fixes #180672

**Current status**:
✅ Ready to review

### Notes for testing and reviewers

Other than reworking the Lens embeddable with the new architecture this
PR contains the following major changes.

#### Edit flow
The `Edit` flow has changed to in-line first using the new `Edit` API
provided by the new system
* The impact of this change can be noticed in the code on the `Canvas`
case where the Custom Lens component is instructed to avoid the inline
editing. In all the other cases in-line editing is enabled by default
now.
* Another side effect of this has been the replacement of the special
`INLINE_EDIT` action id into the regular `EDIT` action. Some tests have
been affected by this replacing the `clickEdit` function with the
`openEditorFromFlyout` one.
* The Inline editing codebase **as been reworked entirely** so make sure
to stress test this side of things.

#### Attribute service

Another important aspect changed in this PR is the `attributeService`:
this was tied to the previous Embeddable system and it is now completely
skipped. The Lens wrapper around that has been reworked to be thinner
and directly call the CM services.
* Please make sure to test thoroughly save/load SO flows

#### Transformation API (by-value <=> by-reference flow)

The new system adopts the new Transformation API (who prevents the panel
to fully reload on change).
* Please make sure to test thoroughly Visualize library <=> by value
flows
* In particular moving from one type and another should change how the
Panel Settings interpret "default" values to reset

#### Message system

Also this part of the code was partially rewritten to be more manageable
ont he embeddable surface, maintaining the core functionalities.
* Please make sure to test thoroughly error messages, warnings and info
messages
  * Some scenarios to test includes
* multi-layer errors (i.e. use a broken KQL query for an
annotation/multi-layers). Check that the panel recovers correctly from
it when resolved
    * Missing references
    * Missing dataViews
    * Wrong formatted SO
* Configuration mistakes - check that a broken config is not saveable

### Other areas to check

* Change filters in dashboard/viz and check that are correctly handled
* Check drilldowns
* Check that `Unsaved changes` are correctly detected
* Check that the panel updates correctly on `View` mode change

## Main type changes

This PR contains also some important `type` changes, here's listed:
* the `query` property now explicitly supports ES|QL query type.
  * in `main` it used to work without type support
* `LensEmbeddableInput`/`LensEmbeddableOutput` types have changed, but
the type names remained the same.

## Follow ups already planned:

Some enhancements have been already collected and will be addressed in a
follow up [here](#195355)

### Tasks
<details>

<summary>Detailed list of tasks for the refactor</summary>

* New embeddable factory
  * [x] Define visualization context
  * [x] Define observables to track
  * [x] Basic panel settings
  * [x] Basic edit api
  * [x] inspector api 
  * [x] Library services
  * [x] Unified search api
  * [x] Basic integrations api
  * [x] State management api for inline editing
  * Publish correct observables
    * [x] `dataViews`
    * [x] `query`
    * [x] `filters`
    * [x] `dataLoading`
    * [x] `savedObjectId`
  * Actions
    * [x] View underlying data api
 * Custom renderer
   * [x] Basic implementation
   * [x] Support callbacks
   * [x] Support custom styling/paddings
 * Expose  
* [x] Handle searchSession
* Edit
  * [x] Open panel in Lens editor
  * Inline editing
    * [x] rework references logic
      * #180726
* integrate the logic to extract filters dataViews from filters as for
the first bug in #188545
    * DSL flyout
      * [x] open flyout
      * [x] save
    * ES|QL
      * [x] open flyout on creation
      * [x] open flyout on editing
      * [x] save
* [x] revisit mounting logic to avoid detach if possible (not possible
yet)
* [x] explore the integration with the new `onEdit` api method used for
the inline editing~~
      * [x] created panel management module and sorted it out
    * [x] open in Editor
      * [x] fix the save on return to dashboard
* ~~migrate by ref to by value on inline editing~~ will do it in a
follow up PR
* Add from library issues
  * [x] Fix missing title and tags
* Data loading
  * [x] Compute all required data params for rendering
* Render the panel
  * [x] hook up user messaging system
  * [x] Merge search context
  * [x] Expression variables
  * [x] panel settings
    * [x] per panel time range
    * [x] per panel filter
    * test with both DSL and ES|QL mode
  * Reload
    * [x] on unified search updates
    * [x] on config changes
    * [x] on drilldown changes?
    * [x] on view mode change 
 * Attributes service
   * [x] load from library
   * [x] save to library

</details>


### Pending issues:
<details>

<summary>Detailed list of issues</summary>

* [x] Unified histogram does not render in Discover
* [x] Saving to library from context menu in dashboard doesn't save the
title
* [x] When adding a vis from the library the new panel has no title
* [x] Vis disappears when opening inline editor and cancel
  * Create a viz, save and return to dashboard, then edit it and cancel.
* Saving an edit inline doesn't apply the changes (i.e. changing the
chart type)
  * [x] Changing the chart type on the layer panel leads to a crash
* [x] Changing the chart type won't update the visualization (via both
config panel or suggestions)
* [x] Edit a dimension will stretch the panel to overflow the fly-out
* [x] duplicating a dimension in the inline editor by drag and drop
works buggy visually
* When duplicating a panel, the new panel gets the same title rather
than “title (copy)”
  * [x] by-value panels
  * [x] by-reference panels
* [x] brushing throughout the timerange doesn’t work
* [x] filtering when clicking on value doesn’t work
* [x] filtering from legend doesn’t work
* [x] for lens table, the sort ascending/descending actions don’t have
an effect
* [x] filtering doesn’t display on table either
* Discover related issues
* thanks to @davismcphee investigation the source of the issue seems to
be related to the way the `abortController` is managed in the new
embeddable implementation as Discover is relying on that.
* [x] needs to investigate for a fix that restores the previous
behaviour of the `abortController` management
  * [x] the hits total count is not in sync with the chart/table now
* [x] Change chart type via suggestion panel when inline editing in
Discover doesn't update the chart
* [x] Dirty panel issue (see @nickofthyme 's
[comment](#186642 (comment))
)
* [x] `Unsaved changes` issue (see @mbondyra
[comment](#186642 (comment)))
* [x] Multiple errors not rendered correctly in panel when blocking
(i.e. missing field - `lens-message-list-trigger` related)
  * [x] recover from a blocker error required 2 renders
* Missing SO error should not be handled for the custom render component
(legacy behaviour) but should be correctly handled for dashboard (will
be handled in a follow up PR given that is broken on `main` too)
* [x] Too many requests on Unified Histogram when in Discover (3 vs 2)
* [x] Too many request on slow queries for Unified Histogram (2 vs 1)
* [x] Annotations preview issues (chart rendering with height `0px`)
* [x] `uuid` not propagated correctly
* [x] another flavour of this was `id` not propagated correctly into the
`data-test-embeddable-id` attribute
* [x] Dispatch correctly the `render` events
* [x] refresh interval does not propagate thru the Lens custom component
in Discover (thanks to @jughosta to sort this out )
</details>

---------

Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Marco Vettorello <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: Bhavya RM <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
paulinashakirova pushed a commit to paulinashakirova/kibana that referenced this issue Nov 26, 2024
## Summary

This PR contains the refactor of the Lens embeddable with the new React
architecture.

fix elastic#174957
fixes elastic#180672

**Current status**:
✅ Ready to review

### Notes for testing and reviewers

Other than reworking the Lens embeddable with the new architecture this
PR contains the following major changes.

#### Edit flow
The `Edit` flow has changed to in-line first using the new `Edit` API
provided by the new system
* The impact of this change can be noticed in the code on the `Canvas`
case where the Custom Lens component is instructed to avoid the inline
editing. In all the other cases in-line editing is enabled by default
now.
* Another side effect of this has been the replacement of the special
`INLINE_EDIT` action id into the regular `EDIT` action. Some tests have
been affected by this replacing the `clickEdit` function with the
`openEditorFromFlyout` one.
* The Inline editing codebase **as been reworked entirely** so make sure
to stress test this side of things.

#### Attribute service

Another important aspect changed in this PR is the `attributeService`:
this was tied to the previous Embeddable system and it is now completely
skipped. The Lens wrapper around that has been reworked to be thinner
and directly call the CM services.
* Please make sure to test thoroughly save/load SO flows

#### Transformation API (by-value <=> by-reference flow)

The new system adopts the new Transformation API (who prevents the panel
to fully reload on change).
* Please make sure to test thoroughly Visualize library <=> by value
flows
* In particular moving from one type and another should change how the
Panel Settings interpret "default" values to reset

#### Message system

Also this part of the code was partially rewritten to be more manageable
ont he embeddable surface, maintaining the core functionalities.
* Please make sure to test thoroughly error messages, warnings and info
messages
  * Some scenarios to test includes
* multi-layer errors (i.e. use a broken KQL query for an
annotation/multi-layers). Check that the panel recovers correctly from
it when resolved
    * Missing references
    * Missing dataViews
    * Wrong formatted SO
* Configuration mistakes - check that a broken config is not saveable

### Other areas to check

* Change filters in dashboard/viz and check that are correctly handled
* Check drilldowns
* Check that `Unsaved changes` are correctly detected
* Check that the panel updates correctly on `View` mode change

## Main type changes

This PR contains also some important `type` changes, here's listed:
* the `query` property now explicitly supports ES|QL query type.
  * in `main` it used to work without type support
* `LensEmbeddableInput`/`LensEmbeddableOutput` types have changed, but
the type names remained the same.

## Follow ups already planned:

Some enhancements have been already collected and will be addressed in a
follow up [here](elastic#195355)

### Tasks
<details>

<summary>Detailed list of tasks for the refactor</summary>

* New embeddable factory
  * [x] Define visualization context
  * [x] Define observables to track
  * [x] Basic panel settings
  * [x] Basic edit api
  * [x] inspector api 
  * [x] Library services
  * [x] Unified search api
  * [x] Basic integrations api
  * [x] State management api for inline editing
  * Publish correct observables
    * [x] `dataViews`
    * [x] `query`
    * [x] `filters`
    * [x] `dataLoading`
    * [x] `savedObjectId`
  * Actions
    * [x] View underlying data api
 * Custom renderer
   * [x] Basic implementation
   * [x] Support callbacks
   * [x] Support custom styling/paddings
 * Expose  
* [x] Handle searchSession
* Edit
  * [x] Open panel in Lens editor
  * Inline editing
    * [x] rework references logic
      * elastic#180726
* integrate the logic to extract filters dataViews from filters as for
the first bug in elastic#188545
    * DSL flyout
      * [x] open flyout
      * [x] save
    * ES|QL
      * [x] open flyout on creation
      * [x] open flyout on editing
      * [x] save
* [x] revisit mounting logic to avoid detach if possible (not possible
yet)
* [x] explore the integration with the new `onEdit` api method used for
the inline editing~~
      * [x] created panel management module and sorted it out
    * [x] open in Editor
      * [x] fix the save on return to dashboard
* ~~migrate by ref to by value on inline editing~~ will do it in a
follow up PR
* Add from library issues
  * [x] Fix missing title and tags
* Data loading
  * [x] Compute all required data params for rendering
* Render the panel
  * [x] hook up user messaging system
  * [x] Merge search context
  * [x] Expression variables
  * [x] panel settings
    * [x] per panel time range
    * [x] per panel filter
    * test with both DSL and ES|QL mode
  * Reload
    * [x] on unified search updates
    * [x] on config changes
    * [x] on drilldown changes?
    * [x] on view mode change 
 * Attributes service
   * [x] load from library
   * [x] save to library

</details>


### Pending issues:
<details>

<summary>Detailed list of issues</summary>

* [x] Unified histogram does not render in Discover
* [x] Saving to library from context menu in dashboard doesn't save the
title
* [x] When adding a vis from the library the new panel has no title
* [x] Vis disappears when opening inline editor and cancel
  * Create a viz, save and return to dashboard, then edit it and cancel.
* Saving an edit inline doesn't apply the changes (i.e. changing the
chart type)
  * [x] Changing the chart type on the layer panel leads to a crash
* [x] Changing the chart type won't update the visualization (via both
config panel or suggestions)
* [x] Edit a dimension will stretch the panel to overflow the fly-out
* [x] duplicating a dimension in the inline editor by drag and drop
works buggy visually
* When duplicating a panel, the new panel gets the same title rather
than “title (copy)”
  * [x] by-value panels
  * [x] by-reference panels
* [x] brushing throughout the timerange doesn’t work
* [x] filtering when clicking on value doesn’t work
* [x] filtering from legend doesn’t work
* [x] for lens table, the sort ascending/descending actions don’t have
an effect
* [x] filtering doesn’t display on table either
* Discover related issues
* thanks to @davismcphee investigation the source of the issue seems to
be related to the way the `abortController` is managed in the new
embeddable implementation as Discover is relying on that.
* [x] needs to investigate for a fix that restores the previous
behaviour of the `abortController` management
  * [x] the hits total count is not in sync with the chart/table now
* [x] Change chart type via suggestion panel when inline editing in
Discover doesn't update the chart
* [x] Dirty panel issue (see @nickofthyme 's
[comment](elastic#186642 (comment))
)
* [x] `Unsaved changes` issue (see @mbondyra
[comment](elastic#186642 (comment)))
* [x] Multiple errors not rendered correctly in panel when blocking
(i.e. missing field - `lens-message-list-trigger` related)
  * [x] recover from a blocker error required 2 renders
* Missing SO error should not be handled for the custom render component
(legacy behaviour) but should be correctly handled for dashboard (will
be handled in a follow up PR given that is broken on `main` too)
* [x] Too many requests on Unified Histogram when in Discover (3 vs 2)
* [x] Too many request on slow queries for Unified Histogram (2 vs 1)
* [x] Annotations preview issues (chart rendering with height `0px`)
* [x] `uuid` not propagated correctly
* [x] another flavour of this was `id` not propagated correctly into the
`data-test-embeddable-id` attribute
* [x] Dispatch correctly the `render` events
* [x] refresh interval does not propagate thru the Lens custom component
in Discover (thanks to @jughosta to sort this out )
</details>

---------

Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Marco Vettorello <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: Bhavya RM <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Dec 12, 2024
## Summary

This PR contains the refactor of the Lens embeddable with the new React
architecture.

fix elastic#174957
fixes elastic#180672

**Current status**:
✅ Ready to review

### Notes for testing and reviewers

Other than reworking the Lens embeddable with the new architecture this
PR contains the following major changes.

#### Edit flow
The `Edit` flow has changed to in-line first using the new `Edit` API
provided by the new system
* The impact of this change can be noticed in the code on the `Canvas`
case where the Custom Lens component is instructed to avoid the inline
editing. In all the other cases in-line editing is enabled by default
now.
* Another side effect of this has been the replacement of the special
`INLINE_EDIT` action id into the regular `EDIT` action. Some tests have
been affected by this replacing the `clickEdit` function with the
`openEditorFromFlyout` one.
* The Inline editing codebase **as been reworked entirely** so make sure
to stress test this side of things.

#### Attribute service

Another important aspect changed in this PR is the `attributeService`:
this was tied to the previous Embeddable system and it is now completely
skipped. The Lens wrapper around that has been reworked to be thinner
and directly call the CM services.
* Please make sure to test thoroughly save/load SO flows

#### Transformation API (by-value <=> by-reference flow)

The new system adopts the new Transformation API (who prevents the panel
to fully reload on change).
* Please make sure to test thoroughly Visualize library <=> by value
flows
* In particular moving from one type and another should change how the
Panel Settings interpret "default" values to reset

#### Message system

Also this part of the code was partially rewritten to be more manageable
ont he embeddable surface, maintaining the core functionalities.
* Please make sure to test thoroughly error messages, warnings and info
messages
  * Some scenarios to test includes
* multi-layer errors (i.e. use a broken KQL query for an
annotation/multi-layers). Check that the panel recovers correctly from
it when resolved
    * Missing references
    * Missing dataViews
    * Wrong formatted SO
* Configuration mistakes - check that a broken config is not saveable

### Other areas to check

* Change filters in dashboard/viz and check that are correctly handled
* Check drilldowns
* Check that `Unsaved changes` are correctly detected
* Check that the panel updates correctly on `View` mode change

## Main type changes

This PR contains also some important `type` changes, here's listed:
* the `query` property now explicitly supports ES|QL query type.
  * in `main` it used to work without type support
* `LensEmbeddableInput`/`LensEmbeddableOutput` types have changed, but
the type names remained the same.

## Follow ups already planned:

Some enhancements have been already collected and will be addressed in a
follow up [here](elastic#195355)

### Tasks
<details>

<summary>Detailed list of tasks for the refactor</summary>

* New embeddable factory
  * [x] Define visualization context
  * [x] Define observables to track
  * [x] Basic panel settings
  * [x] Basic edit api
  * [x] inspector api 
  * [x] Library services
  * [x] Unified search api
  * [x] Basic integrations api
  * [x] State management api for inline editing
  * Publish correct observables
    * [x] `dataViews`
    * [x] `query`
    * [x] `filters`
    * [x] `dataLoading`
    * [x] `savedObjectId`
  * Actions
    * [x] View underlying data api
 * Custom renderer
   * [x] Basic implementation
   * [x] Support callbacks
   * [x] Support custom styling/paddings
 * Expose  
* [x] Handle searchSession
* Edit
  * [x] Open panel in Lens editor
  * Inline editing
    * [x] rework references logic
      * elastic#180726
* integrate the logic to extract filters dataViews from filters as for
the first bug in elastic#188545
    * DSL flyout
      * [x] open flyout
      * [x] save
    * ES|QL
      * [x] open flyout on creation
      * [x] open flyout on editing
      * [x] save
* [x] revisit mounting logic to avoid detach if possible (not possible
yet)
* [x] explore the integration with the new `onEdit` api method used for
the inline editing~~
      * [x] created panel management module and sorted it out
    * [x] open in Editor
      * [x] fix the save on return to dashboard
* ~~migrate by ref to by value on inline editing~~ will do it in a
follow up PR
* Add from library issues
  * [x] Fix missing title and tags
* Data loading
  * [x] Compute all required data params for rendering
* Render the panel
  * [x] hook up user messaging system
  * [x] Merge search context
  * [x] Expression variables
  * [x] panel settings
    * [x] per panel time range
    * [x] per panel filter
    * test with both DSL and ES|QL mode
  * Reload
    * [x] on unified search updates
    * [x] on config changes
    * [x] on drilldown changes?
    * [x] on view mode change 
 * Attributes service
   * [x] load from library
   * [x] save to library

</details>


### Pending issues:
<details>

<summary>Detailed list of issues</summary>

* [x] Unified histogram does not render in Discover
* [x] Saving to library from context menu in dashboard doesn't save the
title
* [x] When adding a vis from the library the new panel has no title
* [x] Vis disappears when opening inline editor and cancel
  * Create a viz, save and return to dashboard, then edit it and cancel.
* Saving an edit inline doesn't apply the changes (i.e. changing the
chart type)
  * [x] Changing the chart type on the layer panel leads to a crash
* [x] Changing the chart type won't update the visualization (via both
config panel or suggestions)
* [x] Edit a dimension will stretch the panel to overflow the fly-out
* [x] duplicating a dimension in the inline editor by drag and drop
works buggy visually
* When duplicating a panel, the new panel gets the same title rather
than “title (copy)”
  * [x] by-value panels
  * [x] by-reference panels
* [x] brushing throughout the timerange doesn’t work
* [x] filtering when clicking on value doesn’t work
* [x] filtering from legend doesn’t work
* [x] for lens table, the sort ascending/descending actions don’t have
an effect
* [x] filtering doesn’t display on table either
* Discover related issues
* thanks to @davismcphee investigation the source of the issue seems to
be related to the way the `abortController` is managed in the new
embeddable implementation as Discover is relying on that.
* [x] needs to investigate for a fix that restores the previous
behaviour of the `abortController` management
  * [x] the hits total count is not in sync with the chart/table now
* [x] Change chart type via suggestion panel when inline editing in
Discover doesn't update the chart
* [x] Dirty panel issue (see @nickofthyme 's
[comment](elastic#186642 (comment))
)
* [x] `Unsaved changes` issue (see @mbondyra
[comment](elastic#186642 (comment)))
* [x] Multiple errors not rendered correctly in panel when blocking
(i.e. missing field - `lens-message-list-trigger` related)
  * [x] recover from a blocker error required 2 renders
* Missing SO error should not be handled for the custom render component
(legacy behaviour) but should be correctly handled for dashboard (will
be handled in a follow up PR given that is broken on `main` too)
* [x] Too many requests on Unified Histogram when in Discover (3 vs 2)
* [x] Too many request on slow queries for Unified Histogram (2 vs 1)
* [x] Annotations preview issues (chart rendering with height `0px`)
* [x] `uuid` not propagated correctly
* [x] another flavour of this was `id` not propagated correctly into the
`data-test-embeddable-id` attribute
* [x] Dispatch correctly the `render` events
* [x] refresh interval does not propagate thru the Lens custom component
in Discover (thanks to @jughosta to sort this out )
</details>

---------

Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Marco Vettorello <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: Bhavya RM <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:Lens Team:Visualizations Visualization editors, elastic-charts and infrastructure technical debt Improvement of the software architecture and operational architecture
Projects
None yet
Development

No branches or pull requests

2 participants