[VisBuilder][BUG] Flat render structure in Metric and Table Vis

[ananzh]

Description

This issue is caused by the callback behavior in ReactExpressionRenderer. The callback to ReactExpressionRenderer to update isLoading state is lost if we wrap the render vis with VisualizationContainer.

return (
    <div {...dataAttrs} className={classes}>
      {state.isEmpty && <EuiLoadingChart mono size="l" />}
      {state.isLoading && <EuiProgress size="xs" color="accent" position="absolute" />}
      {!state.isLoading &&
        state.error &&
        renderError &&
        renderError(state.error.message, state.error)}
      <div
        className="expExpressionRenderer__expression"
        style={expressionStyles}
        ref={mountpoint}
      />
    </div>
  );

This PR moved VisualizationContainer directly in MetricVisComponent. When put VisualizationContainer directly in the MetricVisComponent, all the lifecycle methods and hooks within MetricVisComponent directly influence the rendering of VisualizationContainer. This means that calls to renderComplete and other lifecycle integrations are more directly managed.

Issues Resolved

#6671

Screenshot

Changelog

• fix: [VisBuilder][BUG] Flat render structure in Metric and Table Vis

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.18%. Comparing base (460428c) to head (c4368c2).
Report is 9 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6674      +/-   ##
==========================================
+ Coverage   67.79%   68.18%   +0.39%     
==========================================
  Files        3413     2679     -734     
  Lines       66755    50961   -15794     
  Branches    10861     9171    -1690     
==========================================
- Hits        45254    34749   -10505     
+ Misses      18857    14013    -4844     
+ Partials     2644     2199     -445     

Flag	Coverage Δ
Linux_1	?
Linux_2	55.63% <ø> (ø)
Linux_3	45.26% <ø> (+0.01%)	⬆️
Linux_4	34.91% <ø> (ø)
Windows_1	25.91% <ø> (-7.30%)	⬇️
Windows_2	55.59% <ø> (ø)
Windows_3	45.26% <ø> (ø)
Windows_4	34.91% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ashwin-pc]

Can we write a simple unit test for this?

[ananzh]

Table is good but metrics has some embeddable issue

When load the first metric:

metrics-1.mov

Check metrics vis and see it actually has no problem

metrics-2.mov

Then if load another metric vis, no issue at all

[BionIT]

@ananzh is this PR targeting 2.15, could you check the failed workflow and see if related to your change?