Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create DateDetails component #460

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Create DateDetails component #460

wants to merge 13 commits into from

Conversation

hoorayimhelping
Copy link
Collaborator

@hoorayimhelping hoorayimhelping commented Aug 9, 2024

  • Adds a DateDetails component
    • Adds stories
    • Adds tests
Screen.Recording.2025-01-06.at.4.48.48.PM.mov

American locale

Screenshot 2025-01-06 at 4 49 44 PM

Copy link

vercel bot commented Aug 9, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
click-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 6, 2025 9:49pm

@vineethasok
Copy link
Collaborator

@hoorayimhelping @gjones I think we should rename this component to something else as datetime component usually represents the dropdown component to choose the date and time which we would be implementing as it is being used in some other projects like the ones @gingerwizard is working on

const formatDateTime = (date: Date, locale?: Intl.Locale, timeZone?: string) => {
let dateTimeFormatter;
try {
dateTimeFormatter = new Intl.DateTimeFormat(locale, {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoorayimhelping Need to make sure the Intl.DateTimeFormat matches the one we are using in unified console as we are using a third party package and may differ in format

@@ -0,0 +1,175 @@
import dayjs from "dayjs";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will dayjs increase the package size of the click-ui?
Can we add it like the styled components so that it won't be exported with this and the user needs to install it separately in their package.json in dependencies

@crisalbu
Copy link

Hey @hoorayimhelping , I almost forgot about this, apologies.

As I started thinking about this, I started wondering: how important is it for users to see this info in unix timestamp and other timezones that are not theirs. Could you provide some scenarios?

@hoorayimhelping
Copy link
Collaborator Author

@crisalbu no worries, we're all busy.

Let's use the following screenshot as an example for both questions. Let's say someone is looking at the Last run of a query, and they noticed it hasn't run in 6 hours, when it's supposed to run every hour.

Screenshot 2024-08-22 at 12 21 37 PM

I started wondering: how important is it for users to see this info in unix timestamp

That's a convenience thing. Most software systems use either unix timestamps or ISO8601 formatted dates internally in their systems. In our last run example, the user wants to search their system for something that happened after the last run (maybe a misconfiguration of a service, maybe a bad query). They have a timestamp of the last good run, so they know that the thing that broke their query had to have happened after that. Whatever date format their system uses, they can just copy that and write a query and just paste it in, rather than having to look up documentation about how to convert an ISO8601 timestamp into a unix timestamp (or vise versa).

and other timezones that are not theirs. Could you provide some scenarios?

Another convenience. Imagine Zach notices the last run is off, and he pings Fabio about it because he thinks its a code change broke the query. They both start looking over recent commits to see if one is suspicious. If the tools they use to do that show the commits in local time or UTC time, they don't have to do any kind of conversion because they have right format right in front of them.

Does that illustrate the reasoning a little better?

@crisalbu
Copy link

Yep, it makes sense, thank you very much for the examples. I'll add it as an action item for early next week.

@crisalbu
Copy link

Met with both Gareth and Bucky to discuss when we should use this component - and decided to use it there where time precision is necessary, e.g.: recent queries, audit page, notifications.

We also discussed that on these pages, the time should be presented relative to present time (5 min ago, 5h30 min ago, 1 day ago). When displaying the date , we should use this format:

  • Aug 26, 2:24 p.m. CET for the current year
  • Aug 26, 2023, 2:24 p.m. CET for past years
Screenshot 2024-08-30 at 10 14 04

The design of the component can be found here

The position of the arrow can be: top, bottom, left, right. This component was derived from the Popover component.
Thank you Bucky for offering to enrich the Popover component and implement the designs for left/right.

@hoorayimhelping hoorayimhelping changed the title Create DateTime component Create DateDetails component Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants