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