ref(crons): Prefer timeWindowConfig.timelineWidth (#71032)

static/app/components/events/interfaces/crons/cronTimelineSection.tsx

@@ -102,15 +102,8 @@ export function CronTimelineSection({event, organization, project}: Props) {
     >
       <TimelineContainer>
         <TimelineWidthTracker ref={elementRef} />
-        <StyledGridLineTimeLabels
-          timeWindowConfig={timeWindowConfig}
-          width={timelineWidth}
-        />
-        <GridLineOverlay
-          showCursor={!isLoading}
-          timeWindowConfig={timeWindowConfig}
-          width={timelineWidth}
-        />
+        <StyledGridLineTimeLabels timeWindowConfig={timeWindowConfig} />
+        <GridLineOverlay showCursor={!isLoading} timeWindowConfig={timeWindowConfig} />
         {monitorStats && !isLoading ? (
           <Fragment>
             <EventLineTick left={eventTickLeft} />
@@ -119,7 +112,6 @@ export function CronTimelineSection({event, organization, project}: Props) {
             </EventLineLabel>
             <FadeInContainer>
               <CheckInTimeline
-                width={timelineWidth}
                 bucketedData={monitorStats[monitorId]}
                 timeWindowConfig={timeWindowConfig}
                 environment={environment ?? DEFAULT_ENVIRONMENT}

static/app/views/monitors/components/detailsTimeline.tsx

@@ -100,19 +100,17 @@ export function DetailsTimeline({monitor, organization}: Props) {
       <TimelineWidthTracker ref={elementRef} />
       <Header>
         <TimelineTitle>{t('Check-Ins')}</TimelineTitle>
-        <GridLineLabels timeWindowConfig={timeWindowConfig} width={timelineWidth} />
+        <GridLineLabels timeWindowConfig={timeWindowConfig} />
       </Header>
       <AlignedGridLineOverlay
         allowZoom={!isLoading}
         showCursor={!isLoading}
         timeWindowConfig={timeWindowConfig}
-        width={timelineWidth}
       />
       <OverviewRow
         monitor={monitor}
         bucketedData={monitorStats?.[monitor.id]}
         timeWindowConfig={timeWindowConfig}
-        width={timelineWidth}
         onDeleteEnvironment={handleDeleteEnvironment}
         onToggleMuteEnvironment={handleToggleMuteEnvironment}
         singleMonitorView

static/app/views/monitors/components/mockTimelineVisualization.tsx

@@ -99,17 +99,12 @@ export function MockTimelineVisualization({schedule}: Props) {
         </Fragment>
       ) : (
         <Fragment>
-          <AlignedGridLineLabels
-            timeWindowConfig={timeWindowConfig}
-            width={timelineWidth}
-          />
+          <AlignedGridLineLabels timeWindowConfig={timeWindowConfig} />
           <AlignedGridLineOverlay
             showCursor={!isLoading}
             timeWindowConfig={timeWindowConfig}
-            width={timelineWidth}
           />
           <MockCheckInTimeline
-            width={timelineWidth}
             mockTimestamps={mockTimestamps.slice(1, mockTimestamps.length - 1)}
             timeWindowConfig={timeWindowConfig}
           />

static/app/views/monitors/components/overviewTimeline/index.tsx

@@ -135,10 +135,7 @@ export function OverviewTimeline({monitorList}: Props) {
             borderless
           />
         </HeaderControlsLeft>
-        <AlignedGridLineLabels
-          timeWindowConfig={timeWindowConfig}
-          width={timelineWidth}
-        />
+        <AlignedGridLineLabels timeWindowConfig={timeWindowConfig} />
         <HeaderControlsRight>
           <DateNavigator
             dateNavigation={dateNavigation}
@@ -153,7 +150,6 @@ export function OverviewTimeline({monitorList}: Props) {
         allowZoom
         showCursor={!isLoading}
         timeWindowConfig={timeWindowConfig}
-        width={timelineWidth}
       />
 
       <MonitorRows>
@@ -163,7 +159,6 @@ export function OverviewTimeline({monitorList}: Props) {
             monitor={monitor}
             timeWindowConfig={timeWindowConfig}
             bucketedData={monitorStats?.[monitor.id]}
-            width={timelineWidth}
             onDeleteEnvironment={env => handleDeleteEnvironment(monitor, env)}
             onToggleMuteEnvironment={(env, isMuted) =>
               handleToggleMuteEnvironment(monitor, env, isMuted)

static/app/views/monitors/components/timeline/checkInTimeline.tsx

@@ -12,7 +12,6 @@ import type {MonitorBucketData, TimeWindowConfig} from './types';
 
 interface TimelineProps {
   timeWindowConfig: TimeWindowConfig;
-  width: number;
 }
 
 export interface CheckInTimelineProps extends TimelineProps {
@@ -30,11 +29,11 @@ function getBucketedCheckInsPosition(
 }
 
 export function CheckInTimeline(props: CheckInTimelineProps) {
-  const {bucketedData, timeWindowConfig, width, environment} = props;
-  const {start, end} = timeWindowConfig;
+  const {bucketedData, timeWindowConfig, environment} = props;
+  const {start, end, timelineWidth} = timeWindowConfig;
 
   const elapsedMs = end.getTime() - start.getTime();
-  const msPerPixel = elapsedMs / width;
+  const msPerPixel = elapsedMs / timelineWidth;
 
   const jobTicks = mergeBuckets(bucketedData, environment);
 
@@ -79,11 +78,10 @@ export interface MockCheckInTimelineProps extends TimelineProps {
 export function MockCheckInTimeline({
   mockTimestamps,
   timeWindowConfig,
-  width,
 }: MockCheckInTimelineProps) {
   const {start, end} = timeWindowConfig;
   const elapsedMs = end.getTime() - start.getTime();
-  const msPerPixel = elapsedMs / width;
+  const msPerPixel = elapsedMs / timeWindowConfig.timelineWidth;
 
   return (
     <TimelineContainer>

static/app/views/monitors/components/timeline/gridLines.tsx

@@ -14,10 +14,6 @@ import type {TimeWindowConfig} from './types';
 
 interface Props {
   timeWindowConfig: TimeWindowConfig;
-  /**
-   * The size of the timeline
-   */
-  width: number;
   /**
    * Enable zoom selection
    */
@@ -64,13 +60,13 @@ function alignDateToBoundary(date: moment.Moment, minuteInterval: number) {
   return date.startOf('day');
 }
 
-function getTimeMarkersFromConfig(config: TimeWindowConfig, width: number) {
-  const {start, end, elapsedMinutes, intervals, dateTimeProps} = config;
+function getTimeMarkersFromConfig(config: TimeWindowConfig) {
+  const {start, end, elapsedMinutes, intervals, dateTimeProps, timelineWidth} = config;
 
   const {referenceMarkerInterval, minimumMarkerInterval, normalMarkerInterval} =
     intervals;
 
-  const msPerPixel = (elapsedMinutes * 60 * 1000) / width;
+  const msPerPixel = (elapsedMinutes * 60 * 1000) / timelineWidth;
 
   // The first marker will always be the starting time. This always renders the
   // full date and time
@@ -103,8 +99,8 @@ function getTimeMarkersFromConfig(config: TimeWindowConfig, width: number) {
   return markers;
 }
 
-export function GridLineLabels({width, timeWindowConfig, className}: Props) {
-  const markers = getTimeMarkersFromConfig(timeWindowConfig, width);
+export function GridLineLabels({timeWindowConfig, className}: Props) {
+  const markers = getTimeMarkersFromConfig(timeWindowConfig);
 
   return (
     <LabelsContainer aria-hidden className={className}>
@@ -118,7 +114,6 @@ export function GridLineLabels({width, timeWindowConfig, className}: Props) {
 }
 
 export function GridLineOverlay({
-  width,
   timeWindowConfig,
   showCursor,
   stickyCursor,
@@ -126,9 +121,9 @@ export function GridLineOverlay({
   className,
 }: Props) {
   const router = useRouter();
-  const {start, dateLabelFormat} = timeWindowConfig;
+  const {start, timelineWidth, dateLabelFormat} = timeWindowConfig;
 
-  const msPerPixel = (timeWindowConfig.elapsedMinutes * 60 * 1000) / width;
+  const msPerPixel = (timeWindowConfig.elapsedMinutes * 60 * 1000) / timelineWidth;
 
   const dateFromPosition = useCallback(
     (position: number) => moment(start.getTime() + msPerPixel * position),
@@ -165,7 +160,7 @@ export function GridLineOverlay({
   });
 
   const overlayRef = mergeRefs(cursorContainerRef, selectionContainerRef);
-  const markers = getTimeMarkersFromConfig(timeWindowConfig, width);
+  const markers = getTimeMarkersFromConfig(timeWindowConfig);
 
   // Skip first gridline, this will be represented as a border on the
   // LabelsContainer