-
Notifications
You must be signed in to change notification settings - Fork 8
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
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@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 |
src/components/DateTime/DateTime.tsx
Outdated
const formatDateTime = (date: Date, locale?: Intl.Locale, timeZone?: string) => { | ||
let dateTimeFormatter; | ||
try { | ||
dateTimeFormatter = new Intl.DateTimeFormat(locale, { |
There was a problem hiding this comment.
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
src/components/DateTime/DateTime.tsx
Outdated
@@ -0,0 +1,175 @@ | |||
import dayjs from "dayjs"; |
There was a problem hiding this comment.
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
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? |
@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
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).
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? |
Yep, it makes sense, thank you very much for the examples. I'll add it as an action item for early next week. |
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:
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. |
1929e86
to
f4fc6fd
Compare
DateDetails
componentScreen.Recording.2025-01-06.at.4.48.48.PM.mov
American locale