[BUG] Object tables with updated_at takes up too much space

[ashwin-pc]

Describe the bug

Ever since #1218, each item in an object table has a lot less space to work with e.g. in the Visualize page each visualization occupies 2 line. This is because we use the expanded notation for time for each record.

To Reproduce
Steps to reproduce the behavior:

1. Go to Visualize
2. See the timestamp

Expected behavior

There are a few ways to fix this:

1. A pretty print version of the timestamp e.g. 2 hours ago
2. Resize-able column widths
3. Show or hide columns

Ideally we should be able to do all 3 with the underlying component <OUITable> having support for 2&3

OpenSearch Version
Please list the version of OpenSearch being used.

Dashboards Version
Please list the version of OpenSearch Dashboards being used.

Plugins

Please list all plugins currently enabled.

Screenshots

If applicable, add screenshots to help explain your problem.

Host/Environment (please complete the following information):

• OS: [e.g. iOS]
• Browser and version [e.g. 22]

Additional context

Add any other context about the problem here.

[bandinib-amzn]

Need to check if prettyduration solves this issue.

[bandinib-amzn]

For current Pretty duration implementation, we will need to convert Last updated to relative time e.g. now-15m, now and also need to provide custom commonDurationRanges.

These are the existing commonDurationRanges

[
  {
    "start": "now/d",
    "end": "now/d",
    "label": "Today"
  },
  {
    "start": "now/w",
    "end": "now/w",
    "label": "This week"
  },
  {
    "start": "now/M",
    "end": "now/M",
    "label": "This month"
  },
  {
    "start": "now/y",
    "end": "now/y",
    "label": "This year"
  },
  {
    "start": "now-1d/d",
    "end": "now-1d/d",
    "label": "Yesterday"
  },
  {
    "start": "now/w",
    "end": "now",
    "label": "Week to date"
  },
  {
    "start": "now/M",
    "end": "now",
    "label": "Month to date"
  },
  {
    "start": "now/y",
    "end": "now",
    "label": "Year to date"
  }
]

There are two options available to display a pretty print version of the timestamp e.g. 2 hours ago

1] Convert timestamp to relative time and use prettyDuration OUI component with custom commonDurationRanges
e.g.

prettyDuration('now-2h', 'now', [{"start":"now-2h","end":"now","label":"2 hours ago"}], 'MMMM Do YYYY, HH:mm:ss.SSS')

In above example 'now-2h' and label would be dynamic.

2] We can use moment library
e.g.

moment(updatedAt).fromNow()

But in both approach we first need to decide at what level (days, hours, minutes, seconds) we want to show time to the user.

According to original issue, customer wanted to add this information to sort objects by date. That means they might be interested to see more granular level date.

[ashwin-pc]

@bandinib-amzn To sort a value by date, the raw table should already have access to this information. We are only updating what the user sees here. We can also additionally toggle between the pretty version and descriptive version on user click. There are a lot of UI's that do exactly this. @KrooshalUX whats your guidance on this?

As for how we want to approach commonDurationRanges, I'd look into the current implementation with OSD to see how we determine this. i.e. in the Time filter in the TopNav element. I'd try to follow that implementation since we want to be consistent with how we display this information across Dashboards