feat(monitors): Add date page filter to monitor details (#41470)

<img width="1208" alt="image"
src="https://user-images.githubusercontent.com/9372512/202296300-2012ef33-4482-477a-89b9-0a72f2f06edf.png">

static/app/views/monitors/details.tsx

@@ -1,9 +1,13 @@
 import {Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
+import styled from '@emotion/styled';
 
+import DatePageFilter from 'sentry/components/datePageFilter';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {Panel, PanelHeader} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
+import space from 'sentry/styles/space';
 import AsyncView from 'sentry/views/asyncView';
 
 import MonitorCheckIns from './monitorCheckIns';
@@ -54,6 +58,10 @@ class MonitorDetails extends AsyncView<Props, State> {
           <Layout.Main fullWidth>
             {!monitor.lastCheckIn && <MonitorOnboarding monitor={monitor} />}
 
+            <StyledPageFilterBar condensed>
+              <DatePageFilter alignDropdown="left" />
+            </StyledPageFilterBar>
+
             <MonitorStats monitor={monitor} />
 
             <MonitorIssues monitor={monitor} orgId={this.props.params.orgId} />
@@ -70,4 +78,8 @@ class MonitorDetails extends AsyncView<Props, State> {
   }
 }
 
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(2)};
+`;
+
 export default MonitorDetails;

static/app/views/monitors/monitorIssues.tsx

@@ -2,6 +2,8 @@ import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import GroupList from 'sentry/components/issues/groupList';
 import {Panel, PanelBody} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
+import {getUtcDateString} from 'sentry/utils/dates';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 import {Monitor} from './types';
 
@@ -21,6 +23,18 @@ const MonitorIssuesEmptyMessage = () => (
 );
 
 const MonitorIssues = ({orgId, monitor}: Props) => {
+  const {selection} = usePageFilters();
+  const {start, end, period} = selection.datetime;
+  const timeProps =
+    start && end
+      ? {
+          start: getUtcDateString(start),
+          end: getUtcDateString(end),
+        }
+      : {
+          statsPeriod: period,
+        };
+
   return (
     <GroupList
       orgId={orgId}
@@ -29,6 +43,7 @@ const MonitorIssues = ({orgId, monitor}: Props) => {
         query: `monitor.id:"${monitor.id}"`,
         project: monitor.project.id,
         limit: 5,
+        ...timeProps,
       }}
       query=""
       renderEmptyMessage={MonitorIssuesEmptyMessage}

static/app/views/monitors/monitorStats.tsx

@@ -6,10 +6,12 @@ import LineSeries from 'sentry/components/charts/series/lineSeries';
 import EmptyMessage from 'sentry/components/emptyMessage';
 import {Panel, PanelBody} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
+import {intervalToMilliseconds} from 'sentry/utils/dates';
 import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
 import {AggregationOutputType} from 'sentry/utils/discover/fields';
 import theme from 'sentry/utils/theme';
 import useApiRequests from 'sentry/utils/useApiRequests';
+import usePageFilters from 'sentry/utils/usePageFilters';
 
 import {Monitor, MonitorStat} from './types';
 
@@ -22,8 +24,19 @@ type State = {
 };
 
 const MonitorStats = ({monitor}: Props) => {
-  const until = Math.floor(new Date().getTime() / 1000);
-  const since = until - 3600 * 24 * 30;
+  const {selection} = usePageFilters();
+  const {start, end, period} = selection.datetime;
+
+  let since: number, until: number;
+  if (start && end) {
+    until = new Date(end).getTime() / 1000;
+    since = new Date(start).getTime() / 1000;
+  } else {
+    until = Math.floor(new Date().getTime() / 1000);
+    const intervalSeconds = intervalToMilliseconds(period ?? '30d') / 1000;
+    since = until - intervalSeconds;
+  }
+
   const {data, renderComponent} = useApiRequests<State>({
     endpoints: [
       [
@@ -101,6 +114,8 @@ const MonitorStats = ({monitor}: Props) => {
           <BarChart
             isGroupedByDate
             showTimeInTooltip
+            useShortDate
+            utc
             series={[success, failed, missed]}
             stacked
             additionalSeries={additionalSeries}
@@ -125,7 +140,7 @@ const MonitorStats = ({monitor}: Props) => {
           />
         ) : (
           <EmptyMessage
-            title={t('Nothing recorded in the last 30 days.')}
+            title={t('Nothing recorded in the chosen time window.')}
             description={t('All check-ins for this monitor.')}
           />
         )}