Your window into the Elastic Stack
Find a file
Marco Liberati 61d0320c64
[Lens] Embeddable react refactor (#186642)
## Summary

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

fix https://github.com/elastic/kibana/issues/174957
fixes https://github.com/elastic/kibana/issues/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](https://github.com/elastic/kibana/issues/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](https://github.com/elastic/kibana/pull/186642#discussion_r1792659477)
)
* [x] `Unsaved changes` issue (see @mbondyra
[comment](https://github.com/elastic/kibana/pull/186642#discussion_r1795384587))
* [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 <4283304+mbondyra@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>
Co-authored-by: Bhavya RM <bhavya@elastic.co>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
2024-11-26 09:34:13 +01:00
.buildkite [Console] Bootstrap kibana before running generator script (#201662) 2024-11-25 16:19:05 -06:00
.devcontainer Removing experimental for the FIPS mode config (#200734) 2024-11-19 15:23:20 -05:00
.github [Ownership] Assign test files to data discovery team (#200932) 2024-11-25 15:28:58 +00:00
api_docs [api-docs] 2024-11-26 Daily api_docs build (#201718) 2024-11-26 01:38:43 -06:00
config [Data Usage] Enabled plugin for Serverless and added feature flag to manage availability (#201465) 2024-11-23 07:06:23 -05:00
dev_docs [DOCS] Add more examples for generating openAPI documents (#200262) 2024-11-25 19:18:50 -06:00
docs [Docs] Document ability to drag and drop columns in Discover (#201571) 2024-11-25 15:09:07 +01:00
examples Sustainable Kibana Architecture: Categorise straightforward packages (#199630) 2024-11-22 10:33:25 +01:00
kbn_pm Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
legacy_rfcs rename @elastic/* packages to @kbn/* (#138957) 2022-08-18 08:54:42 -07:00
licenses Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
oas_docs [UII] Add status tracking for agentless integrations (#199567) 2024-11-26 09:12:14 +01:00
packages [Inventory] Inventory k8s entities fixes (#201260) 2024-11-26 09:29:23 +01:00
plugins
scripts Dependency usage CLI (#198920) 2024-11-25 14:07:40 +01:00
src [Lens] Embeddable react refactor (#186642) 2024-11-26 09:34:13 +01:00
test [Lens] Embeddable react refactor (#186642) 2024-11-26 09:34:13 +01:00
typings Updated js-yaml to v4 (#190678) 2024-09-19 12:25:03 +02:00
x-pack [Lens] Embeddable react refactor (#186642) 2024-11-26 09:34:13 +01:00
.backportrc.json chore(NA): adds 8.17 into backportrc (#201065) 2024-11-21 06:05:29 +00:00
.bazelignore Remove references to deleted .ci folder (#177168) 2024-02-20 19:54:21 +01:00
.bazeliskversion chore(NA): upgrade bazelisk into v1.11.0 (#125070) 2022-02-09 20:43:57 +00:00
.bazelrc chore(NA): use new and more performant BuildBuddy servers (#130350) 2022-04-18 02:01:38 +01:00
.bazelrc.common Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
.bazelversion chore(NA): revert bazel upgrade for v5.2.0 (#135096) 2022-06-24 03:57:21 +01:00
.browserslistrc Add Firefox ESR to browserlistrc (#184462) 2024-05-29 17:53:18 -05:00
.editorconfig
.eslintignore [ES|QL] New @kbn/esql-services package (#179029) 2024-03-27 14:39:48 +01:00
.eslintrc.js [Streams] App plugin (#200060) 2024-11-25 14:51:24 +01:00
.gitattributes
.gitignore Dependency usage CLI (#198920) 2024-11-25 14:07:40 +01:00
.i18nrc.json [Logs Overview] Add a flyout to show category document examples (#194867) 2024-10-24 15:49:27 +01:00
.node-version Upgrade Node.js to 20.15.1 (#187791) 2024-07-15 12:34:07 -05:00
.npmrc [npmrc] Fix puppeteer_skip_download configuration (#177673) 2024-02-22 18:59:01 -07:00
.nvmrc Upgrade Node.js to 20.15.1 (#187791) 2024-07-15 12:34:07 -05:00
.prettierignore
.prettierrc
.puppeteerrc Add .puppeteerrc (#179847) 2024-04-03 09:14:39 -05:00
.stylelintignore
.stylelintrc Bump stylelint to ^14 (#136693) 2022-07-20 10:11:00 -05:00
.telemetryrc.json [Telemetry] Fix telemetry-tools TS parser for packages (#149819) 2023-01-31 04:09:09 +03:00
.yarnrc
BUILD.bazel Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
catalog-info.yaml [sonarqube] Disable cron (#190611) 2024-08-15 09:19:09 -05:00
CODE_OF_CONDUCT.md
CONTRIBUTING.md Update doc slugs to improve analytic tracking, move to appropriate folders (#113630) 2021-10-04 13:36:45 -04:00
FAQ.md Fix small typos in the root md files (#134609) 2022-06-23 09:36:11 -05:00
fleet_packages.json [main] Sync bundled packages with Package Storage (#192007) 2024-09-03 12:26:57 -05:00
github_checks_reporter.json
kibana.d.ts Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
LICENSE.txt Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
NOTICE.txt [React@18] useLayoutEffect when setting value from a prop in react-monaco-editor (#195775) 2024-10-17 13:24:06 +02:00
package.json Update dependency chromedriver to v131 (main) (#201053) 2024-11-25 15:57:12 -06:00
preinstall_check.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
README.md [README] Update version Compatibility with Elasticsearch (#116040) 2022-01-10 10:31:21 -05:00
renovate.json Dependency ownership for Kibana Core team, part 1 (#201380) 2024-11-25 08:12:32 -06:00
RISK_MATRIX.mdx
run_fleet_setup_parallel.sh [Fleet] Prevent concurrent runs of Fleet setup (#183636) 2024-05-31 16:38:51 +02:00
SECURITY.md
sonar-project.properties [sonarqube] update memory, cpu (#190547) 2024-09-09 16:16:30 -05:00
STYLEGUIDE.mdx [styleguide] update path to scss theme (#140742) 2022-09-15 10:41:14 -04:00
tsconfig.base.json [Streams] App plugin (#200060) 2024-11-25 14:51:24 +01:00
tsconfig.browser.json
tsconfig.browser_bazel.json
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
TYPESCRIPT.md Fix small typos in the root md files (#134609) 2022-06-23 09:36:11 -05:00
updatecli-compose.yaml deps(updatecli): bump all policies (#195865) 2024-10-15 07:37:12 -05:00
versions.json chore(NA): update versions after v8.16.2 bump (#201249) 2024-11-21 22:16:08 +00:00
WORKSPACE.bazel chore(NA): remove usage of re2 and replace it with a non native module (#188134) 2024-07-15 20:33:28 +01:00
yarn.lock Update dependency chromedriver to v131 (main) (#201053) 2024-11-25 15:57:12 -06:00

Kibana

Kibana is your window into the Elastic Stack. Specifically, it's a browser-based analytics and search dashboard for Elasticsearch.

Getting Started

If you just want to try Kibana out, check out the Elastic Stack Getting Started Page to give it a whirl.

If you're interested in diving a bit deeper and getting a taste of Kibana's capabilities, head over to the Kibana Getting Started Page.

Using a Kibana Release

If you want to use a Kibana release in production, give it a test run, or just play around:

Building and Running Kibana, and/or Contributing Code

You might want to build Kibana locally to contribute some code, test out the latest features, or try out an open PR:

Documentation

Visit Elastic.co for the full Kibana documentation.

For information about building the documentation, see the README in elastic/docs.

Version Compatibility with Elasticsearch

Ideally, you should be running Elasticsearch and Kibana with matching version numbers. If your Elasticsearch has an older version number or a newer major number than Kibana, then Kibana will fail to run. If Elasticsearch has a newer minor or patch number than Kibana, then the Kibana Server will log a warning.

Note: The version numbers below are only examples, meant to illustrate the relationships between different types of version numbers.

Situation Example Kibana version Example ES version Outcome
Versions are the same. 7.15.1 7.15.1 💚 OK
ES patch number is newer. 7.15.0 7.15.1 ⚠️ Logged warning
ES minor number is newer. 7.14.2 7.15.0 ⚠️ Logged warning
ES major number is newer. 7.15.1 8.0.0 🚫 Fatal error
ES patch number is older. 7.15.1 7.15.0 ⚠️ Logged warning
ES minor number is older. 7.15.1 7.14.2 🚫 Fatal error
ES major number is older. 8.0.0 7.15.1 🚫 Fatal error

Questions? Problems? Suggestions?

  • If you've found a bug or want to request a feature, please create a GitHub Issue. Please check to make sure someone else hasn't already created an issue for the same topic.
  • Need help using Kibana? Ask away on our Kibana Discuss Forum and a fellow community member or Elastic engineer will be glad to help you out.