[Alerting] Adds lazy loading to AlertType and Flyout components #65678

gmmorris · 2020-05-07T13:10:10Z

Summary

Followup from #65060 and closes #64315

This PR:

Adds support for lazy loading AlertType components and migrates the built-in IndexThreshold components to lazy load.
Adds lazy loading of the components contained in the flyout so that only the wrapper component is imported by other plugins and the internal components are loaded when needed.

This does not migrate other AlertTypes to lazy load and once this is merged issues will be submitted to the solution teams to change their alerts to lazy load wherever possible.

Checklist

Delete any items that are not applicable to this PR.

~~Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
~~This was checked for keyboard-only and screenreader accessibility~~
~~This renders correctly on smaller devices using a responsive layout. (You can test this in your browser~~
~~This was checked for cross-browser compatibility, including a check against IE11~~

For maintainers

This was checked for breaking API changes and was labeled appropriately

* master: (133 commits) Cleanup Typescript index pattern field editor / Expression functions for bucket agg (elastic#65254) Removes legacy infra plugin and moves saved objects registration to NP (elastic#64848) Added support for docLinks plugin in Connectors forms and missing save capabilities for modal dialog (elastic#64986) [SIEM] Removes prebuilt rules number dependency (elastic#65128) [Maps] add categorical palettes with 20 and 30 categories (elastic#64701) [CI] Slack alerts - Elasticsearch snapshot failures (elastic#64724) [Uptime] Console errors in case index missing (elastic#65115) [SIEM][CASE] Dynamic fields mapping based on connector (elastic#64412) [test/functional] Tsfy page objects (elastic#64887) [Maps] [Telemetry] Track geo_point and geo_shape index patterns separately (elastic#65195) [Maps] Add global fit to data (elastic#64702) Visualize: Reload on ui state change and fix ui state for tsvb (elastic#63699) [SIEM] [Cases] External service selection per case (elastic#64775) [Uptime] Set ML anomaly look-back to 2w (from 24h) / Add spinner (elastic#65055) [Metrics UI] Remove APM Hard Dependency (elastic#64952) [Ingest] Datastream list: add icons and dashboard links (elastic#65048) disable plugins. they could access ES via SO repository (elastic#65242) Feature fleet enrollment instructions (elastic#65176) [SIEM] Adds 'Configure connector' Cypress test (elastic#64807) [TSVB] Fix std deviation band mode (elastic#64413) ...

* master: (72 commits) add tsvb tests to Firefox suite (elastic#65425) Fix flaky ServerMetricsCollector integration test (elastic#65420) [APM] Custom links section inside the Actions menu is showing outside of the menu (elastic#65428) [ML] Adds docs_per_second to transform edit form. (elastic#65365) update apm index pattern (elastic#65424) add direct build command (elastic#65431) [ML] Adding daily_model_snapshot_retention_after_days to types and schemas (elastic#65417) [chore] Improve request cancelation handling in vis embeddable (elastic#65057) [Alerting] migrates acceptance and functional test fixtures to KP (elastic#64888) [ML] Fixes reordering in view by selection when overall cell selected (elastic#65290) Additional branding updates (elastic#64712) Remove redundant formatting of percentage column (elastic#64948) [SIEM][CASE] Configuration pages UI redesign (elastic#65355) New nav (elastic#64018) [Ingest pipelines] Address copy feedback (elastic#65175) bug fixing (elastic#65387) skip whole suite blocking snapshots (elastic#65377) add related event generation to ancestor nodes (fixes a bug) (elastic#64950) [Canvas] move files from legacy/plugins to plugins (elastic#65283) [SIEM] template timeline UI (elastic#64439) ...

This reverts commit f1ffe64.

* master: (42 commits) fix SavedObjectMigrationMap type (elastic#65569) [Uptime] Improve cert flaky test (elastic#65458) [Uptime] Fix monitor list result runtime type, ip can be null (elastic#65532) [APM] Agent configuration: Bug makes it possible to create invalid configurations (elastic#65508) [APM] Remove link from active page in the breadcrumb (elastic#65473) [SIEM] Fixes test flakiness (elastic#65510) [ESLint] update @kbn/eslint/no-restricted-paths rule to allow imports mocks from folder (elastic#65471) Migrate test plugins ⇒ NP (kbn_tp_run_pipeline) (elastic#64780) move core provier to NP. allows to run tests on every page (elastic#64929) Extended alerting documentation with information about using Kibana keystore and action types for preconfigured connectors (elastic#65201) [functional tests] add some missing awaits (elastic#65566) Fixed create new connector from alert flyout form throw an error messages in external plugins. (elastic#65539) [SIEM] [Cases] External services not getting all comments bug fix (elastic#65307) Migrate Coordinate Maps to NP (elastic#64668) Updating Canvas location in nav (elastic#65519) [SIEM][Lists] Fixes up contracts to work outside of requests [Lens] Remove "inside only" option for treemap labels (elastic#65363) [Uptime] Add TLS alert functional test (elastic#65303) Fix z-index of kbnLoadingIndicator (elastic#65521) Fixed indice assertion to loop through expected keys (elastic#64684) ...

This reverts commit 5280975.

This reverts commit 6172ab1.

elasticmachine · 2020-05-07T13:14:06Z

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

* master: [ML] Transforms: Fix API error message display for edit flyout. (elastic#65494) [SIEM][Detection Engine] Fixes import bug with non existent signals index (elastic#65595) [Lens] Use rules of hooks with linting (elastic#65593) [ML] Migrate server side Mocha tests to Jest. (elastic#65651) Fixes the client to setup SSL with the CA certificates for testing (elastic#65598) reduce uptime plugin initial bundle size (elastic#65257) [ML] Consolidating shared types and util functions (elastic#65247) [Drilldowns] Preserve state when selecting different action factory (elastic#65074) Migrate test plugins ⇒ NP (kbn_tp_embeddable_explorer) (elastic#64756) Move remaining home assets to the new platform (elastic#65053) Change the copy and the id from blacklist to block list for consistency (elastic#65419) [ML] Hide selector helper in Anomaly Explorer swimlane (elastic#65522) [ML] Fix the limit control on the Anomaly explorer page (elastic#65459) [Mappings editor] Add component integration tests (elastic#63853) [Logs + Metrics UI] Prevent component errors from breaking the whole UI (elastic#65456) [Logs UI] Disable search bar when live stream is on. (elastic#65491)

…ponents * alerting/lazy-load-actions: align and style loading indicator [ML] Transforms: Fix API error message display for edit flyout. (elastic#65494) [SIEM][Detection Engine] Fixes import bug with non existent signals index (elastic#65595) [Lens] Use rules of hooks with linting (elastic#65593) [ML] Migrate server side Mocha tests to Jest. (elastic#65651) Fixes the client to setup SSL with the CA certificates for testing (elastic#65598) reduce uptime plugin initial bundle size (elastic#65257) [ML] Consolidating shared types and util functions (elastic#65247) [Drilldowns] Preserve state when selecting different action factory (elastic#65074) Migrate test plugins ⇒ NP (kbn_tp_embeddable_explorer) (elastic#64756) Move remaining home assets to the new platform (elastic#65053) Change the copy and the id from blacklist to block list for consistency (elastic#65419) [ML] Hide selector helper in Anomaly Explorer swimlane (elastic#65522) [ML] Fix the limit control on the Anomaly explorer page (elastic#65459) [Mappings editor] Add component integration tests (elastic#63853) [Logs + Metrics UI] Prevent component errors from breaking the whole UI (elastic#65456) [Logs UI] Disable search bar when live stream is on. (elastic#65491)

* master: (58 commits) [Drilldowns][chore] import dashboard url generator from plugin contract (elastic#64628) fix double flyouts in add panel flow (elastic#65861) Point 7.x to 7.9.0 in .backportrc.json Mount ui/new_platform applications in same div structure as Core (elastic#63930) [Uptime] Settings threshold validation (elastic#65454) Fix edit alert flyout to update initialAlert after edit (elastic#65359) Fix anomalies display on focused APM service map (elastic#65882) [SIEM][Detection Engine] Increases the template limit for ECS mappings [SIEM][CASE] Moves functional tests from "legacyEs" to "Es" (elastic#65851) [Metrics UI] Fix p95/p99 charts and alerting error (elastic#65579) [ML] Add job timing stats to anomaly jobs (elastic#65696) restore index pattern management data-test-subj's (elastic#64697) [Discover] Prevent whitespace wrapping of doc table header (elastic#52861) [SIEM] Fixes a CSS issue with Timeline field truncation (elastic#65789) Skipping failing tests. elastic#65867 elastic#65866 elastic#65865 [Discover] Deangularize the hits counter and create a react component (elastic#65631) Tsvb less update (elastic#65467) [TSVB] Remove remaining lodash.set usage (elastic#65846) [Uptime] Add `a11y` tests (elastic#65514) [Uptime] Enable loading on monitor list (elastic#65670) ...

elasticmachine · 2020-05-11T12:48:43Z

Pinging @elastic/uptime (Team:uptime)

* master: (46 commits) [Drilldowns][chore] Remove some any's from components. Remove `PlaceContext` from components (elastic#65854) [functional/services] import By/until from module (elastic#66015) [Drilldowns][IE] fix welcome bar layout in IE (elastic#65676) Inspect action shows on dashboard for every chart (elastic#65998) Fix heigt calc in calc issue for ie11 (elastic#66010) [Flights] Delay Bucket - Error notification on opening sample visualization (elastic#66028) [SIEM] [Security] unified code structure phase 0 (elastic#65965) [Maps] Organize layers into subfolders (elastic#65513) skip flaky suite (elastic#59849) Cleanup prefill and edit flow. (elastic#66105) Fix major severity service map ring colors (elastic#66124) [DOCS] Improves formatting in action types (elastic#65932) [DOCS] APM Agent config: Setting values must be string (elastic#65875) Change default cert age limit value. (elastic#65918) [DOCS] Removed saved object options (elastic#66072) [SIEM] [Cases] Case API tests (elastic#65777) Add example of of local plugin installation (elastic#65986) skip flaky suite (elastic#65741) [SIEM][Detections] Restrict ML rule modification to ML Admins (elastic#65583) [Reporting/Test] Add Functional test for download CSV (elastic#65401) ...

gmmorris · 2020-05-12T09:40:28Z

x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx

+  alertParamsExpression: (params: any) => (
+    <AlertMonitorStatus {...params} autocomplete={autocomplete} />
+  ),


Changing the signature in alertParamsExpression has caused this to complain that params is implicitly any rather than explicitly.

I'm not sure why that has caused Typescript to complain about something that was already deemed to be any but it is what it is. 🤷

I'll submit an issue to Uptime to migrate to lazy loading when possible, which will likely be the right time to address the lack of typing too. :)

gmmorris · 2020-05-12T10:40:55Z

@elasticmachine merge upstream

* master: [Uptime] Enable deselection of stale filters (elastic#65523)

kibanamachine · 2020-05-12T13:09:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: fe21249

History

💚 Build #47250 succeeded 0736325
💛 Build #47230 was flaky 073a924
💛 Build #46908 was flaky 041e177
💚 Build #46882 succeeded e84b6be
💔 Build #46851 failed 67674f1

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

pmuellr

not familiar with react lazy loading, but code LGTM

pmuellr · 2020-05-12T14:17:36Z

x-pack/plugins/triggers_actions_ui/public/index.ts

+  AlertAction,
+  Alert,
+  AlertTypeModel,
+  AlertTypeParamsExpressionProps,


AlertTypeParamsExpressionProps doesn't seem to be referenced in this module. I assume you would have gotten a lint error on this

It's an export not an import ;)
I've made the same mistake before :p

justinkambic

No problems from the Uptime side (I only reviewed the change to x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx).

LGTM

justinkambic · 2020-05-12T14:40:56Z

x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx

+  alertParamsExpression: (params: any) => (
+    <AlertMonitorStatus {...params} autocomplete={autocomplete} />
+  ),


YulNaumenko

LGTM

…tic#65678) This PR: 1. Adds support for lazy loading AlertType components and migrates the built-in IndexThreshold components to lazy load. 2. Adds lazy loading of the components contained in the flyout so that only the wrapper component is imported by other plugins and the internal components are loaded when needed.

…) (#66255) This PR: 1. Adds support for lazy loading AlertType components and migrates the built-in IndexThreshold components to lazy load. 2. Adds lazy loading of the components contained in the flyout so that only the wrapper component is imported by other plugins and the internal components are loaded when needed.

gmmorris added 18 commits May 4, 2020 12:03

lazy load email action

9802747

fixed unit testing of lazy components

e6ec3f6

remoed uneeded mports

b717d31

lazy load all actions

9bdea73

use typing to ensure lazy loading

ab4b5eb

lazy load sections

20e11cb

revert siem changes

f1ffe64

corrected type in siem

7f95f90

Revert "revert siem changes"

12e8da4

This reverts commit f1ffe64.

updated docs

61b1b0f

fixed missing docLinks

105a802

lazy load exposed flyout components

5280975

Revert "lazy load exposed flyout components"

6172ab1

This reverts commit 5280975.

Revert "Revert "lazy load exposed flyout components""

b89934b

This reverts commit 6172ab1.

load exposed components lazily

f6774a1

gmmorris added Feature:Alerting Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v7.9.0 v8.0.0 labels May 7, 2020

gmmorris added 7 commits May 7, 2020 15:29

align and style loading indicator

9a497b6

spinner is configurable

e312b20

removed unused import

67674f1

fixed unit tests

e84b6be

support lazy loading on AlertType

488ee79

botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label May 11, 2020

gmmorris added 2 commits May 11, 2020 13:53

change type back to any as usage is wrong in other plugins

041e177

gmmorris added release_note:enhancement release_note:fix and removed release_note:enhancement labels May 12, 2020

gmmorris marked this pull request as ready for review May 12, 2020 09:27

gmmorris requested review from a team as code owners May 12, 2020 09:27

updated docs

0736325

gmmorris commented May 12, 2020

View reviewed changes

gmmorris changed the title ~~Alerting/lazy load components~~ [Alerting] Adds lazy loading to AlertType and Flyout components May 12, 2020

gmmorris closed this May 12, 2020

This was referenced May 12, 2020

Add lazy loading to Uptime AlertTypes #66188

Closed

Add lazy loading to APM AlertTypes #66189

Closed

Add lazy loading to Infra AlertTypes #66190

Closed

gmmorris reopened this May 12, 2020

Merge branch 'master' into alerting/lazy-load-components

fe21249

* master: [Uptime] Enable deselection of stale filters (elastic#65523)

pmuellr approved these changes May 12, 2020

View reviewed changes

justinkambic approved these changes May 12, 2020

View reviewed changes

YulNaumenko approved these changes May 12, 2020

View reviewed changes

gmmorris merged commit eef9ece into elastic:master May 12, 2020

gmmorris mentioned this pull request May 12, 2020

[7.x] [Alerting] Adds lazy loading to AlertType and Flyout components (#65678) #66255

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Alerting] Adds lazy loading to AlertType and Flyout components #65678

[Alerting] Adds lazy loading to AlertType and Flyout components #65678

gmmorris commented May 7, 2020 •

edited

Loading

elasticmachine commented May 7, 2020

elasticmachine commented May 11, 2020

gmmorris May 12, 2020 •

edited

Loading

justinkambic May 12, 2020

gmmorris commented May 12, 2020

kibanamachine commented May 12, 2020

pmuellr left a comment

pmuellr May 12, 2020

gmmorris May 12, 2020 •

edited

Loading

justinkambic left a comment

justinkambic May 12, 2020

YulNaumenko left a comment

[Alerting] Adds lazy loading to AlertType and Flyout components #65678

[Alerting] Adds lazy loading to AlertType and Flyout components #65678

Conversation

gmmorris commented May 7, 2020 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented May 7, 2020

elasticmachine commented May 11, 2020

gmmorris May 12, 2020 • edited Loading

Choose a reason for hiding this comment

justinkambic May 12, 2020

Choose a reason for hiding this comment

gmmorris commented May 12, 2020

kibanamachine commented May 12, 2020

💚 Build Succeeded

History

pmuellr left a comment

Choose a reason for hiding this comment

pmuellr May 12, 2020

Choose a reason for hiding this comment

gmmorris May 12, 2020 • edited Loading

Choose a reason for hiding this comment

justinkambic left a comment

Choose a reason for hiding this comment

justinkambic May 12, 2020

Choose a reason for hiding this comment

YulNaumenko left a comment

Choose a reason for hiding this comment

gmmorris commented May 7, 2020 •

edited

Loading

gmmorris May 12, 2020 •

edited

Loading

gmmorris May 12, 2020 •

edited

Loading