[triggersActionsUi] Reduce page load bundle to under 100kB #97770

YulNaumenko · 2021-04-21T00:45:24Z

Resolves #95871

Summary

Current PR resolves the first part of the scope defined for the #95871:

changed all SVG files to be lazy loaded as a React components. Use the tool which is recommended by EUI team.
did the next minor code improvements:
- moved shared components props definitions to the x-pack/plugins/triggers_actions_ui/public/types.ts ;
- removed the usage duplication for x-pack/plugins/triggers_actions_ui/public/common/get_add_alert_flyout.tsx, x-pack/plugins/triggers_actions_ui/public/common/get_add_connector_flyout.tsx, x-pack/plugins/triggers_actions_ui/public/common/get_edit_alert_flyout.tsx, x-pack/plugins/triggers_actions_ui/public/common/get_edit_connector_flyout.tsx;
- replaced <Fragment></Fragment> with shorter version <></>;
- renamed some labels path to match the naming convention in Kibana translations

elasticmachine · 2021-05-23T22:47:50Z

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

tylersmalley

LGTM, thanks!

ymao1 · 2021-05-24T17:50:27Z

Great changes! The bundle size is looking great! A few things I noticed:

The JIRA logo is super small now

It used to look like this:

When creating a new rule, I see this in the browser console:

react.development.js:167 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `AlertForm`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by AlertForm)
    in AlertForm (created by AlertAdd)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in EuiFlyoutBody (created by AlertAdd)
    in HealthCheck (created by AlertAdd)
    in HealthContextProvider (created by AlertAdd)
    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 AlertAdd)
    in EuiPortal (created by AlertAdd)
    in AlertAdd

ymao1 · 2021-05-24T17:58:31Z

x-pack/plugins/triggers_actions_ui/README.md

@@ -206,13 +206,13 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
  ....



Should we add guidance in the README about using React components for logos instead of directly importing SVGs?

I will add this

ymao1 · 2021-05-25T12:39:42Z

Getting some more browser errors:

After creating a rule when the rules list loads:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TypeFilter`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by TypeFilter)
    in TypeFilter (created by AlertsList)
    in div (created by EuiFlexItem)
    in EuiFlexItem (created by AlertsList)
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (created by AlertsList)
    in div (created by EuiFlexItem)
    in EuiFlexItem (created by AlertsList)
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (created by AlertsList)
    in section (created by AlertsList)
    in AlertsList
    in Suspense
    in Unknown (created by Context.Consumer)
    in Route (created by TriggersActionsUIHome)
    in Switch (created by TriggersActionsUIHome)
    in HealthCheck (created by TriggersActionsUIHome)
    in HealthContextProvider (created by TriggersActionsUIHome)
    in div (created by EuiPanel)
    in EuiPanel (created by EuiPageContent)
    in EuiPageContent (created by TriggersActionsUIHome)
    in main (created by EuiPageBody)
    in EuiPageBody (created by TriggersActionsUIHome)
    in TriggersActionsUIHome

When creating an index threshold rule:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ThresholdExpression`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by ThresholdExpression)
    in ThresholdExpression
    in Suspense
    in Unknown (created by IndexThresholdAlertTypeExpression)
    in IndexThresholdAlertTypeExpression (created by AlertForm)
    in Suspense (created by AlertForm)
    in EuiErrorBoundary (created by AlertForm)
    in div (created by EuiForm)
    in EuiForm (created by AlertForm)
    in AlertForm (created by AlertAdd)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in EuiFlyoutBody (created by AlertAdd)
    in HealthCheck (created by AlertAdd)
    in HealthContextProvider (created by AlertAdd)
    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 AlertAdd)
    in EuiPortal (created by AlertAdd)
    in AlertAdd

YulNaumenko · 2021-05-25T21:01:01Z

Getting some more browser errors:

After creating a rule when the rules list loads:
Warning: Each child in a list should have a unique "key" prop.

When creating an index threshold rule:
Warning: Each child in a list should have a unique "key" prop.

Thank you for catching this, @ymao1 ! Fixed in the commit.

kibanamachine · 2021-05-25T22:49:32Z

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`triggersActionsUi`	236	232	-4

Async chunks

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

id	before	after	diff
`triggersActionsUi`	1.5MB	1.6MB	+92.0KB

Page load bundle

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

id	before	after	diff
`triggersActionsUi`	105.7KB	96.7KB	-9.1KB

Unknown metric groups

API count

id	before	after	diff
`triggersActionsUi`	245	241	-4

async chunk count

id	before	after	diff
`triggersActionsUi`	41	50	+9

miscellaneous assets size

id	before	after	diff
`triggersActionsUi`	37.7KB	0.0B	-37.7KB

References to deprecated APIs

id	before	after	diff
`crossClusterReplication`	8	6	-2
`globalSearch`	4	2	-2
`indexManagement`	12	7	-5
`infra`	261	149	-112
`lens`	67	45	-22
`licensing`	18	15	-3
total			-146

History

💚 Build #127007 succeeded a80b8da
💚 Build #126923 succeeded 3c32024
💔 Build #126837 failed 08e1948
💔 Build #126831 failed 41c25e8
💔 Build #126830 failed 92f71be

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

cc @YulNaumenko

ymao1

LGTM! Nice job!

…deprecation-ilm-policy * 'master' of github.com:elastic/kibana: (101 commits) [ftr] migrate "docTable" service to FtrService class (elastic#100595) [ftr] migrate "listingTable" service to FtrService class (elastic#100606) Fixed comparing real value with formatted according to mode. (elastic#100456) [ftr] migrate "dataGrid" service to FtrService class (elastic#100593) [ftr] migrate "fieldEditor" to FtrService class (elastic#100597) [ftr] migrate "filterBar" service to FtrService class (elastic#100601) [triggersActionsUi] Reduce page load bundle to under 100kB (elastic#97770) [build] Clean jest configs (elastic#100594) refact(NA): remove extra pkg_npm target and add specific target folders for @kbn/analytics on Bazel (elastic#100569) Update dependency @elastic/charts to v29.2.0 (elastic#100587) [Maps] convert LayerPanel to typescript (elastic#100481) [Upgrade Assistant] Address copy feedback (elastic#99632) Open/Closed filter for observability alerts page (elastic#99217) One liner to expose the EQL query for debugging for users (elastic#100565) [KibanaPageLayout] Solution Nav specific styles & props (elastic#100089) [ftr] implement FtrService classes and migrate common services (elastic#99546) [XY] [Lens] Adds opacity slider (elastic#100453) [Reporting] ILM policy for managing reporting indices (elastic#100130) [Reporting] ILM policy for managing reporting indices (elastic#100130) [DOCS] Remove redundant maps attribute (elastic#100426) ... # Conflicts: # x-pack/plugins/reporting/server/lib/store/report_ilm_policy.ts # x-pack/plugins/reporting/server/lib/store/store.test.ts # x-pack/plugins/reporting/server/lib/store/store.ts

…7770) * [triggersActionsUi] Reduce page load bundle to under 100kB * removed old code * removed fragment * changed svg logo to lazy react components * fixed type checks and translations * fixed type checks * fixed type checks * fixed type checks * fixed tests * fixed tests * fixed iconClass * fixed due to comments * added info about new IconType to readme file * fixed key errors

[triggersActionsUi] Reduce page load bundle to under 100kB

2456a1a

YulNaumenko self-assigned this Apr 21, 2021

YulNaumenko added 8 commits April 22, 2021 11:49

Merge remote-tracking branch upstream/master

348fe46

removed old code

5f424e9

Merge remote-tracking branch upstream/master

7d64e4d

removed fragment

acff73d

Merge remote-tracking branch upstream/master

9a417f5

Merge remote-tracking branch upstream/master

cdb81c6

Merge remote-tracking branch upstream/master

21dddf8

changed svg logo to lazy react components

9652975

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

YulNaumenko added 5 commits May 22, 2021 09:15

fixed type checks and translations

3abd58b

Merge remote-tracking branch upstream/master

463f698

fixed type checks

92f71be

fixed type checks

41c25e8

fixed type checks

552e923

YulNaumenko marked this pull request as ready for review May 23, 2021 22:47

YulNaumenko requested review from a team as code owners May 23, 2021 22:47

fixed tests

08e1948

tylersmalley reviewed May 24, 2021

View reviewed changes

tylersmalley approved these changes May 24, 2021

View reviewed changes

YulNaumenko added 2 commits May 24, 2021 07:03

Merge remote-tracking branch upstream/master

56e34aa

fixed tests

e2b9a55

fixed iconClass

3c32024

ymao1 reviewed May 24, 2021

View reviewed changes

fixed due to comments

3cfe9b2

YulNaumenko mentioned this pull request May 24, 2021

[Security Solution] [Cases] Swimlane Connector for Cases #100086

Merged

6 tasks

added info about new IconType to readme file

a80b8da

YulNaumenko requested a review from ymao1 May 24, 2021 21:27

fixed key errors

9b85dfc

ymao1 approved these changes May 25, 2021

View reviewed changes

YulNaumenko merged commit 5ebded2 into elastic:master May 26, 2021

YulNaumenko mentioned this pull request May 26, 2021

[7.x] [triggersActionsUi] Reduce page load bundle to under 100kB (#97770) #100625

Merged

cnasikas mentioned this pull request May 27, 2021

[Cases] Fix connector's logo sizes on cases #100763

Closed

cnasikas mentioned this pull request Jul 21, 2021

[Alerting] Pass EuiIcon props to connectors logos #106449

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[triggersActionsUi] Reduce page load bundle to under 100kB #97770

[triggersActionsUi] Reduce page load bundle to under 100kB #97770

YulNaumenko commented Apr 21, 2021 •

edited

Loading

elasticmachine commented May 23, 2021

tylersmalley left a comment

ymao1 commented May 24, 2021

ymao1 May 24, 2021

YulNaumenko May 24, 2021

ymao1 commented May 25, 2021

YulNaumenko commented May 25, 2021

kibanamachine commented May 25, 2021

API count

async chunk count

miscellaneous assets size

References to deprecated APIs

ymao1 left a comment

		@@ -206,13 +206,13 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
		....

[triggersActionsUi] Reduce page load bundle to under 100kB #97770

[triggersActionsUi] Reduce page load bundle to under 100kB #97770

Conversation

YulNaumenko commented Apr 21, 2021 • edited Loading

Summary

elasticmachine commented May 23, 2021

tylersmalley left a comment

Choose a reason for hiding this comment

ymao1 commented May 24, 2021

ymao1 May 24, 2021

Choose a reason for hiding this comment

YulNaumenko May 24, 2021

Choose a reason for hiding this comment

ymao1 commented May 25, 2021

YulNaumenko commented May 25, 2021

kibanamachine commented May 25, 2021

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

miscellaneous assets size

References to deprecated APIs

History

ymao1 left a comment

Choose a reason for hiding this comment

YulNaumenko commented Apr 21, 2021 •

edited

Loading