[Monitoring] Fix bug with setup mode appearing on pages it shouldn't (e…

…lastic#80343) (elastic#81101)

* Ensure we check for local setup mode data first

* Use a context to ensure deeply nested components have access

* Fix snapshots

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/monitoring/public/alerts/badge.tsx

@@ -22,6 +22,7 @@ import { AlertMessage, AlertState } from '../../server/alerts/types';
 import { AlertPanel } from './panel';
 import { Legacy } from '../legacy_shims';
 import { isInSetupMode } from '../lib/setup_mode';
+import { SetupModeContext } from '../components/setup_mode/setup_mode_context';
 
 function getDateFromState(state: CommonAlertState) {
   const timestamp = state.state.ui.triggeredMS;
@@ -44,7 +45,7 @@ interface Props {
 export const AlertsBadge: React.FC<Props> = (props: Props) => {
   const { stateFilter = () => true, nextStepsFilter = () => true } = props;
   const [showPopover, setShowPopover] = React.useState<AlertSeverity | boolean | null>(null);
-  const inSetupMode = isInSetupMode();
+  const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
   const alerts = Object.values(props.alerts).filter(Boolean);
 
   if (alerts.length === 0) {

x-pack/plugins/monitoring/public/alerts/lib/should_show_alert_badge.ts

@@ -5,14 +5,16 @@
  */
 import { isInSetupMode } from '../../lib/setup_mode';
 import { CommonAlertStatus } from '../../../common/types';
+import { ISetupModeContext } from '../../components/setup_mode/setup_mode_context';
 
 export function shouldShowAlertBadge(
   alerts: { [alertTypeId: string]: CommonAlertStatus },
-  alertTypeIds: string[]
+  alertTypeIds: string[],
+  context?: ISetupModeContext
 ) {
   if (!alerts) {
     return false;
   }
-  const inSetupMode = isInSetupMode();
+  const inSetupMode = isInSetupMode(context);
   return inSetupMode || alertTypeIds.find((name) => alerts[name] && alerts[name].states.length);
 }

x-pack/plugins/monitoring/public/alerts/panel.tsx

@@ -26,6 +26,7 @@ import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
 import { AlertEdit } from '../../../triggers_actions_ui/public';
 import { isInSetupMode, hideBottomBar, showBottomBar } from '../lib/setup_mode';
 import { BASE_ALERT_API_PATH } from '../../../alerts/common';
+import { SetupModeContext } from '../components/setup_mode/setup_mode_context';
 
 interface Props {
   alert: CommonAlertStatus;
@@ -42,7 +43,7 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
   const [isEnabled, setIsEnabled] = React.useState(alert.rawAlert.enabled);
   const [isMuted, setIsMuted] = React.useState(alert.rawAlert.muteAll);
   const [isSaving, setIsSaving] = React.useState(false);
-  const inSetupMode = isInSetupMode();
+  const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
 
   if (!alert.rawAlert) {
     return null;

x-pack/plugins/monitoring/public/alerts/status.tsx

@@ -12,6 +12,7 @@ import { AlertSeverity } from '../../common/enums';
 import { AlertMessage, AlertState } from '../../server/alerts/types';
 import { AlertsBadge } from './badge';
 import { isInSetupMode } from '../lib/setup_mode';
+import { SetupModeContext } from '../components/setup_mode/setup_mode_context';
 
 interface Props {
   alerts: { [alertTypeId: string]: CommonAlertStatus };
@@ -28,7 +29,7 @@ export const AlertsStatus: React.FC<Props> = (props: Props) => {
     stateFilter = () => true,
     nextStepsFilter = () => true,
   } = props;
-  const inSetupMode = isInSetupMode();
+  const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
 
   if (!alerts) {
     return null;

x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js

@@ -35,11 +35,13 @@ import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
 import { SetupModeFeature } from '../../../../common/enums';
 import { shouldShowAlertBadge } from '../../../alerts/lib/should_show_alert_badge';
 import { AlertsBadge } from '../../../alerts/badge';
+import { SetupModeContext } from '../../setup_mode/setup_mode_context';
 
 const SERVERS_PANEL_ALERTS = [ALERT_MISSING_MONITORING_DATA];
 
 export function ApmPanel(props) {
   const { setupMode, alerts } = props;
+  const setupModeContext = React.useContext(SetupModeContext);
   const apmsTotal = get(props, 'apms.total') || 0;
   // Do not show if we are not in setup mode
   if (apmsTotal === 0 && !setupMode.enabled) {
@@ -59,7 +61,7 @@ export function ApmPanel(props) {
   ) : null;
 
   let apmServersAlertStatus = null;
-  if (shouldShowAlertBadge(alerts, SERVERS_PANEL_ALERTS)) {
+  if (shouldShowAlertBadge(alerts, SERVERS_PANEL_ALERTS, setupModeContext)) {
     const alertsList = SERVERS_PANEL_ALERTS.map((alertType) => alerts[alertType]);
     apmServersAlertStatus = (
       <EuiFlexItem grow={false}>

x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js

@@ -29,11 +29,13 @@ import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
 import { SetupModeFeature } from '../../../../common/enums';
 import { shouldShowAlertBadge } from '../../../alerts/lib/should_show_alert_badge';
 import { AlertsBadge } from '../../../alerts/badge';
+import { SetupModeContext } from '../../setup_mode/setup_mode_context';
 
 const BEATS_PANEL_ALERTS = [ALERT_MISSING_MONITORING_DATA];
 
 export function BeatsPanel(props) {
   const { setupMode, alerts } = props;
+  const setupModeContext = React.useContext(SetupModeContext);
   const beatsTotal = get(props, 'beats.total') || 0;
   // Do not show if we are not in setup mode
   if (beatsTotal === 0 && !setupMode.enabled) {
@@ -52,7 +54,7 @@ export function BeatsPanel(props) {
   ) : null;
 
   let beatsAlertsStatus = null;
-  if (shouldShowAlertBadge(alerts, BEATS_PANEL_ALERTS)) {
+  if (shouldShowAlertBadge(alerts, BEATS_PANEL_ALERTS, setupModeContext)) {
     const alertsList = BEATS_PANEL_ALERTS.map((alertType) => alerts[alertType]);
     beatsAlertsStatus = (
       <EuiFlexItem grow={false}>

x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js

@@ -50,6 +50,7 @@ import { AlertsBadge } from '../../../alerts/badge';
 import { shouldShowAlertBadge } from '../../../alerts/lib/should_show_alert_badge';
 import { SetupModeFeature } from '../../../../common/enums';
 import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeContext } from '../../setup_mode/setup_mode_context';
 
 const calculateShards = (shards) => {
   const total = get(shards, 'total', 0);
@@ -173,6 +174,7 @@ export function ElasticsearchPanel(props) {
   const indices = clusterStats.indices;
   const setupMode = props.setupMode;
   const alerts = props.alerts;
+  const setupModeContext = React.useContext(SetupModeContext);
 
   const goToElasticsearch = () => getSafeForExternalLink('#/elasticsearch');
   const goToNodes = () => getSafeForExternalLink('#/elasticsearch/nodes');
@@ -231,7 +233,7 @@ export function ElasticsearchPanel(props) {
   };
 
   let nodesAlertStatus = null;
-  if (shouldShowAlertBadge(alerts, NODES_PANEL_ALERTS)) {
+  if (shouldShowAlertBadge(alerts, NODES_PANEL_ALERTS, setupModeContext)) {
     const alertsList = NODES_PANEL_ALERTS.map((alertType) => alerts[alertType]);
     nodesAlertStatus = (
       <EuiFlexItem grow={false}>
@@ -241,7 +243,7 @@ export function ElasticsearchPanel(props) {
   }
 
   let overviewAlertStatus = null;
-  if (shouldShowAlertBadge(alerts, OVERVIEW_PANEL_ALERTS)) {
+  if (shouldShowAlertBadge(alerts, OVERVIEW_PANEL_ALERTS, setupModeContext)) {
     const alertsList = OVERVIEW_PANEL_ALERTS.map((alertType) => alerts[alertType]);
     overviewAlertStatus = (
       <EuiFlexItem grow={false}>

x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js

@@ -38,12 +38,14 @@ import { AlertsBadge } from '../../../alerts/badge';
 import { shouldShowAlertBadge } from '../../../alerts/lib/should_show_alert_badge';
 import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
 import { SetupModeFeature } from '../../../../common/enums';
+import { SetupModeContext } from '../../setup_mode/setup_mode_context';
 
 const INSTANCES_PANEL_ALERTS = [ALERT_KIBANA_VERSION_MISMATCH, ALERT_MISSING_MONITORING_DATA];
 
 export function KibanaPanel(props) {
   const setupMode = props.setupMode;
   const alerts = props.alerts;
+  const setupModeContext = React.useContext(SetupModeContext);
   const showDetectedKibanas =
     setupMode.enabled && get(setupMode.data, 'kibana.detected.doesExist', false);
   if (!props.count && !showDetectedKibanas) {
@@ -67,7 +69,7 @@ export function KibanaPanel(props) {
   ) : null;
 
   let instancesAlertStatus = null;
-  if (shouldShowAlertBadge(alerts, INSTANCES_PANEL_ALERTS)) {
+  if (shouldShowAlertBadge(alerts, INSTANCES_PANEL_ALERTS, setupModeContext)) {
     const alertsList = INSTANCES_PANEL_ALERTS.map((alertType) => alerts[alertType]);
     instancesAlertStatus = (
       <EuiFlexItem grow={false}>

x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js

@@ -40,6 +40,7 @@ import { AlertsBadge } from '../../../alerts/badge';
 import { shouldShowAlertBadge } from '../../../alerts/lib/should_show_alert_badge';
 import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
 import { SetupModeFeature } from '../../../../common/enums';
+import { SetupModeContext } from '../../setup_mode/setup_mode_context';
 
 const NODES_PANEL_ALERTS = [ALERT_LOGSTASH_VERSION_MISMATCH, ALERT_MISSING_MONITORING_DATA];
 
@@ -48,6 +49,7 @@ export function LogstashPanel(props) {
   const nodesCount = props.node_count || 0;
   const queueTypes = props.queue_types || {};
   const alerts = props.alerts;
+  const setupModeContext = React.useContext(SetupModeContext);
 
   // Do not show if we are not in setup mode
   if (!nodesCount && !setupMode.enabled) {
@@ -70,7 +72,7 @@ export function LogstashPanel(props) {
   ) : null;
 
   let nodesAlertStatus = null;
-  if (shouldShowAlertBadge(alerts, NODES_PANEL_ALERTS)) {
+  if (shouldShowAlertBadge(alerts, NODES_PANEL_ALERTS, setupModeContext)) {
     const alertsList = NODES_PANEL_ALERTS.map((alertType) => alerts[alertType]);
     nodesAlertStatus = (
       <EuiFlexItem grow={false}>

x-pack/plugins/monitoring/public/components/renderers/setup_mode.js

@@ -177,11 +177,11 @@ export class SetupModeRenderer extends React.Component {
     const { render, productName } = this.props;
     const setupModeState = getSetupModeState();
 
-    let data = null;
+    let data = { byUuid: {} };
     if (setupModeState.data) {
-      if (productName) {
+      if (productName && setupModeState.data[productName]) {
         data = setupModeState.data[productName];
-      } else {
+      } else if (setupModeState.data) {
         data = setupModeState.data;
       }
     }

x-pack/plugins/monitoring/public/components/setup_mode/setup_mode_context.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+
+export interface ISetupModeContext {
+  setupModeSupported: boolean;
+}
+
+export const SetupModeContext = React.createContext<ISetupModeContext>({
+  setupModeSupported: false,
+});

x-pack/plugins/monitoring/public/components/table/eui_table.js

@@ -47,7 +47,7 @@ export function EuiMonitoringTable({
   });
 
   let footerContent = null;
-  if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
+  if (setupMode && isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
     footerContent = (
       <Fragment>
         <EuiSpacer size="m" />

x-pack/plugins/monitoring/public/directives/main/index.js

@@ -182,6 +182,10 @@ export class MonitoringMainController {
       return false;
     }
 
+    if (!setupMode.data) {
+      return false;
+    }
+
     const data = setupMode.data[product] || {};
     if (data.totalUniqueInstanceCount === 0) {
       return true;

x-pack/plugins/monitoring/public/lib/internal_monitoring_toasts.tsx

@@ -40,8 +40,8 @@ const showIfLegacyOnlyIndices = () => {
       <div>
         <p>
           {i18n.translate('xpack.monitoring.internalMonitoringToast.description', {
-            defaultMessage: `It appears you are using "Legacy Collection" for Stack Monitoring. 
-            This method of monitoring will no longer be supported in the next major release (8.0.0). 
+            defaultMessage: `It appears you are using "Legacy Collection" for Stack Monitoring.
+            This method of monitoring will no longer be supported in the next major release (8.0.0).
             Please follow the steps in setup mode to start monitoring with Metricbeat.`,
           })}
         </p>
@@ -80,8 +80,8 @@ const showIfLegacyAndMetricbeatIndices = () => {
       <div>
         <p>
           {i18n.translate('xpack.monitoring.internalAndMetricbeatMonitoringToast.description', {
-            defaultMessage: `It appears you are using both Metricbeat and "Legacy Collection" for Stack Monitoring. 
-            In 8.0.0, you must use Metricbeat to collect monitoring data. 
+            defaultMessage: `It appears you are using both Metricbeat and "Legacy Collection" for Stack Monitoring.
+            In 8.0.0, you must use Metricbeat to collect monitoring data.
             Please follow the steps in setup mode to migrate the rest of the monitoring to Metricbeat.`,
           })}
         </p>

x-pack/plugins/monitoring/public/lib/setup_mode.tsx

@@ -13,6 +13,7 @@ import { Legacy } from '../legacy_shims';
 import { ajaxErrorHandlersProvider } from './ajax_error_handler';
 import { SetupModeEnterButton } from '../components/setup_mode/enter_button';
 import { SetupModeFeature } from '../../common/enums';
+import { ISetupModeContext } from '../components/setup_mode/setup_mode_context';
 
 function isOnPage(hash: string) {
   return includes(window.location.hash, hash);
@@ -210,7 +211,10 @@ export const initSetupModeState = async ($scope: any, $injector: any, callback?:
   }
 };
 
-export const isInSetupMode = () => {
+export const isInSetupMode = (context?: ISetupModeContext) => {
+  if (context?.setupModeSupported === false) {
+    return false;
+  }
   if (setupModeState.enabled) {
     return true;
   }

x-pack/plugins/monitoring/public/views/apm/instances/index.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { find } from 'lodash';
 import { uiRoutes } from '../../../angular/helpers/routes';
@@ -13,6 +13,7 @@ import template from './index.html';
 import { ApmServerInstances } from '../../../components/apm/instances';
 import { MonitoringViewBaseEuiTableController } from '../..';
 import { SetupModeRenderer } from '../../../components/renderers';
+import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import {
   APM_SYSTEM_ID,
   CODE_PATH_APM,
@@ -78,7 +79,7 @@ uiRoutes.when('/apm/instances', {
               injector={this.injector}
               productName={APM_SYSTEM_ID}
               render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
-                <Fragment>
+                <SetupModeContext.Provider value={{ setupModeSupported: true }}>
                   {flyoutComponent}
                   <ApmServerInstances
                     setupMode={setupMode}
@@ -91,7 +92,7 @@ uiRoutes.when('/apm/instances', {
                     }}
                   />
                   {bottomBarComponent}
-                </Fragment>
+                </SetupModeContext.Provider>
               )}
             />
           );

x-pack/plugins/monitoring/public/views/beats/listing/index.js

@@ -11,9 +11,10 @@ import { routeInitProvider } from '../../../lib/route_init';
 import { MonitoringViewBaseEuiTableController } from '../../';
 import { getPageData } from './get_page_data';
 import template from './index.html';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Listing } from '../../../components/beats/listing/listing';
 import { SetupModeRenderer } from '../../../components/renderers';
+import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import {
   CODE_PATH_BEATS,
   BEATS_SYSTEM_ID,
@@ -81,7 +82,7 @@ uiRoutes.when('/beats/beats', {
           injector={this.injector}
           productName={BEATS_SYSTEM_ID}
           render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
-            <Fragment>
+            <SetupModeContext.Provider value={{ setupModeSupported: true }}>
               {flyoutComponent}
               <Listing
                 stats={this.data.stats}
@@ -93,7 +94,7 @@ uiRoutes.when('/beats/beats', {
                 onTableChange={this.onTableChange || onTableChange}
               />
               {bottomBarComponent}
-            </Fragment>
+            </SetupModeContext.Provider>
           )}
         />
       );