diff --git a/x-pack/plugins/monitoring/public/application/pages/apm/instances.tsx b/x-pack/plugins/monitoring/public/application/pages/apm/instances.tsx
index 86ea8079277c7..bc60f26cdbfad 100644
--- a/x-pack/plugins/monitoring/public/application/pages/apm/instances.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/apm/instances.tsx
@@ -18,6 +18,7 @@ import { ApmServerInstances } from '../../../components/apm/instances';
 import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
+import { APM_SYSTEM_ID } from '../../../../common/constants';
 
 interface SetupModeProps {
   setupMode: any;
@@ -90,7 +91,7 @@ export const ApmInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
       data-test-subj="apmInstancesPage"
     >
       <SetupModeRenderer
-        productName="apm"
+        productName={APM_SYSTEM_ID}
         render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx
index 29945f0fe725c..18f941c398af0 100644
--- a/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx
@@ -18,6 +18,7 @@ import { Listing } from '../../../components/beats/listing';
 import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
+import { BEATS_SYSTEM_ID } from '../../../../common/constants';
 
 export const BeatsInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -78,7 +79,7 @@ export const BeatsInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
     >
       <div data-test-subj="monitoringBeatsInstancesApp">
         <SetupModeRenderer
-          productName="beats"
+          productName={BEATS_SYSTEM_ID}
           render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
             <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx
index 0bc55e98746cb..294aeade5e38b 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx
@@ -15,6 +15,7 @@ import { Ccr } from '../../../components/elasticsearch/ccr';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 interface SetupModeProps {
   setupMode: any;
@@ -68,6 +69,7 @@ export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) =>
       cluster={cluster}
     >
       <SetupModeRenderer
+        productName={ELASTICSEARCH_SYSTEM_ID}
         render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx
index 56de1cace3546..bec2f278f1774 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx
@@ -16,6 +16,7 @@ import { CcrShardReact } from '../../../components/elasticsearch/ccr_shard';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 interface SetupModeProps {
   setupMode: any;
@@ -78,6 +79,7 @@ export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = ({ clusters }
       data-test-subj="elasticsearchCcrShardPage"
     >
       <SetupModeRenderer
+        productName={ELASTICSEARCH_SYSTEM_ID}
         instance={instance}
         render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx
index a55e0b5df9648..a635d98fcbbb0 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx
@@ -16,6 +16,7 @@ import { useCharts } from '../../hooks/use_charts';
 import { ItemTemplate } from './item_template';
 // @ts-ignore
 import { AdvancedIndex } from '../../../components/elasticsearch/index/advanced';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -51,6 +52,7 @@ export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = ({ clust
   return (
     <ItemTemplate title={title} getPageData={getPageData} id={index} pageType="indices">
       <SetupModeRenderer
+        productName={ELASTICSEARCH_SYSTEM_ID}
         render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx
index 4f659f6c1354e..eb8e295127352 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx
@@ -20,6 +20,7 @@ import { ItemTemplate } from './item_template';
 import { indicesByNodes } from '../../../components/elasticsearch/shard_allocation/transformers/indices_by_nodes';
 // @ts-ignore
 import { labels } from '../../../components/elasticsearch/shard_allocation/lib/labels';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -77,6 +78,7 @@ export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) =
       pageType="indices"
     >
       <SetupModeRenderer
+        productName={ELASTICSEARCH_SYSTEM_ID}
         render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx
index de3173a1e8787..34ee86afd99eb 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx
@@ -16,6 +16,7 @@ import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_r
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import { useLocalStorage } from '../../hooks/use_local_storage';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -80,6 +81,7 @@ export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters })
     >
       <div data-test-subj="elasticsearchIndicesListingPage">
         <SetupModeRenderer
+          productName={ELASTICSEARCH_SYSTEM_ID}
           render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
             <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ml_jobs_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ml_jobs_page.tsx
index bb709f563ed26..66117b8d75b3e 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ml_jobs_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ml_jobs_page.tsx
@@ -16,6 +16,7 @@ import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import type { MLJobs } from '../../../types';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 interface SetupModeProps {
   setupMode: any;
@@ -80,6 +81,7 @@ export const ElasticsearchMLJobsPage: React.FC<ComponentProps> = ({ clusters })
     >
       <div data-test-subj="elasticsearchMLJobsListingPage">
         <SetupModeRenderer
+          productName={ELASTICSEARCH_SYSTEM_ID}
           render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
             <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx
index 58acd77afc622..a616fe206d60c 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx
@@ -19,6 +19,7 @@ import { useCharts } from '../../hooks/use_charts';
 import { nodesByIndices } from '../../../components/elasticsearch/shard_allocation/transformers/nodes_by_indices';
 // @ts-ignore
 import { labels } from '../../../components/elasticsearch/shard_allocation/lib/labels';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -92,6 +93,7 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
       pageType="nodes"
     >
       <SetupModeRenderer
+        productName={ELASTICSEARCH_SYSTEM_ID}
         render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
           <SetupModeContext.Provider value={{ setupModeSupported: true }}>
             {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx
index d91b8b0441c59..4788c9372e589 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx
@@ -17,6 +17,7 @@ import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_r
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -84,6 +85,7 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
     >
       <div data-test-subj="elasticsearchNodesListingPage">
         <SetupModeRenderer
+          productName={ELASTICSEARCH_SYSTEM_ID}
           render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
             <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx b/x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx
index 12f3214b73693..436a1a72b2fdb 100644
--- a/x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx
@@ -19,6 +19,7 @@ import { KibanaInstances } from '../../../components/kibana/instances';
 import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
+import { KIBANA_SYSTEM_ID } from '../../../../common/constants';
 
 export const KibanaInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const { cluster_uuid: clusterUuid, ccs } = useContext(GlobalStateContext);
@@ -79,7 +80,7 @@ export const KibanaInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
     >
       <div data-test-subj="monitoringKibanaInstancesApp">
         <SetupModeRenderer
-          productName="kibana"
+          productName={KIBANA_SYSTEM_ID}
           render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
             <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}
diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx
index 633e47339f467..09a97925c56f5 100644
--- a/x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx
@@ -16,6 +16,7 @@ import { LogstashTemplate } from './logstash_template';
 import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
+import { LOGSTASH_SYSTEM_ID } from '../../../../common/constants';
 
 interface SetupModeProps {
   setupMode: any;
@@ -68,7 +69,7 @@ export const LogStashNodesPage: React.FC<ComponentProps> = ({ clusters }) => {
     >
       <div>
         <SetupModeRenderer
-          productName="logstash"
+          productName={LOGSTASH_SYSTEM_ID}
           render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
             <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}