Absolute times overflow on the environments page

Summary

When using absolute times, the values for the Created and Deployed columns overflow on the environments page.

Steps to reproduce

• Disable relative times
• Create a deployment to an environment in a project
• Navigate to Project > Operate > Environments > {environment}
• Observe the issue

What is the current bug behavior?

• Absolute times overlap

What is the expected correct behavior?

• Absolute times don't overlap

Relevant logs and/or screenshots

Possible fixes

The table is pretty rigid with it's column width given the amount of content we're displaying there. One possible way to fix it would to truncate the text value of the time if it doesn't fit into the table cell.

Technical proposal

For that I'd suggest to use GlTruncate gitlab-ui component to provide truncation feature for the time text. It can be added to app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue component that displays the time tooltip.

We need to be careful here, as this component is used in many places across the application. In order to not change the default behavior, I'd make the truncation an opt-in feature, controlled by something like enable-truncation that is default to false.

Files of interest

app/assets/javascripts/environments/environment_details/deployments_table.vue
app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue