[ML] Migrate Angular-based components to React

[elasticmachine]

Original comment by @peteharverson:

Meta issue itemizing the list of components in the ML UI which need to be migrated from Angular directives and templates to React.

Components

• Anomalies table
• Anomalies table service (remove Angular dependency)
• Documentation help link [ML] Migrate mlDocumentationHelpLink to EUI/React. #19124
• Field data card (Data Visualizer card)
• Field type icon component [ML] Migrate field-type-icon to EUI/React. #19159
• Field type icon kui icons
• Form filter input (Data Visualizer, Jobs List)
• Form label (label with info icon) [ML] Migrates ml-form-label to EUI/React. #21059
• Full time range selector [ML] Converts full time range selector control to EUI / React #35074
• Influencers List (Anomaly Explorer)
• Job group select
• Job select list
• Info icon
• Message bar
• Nav menu
• Top Nav

Controls

• Show charts checkbox
  • Component [ML] Migrate Anomaly Explorer to React (except job selector) #28234
  • Service (relies on angularjs based AppState)
• Select control (deleted since React replacement isn't necessary)
• Interval select
  • Component [ML] Migrate Anomaly Explorer to React (except job selector) #28234 (migrated to react for Anomaly Explorer, but angularjs wrapper directive still available for Time Series Viewer)
  • Service (relies on angularjs based AppState)
• Severity select
  • Component [ML] Migrate Anomaly Explorer to React (except job selector) #28234 (migrated to react for Anomaly Explorer, but angularjs wrapper directive still available for Time Series Viewer)
  • Service (relies on angularjs based AppState)

Tooltips

• migrate angular/bootstrap based tooltip="..." attributes to <EuiTooltip />
• mlJsonTooltipService (migrate to non Angular service) [ML] Migrate ml-info-icon to React/EUI. Fixes related IE11 error. #20610 (has been removed since it's not used anywhere anymore)
• Info icon (mlInfoIcon directive in json_tooltip.js) [ML] Migrate ml-info-icon to EUI/React #19003 [ML] Migrates ml-form-label to EUI/React. #21059

Angular filters

Replace with regular JavaScript functions

• Abbreviate whole number
• Format value
• Metric change description
• Simple job components agg types filter
• Remove Angular filter wrappers [ML] Remove unused Angular filter definitions #51027

Jobs List

• Main table

Jobs List Components

• Custom URL Editor
• Create Watch modal
• Delete Job modal
• Edit Job modal
• Job Time Picker modal
• Expanded row
• Expanded row - General tab
• Expanded row - Config tab
• Expanded row - Counts tab
• Expanded row - Datafeed tab

Create Job

Wizard

• Select index or search
• Select job type

Simple job components

• Bucket span estimator button [ML] Migrate bucket span estimator button to EUI/React. #19045
• Bucket span selection
• Event rate chart
• Fields selection (Multi metric and Population wizards)
• Population fields selection
• General job details
• Influencers selection
• Post-save options
• Create Watch

Single Metric

• Main create job page
• Anomaly chart

Multi Metric

• Main create job page
• Anomaly chart

Population

• Main create job page
• Anomaly chart

Recognizer

• Main create job page

Advanced

• Main job page
• Add detector modal
• Detector filter modal
• Save status modal

Data Visualizer

• Main page
• Side bar

Anomaly Explorer

• Main page
  • explorer.html (done except job selector in [ML] Migrate Anomaly Explorer to React (except job selector) #28234)
  • explorer_controller.js [ML] Anomaly Explorer: Deprecate explorer_controller #51269
• Swimlane [ML] Migrates Anomaly Explorer Swimlanes to React #22641
• Swimlane limit select control directive [ML] Migrate Anomaly Explorer to React (except job selector) #28234
• Swimlane limit select control service (relies on angularjs based AppState)
• Charts container [ML] Migrate Explorer Charts to React. #22622
• Chart [ML] Migrate Explorer Charts to React. #22622

Single Metric Viewer

• Main page [ML] Migrates single metric viewer to React. #41739
• Chart [ML] Migrate Timeseries Chart to React #25792
• Forecasting modal

Chart Tooltips

• mlChartTooltipService no longer depends on angularjs and jQuery
• mlChartTooltip angularjs directive was replaced by a ChartTooltip react component based on the styling and API of EUI Charts tooltips.

Settings

• Main page [ML] Converts Settings page to react #27144

Scheduled Events #26741

• Events list
• Import events modal
• New event modal
• Calendars list
• Create calendar page

No need to migrate

The following list of components should not need migrating as components with this functionality already exist in EUI:

• Confirm modal - use EuiConfirmModal
• Item select - use EuiComboBox
• Loading indicator - use EuiLoadingSpinner or EuiProgress
• Paginated Table - use EuiBasicTable or EuiInMemoryTable