kibana/x-pack/plugins/lens
Stratoula Kalafateli c4eb47a46b
[Lens] Settings panel redesign and separate settings per y axis (#76373)
* wip, redsign the xy axis general settings

* pie chart settings. fix tests, initial implementation

* Fix Internationalization

* Cleanup

* remove unused translations

* Add test to check that right axis is enabled

* fix test

* remove unecessary translation

* Added icons and cleaned up some of the visuals for grouped buttons

* Fix types

* Axis Settings Popover Reusable Component

* Legend Popover Reusable Component

* Cleanup unused translations

* Fix right axis behavior

* Revert yLeftTitle to yTitle to avoid migration

* PR fixes

* identify which axis is enabled

* Change the logic on enabling the y axes popovers

* Adjust axis popover on horizontal bars

* fix failing test and change the logic of fetching the y axis titles

* Simpify the axis title logic, make the toolbar repsponsive, add TopAxisIcon

* Ui Changes on legends popover

* Cleanup and more unit tests

* use groupId instead of index to take under consideration all possible scenarios

* fix gridlines

* Remove ts-ignore from icons and move toolbar button to shared components

* Workspace toolbar wraps on smaller devices

* Tooltip on Toolbar appears only if the button is disabled

* clean up

* Add missing translations

* fix eslint

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
2020-09-16 11:30:19 +03:00
..
common Add Lens to Recently Accessed (#77249) 2020-09-14 13:52:14 -04:00
public [Lens] Settings panel redesign and separate settings per y axis (#76373) 2020-09-16 11:30:19 +03:00
server [Lens] Show field stats for IP fields and scripted fields (#76457) 2020-09-08 17:29:26 -04:00
config.ts
kibana.json Separate url forwarding logic and legacy services (#76892) 2020-09-14 11:08:59 +02:00
layout.png [Lens] Document UI terminology (#72423) 2020-08-06 14:02:37 +02:00
readme.md [Lens] Move configuration popover to flyout (#76046) 2020-09-14 18:23:13 -04:00

Lens

Testing

Run all tests from the x-pack root directory

  • Unit tests: node scripts/jest --watch 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