[ML] Converts index based data visualizer to React#42685
[ML] Converts index based data visualizer to React#42685peteharverson merged 5 commits intoelastic:masterfrom
Conversation
peteharverson
requested review from
alvarezmelissa87,
jgowdyelastic,
markov00 and
walterra
|
Pinging @elastic/ml-ui |
💔 Build Failed |
💔 Build Failed |
x-pack/legacy/plugins/ml/public/components/create_job_link_card/create_job_link_card.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Good use of whilst 👍 😆
x-pack/legacy/plugins/ml/public/data_visualizer/common/field_vis_config.ts
Outdated
Show resolved
Hide resolved
...lugins/ml/public/data_visualizer/components/field_data_card/content_types/number_content.tsx
Outdated
Show resolved
Hide resolved
x-pack/legacy/plugins/ml/public/data_visualizer/components/field_data_card/field_data_card.tsx
Outdated
Show resolved
Hide resolved
...isualizer/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Assuming these TODOs are going to be done in a follow up?
There was a problem hiding this comment.
Yes, using the inline styling of the series color in here and the document count chart will be done in a follow-up. It is awaiting the version of Elastic charts to be bumped to 8.0.0+
💚 Build Succeeded |
alvarezmelissa87
left a comment
alvarezmelissa87
left a comment
There was a problem hiding this comment.
Latest changes LGTM ⚡️
walterra
left a comment
walterra
left a comment
There was a problem hiding this comment.
LGTM, just added a suggestionsabout changing a function to get an array of JSX elements to a React component itself.
...plugins/ml/public/data_visualizer/components/field_data_card/examples_list/examples_list.tsx
Outdated
Show resolved
Hide resolved
...ugins/ml/public/data_visualizer/components/field_data_card/content_types/boolean_content.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
The content of most of the card content components is the same for each card, this could be moved to a common wrapping component to cut down on the duplication.
There was a problem hiding this comment.
There is enough variation in the content types that I would prefer to leave this for now, and consider it in a follow-up, for example when looking at switching the file data visualizer to use the same card component as this.
...plugins/ml/public/data_visualizer/components/field_data_card/examples_list/examples_list.tsx
Outdated
Show resolved
Hide resolved
...lugins/ml/public/data_visualizer/components/field_data_card/content_types/number_content.tsx
Outdated
Show resolved
Hide resolved
...isualizer/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx
Outdated
Show resolved
Hide resolved
x-pack/legacy/plugins/ml/public/data_visualizer/data_loader/data_loader.ts
Outdated
Show resolved
Hide resolved
peteharverson
force-pushed
the
ml-data-visualizer-react
branch
from
31da825 to
64a2074
Compare
peteharverson
force-pushed
the
ml-data-visualizer-react
branch
from
64a2074 to
992c67e
Compare
💚 Build Succeeded |
* [ML] Converts index based data visualizer to React * [ML] Remove unused imports in React data visualizer * [ML] Address review feedback * [ML] Address comments from code review * [ML] Remove redundant ts-ignore
5 participants
Summary
Migrates the index based data visualizer from AngularJS to React.
Functionally there is little change to the previous page. The most significant difference is the addition of a KQL based search bar, so that the page can be opened from a KQL based saved search as well as an index pattern.
If coming in from a lucene based saved search, the search string is displayed in a read-only search field:
The page now uses Elastic charts for charting document count and metric distributions.
See #18374
Note that unit tests will be added in a follow-up.
Checklist
For maintainers