feat(issues): Adds seconds, center zero duration timelines (#64486)

static/app/views/issueDetails/traceTimeline/traceTimeline.spec.tsx

@@ -125,4 +125,23 @@ describe('TraceTimeline', () => {
     render(<TraceTimeline event={event} />, {organization});
     expect(await screen.findByTestId('trace-timeline-empty')).toBeInTheDocument();
   });
+
+  it('shows seconds for very short timelines', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events/`,
+      body: issuePlatformBody,
+      match: [MockApiClient.matchQuery({dataset: 'issuePlatform'})],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events/`,
+      body: {
+        data: [],
+        meta: {fields: {}, units: {}},
+      },
+      match: [MockApiClient.matchQuery({dataset: 'discover'})],
+    });
+    render(<TraceTimeline event={event} />, {organization});
+    // Checking for the presence of seconds
+    expect(await screen.findAllByText(/\d{1,2}:\d{2}:\d{2} (AM|PM)/)).toHaveLength(3);
+  });
 });

static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx

@@ -24,15 +24,15 @@ interface TraceTimelineEventsProps {
 
 export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
   const {startTimestamp, endTimestamp, data} = useTraceTimelineEvents({event});
-  let durationMs = endTimestamp - startTimestamp;
-  const paddedStartTime = startTimestamp - 200;
-  let paddedEndTime = endTimestamp + 100;
-  // Will need to figure out padding
-  if (durationMs === 0) {
-    durationMs = 1000;
+  let paddedStartTime = startTimestamp;
+  let paddedEndTime = endTimestamp;
+  // Duration is 0, pad both sides, this is how we end up with 1 dot in the middle
+  if (endTimestamp - startTimestamp === 0) {
     // If the duration is 0, we need to pad the end time
-    paddedEndTime = startTimestamp + 1000;
+    paddedEndTime = startTimestamp + 1500;
+    paddedStartTime = startTimestamp - 1500;
   }
+  const durationMs = paddedEndTime - paddedStartTime;
 
   const totalColumns = Math.floor(width / PARENT_WIDTH);
   const eventsByColumn = getEventsByColumn(
@@ -43,9 +43,13 @@ export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
   );
   const columnSize = width / totalColumns;
 
+  // If the duration is less than 2 minutes, show seconds
+  const showTimelineSeconds = durationMs < 120 * 1000;
+
   return (
     <Fragment>
-      <TimelineColumns totalColumns={totalColumns}>
+      {/* Add padding to the total columns, 1 column of padding on each side */}
+      <TimelineColumns totalColumns={totalColumns + 2}>
         {Array.from(eventsByColumn.entries()).map(([column, colEvents]) => {
           // Calculate the timestamp range that this column represents
           const timeRange = getChunkTimeRange(
@@ -56,7 +60,8 @@ export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
           return (
             <EventColumn
               key={column}
-              style={{gridColumn: Math.floor(column), width: columnSize}}
+              // Add 1 to the column to account for the padding
+              style={{gridColumn: Math.floor(column) + 1, width: columnSize}}
             >
               <NodeGroup
                 event={event}
@@ -71,13 +76,17 @@ export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
       </TimelineColumns>
       <TimestampColumns>
         <TimestampItem style={{textAlign: 'left'}}>
-          <DateTime date={paddedStartTime} timeOnly />
+          <DateTime date={paddedStartTime} seconds={showTimelineSeconds} timeOnly />
         </TimestampItem>
         <TimestampItem style={{textAlign: 'center'}}>
-          <DateTime date={paddedStartTime + Math.floor(durationMs / 2)} timeOnly />
+          <DateTime
+            date={paddedStartTime + Math.floor(durationMs / 2)}
+            seconds={showTimelineSeconds}
+            timeOnly
+          />
         </TimestampItem>
         <TimestampItem style={{textAlign: 'right'}}>
-          <DateTime date={paddedEndTime} timeOnly />
+          <DateTime date={paddedEndTime} seconds={showTimelineSeconds} timeOnly />
         </TimestampItem>
       </TimestampColumns>
     </Fragment>

static/app/views/issueDetails/traceTimeline/traceTimelineTooltip.tsx

@@ -45,7 +45,9 @@ export function TraceTimelineTooltip({event, timelineEvents}: TraceTimelineToolt
               to={`/organizations/${organization.slug}/issues/${timelineEvent['issue.id']}/events/${timelineEvent.id}/`}
             >
               <div>
-                {project && <ProjectBadge project={project} avatarSize={18} hideName />}
+                {project && (
+                  <ProjectBadge project={project} avatarSize={18} hideName disableLink />
+                )}
               </div>
               <EventTitleWrapper>
                 <EventTitle>{timelineEvent.title}</EventTitle>