Adds a configuration option to customize the standard datetime format

[leogomes]

Signed-off-by: Leonardo FREITAS GOMES leonardo.f.gomes@gmail.com

Which problem is this PR solving?

• Current datetime format used is not precise. It shows the trace start time with a minute precision.

Short description of the changes

• Adds a new configuration option that allows users to specify the datetime format they want to use, so that users can display time using format options like fractional second and timezone.

[codecov]

Codecov Report

Merging #403 into master will increase coverage by 0.05%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #403      +/-   ##
==========================================
+ Coverage   91.58%   91.63%   +0.05%     
==========================================
  Files         176      176              
  Lines        3994     3995       +1     
  Branches      921      922       +1     
==========================================
+ Hits         3658     3661       +3     
+ Misses        298      296       -2     
  Partials       38       38

Impacted Files	Coverage Δ
...ackages/jaeger-ui/src/constants/default-config.tsx	100% <ø> (ø)	⬆️
packages/jaeger-ui/src/utils/date.tsx	90.47% <100%> (ø)	⬆️
packages/jaeger-ui/src/constants/index.tsx	100% <100%> (ø)	⬆️
...eViewer/TimelineHeaderRow/TimelineViewingLayer.tsx	91.52% <0%> (+3.38%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6b59893...1ff8ee5. Read the comment docs.

[yurishkuro]

Can you provide a screenshot? Which timestamps is this affecting?

Also, there should be some documentation about the config file format, it needs to be updated to describe the new property.

[leogomes]

Here's a possible new date format set:

and here's the original one:

This only affects this timestamp now. With my change, the STANDARD_DATETIME_FORMAT is customized, so it could affect other dates in the future. So far, it seems to be only used by the "Trace Start" header field.

[leogomes]

For documentation update, it would be a separate PR here: https://github.com/jaegertracing/documentation/blob/master/content/docs/next-release/frontend-ui.md

right, @yurishkuro ?

[tiffon]

Instead of adding a config value, maybe it makes sense to change the trace page header to show a more precise datetime, instead? What is your preferred level of precision?

I think this change looks good but the use of the word "standard" is out of place.

[tiffon]

Since this is used in only one place, I don't think it's the "standard" date time format.

[leogomes]

I called it like that, because it overrides the format used by the STANDARD_DATETIME_FORMAT constant. Today, it's only used in one place, but if other bits of the UI start using https://github.com/jaegertracing/jaeger-ui/blob/master/packages/jaeger-ui/src/utils/date.tsx#L64 they will also be affected. I'm fine with calling it "traceStartDateFormat" too :)

[leogomes]

@tiffon What do you suggest? Shall I remove the config option and add the fractional seconds to the format as shown below? Or should I keep the config and just rename the variable to remove the standard_ prefix?

[leogomes]

Instead of adding a config value, maybe it makes sense to change the trace page header to show a more precise datetime, instead? What is your preferred level of precision?

Up to fractional seconds would be a nice format: 'MMMM Do YYYY, HH:mm:ss.SSS'

[tiffon]

@yurishkuro The fractional seconds work for you? I think it looks good and is preferable over another config option.

[yurishkuro]

It's fine. Using smaller font for decimals is another option (but harder to implement).

[tiffon]

@leogomes Thanks for your help with this.

Reducing the contrast might be preferable over making the text smaller; it's already pretty small.

That was done using the u-tx-muted util CSS class:

  {
    key: 'timestamp',
    label: 'Trace Start',
    renderer: (trace: Trace) => {
      const dateStr = formatDatetime(trace.startTime);
      const match = dateStr.match(/^(.+)(\.\d+)$/);
      return match ? <>{match[1]}<span className="u-tx-muted">{match[2]}</span></> : dateStr;
    }
  },

[leogomes]

Hello @tiffon, @yurishkuro,

What's the status on this one? Have @tiffon changes been merged somewhere and we can close this one?

Thanks,
Leo

[yurishkuro]

@tiffon any more feedback?

[tiffon]

@leogomes Thanks. I put together a PR for it: #430

LMK if you have any feedback.

I think this PR is good to close.