sentry/static/app/views/monitors/utils/useMonitorDates.tsx

import {useRef} from 'react';
import moment from 'moment';

import {intervalToMilliseconds} from 'sentry/utils/dates';
import usePageFilters from 'sentry/utils/usePageFilters';
import {getConfigFromTimeRange} from 'sentry/views/monitors/components/overviewTimeline/utils';

import type {TimeWindowConfig} from '../components/overviewTimeline/types';

interface Options {
  /**
   * The width of the timeline influences how we calculate the rollup value
   */
  timelineWidth: number;
}

interface SelectionQuery {
  resolution: string;
  since: number;
  until: number;
}

interface UseMonitorTimesResult {
  /**
   * Contains values used in the monitor-stats API query
   */
  selectionQuery: SelectionQuery;
  /**
   * The computed timeWindowConfig
   */
  timeWindowConfig: TimeWindowConfig;
}

/**
 * Computes since, until, and resolution for monitor stats based on the current
 * selected page filters.
 */
export function useMonitorTimes({timelineWidth}: Options): UseMonitorTimesResult {
  const nowRef = useRef<Date>(new Date());
  const {selection} = usePageFilters();
  const {start, end, period} = selection.datetime;

  let since: Date;
  let until: Date;

  if (!start || !end) {
    until = nowRef.current;
    since = moment(nowRef.current)
      .subtract(intervalToMilliseconds(period ?? '24h'), 'milliseconds')
      .toDate();
  } else {
    since = new Date(start);
    until = new Date(end);
  }

  const timeWindowConfig = getConfigFromTimeRange(since, until, timelineWidth);

  const elapsedMinutes = timeWindowConfig.elapsedMinutes;
  const rollup = Math.floor((elapsedMinutes * 60) / timelineWidth);

  const selectionQuery = {
    since: Math.floor(since.getTime() / 1000),
    until: Math.floor(until.getTime() / 1000),
    resolution: `${rollup}s`,
  };

  return {selectionQuery, timeWindowConfig};
}