ref(hybrid-cloud): use monitor urls with org slug frontend (#42728)

Author: cathteng

static/app/views/monitors/details.tsx

@@ -35,7 +35,13 @@ class MonitorDetails extends AsyncView<Props, State> {
 
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
     const {params, location} = this.props;
-    return [['monitor', `/monitors/${params.monitorId}/`, {query: location.query}]];
+    return [
+      [
+        'monitor',
+        `/monitors/${this.orgSlug}/${params.monitorId}/`,
+        {query: location.query},
+      ],
+    ];
   }
 
   getTitle() {
@@ -68,14 +74,14 @@ class MonitorDetails extends AsyncView<Props, State> {
                   <DatePageFilter alignDropdown="left" />
                 </StyledPageFilterBar>
 
-                <MonitorStats monitor={monitor} />
+                <MonitorStats monitor={monitor} orgId={this.orgSlug} />
 
                 <MonitorIssues monitor={monitor} orgId={this.orgSlug} />
 
                 <Panel>
                   <PanelHeader>{t('Recent Check-ins')}</PanelHeader>
 
-                  <MonitorCheckIns monitor={monitor} />
+                  <MonitorCheckIns monitor={monitor} orgId={this.orgSlug} />
                 </Panel>
               </Fragment>
             )}

static/app/views/monitors/monitorCheckIns.tsx

@@ -21,16 +21,21 @@ type CheckIn = {
 
 type Props = {
   monitor: Monitor;
+  orgId: string;
 };
 
 type State = {
   checkInList: CheckIn[];
 };
 
-const MonitorCheckIns = ({monitor}: Props) => {
+const MonitorCheckIns = ({monitor, orgId}: Props) => {
   const {data, hasError, renderComponent} = useApiRequests<State>({
     endpoints: [
-      ['checkInList', `/monitors/${monitor.id}/checkins/`, {query: {per_page: '10'}}],
+      [
+        'checkInList',
+        `/monitors/${orgId}/${monitor.id}/checkins/`,
+        {query: {per_page: '10'}},
+      ],
     ],
   });
 

static/app/views/monitors/monitorStats.tsx

@@ -17,13 +17,14 @@ import {Monitor, MonitorStat} from './types';
 
 type Props = {
   monitor: Monitor;
+  orgId: string;
 };
 
 type State = {
   stats: MonitorStat[] | null;
 };
 
-const MonitorStats = ({monitor}: Props) => {
+const MonitorStats = ({monitor, orgId}: Props) => {
   const {selection} = usePageFilters();
   const {start, end, period} = selection.datetime;
 
@@ -41,7 +42,7 @@ const MonitorStats = ({monitor}: Props) => {
     endpoints: [
       [
         'stats',
-        `/monitors/${monitor.id}/stats/`,
+        `/monitors/${orgId}/${monitor.id}/stats/`,
         {
           query: {
             since: since.toString(),