feat(crons): Add environment selector to crons details page (#49024)

<img width="1281" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/df01707f-d534-4b30-8202-4ba586abdfec">

Fixes https://github.com/getsentry/sentry/issues/49118

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

@@ -25,7 +25,7 @@ import {
 
 type Props = {
   monitor: Monitor;
-  monitorEnv: MonitorEnvironment;
+  monitorEnvs: MonitorEnvironment[];
   orgId: string;
 };
 
@@ -48,11 +48,17 @@ const statusToText: Record<CheckInStatus, string> = {
   [CheckInStatus.TIMEOUT]: t('Timed Out'),
 };
 
-function MonitorCheckIns({monitor, monitorEnv, orgId}: Props) {
+function MonitorCheckIns({monitor, monitorEnvs, orgId}: Props) {
   const location = useLocation();
   const queryKey = [
     `/organizations/${orgId}/monitors/${monitor.slug}/checkins/`,
-    {query: {per_page: '10', environment: monitorEnv.name, ...location.query}},
+    {
+      query: {
+        per_page: '10',
+        environment: monitorEnvs.map(e => e.name),
+        ...location.query,
+      },
+    },
   ] as const;
 
   const {

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

@@ -9,7 +9,7 @@ import {Monitor, MonitorEnvironment} from '../types';
 
 type Props = {
   monitor: Monitor;
-  monitorEnv: MonitorEnvironment;
+  monitorEnvs: MonitorEnvironment[];
   orgId: string;
 };
 
@@ -25,7 +25,7 @@ function MonitorIssuesEmptyMessage() {
   );
 }
 
-function MonitorIssues({orgId, monitor}: Props) {
+function MonitorIssues({orgId, monitor, monitorEnvs}: Props) {
   const {selection} = usePageFilters();
   const {start, end, period} = selection.datetime;
   const timeProps =
@@ -45,7 +45,7 @@ function MonitorIssues({orgId, monitor}: Props) {
       orgId={orgId}
       endpointPath={`/organizations/${orgId}/issues/`}
       queryParams={{
-        query: `monitor.slug:"${monitor.slug}"`,
+        query: `monitor.slug:"${monitor.slug}" enviroment:[${monitorEnvs.join(',')}]`,
         project: monitor.project.id,
         limit: 5,
         ...timeProps,

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

@@ -21,11 +21,11 @@ import {Monitor, MonitorEnvironment, MonitorStat} from '../types';
 
 type Props = {
   monitor: Monitor;
-  monitorEnv: MonitorEnvironment;
+  monitorEnvs: MonitorEnvironment[];
   orgId: string;
 };
 
-function MonitorStats({monitor, monitorEnv, orgId}: Props) {
+function MonitorStats({monitor, monitorEnvs, orgId}: Props) {
   const {selection} = usePageFilters();
   const {start, end, period} = selection.datetime;
 
@@ -46,7 +46,7 @@ function MonitorStats({monitor, monitorEnv, orgId}: Props) {
         since: since.toString(),
         until: until.toString(),
         resolution: '1d',
-        environment: monitorEnv.name,
+        environment: monitorEnvs.map(e => e.name),
       },
     },
   ] as const;

static/app/views/monitors/details.tsx

@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import DatePageFilter from 'sentry/components/datePageFilter';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {space} from 'sentry/styles/space';
@@ -58,7 +59,10 @@ function MonitorDetails({params, location}: Props) {
     );
   }
 
-  const monitorEnv = monitor.environments.find(env => env.name === environment);
+  const hasLastCheckIn = monitor.environments.some(e => e.lastCheckIn);
+  const envsSortedByLastCheck = monitor.environments.sort((a, b) =>
+    a.lastCheckIn.localeCompare(b.lastCheckIn)
+  );
 
   return (
     <SentryDocumentTitle title={`Crons - ${monitor.name}`}>
@@ -66,36 +70,39 @@ function MonitorDetails({params, location}: Props) {
         <MonitorHeader monitor={monitor} orgId={organization.slug} onUpdate={onUpdate} />
         <Layout.Body>
           <Layout.Main>
-            {!monitorEnv?.lastCheckIn ? (
+            <StyledPageFilterBar condensed>
+              <DatePageFilter alignDropdown="left" />
+              <EnvironmentPageFilter />
+            </StyledPageFilterBar>
+            {!hasLastCheckIn ? (
               <MonitorOnboarding orgId={organization.slug} monitor={monitor} />
             ) : (
               <Fragment>
-                <StyledPageFilterBar condensed>
-                  <DatePageFilter alignDropdown="left" />
-                </StyledPageFilterBar>
-
                 <MonitorStats
                   orgId={organization.slug}
                   monitor={monitor}
-                  monitorEnv={monitorEnv}
+                  monitorEnvs={monitor.environments}
                 />
 
                 <MonitorIssues
                   orgId={organization.slug}
                   monitor={monitor}
-                  monitorEnv={monitorEnv}
+                  monitorEnvs={monitor.environments}
                 />
 
                 <MonitorCheckIns
                   orgId={organization.slug}
                   monitor={monitor}
-                  monitorEnv={monitorEnv}
+                  monitorEnvs={monitor.environments}
                 />
               </Fragment>
             )}
           </Layout.Main>
           <Layout.Side>
-            <DetailsSidebar monitorEnv={monitorEnv} monitor={monitor} />
+            <DetailsSidebar
+              monitorEnv={envsSortedByLastCheck[envsSortedByLastCheck.length - 1]}
+              monitor={monitor}
+            />
           </Layout.Side>
         </Layout.Body>
       </Layout.Page>