wazuh-dashboard-plugins icon indicating copy to clipboard operation
wazuh-dashboard-plugins copied to clipboard

Specify behavior when visualizations are in small containers

Open mpRegalado opened this issue 3 years ago • 1 comments

Wazuh Elastic
4.2 7.12

Description Due to underlying changes on kibana v7.12, we have found that some layouts don't render as they used to, leading to situations where the width of containers becomes too small. There is also a common method used to handle loading of visualizations that sets the height of the container to 0.

Visualizations now appear to perform an internal subtraction operation at some point of the rendering process, leading to errors of attempting to pass negative values for their dimensions in the console. This does not prevent them to actually render and it is not noticeable if not looking at the console. But it is still an error.

Proposed solution

  • Any use of hiding methods during loading that involve changing the dimensions of the container should be removed. And replaced with a conditional setting of the display style or not rendering them at all until they are ready.

  • The kibanaVis component could include a specified minimum dimensions for all components. This could lead to cascading modifications in pages where these visualizations are used so it must be done carefully.

  • There seems to be a method already integrated in kibana visualizations that shows an error when the container is too small to show. As it is configured by default this width appears to be 0 and causes odd behavior when active, but it is worth investigating to include it in our use. image.png

Additional context This is related to #3219

mpRegalado avatar Jun 10 '21 09:06 mpRegalado

Some underlying behavior of the components used has changed with the new version causing odd effects at low widths. A refactor would be needed to stop using the visualization rows with specified width percentages and use properties already offered by EuiFlexGroup that let us wrap components over at low widths automatically. Other components, such as the reports, should be observed and corrected carefully during this process as well.

mpRegalado avatar Jun 29 '21 11:06 mpRegalado