kibana/x-pack/plugins/lens
Spencer fecdba7eba
[eslint] add rule to prevent export* in plugin index files (#109357)
* [eslint] add rule to prevent export* in plugin index files

* deduplicate export names for types/instances with the same name

* attempt to auto-fix duplicate exports too

* capture exported enums too

* enforce no_export_all for core too

* disable rule by default, allow opting-in for help fixing

* update tests

* reduce yarn.lock duplication

* add rule but no fixes

* disable all existing violations

* update api docs with new line numbers

* revert unnecessary changes to yarn.lock which only had drawbacks

* remove unnecessary eslint-disable

* rework codegen to split type exports and use babel to generate valid code

* check for "export types" deeply

* improve test by using fixtures

* add comments to some helper functions

* disable fix for namespace exports including types

* label all eslint-disable comments with related team-specific issue

* ensure that child exports of `export type` are always tracked as types

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2021-09-01 18:05:45 -07:00
..
common [eslint] add rule to prevent export* in plugin index files (#109357) 2021-09-01 18:05:45 -07:00
public [Lens] Show validation feedback on top values out of bounds number of values (#110222) 2021-08-31 15:23:18 +02:00
server [eslint] add rule to prevent export* in plugin index files (#109357) 2021-09-01 18:05:45 -07:00
config.ts
jest.config.js
kibana.json Split KibanaApp into VisEditors and DataDiscovery (#110588) 2021-08-31 15:57:23 +02:00
layout.png
readme.md
tsconfig.json

Lens

Visualization editor allowing to quickly and easily configure compelling visualizations to use on dashboards and canvas workpads.

Embedding

It's possible to embed Lens visualizations in other apps using EmbeddableComponent and navigateToPrefilledEditor exposed via contract. For more information check out the example in x-pack/examples/embedded_lens_example.

Testing

Run all tests from the x-pack root directory

  • Unit tests: yarn test:jest x-pack/plugins/lens
  • Functional tests:
    • Run node scripts/functional_tests_server
    • Run node ../scripts/functional_test_runner.js --config ./test/functional/config.js --grep="lens app"
    • You may want to comment out all imports except for Lens in the config file.
  • API Functional tests:
    • Run node scripts/functional_tests_server
    • Run node ../scripts/functional_test_runner.js --config ./test/api_integration/config.ts --grep=Lens

UI Terminology

Lens has a lot of UI elements to make it easier to refer to them in issues or bugs, this is a hopefully complete list:

  • Top nav Navigation menu on top of the app (contains Save button)
    • Query bar Input to enter KQL or Lucene query below the top nav
    • Filter bar Row of filter pills below the query bar
    • Time picker Global time range configurator right to the query bar
  • Data panel Panel to the left showing the field list
    • Field list List of fields separated by available and empty fields in the data panel
    • Index pattern chooser Select element switching between index patterns
    • Field filter Search and dropdown to filter down the field list
    • Field information popover Popover showing data distribution; opening when clicking a field in the field list
  • Config panel Panel to the right showing configuration of the current chart, separated by layers
    • Layer panel One of multiple panels in the config panel, holding configuration for separate layers
      • Dimension trigger Chart dimension like "X axis", "Break down by" or "Slice by" in the config panel
      • Dimension container Container shown when clicking a dimension trigger and contains the dimension settints
      • Layer settings popover Popover shown when clicking the button in the top left of a layer panel
  • Workspace panel Center panel containing the chart preview, title and toolbar
    • Chart preview Full-sized rendered chart in the center of the screen
    • Toolbar Bar on top of the chart preview, containing the chart switcher to the left with chart specific settings right to it
      • Chart switch Select to change the chart type in the top left above the chart preview
      • Chart settings popover Popover shown when clicking the "Settings" button above the chart preview
  • Suggestion panel Panel to the bottom showing previews for suggestions on how to change the current chart

Layout