ref(crons): Add start + end to TimeWindowConfig (#67971)

We pretty much always need these here, so just put them into the
TimeWindowConfig

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

@@ -102,15 +102,11 @@ export function CronTimelineSection({event, organization, project}: Props) {
         <TimelineWidthTracker ref={elementRef} />
         <StyledGridLineTimeLabels
           timeWindowConfig={timeWindowConfig}
-          start={start}
-          end={end}
           width={timelineWidth}
         />
         <GridLineOverlay
           showCursor={!isLoading}
           timeWindowConfig={timeWindowConfig}
-          start={start}
-          end={end}
           width={timelineWidth}
         />
         {monitorStats && !isLoading ? (
@@ -123,8 +119,6 @@ export function CronTimelineSection({event, organization, project}: Props) {
               <CheckInTimeline
                 width={timelineWidth}
                 bucketedData={monitorStats[monitorId]}
-                start={start}
-                end={end}
                 timeWindowConfig={timeWindowConfig}
                 environment={environment ?? DEFAULT_ENVIRONMENT}
               />

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

@@ -37,7 +37,7 @@ export function CronDetailsTimeline({monitor, organization}: Props) {
   const elementRef = useRef<HTMLDivElement>(null);
   const {width: timelineWidth} = useDimensions<HTMLDivElement>({elementRef});
 
-  const {dates, selectionQuery, timeWindowConfig} = useMonitorTimes({timelineWidth});
+  const {selectionQuery, timeWindowConfig} = useMonitorTimes({timelineWidth});
 
   const monitorStatsQueryKey = `/organizations/${organization.slug}/monitors-stats/`;
   const {data: monitorStats, isLoading} = useApiQuery<Record<string, MonitorBucketData>>(
@@ -115,27 +115,18 @@ export function CronDetailsTimeline({monitor, organization}: Props) {
       <TimelineWidthTracker ref={elementRef} />
       <Header>
         <TimelineTitle>{t('Check-Ins')}</TimelineTitle>
-        <GridLineTimeLabels
-          timeWindowConfig={timeWindowConfig}
-          start={dates.start}
-          end={dates.end}
-          width={timelineWidth}
-        />
+        <GridLineTimeLabels timeWindowConfig={timeWindowConfig} width={timelineWidth} />
       </Header>
       <StyledGridLineOverlay
         allowZoom={!isLoading}
         showCursor={!isLoading}
         timeWindowConfig={timeWindowConfig}
-        start={dates.start}
-        end={dates.end}
         width={timelineWidth}
       />
       <TimelineTableRow
         monitor={monitor}
         bucketedData={monitorStats?.[monitor.id]}
         timeWindowConfig={timeWindowConfig}
-        start={dates.start}
-        end={dates.end}
         width={timelineWidth}
         onDeleteEnvironment={handleDeleteEnvironment}
         onToggleMuteEnvironment={handleToggleMuteEnvironment}

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

@@ -103,22 +103,16 @@ export function MockTimelineVisualization({schedule}: Props) {
         <Fragment>
           <StyledGridLineTimeLabels
             timeWindowConfig={timeWindowConfig}
-            start={start}
-            end={end}
             width={timelineWidth}
           />
           <StyledGridLineOverlay
             showCursor={!isLoading}
             timeWindowConfig={timeWindowConfig}
-            start={start}
-            end={end}
             width={timelineWidth}
           />
           <MockCheckInTimeline
             width={timelineWidth}
             mockTimestamps={mockTimestamps.slice(1, mockTimestamps.length - 1)}
-            start={start}
-            end={end}
             timeWindowConfig={timeWindowConfig}
           />
         </Fragment>

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

@@ -12,8 +12,6 @@ import {JobTickTooltip} from './jobTickTooltip';
 import type {MonitorBucketData, TimeWindowConfig} from './types';
 
 interface TimelineProps {
-  end: Date;
-  start: Date;
   timeWindowConfig: TimeWindowConfig;
   width: number;
 }
@@ -33,7 +31,8 @@ function getBucketedCheckInsPosition(
 }
 
 export function CheckInTimeline(props: CheckInTimelineProps) {
-  const {bucketedData, start, end, timeWindowConfig, width, environment} = props;
+  const {bucketedData, timeWindowConfig, width, environment} = props;
+  const {start, end} = timeWindowConfig;
 
   const elapsedMs = end.getTime() - start.getTime();
   const msPerPixel = elapsedMs / width;
@@ -79,11 +78,10 @@ export interface MockCheckInTimelineProps extends TimelineProps {
 
 export function MockCheckInTimeline({
   mockTimestamps,
-  start,
-  end,
   timeWindowConfig,
   width,
 }: MockCheckInTimelineProps) {
+  const {start, end} = timeWindowConfig;
   const elapsedMs = end.getTime() - start.getTime();
   const msPerPixel = elapsedMs / width;
 

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

@@ -13,8 +13,6 @@ import {useTimelineCursor} from './timelineCursor';
 import {useTimelineZoom} from './timelineZoom';
 
 interface Props {
-  end: Date;
-  start: Date;
   timeWindowConfig: TimeWindowConfig;
   width: number;
   allowZoom?: boolean;
@@ -42,13 +40,8 @@ interface TimeMarker {
   position: number;
 }
 
-function getTimeMarkersFromConfig(
-  start: Date,
-  end: Date,
-  config: TimeWindowConfig,
-  width: number
-) {
-  const {elapsedMinutes, timeMarkerInterval} = config;
+function getTimeMarkersFromConfig(config: TimeWindowConfig, width: number) {
+  const {start, end, elapsedMinutes, timeMarkerInterval} = config;
   const msPerPixel = (elapsedMinutes * 60 * 1000) / width;
 
   const times: TimeMarker[] = [];
@@ -63,41 +56,31 @@ function getTimeMarkersFromConfig(
     times.push({date: timeMark.toDate(), position});
   }
 
-  return times;
+  return times.reverse();
 }
 
-export function GridLineTimeLabels({
-  width,
-  timeWindowConfig,
-  start,
-  end,
-  className,
-}: Props) {
+export function GridLineTimeLabels({width, timeWindowConfig, className}: Props) {
   return (
     <LabelsContainer className={className}>
-      {getTimeMarkersFromConfig(start, end, timeWindowConfig, width).map(
-        ({date, position}) => (
-          <TimeLabelContainer key={date.getTime()} left={position}>
-            <TimeLabel date={date} {...timeWindowConfig.dateTimeProps} />
-          </TimeLabelContainer>
-        )
-      )}
+      {getTimeMarkersFromConfig(timeWindowConfig, width).map(({date, position}) => (
+        <TimeLabelContainer key={date.getTime()} left={position}>
+          <TimeLabel date={date} {...timeWindowConfig.dateTimeProps} />
+        </TimeLabelContainer>
+      ))}
     </LabelsContainer>
   );
 }
 
 export function GridLineOverlay({
-  end,
   width,
   timeWindowConfig,
-  start,
   showCursor,
   stickyCursor,
   allowZoom,
   className,
 }: Props) {
   const router = useRouter();
-  const {dateLabelFormat} = timeWindowConfig;
+  const {start, dateLabelFormat} = timeWindowConfig;
 
   const msPerPixel = (timeWindowConfig.elapsedMinutes * 60 * 1000) / width;
 
@@ -142,11 +125,9 @@ export function GridLineOverlay({
       {timelineCursor}
       {timelineSelector}
       <GridLineContainer>
-        {getTimeMarkersFromConfig(start, end, timeWindowConfig, width).map(
-          ({date, position}) => (
-            <Gridline key={date.getTime()} left={position} />
-          )
-        )}
+        {getTimeMarkersFromConfig(timeWindowConfig, width).map(({date, position}) => (
+          <Gridline key={date.getTime()} left={position} />
+        ))}
       </GridLineContainer>
     </Overlay>
   );

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

@@ -40,7 +40,7 @@ export function OverviewTimeline({monitorList}: Props) {
   const elementRef = useRef<HTMLDivElement>(null);
   const {width: timelineWidth} = useDimensions<HTMLDivElement>({elementRef});
 
-  const {dates, selectionQuery, timeWindowConfig} = useMonitorTimes({timelineWidth});
+  const {selectionQuery, timeWindowConfig} = useMonitorTimes({timelineWidth});
 
   const monitorStatsQueryKey = `/organizations/${organization.slug}/monitors-stats/`;
   const {data: monitorStats, isLoading} = useApiQuery<Record<string, MonitorBucketData>>(
@@ -141,20 +141,13 @@ export function OverviewTimeline({monitorList}: Props) {
         <HeaderControls>
           <SortSelector size="xs" />
         </HeaderControls>
-        <GridLineTimeLabels
-          timeWindowConfig={timeWindowConfig}
-          start={dates.start}
-          end={dates.end}
-          width={timelineWidth}
-        />
+        <GridLineTimeLabels timeWindowConfig={timeWindowConfig} width={timelineWidth} />
       </Header>
       <GridLineOverlay
         stickyCursor
         allowZoom
         showCursor={!isLoading}
         timeWindowConfig={timeWindowConfig}
-        start={dates.start}
-        end={dates.end}
         width={timelineWidth}
       />
 
@@ -164,8 +157,6 @@ export function OverviewTimeline({monitorList}: Props) {
           monitor={monitor}
           timeWindowConfig={timeWindowConfig}
           bucketedData={monitorStats?.[monitor.id]}
-          start={dates.start}
-          end={dates.end}
           width={timelineWidth}
           onDeleteEnvironment={env => handleDeleteEnvironment(monitor, env)}
           onToggleMuteEnvironment={(env, isMuted) =>

static/app/views/monitors/components/overviewTimeline/jobTickTooltip.spec.tsx

@@ -20,6 +20,8 @@ export function generateEnvMapping(name: string, counts: StatusCounts) {
 }
 
 const tickConfig: TimeWindowConfig = {
+  start: new Date('2023-06-15T11:00:00Z'),
+  end: new Date('2023-06-15T12:00:00Z'),
   dateLabelFormat: getFormat({timeOnly: true, seconds: true}),
   elapsedMinutes: 60,
   timeMarkerInterval: 10,

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

@@ -15,6 +15,14 @@ export interface TimeWindowConfig {
    * The elapsed minutes based on the selected resolution
    */
   elapsedMinutes: number;
+  /**
+   * The end of the window
+   */
+  end: Date;
+  /**
+   * The start of the window
+   */
+  start: Date;
   /**
    * The interval between each grid line and time label in minutes
    */

static/app/views/monitors/components/overviewTimeline/utils.spec.tsx

@@ -10,6 +10,8 @@ describe('Crons Timeline Utils', function () {
       const end = new Date('2023-06-15T11:05:00Z');
       const config = getConfigFromTimeRange(start, end, timelineWidth);
       expect(config).toEqual({
+        start,
+        end,
         dateLabelFormat: getFormat({timeOnly: true, seconds: true}),
         elapsedMinutes: 5,
         timeMarkerInterval: 1,
@@ -22,6 +24,8 @@ describe('Crons Timeline Utils', function () {
       const end = new Date('2023-06-15T23:00:00Z');
       const config = getConfigFromTimeRange(start, end, timelineWidth);
       expect(config).toEqual({
+        start,
+        end,
         dateLabelFormat: getFormat({timeOnly: true}),
         elapsedMinutes: 900,
         timeMarkerInterval: 240,
@@ -34,6 +38,8 @@ describe('Crons Timeline Utils', function () {
       const end = new Date('2023-06-15T11:00:00Z');
       const config = getConfigFromTimeRange(start, end, timelineWidth);
       expect(config).toEqual({
+        start,
+        end,
         dateLabelFormat: getFormat(),
         // 31 elapsed days
         elapsedMinutes: 31 * 24 * 60,

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

@@ -47,6 +47,8 @@ export function getConfigFromTimeRange(
 
     // Configuration falls into
     return {
+      start,
+      end,
       dateLabelFormat: getFormat({timeOnly: true, seconds: subMinutePxBuckets}),
       elapsedMinutes,
       timeMarkerInterval: minutes,
@@ -57,6 +59,8 @@ export function getConfigFromTimeRange(
   // Calculate days between each time label interval for larger time ranges
   const timeLabelIntervalDays = Math.ceil(timeLabelMinutes / (ONE_HOUR * 24));
   return {
+    start,
+    end,
     dateLabelFormat: getFormat(),
     elapsedMinutes,
     timeMarkerInterval: timeLabelIntervalDays * ONE_HOUR * 24,