Customize 24h vs 12h time formatting globally

[MikeShi42]

Some users have a preference for 12h time instead of 24h time, today we do a mix of both depending on the UI they're looking at (sessions is primarily 12h, logs are primarily 24h) - we should allow users to globally toggle 12/24h time and update the time format across the app accordingly.

I've already started a bit of the implementation, but there is still a lot of way to go:

• User preference provider to store preferences (does not persist yet): https://github.com/hyperdxio/hyperdx/blob/main/packages/app/src/useUserPreferences.tsx
• Search time range picker accepting timeFormat as a property and actually using it:

  hyperdx/packages/app/src/SearchTimeRangePicker.tsx

  Line 144 in 36cbc3d

  timeFormat === '24h' ? 'MMM d HH:mm:ss' : 'MMM d h:mm:ss a';

Todo:

• Update all time formats around the app in UI components to accept timeFormat as a property
• Update page components to inject timeFormat as a property to UI components (or shortcut this and just read from the provider directly)
• Add UI for user preferences in the settings page somewhere.
• Persist user preferences in localstorage

[treypisano]

Hi @MikeShi42 , can give resolving this issue a try?

[MikeShi42]

Sounds good! Let me know if you need any help or pointers :) Feel free to hop in on our Discord if there's some implementations ideas you want to chat about.

I'd also mention we have a hook called useLocalStorage that can help persisting the settings.

[treypisano]

Hi @MikeShi42 , just want to let you know I'm still working on this, just needed some time to get familiar with the codebase.

[ptdatta]

@MikeShi42 Is it completed? I would like to give it a try?