IPv6 addresses display errors

[gdiazlo]

Wazuh	Elastic	Rev	Security
4.4.2	-	-	-

Browser
All

Description
Across the application, all IPs can be reported as IPv4 and IPv6. We must adapt all IP fields to render appropriately.
We have two cases mainly: when an address does not fit in the column of a table and overflows to the next line, and when the IP does not fit in the container and overflows outside of it, mixing the text with other elements.

We must design a way to correctly render these IP addresses. If we decide to truncate the address, we must add a copy button, so the user can always access the complete address.

Screenshots

[Desvelao]

@Tostti inform me in a meeting about the pending tasks of this issue.

He was researching how to implement the ellipsis for the IP address and rendering a button to copy the full value in the table of the Agents section.

I continued his research and I got something functional.

In the case of the Agents table:
For the ellipsis that could be displayed, it is required to remove the tableLayout=true property of the EuiTableBasic. This causes the width of the column to be not auto-sized, so the ID column would have a similar width to the IP address for example, when the content of the ID is significantly lower than another one.

The tableLayout=true property was added in this pull request #5143, because enhanced the space occupied by the table columns. So, it doesn't seem a good idea to remove this property now.

Applying the truncation to the IP address column reduces the visual information that a user can see.

The IP address could be considered important data in this table, so it could not make sense this data could be reduced through the truncation.

In the case we want to add the truncation to the IP address column, it needs to remove the tableLayout=true property.

Adding a button to copy the full value of the IP address for the cases when the value was truncated could have a high impact on the browser performance due to the needed calculations in the DOM. This would have to be done for each IP address cell of the table.

In a meeting with @asteriscos , we saw the IP address column has defined the trucateText property, that when the tableLayout=true cause the white-space set to nowrap. So, the value is not truncated with ellipsis and not wrapped to the next line. This forces the rest of the columns to reduce their widths while the IP address column is not affected, resulting in a poor look of the table. Maybe, we should apply the same logic to the columns.

Some tests

• tableLayout='auto', ip column no truncateText

tableLayout='auto'
ip column no truncateText

• tableLayout='auto', ip column truncateText=true

tableLayout='auto'
ip column truncateText=true

In this combination, the the IP address could not be truncated using an ellipsis doesn't work. This is a known problem in the table. This is needed to change the tableLayout to fixed to remove it (default value: fixed)

[Desvelao]

We have discussed this issue today in the daily meeting.

For now, we have decided to allow the IP address value can truncate to the next line. This means the truncateText column property from the IP address columns should be false or undefined.

Regarding the agents table in the Agents section, @gdiazlo commented on the idea to redesign how the data is displayed. This could need researching the use cases and collaborating with the UX co-workers for the redesign.

[Desvelao]

Update pull request #5471