UX - container image -> containers and container_pods screens have string truncation making it unusable

[jrafanie]

I navigated to a specific container image with several containers, then clicked containers. The same problem occurs with container_pods

cc @DavidResende0 @Fryguy

With this column width here, truncation isn't needed. Note, in this example, the only difference in the pod names is at the end of the string, which is exactly where we're truncating it.

[jeffibm]

Hey @jrafanie , will this presentation be ok?

To view this change, all we need to do is to pass a value truncateText=false to the StaticGTLView component (common component), which will remove the truncation of text on its data-table cells.

It was introduced a while ago to handle longer text to avoid horizontal scrolling and limit the table content to the screen width itself (which is not helpful in this page though)

Do we want to make this change based on modelName, in this case 'containers'?
like, do not truncate cells for certain pages.

[jrafanie]

@jeffibm this is actually image -> container or image -> container_pods as it's actually the pod name that is truncated so I can't really tell if it's resolved from the screenshot.

Truncation is fine but it should match the width of the column. If a use sees a truncating UI screen, they should be able to expand the column width to remove most if not all of the truncation.

In both screenshots, we're truncating well before the column width. How does it determine the text length before the truncation? We're either putting it in an element that doesn't match the column width or it's truncating based on a specific string length.

[jeffibm]

@jeffibm this is actually image -> container or image -> container_pods as it's actually the pod name that is truncated so I can't really tell if it's resolved from the screenshot.

Truncation is fine but it should match the width of the column. If a use sees a truncating UI screen, they should be able to expand the column width to remove most if not all of the truncation.

In both screenshots, we're truncating well before the column width. How does it determine the text length before the truncation? We're either putting it in an element that doesn't match the column width or it's truncating based on a specific string length.

we used to truncate the text if its length is more than 40. let me put in some screenshots here with different possibilities.

[jrafanie]

we used to truncate the text if its length is more than 40. let me put in some screenshots here with different possibilities.

Ok, I think that fails with different devices such as tablets or wide screen monitors so it's not really good for responsive design.

[jrafanie]

If needed, we should get UX review on it for carbon to see if there are responsive features we're not using.

[jeffibm]

If needed, we should get UX review on it for carbon to see if there are responsive features we're not using.

I didn't find any reference for truncation for table cells. the current implementation uses custom css.
The carbon data tables do have the option to expand rows, like an accordion. I was also thinking of making use of it for truncated text.. need to see how it would render truncated and non-truncated text.

[jeffibm]

I modified the MiqDataTable a bit to look like this.
#8825

[miq-bot]

This issue has been automatically marked as stale because it has not been updated for at least 3 months.

If you can still reproduce this issue on the current release or on master, please reply with all of the information you have about it in order to keep the issue open.

Thank you for all your contributions! More information about the ManageIQ triage process can be found in the triage process documentation.

[jeffibm]

Closing this issue since the Fix was merged.