[APM] Rendering the service inventory is inexplicably slow

[dgieselaar]

Rendering the service inventory seems quite slow. On my M1 Max it takes about 1.7s with React Profiling enabled. It's also noticeably slow on production builds without profiling enabled or even the dev tools open. It's not immediately clear to me what is causing this but I'm thinking we can improve here, there shouldn't be any special things happening here.

It's most noticeable when re-sorting the inventory, by clicking on a column name (this does not trigger a new data fetch, just a in-browser in-memory resort).

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[sorenlouv]

It's most noticeable when re-sorting the inventory, by clicking on a column name (this does not trigger a new data fetch, just a in-browser in-memory resort).

I noticed this as well. It should be much faster since everything is in memory as you say.

[kpatticha]

at first sight, the culprit seems to be the icons.
When I started profiling and clicked 3 times to sort the table the EuiIcon(s) ranked first.

Then I removed the AgentIcon to verify it and the rendering was much faster.

The question is why it affects only the service inventory page and not the traces (we also use the AgentIcon for the originating service column)

[kpatticha]

We use EuiIcon in many places

grep -l -R "<EuiIcon"

 
./public/components/app/trace_overview/trace_list.tsx
./public/components/app/settings/anomaly_detection/jobs_list.tsx
./public/components/app/settings/schema/schema_overview.tsx
./public/components/app/settings/schema/migrated/successful_migration_card.tsx
./public/components/app/settings/schema/migrated/upgrade_available_card.tsx
./public/components/app/settings/custom_link/create_edit_custom_link_flyout/link_preview.tsx
./public/components/app/settings/agent_configurations/agent_configuration_create_edit/settings_page/setting_form_row.tsx
./public/components/app/error_group_overview/error_group_list/index.tsx
./public/components/app/error_group_details/detail_view/index.tsx
./public/components/app/service_inventory/service_list/index.tsx
./public/components/app/service_profiling/service_profiling_flamegraph.tsx
./public/components/app/service_profiling/service_profiling_timeline.tsx
./public/components/app/service_node_overview/index.tsx
./public/components/app/service_map/popover/anomaly_detection.tsx
./public/components/app/service_overview/service_overview_dependencies_table/index.tsx
./public/components/app/service_overview/service_overview_throughput_chart.tsx
./public/components/app/transaction_details/distribution/index.tsx
./public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/truncate_height_section.tsx
./public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx
./public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx
./public/components/app/correlations/chart_title_tool_tip.tsx
./public/components/app/correlations/failed_transactions_correlations.tsx
./public/components/app/correlations/latency_correlations.tsx
./public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
./public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.tsx
./public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx
./public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
./public/components/shared/kuery_bar/typeahead/suggestion.js
./public/components/shared/span_icon/index.tsx
./public/components/shared/key_value_filter_list/index.tsx
./public/components/shared/agent_icon/index.tsx
./public/components/shared/charts/timeseries_chart.tsx
./public/components/shared/charts/failed_transaction_rate_chart/index.tsx
./public/components/shared/charts/breakdown_chart/index.tsx
./public/components/shared/charts/transaction_breakdown_chart/index.tsx
./public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
./public/components/shared/charts/transaction_charts/ml_header.tsx
./public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx
./public/components/shared/charts/spark_plot/index.tsx
./public/components/shared/transaction_action_menu/custom_link_menu_section/custom_link_toolbar.tsx
./public/components/shared/metadata_table/index.tsx
./public/components/shared/transactions_table/get_columns.tsx
./public/components/shared/dependencies_table/index.tsx

but I've noticed that the rendering issue appears only when we use the EuiIcon with a custom SVG which is only in two place. The SpanIcon is the component for rendering the icons for the dependencies.

grep -R "<EuiIcon" . | grep "type={"

./public/components/shared/span_icon/index.tsx:  return <EuiIcon type={icon} size="l" title={type || subtype} />;
./public/components/shared/agent_icon/index.tsx:  return <EuiIcon type={icon} size={size} title={agentName} />;

[kpatticha]

I opened a ticket on theEUI side

• [EuiIcon] Custom SVG slows down the rendering  eui#5741

They fixed it and there is an update on Kibana already

• Upgrade EUI to v53.0.1 #128825
  Once it's merged and verified I will close this ticket 🥳

[thompsongl]

#128825 is expected to make it into 8.2 👍

[kpatticha]

Verified on main, closing the ticket

thanks for the quick fix @thompsongl