misc: improve events list and details (#1833)

getlago · Oct 28, 2024 · c90e2e4 · c90e2e4
1 parent dde6435
commit c90e2e4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 40 deletions.
diff --git a/src/components/developers/DebuggerEventDetails.tsx b/src/components/developers/DebuggerEventDetails.tsx
@@ -35,6 +35,7 @@ export const DebuggerEventDetails = ({ event }: DebuggerEventDetailsProps) => {
   const {
     billableMetricName,
     timestamp,
+    receivedAt,
     payload,
     transactionId,
     apiClient,
@@ -69,9 +70,17 @@ export const DebuggerEventDetails = ({ event }: DebuggerEventDetailsProps) => {
           </WideLine>
         )}
 
-        <PropertyLabel variant="caption">
-          {translate('text_6298bd525e359200d5ea018f')}
-        </PropertyLabel>
+        <Typography variant="caption">{translate('text_1730132579304cmiwba11ha6')}</Typography>
+        <PropertyValue color="grey700">
+          <StyledTimezoneDate
+            date={receivedAt}
+            customerTimezone={customerTimezone}
+            mainTimezone="utc0"
+            mainDateFormat="LLL. dd, yyyy HH:mm:ss 'UTC'"
+          />
+        </PropertyValue>
+
+        <Typography variant="caption">{translate('text_6298bd525e359200d5ea018f')}</Typography>
         <PropertyValue color="grey700">
           <StyledTimezoneDate
             date={timestamp}
@@ -81,24 +90,16 @@ export const DebuggerEventDetails = ({ event }: DebuggerEventDetailsProps) => {
           />
         </PropertyValue>
 
-        <PropertyLabel variant="caption">
-          {translate('text_62e0feac0a543924c8f67ae5')}
-        </PropertyLabel>
+        <Typography variant="caption">{translate('text_62e0feac0a543924c8f67ae5')}</Typography>
         <PropertyValue color="textSecondary">{externalSubscriptionId}</PropertyValue>
 
-        <PropertyLabel variant="caption">
-          {translate('text_6298bd525e359200d5ea01c1')}
-        </PropertyLabel>
+        <Typography variant="caption">{translate('text_6298bd525e359200d5ea01c1')}</Typography>
         <PropertyValue color="textSecondary">{code}</PropertyValue>
 
-        <PropertyLabel variant="caption">
-          {translate('text_6298bd525e359200d5ea01da')}
-        </PropertyLabel>
+        <Typography variant="caption">{translate('text_6298bd525e359200d5ea01da')}</Typography>
         <PropertyValue color="textSecondary">{billableMetricName}</PropertyValue>
 
-        <PropertyLabel variant="caption">
-          {translate('text_6298bd525e359200d5ea01f2')}
-        </PropertyLabel>
+        <Typography variant="caption">{translate('text_6298bd525e359200d5ea01f2')}</Typography>
         <PropertyValue color="textSecondary">
           {transactionId}
           <Tooltip
@@ -112,9 +113,7 @@ export const DebuggerEventDetails = ({ event }: DebuggerEventDetailsProps) => {
 
         {!!ipAddress && (
           <>
-            <PropertyLabel variant="caption">
-              {translate('text_6298bd525e359200d5ea020a')}
-            </PropertyLabel>
+            <Typography variant="caption">{translate('text_6298bd525e359200d5ea020a')}</Typography>
             <PropertyValue color="textSecondary" noWrap>
               {ipAddress}
             </PropertyValue>
@@ -123,9 +122,7 @@ export const DebuggerEventDetails = ({ event }: DebuggerEventDetailsProps) => {
 
         {!!apiClient && (
           <>
-            <PropertyLabel variant="caption">
-              {translate('text_6298bd525e359200d5ea0222')}
-            </PropertyLabel>
+            <Typography variant="caption">{translate('text_6298bd525e359200d5ea0222')}</Typography>
             <PropertyValue color="textSecondary" noWrap>
               {apiClient}
             </PropertyValue>
@@ -177,16 +174,13 @@ const PropertiesContainer = styled.div`
   display: grid;
   grid-template-columns: 140px 1fr;
   gap: ${theme.spacing(3)};
+  align-items: baseline;
 `
 
 const WideLine = styled.div`
   grid-column: span 2;
 `
 
-const PropertyLabel = styled(Typography)`
-  padding-top: 4px;
-`
-
 const PropertyValue = styled(Typography)`
   max-width: 100%;
   min-width: 0;

diff --git a/src/components/developers/EventItem.tsx b/src/components/developers/EventItem.tsx
@@ -2,17 +2,17 @@ import { gql } from '@apollo/client'
 import styled, { css } from 'styled-components'
 
 import { Avatar, Icon, Skeleton, Typography } from '~/components/designSystem'
-import { EventItemFragment } from '~/generated/graphql'
+import { formatDateToTZ } from '~/core/timezone'
+import { EventItemFragment, TimezoneEnum } from '~/generated/graphql'
 import { ListKeyNavigationItemProps } from '~/hooks/ui/useListKeyNavigation'
-import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { BaseListItem, ItemContainer, ListItem, theme } from '~/styles'
 import { tw } from '~/styles/utils'
 
 gql`
   fragment EventItem on Event {
     id
     code
-    timestamp
+    receivedAt
     matchBillableMetric
     matchCustomField
   }
@@ -25,9 +25,8 @@ interface EventItemProps {
 }
 
 export const EventItem = ({ event, navigationProps, selected, onClick }: EventItemProps) => {
-  const { code, timestamp, matchBillableMetric, matchCustomField } = event
+  const { code, receivedAt, matchBillableMetric, matchCustomField } = event
   const hasWarning = !matchBillableMetric || !matchCustomField
-  const { formatTimeOrgaTZ } = useOrganizationInfos()
 
   return (
     <ItemContainer>
@@ -50,7 +49,7 @@ export const EventItem = ({ event, navigationProps, selected, onClick }: EventIt
             </Typography>
           </NameBlock>
         </NameSection>
-        <Typography>{formatTimeOrgaTZ(timestamp, 'HH:mm:ss')}</Typography>
+        <Typography>{formatDateToTZ(receivedAt, TimezoneEnum.TzUtc, 'HH:mm:ss')}</Typography>
       </Item>
     </ItemContainer>
   )

diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -6469,7 +6469,7 @@ export type DeleteWebhookMutationVariables = Exact<{
 
 export type DeleteWebhookMutation = { __typename?: 'Mutation', destroyWebhookEndpoint?: { __typename?: 'DestroyWebhookEndpointPayload', id?: string | null } | null };
 
-export type EventItemFragment = { __typename?: 'Event', id: string, code: string, timestamp?: any | null, matchBillableMetric?: boolean | null, matchCustomField?: boolean | null };
+export type EventItemFragment = { __typename?: 'Event', id: string, code: string, receivedAt?: any | null, matchBillableMetric?: boolean | null, matchCustomField?: boolean | null };
 
 export type WebhookLogDetailsFragment = { __typename?: 'Webhook', id: string, webhookType: string, status: WebhookStatusEnum, payload?: string | null, response?: string | null, httpStatus?: number | null, endpoint: string, retries: number, updatedAt: any };
 
@@ -11076,7 +11076,7 @@ export const EventItemFragmentDoc = gql`
     fragment EventItem on Event {
   id
   code
-  timestamp
+  receivedAt
   matchBillableMetric
   matchCustomField
 }

diff --git a/src/pages/developers/Debugger.tsx b/src/pages/developers/Debugger.tsx
@@ -76,7 +76,7 @@ const Debugger = () => {
   const groupedEvent = useMemo(
     () =>
       (data?.events?.collection || []).reduce<Record<string, EventListFragment[]>>((acc, item) => {
-        const date = formatTimeOrgaTZ(item.timestamp)
+        const date = formatTimeOrgaTZ(item.receivedAt)
 
         acc[date] = [...(acc[date] ? acc[date] : []), item]
 
@@ -145,11 +145,11 @@ const Debugger = () => {
                   >
                     <ListContent>
                       {!refetchLoading &&
-                        Object.keys(groupedEvent).map((eventDate) => {
+                        Object.keys(groupedEvent).map((eventReceivedAt) => {
                           return (
-                            <div key={eventDate}>
-                              <DateHeader>{eventDate}</DateHeader>
-                              {groupedEvent[eventDate].map((event) => {
+                            <div key={eventReceivedAt}>
+                              <DateHeader>{eventReceivedAt}</DateHeader>
+                              {groupedEvent[eventReceivedAt].map((event) => {
                                 const { id } = event
 
                                 index += 1

diff --git a/translations/base.json b/translations/base.json
@@ -1824,7 +1824,7 @@
   "text_6298bd525e359200d5e9fffb": "Please refresh the page or contact us if the error persists.",
   "text_6298bd525e359200d5ea0007": "Refresh the page",
   "text_63f79ddae2e0b1892bb4955c": "Webhook successfully resent",
-  "text_6298bd525e359200d5ea018f": "Time",
+  "text_6298bd525e359200d5ea018f": "Timestamp",
   "text_6298bd525e359200d5ea01c1": "Billable metric code",
   "text_6298bd525e359200d5ea01da": "Billable metric name",
   "text_6298bd525e359200d5ea01f2": "Transaction ID",
@@ -2571,5 +2571,6 @@
   "text_1729084495407pcn1mei0hyd": "Refunding this prepaid invoice will void automatically the wallet credits once the credit note refund status is marked as succeeded.",
   "text_1729262241097k3cnpci6p5j": "Prepaid credits",
   "text_1729262339446mk289ygp31g": "Refund customer",
-  "text_17295725378539prq3x0wpry": "{{invoiceNumber}} for a remaining subtotal of {{subtotal}}"
+  "text_17295725378539prq3x0wpry": "{{invoiceNumber}} for a remaining subtotal of {{subtotal}}",
+  "text_1730132579304cmiwba11ha6": "Received at"
 }