[Alerting UI] Reduced triggersActionsUi bundle size by making all action types UI validation messages translations asynchronous. #100525

YulNaumenko · 2021-05-25T04:02:10Z

Resolves #95871

Summary

Changed action type validation methods validateConnector and validateParams to be asynchronous and load translations only when it's executed.

For the delayed translation loading (example simulate 5000ms delay) we decided to show the spinner:

Screen.Recording.2021-06-02.at.12.27.28.PM.mov

…nectors validation messages translations asyncronus.

elasticmachine · 2021-05-25T21:56:46Z

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

ymao1

Looks good overall. A few nits about creating reusable variables.

Also saw this after adding a pagerduty action to an alert and then editing the alert:

Uncaught TypeError: Cannot read property 'length' of undefined
    at PagerDutyParamsFields (pagerduty_params.tsx:138)
    at renderWithHooks (react-dom.development.js:16260)
    at updateFunctionComponent (react-dom.development.js:18347)
    at mountLazyComponent (react-dom.development.js:18657)
    at beginWork$1 (react-dom.development.js:20168)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24698)
PagerDutyParamsFields @ pagerduty_params.tsx:138
renderWithHooks @ react-dom.development.js:16260
updateFunctionComponent @ react-dom.development.js:18347
mountLazyComponent @ react-dom.development.js:18657
beginWork$1 @ react-dom.development.js:20168
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
beginWork$$1 @ react-dom.development.js:25780
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
scheduleUpdateOnFiber @ react-dom.development.js:23709
dispatchAction @ react-dom.development.js:17076
(anonymous) @ action_form.tsx:96
async function (async)
(anonymous) @ action_form.tsx:85
(anonymous) @ action_form.tsx:98
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
scheduleUpdateOnFiber @ react-dom.development.js:23709
dispatchAction @ react-dom.development.js:17076
(anonymous) @ alert_form.tsx:166
async function (async)
(anonymous) @ alert_form.tsx:151
(anonymous) @ alert_form.tsx:184
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
scheduleUpdateOnFiber @ react-dom.development.js:23709
dispatchAction @ react-dom.development.js:17076
(anonymous) @ health_check.tsx:52
async function (async)
(anonymous) @ health_check.tsx:36
(anonymous) @ health_check.tsx:54
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
discreteUpdates$1 @ react-dom.development.js:24423
discreteUpdates @ react-dom.development.js:1438
dispatchDiscreteEvent @ react-dom.development.js:5881
react-dom.development.js:21843 The above error occurred in the <PagerDutyParamsFields> component:
    in PagerDutyParamsFields (created by ActionTypeForm)
    in Suspense (created by ActionTypeForm)
    in EuiErrorBoundary (created by ActionTypeForm)
    in div (created by EuiResizeObserver)
    in div (created by EuiResizeObserver)
    in EuiResizeObserver (created by EuiAccordion)
    in div (created by EuiAccordion)
    in div (created by EuiAccordion)
    in EuiAccordion (created by ActionTypeForm)
    in ActionTypeForm (created by ActionForm)
    in ActionForm
    in Suspense
    in Unknown (created by AlertForm)
    in div (created by EuiForm)
    in EuiForm (created by AlertForm)
    in AlertForm (created by AlertEdit)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in EuiFlyoutBody (created by AlertEdit)
    in HealthCheck (created by AlertEdit)
    in HealthContextProvider (created by AlertEdit)
    in div (created by EuiFlyout)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by EuiFocusTrap)
    in EuiFocusTrap (created by EuiFlyout)
    in EuiFlyout (created by AlertEdit)
    in EuiPortal (created by AlertEdit)
    in AlertEdit
    in Suspense

...gers_actions_ui/public/application/components/builtin_action_types/email/email_connector.tsx

...riggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx

...s_actions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx

...actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx

YulNaumenko · 2021-05-27T20:03:14Z

Looks good overall. A few nits about creating reusable variables.

Also saw this after adding a pagerduty action to an alert and then editing the alert:

@ymao1 thank you for a so careful review!

YulNaumenko · 2021-05-27T21:41:54Z

@elasticmachine merge upstream

...ck/plugins/security_solution/public/detections/components/rules/step_rule_actions/schema.tsx

ymao1 · 2021-05-28T17:38:46Z

When I try to save an index action with an empty document field, it doesn't save but I don't see an error either

@YulNaumenko I am still seeing this. To recreate, I start creating a new rule, add an Index action and then press Save without touching the Document to index field. It doesn't save, but I don't see any error message. If I click into the Document to index text field and then click out, that does trigger the validation. But for other action type params (like Pagerduty), clicking the Save button triggers the validation without having to click in and out.

YulNaumenko · 2021-05-28T18:24:58Z

When I try to save an index action with an empty document field, it doesn't save but I don't see an error either

@YulNaumenko I am still seeing this. To recreate, I start creating a new rule, add an Index action and then press Save without touching the Document to index field. It doesn't save, but I don't see any error message. If I click into the Document to index text field and then click out, that does trigger the validation. But for other action type params (like Pagerduty), clicking the Save button triggers the validation without having to click in and out.

This is not related to the current PR, so I've opened a bug for fixing this.

YulNaumenko · 2021-05-29T22:23:08Z

@elasticmachine merge upstream

ymao1

LGTM

cnasikas

Security solution changes LTGM!

YulNaumenko · 2021-06-01T17:25:31Z

@elasticmachine merge upstream

igoristic

Stack Monitoring changes look good 👍

mikecote

Changes LGTM though I've noticed when the translations file takes time to load (async call), the validation messages don't appear until then. Is slow internet connections something to be concerned about for this UX?

YulNaumenko · 2021-06-01T19:36:55Z

Changes LGTM though I've noticed when the translations file takes time to load (async call), the validation messages don't appear until then. Is slow internet connections something to be concerned about for this UX?

@mikecote, thank you. Good point. Do you think some kind of spinner(progress bar) in the UI could help? Just to show the user that something still happening.

YulNaumenko · 2021-06-01T21:57:35Z

@elastic/kibana-core could someone clarify if we should worry about a bad UX for a slowly loaded bundle chunks, in the current case it is translations for UI validation messages?

YulNaumenko · 2021-06-03T03:28:21Z

@elasticmachine merge upstream

kibanamachine · 2021-06-03T05:18:46Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`triggersActionsUi`	366	372	+6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	6.9MB	6.9MB	+64.0B
`triggersActionsUi`	1.6MB	1.7MB	+68.2KB
total			+68.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`cases`	127.4KB	127.4KB	+32.0B
`triggersActionsUi`	96.7KB	73.8KB	-22.9KB
total			-22.9KB

Unknown metric groups

async chunk count

id	before	after	diff
`triggersActionsUi`	50	60	+10

History

💔 Build #128805 failed e0253c1
💔 Build #128802 failed 191aa52
💚 Build #128432 succeeded 7e40e96
💚 Build #128110 succeeded fce23e4
💚 Build #127780 succeeded 69afcef

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

cc @YulNaumenko

…ion types UI validation messages translations asynchronous. (elastic#100525) * [Alerting UI] Reduced triggersActionsUi bundle size by making all connectors validation messages translations asyncronus. * changed validation logic to be async * fixed action form * fixed tests * fixed tests * fixed validation usage in security * fixed due to comments * fixed due to comments * added spinner for the validation awaiting * fixed typechecks Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…ion types UI validation messages translations asynchronous. (#100525) (#101240) * [Alerting UI] Reduced triggersActionsUi bundle size by making all connectors validation messages translations asyncronus. * changed validation logic to be async * fixed action form * fixed tests * fixed tests * fixed validation usage in security * fixed due to comments * fixed due to comments * added spinner for the validation awaiting * fixed typechecks Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

[Alerting UI] Reduced triggersActionsUi bundle size by making all con…

3462a0f

…nectors validation messages translations asyncronus.

YulNaumenko self-assigned this May 25, 2021

YulNaumenko added 3 commits May 25, 2021 12:35

changed validation logic to be async

3431b6e

fixed action form

fa2a58c

fixed tests

feb6f17

YulNaumenko added Feature:Alerting Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v7.14.0 v8.0.0 release_note:skip Skip the PR/issue when compiling release notes labels May 25, 2021

YulNaumenko marked this pull request as ready for review May 25, 2021 21:56

YulNaumenko requested a review from a team as a code owner May 25, 2021 21:56

YulNaumenko added 3 commits May 25, 2021 15:25

fixed tests

fa6d89b

Merge remote-tracking branch upstream/master

8021eed

fixed validation usage in security

0d1fe6a

YulNaumenko requested a review from a team as a code owner May 27, 2021 03:25

ymao1 reviewed May 27, 2021

View reviewed changes

fixed due to comments

5ce6ffa

YulNaumenko requested a review from ymao1 May 27, 2021 20:03

Merge branch 'master' into alerting-ui-reduce-bundle-with-async-validate

69afcef

cnasikas reviewed May 28, 2021

View reviewed changes

...ck/plugins/security_solution/public/detections/components/rules/step_rule_actions/schema.tsx Show resolved Hide resolved

fixed due to comments

fccdb71

YulNaumenko requested a review from cnasikas May 29, 2021 22:22

Merge branch 'master' into alerting-ui-reduce-bundle-with-async-validate

fce23e4

ymao1 approved these changes Jun 1, 2021

View reviewed changes

cnasikas approved these changes Jun 1, 2021

View reviewed changes

Merge branch 'master' into alerting-ui-reduce-bundle-with-async-validate

7e40e96

kibanamachine requested a review from a team June 1, 2021 17:25

igoristic approved these changes Jun 1, 2021

View reviewed changes

mikecote self-requested a review June 1, 2021 19:03

mikecote approved these changes Jun 1, 2021

View reviewed changes

YulNaumenko added 2 commits June 2, 2021 11:08

Merge remote-tracking branch upstream/master

3de783d

added spinner for the validation awaiting

191aa52

YulNaumenko requested a review from a team as a code owner June 3, 2021 00:00

fixed typechecks

e0253c1

Merge branch 'master' into alerting-ui-reduce-bundle-with-async-validate

beab7ab

YulNaumenko merged commit 45ae6cc into elastic:master Jun 3, 2021

YulNaumenko mentioned this pull request Jun 3, 2021

[7.x] [Alerting UI] Reduced triggersActionsUi bundle size by making all action types UI validation messages translations asynchronous. (#100525) #101240

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Alerting UI] Reduced triggersActionsUi bundle size by making all action types UI validation messages translations asynchronous. #100525

[Alerting UI] Reduced triggersActionsUi bundle size by making all action types UI validation messages translations asynchronous. #100525

YulNaumenko commented May 25, 2021 •

edited

Loading

elasticmachine commented May 25, 2021

ymao1 left a comment

YulNaumenko commented May 27, 2021

YulNaumenko commented May 27, 2021

ymao1 commented May 28, 2021 •

edited

Loading

YulNaumenko commented May 28, 2021

YulNaumenko commented May 29, 2021

ymao1 left a comment

cnasikas left a comment

YulNaumenko commented Jun 1, 2021

igoristic left a comment

mikecote left a comment

YulNaumenko commented Jun 1, 2021

YulNaumenko commented Jun 1, 2021

YulNaumenko commented Jun 3, 2021

kibanamachine commented Jun 3, 2021

async chunk count

[Alerting UI] Reduced triggersActionsUi bundle size by making all action types UI validation messages translations asynchronous. #100525

[Alerting UI] Reduced triggersActionsUi bundle size by making all action types UI validation messages translations asynchronous. #100525

Conversation

YulNaumenko commented May 25, 2021 • edited Loading

Summary

elasticmachine commented May 25, 2021

ymao1 left a comment

Choose a reason for hiding this comment

YulNaumenko commented May 27, 2021

YulNaumenko commented May 27, 2021

ymao1 commented May 28, 2021 • edited Loading

YulNaumenko commented May 28, 2021

YulNaumenko commented May 29, 2021

ymao1 left a comment

Choose a reason for hiding this comment

cnasikas left a comment

Choose a reason for hiding this comment

YulNaumenko commented Jun 1, 2021

igoristic left a comment

Choose a reason for hiding this comment

mikecote left a comment

Choose a reason for hiding this comment

YulNaumenko commented Jun 1, 2021

YulNaumenko commented Jun 1, 2021

YulNaumenko commented Jun 3, 2021

kibanamachine commented Jun 3, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

async chunk count

History

YulNaumenko commented May 25, 2021 •

edited

Loading

ymao1 commented May 28, 2021 •

edited

Loading