[7.9] [Monitoring] Ensure setup mode works on cloud but only for alerts (#73127)

x-pack/plugins/monitoring/common/enums.ts

@@ -26,3 +26,8 @@ export enum AlertParamType {
   Duration = 'duration',
   Percentage = 'percentage',
 }
+
+export enum SetupModeFeature {
+  MetricbeatMigration = 'metricbeatMigration',
+  Alerts = 'alerts',
+}

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

@@ -180,7 +180,7 @@ export const AlertsBadge: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <EuiFlexGrid>
+    <EuiFlexGrid data-test-subj="monitoringSetupModeAlertBadges">
       {badges.map((badge, index) => (
         <EuiFlexItem key={index} grow={false}>
           {badge}

x-pack/plugins/monitoring/public/components/apm/instances/instances.js

@@ -17,6 +17,8 @@ import { i18n } from '@kbn/i18n';
 import { APM_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { SetupModeBadge } from '../../setup_mode/badge';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 function getColumns(setupMode) {
   return [
@@ -27,7 +29,7 @@ function getColumns(setupMode) {
       field: 'name',
       render: (name, apm) => {
         let setupModeStatus = null;
-        if (setupMode && setupMode.enabled) {
+        if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
           const list = get(setupMode, 'data.byUuid', {});
           const status = list[apm.uuid] || {};
           const instance = {
@@ -120,7 +122,7 @@ export function ApmServerInstances({ apms, setupMode }) {
   const { pagination, sorting, onTableChange, data } = apms;
 
   let setupModeCallout = null;
-  if (setupMode.enabled && setupMode.data) {
+  if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
     setupModeCallout = (
       <ListingCallOut
         setupModeData={setupMode.data}

x-pack/plugins/monitoring/public/components/beats/listing/listing.js

@@ -23,6 +23,8 @@ import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link'
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { SetupModeBadge } from '../../setup_mode/badge';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 export class Listing extends PureComponent {
   getColumns() {
@@ -36,7 +38,7 @@ export class Listing extends PureComponent {
         field: 'name',
         render: (name, beat) => {
           let setupModeStatus = null;
-          if (setupMode && setupMode.enabled) {
+          if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
             const list = get(setupMode, 'data.byUuid', {});
             const status = list[beat.uuid] || {};
             const instance = {
@@ -122,7 +124,7 @@ export class Listing extends PureComponent {
     const { stats, data, sorting, pagination, onTableChange, setupMode } = this.props;
 
     let setupModeCallOut = null;
-    if (setupMode.enabled && setupMode.data) {
+    if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
       setupModeCallOut = (
         <ListingCallOut
           setupModeData={setupMode.data}

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

@@ -27,6 +27,8 @@ import { formatTimestampToDuration } from '../../../../common';
 import { CALCULATE_DURATION_SINCE, APM_SYSTEM_ID } from '../../../../common/constants';
 import { SetupModeTooltip } from '../../setup_mode/tooltip';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 export function ApmPanel(props) {
   const { setupMode } = props;
@@ -38,14 +40,15 @@ export function ApmPanel(props) {
 
   const goToInstances = () => getSafeForExternalLink('#/apm/instances');
   const setupModeData = get(setupMode.data, 'apm');
-  const setupModeTooltip =
-    setupMode && setupMode.enabled ? (
-      <SetupModeTooltip
-        setupModeData={setupModeData}
-        badgeClickLink={goToInstances()}
-        productName={APM_SYSTEM_ID}
-      />
-    ) : null;
+  const setupModeMetricbeatMigrationTooltip = isSetupModeFeatureEnabled(
+    SetupModeFeature.MetricbeatMigration
+  ) ? (
+    <SetupModeTooltip
+      setupModeData={setupModeData}
+      badgeClickLink={goToInstances()}
+      productName={APM_SYSTEM_ID}
+    />
+  ) : null;
 
   return (
     <ClusterItemContainer
@@ -137,7 +140,7 @@ export function ApmPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeTooltip}
+              {setupModeMetricbeatMigrationTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">

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

@@ -25,6 +25,8 @@ import { i18n } from '@kbn/i18n';
 import { SetupModeTooltip } from '../../setup_mode/tooltip';
 import { BEATS_SYSTEM_ID } from '../../../../common/constants';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 export function BeatsPanel(props) {
   const { setupMode } = props;
@@ -35,14 +37,15 @@ export function BeatsPanel(props) {
   }
 
   const setupModeData = get(setupMode.data, 'beats');
-  const setupModeTooltip =
-    setupMode && setupMode.enabled ? (
-      <SetupModeTooltip
-        setupModeData={setupModeData}
-        productName={BEATS_SYSTEM_ID}
-        badgeClickLink={getSafeForExternalLink('#/beats/beats')}
-      />
-    ) : null;
+  const setupModeMetricbeatMigrationTooltip = isSetupModeFeatureEnabled(
+    SetupModeFeature.MetricbeatMigration
+  ) ? (
+    <SetupModeTooltip
+      setupModeData={setupModeData}
+      productName={BEATS_SYSTEM_ID}
+      badgeClickLink={getSafeForExternalLink('#/beats/beats')}
+    />
+  ) : null;
 
   const beatTypes = props.beats.types.map((beat, index) => {
     return [
@@ -142,7 +145,7 @@ export function BeatsPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeTooltip}
+              {setupModeMetricbeatMigrationTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">{beatTypes}</EuiDescriptionList>

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

@@ -44,6 +44,8 @@ import {
 } from '../../../../common/constants';
 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';
 
 const calculateShards = (shards) => {
   const total = get(shards, 'total', 0);
@@ -172,14 +174,15 @@ export function ElasticsearchPanel(props) {
   const { primaries, replicas } = calculateShards(get(props, 'cluster_stats.indices.shards', {}));
 
   const setupModeData = get(setupMode.data, 'elasticsearch');
-  const setupModeTooltip =
-    setupMode && setupMode.enabled ? (
-      <SetupModeTooltip
-        setupModeData={setupModeData}
-        productName={ELASTICSEARCH_SYSTEM_ID}
-        badgeClickLink={goToNodes()}
-      />
-    ) : null;
+  const setupModeMetricbeatMigrationTooltip = isSetupModeFeatureEnabled(
+    SetupModeFeature.MetricbeatMigration
+  ) ? (
+    <SetupModeTooltip
+      setupModeData={setupModeData}
+      productName={ELASTICSEARCH_SYSTEM_ID}
+      badgeClickLink={goToNodes()}
+    />
+  ) : null;
 
   const showMlJobs = () => {
     // if license doesn't support ML, then `ml === null`
@@ -367,7 +370,7 @@ export function ElasticsearchPanel(props) {
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup gutterSize="s" alignItems="center">
-                  {setupModeTooltip}
+                  {setupModeMetricbeatMigrationTooltip}
                   {nodesAlertStatus}
                 </EuiFlexGroup>
               </EuiFlexItem>

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

@@ -32,6 +32,8 @@ import { KIBANA_SYSTEM_ID, ALERT_KIBANA_VERSION_MISMATCH } from '../../../../com
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 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';
 
 const INSTANCES_PANEL_ALERTS = [ALERT_KIBANA_VERSION_MISMATCH];
 
@@ -50,14 +52,15 @@ export function KibanaPanel(props) {
   const goToInstances = () => getSafeForExternalLink('#/kibana/instances');
 
   const setupModeData = get(setupMode.data, 'kibana');
-  const setupModeTooltip =
-    setupMode && setupMode.enabled ? (
-      <SetupModeTooltip
-        setupModeData={setupModeData}
-        productName={KIBANA_SYSTEM_ID}
-        badgeClickLink={goToInstances()}
-      />
-    ) : null;
+  const setupModeMetricbeatMigrationTooltip = isSetupModeFeatureEnabled(
+    SetupModeFeature.MetricbeatMigration
+  ) ? (
+    <SetupModeTooltip
+      setupModeData={setupModeData}
+      productName={KIBANA_SYSTEM_ID}
+      badgeClickLink={goToInstances()}
+    />
+  ) : null;
 
   let instancesAlertStatus = null;
   if (shouldShowAlertBadge(alerts, INSTANCES_PANEL_ALERTS)) {
@@ -165,7 +168,7 @@ export function KibanaPanel(props) {
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup gutterSize="s" alignItems="center">
-                  {setupModeTooltip}
+                  {setupModeMetricbeatMigrationTooltip}
                   {instancesAlertStatus}
                 </EuiFlexGroup>
               </EuiFlexItem>

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

@@ -37,6 +37,8 @@ import { SetupModeTooltip } from '../../setup_mode/tooltip';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 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';
 
 const NODES_PANEL_ALERTS = [ALERT_LOGSTASH_VERSION_MISMATCH];
 
@@ -56,14 +58,15 @@ export function LogstashPanel(props) {
   const goToPipelines = () => getSafeForExternalLink('#/logstash/pipelines');
 
   const setupModeData = get(setupMode.data, 'logstash');
-  const setupModeTooltip =
-    setupMode && setupMode.enabled ? (
-      <SetupModeTooltip
-        setupModeData={setupModeData}
-        productName={LOGSTASH_SYSTEM_ID}
-        badgeClickLink={goToNodes()}
-      />
-    ) : null;
+  const setupModeMetricbeatMigrationTooltip = isSetupModeFeatureEnabled(
+    SetupModeFeature.MetricbeatMigration
+  ) ? (
+    <SetupModeTooltip
+      setupModeData={setupModeData}
+      productName={LOGSTASH_SYSTEM_ID}
+      badgeClickLink={goToNodes()}
+    />
+  ) : null;
 
   let nodesAlertStatus = null;
   if (shouldShowAlertBadge(alerts, NODES_PANEL_ALERTS)) {
@@ -162,7 +165,7 @@ export function LogstashPanel(props) {
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup gutterSize="s" alignItems="center">
-                  {setupModeTooltip}
+                  {setupModeMetricbeatMigrationTooltip}
                   {nodesAlertStatus}
                 </EuiFlexGroup>
               </EuiFlexItem>

x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js

@@ -30,6 +30,8 @@ import _ from 'lodash';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { AlertsStatus } from '../../../alerts/status';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 const getNodeTooltip = (node) => {
   const { nodeTypeLabel, nodeTypeClass } = node;
@@ -83,7 +85,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid, aler
       );
 
       let setupModeStatus = null;
-      if (setupMode && setupMode.enabled) {
+      if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
         const list = _.get(setupMode, 'data.byUuid', {});
         const status = list[node.resolver] || {};
         const instance = {
@@ -307,7 +309,11 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
 
   // Merge the nodes data with the setup data if enabled
   const nodes = props.nodes || [];
-  if (setupMode.enabled && setupMode.data) {
+  if (
+    setupMode &&
+    setupMode.enabled &&
+    isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)
+  ) {
     // We want to create a seamless experience for the user by merging in the setup data
     // and the node data from monitoring indices in the likely scenario where some nodes
     // are using MB collection and some are using no collection
@@ -330,7 +336,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
   }
 
   let setupModeCallout = null;
-  if (setupMode.enabled && setupMode.data) {
+  if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
     setupModeCallout = (
       <ListingCallOut
         setupModeData={setupMode.data}

x-pack/plugins/monitoring/public/components/kibana/instances/instances.js

@@ -27,6 +27,8 @@ import { SetupModeBadge } from '../../setup_mode/badge';
 import { KIBANA_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { AlertsStatus } from '../../../alerts/status';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 const getColumns = (setupMode, alerts) => {
   const columns = [
@@ -37,7 +39,7 @@ const getColumns = (setupMode, alerts) => {
       field: 'name',
       render: (name, kibana) => {
         let setupModeStatus = null;
-        if (setupMode && setupMode.enabled) {
+        if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
           const list = get(setupMode, 'data.byUuid', {});
           const uuid = get(kibana, 'kibana.uuid');
           const status = list[uuid] || {};
@@ -164,7 +166,7 @@ export class KibanaInstances extends PureComponent {
     let setupModeCallOut = null;
     // Merge the instances data with the setup data if enabled
     const instances = this.props.instances || [];
-    if (setupMode.enabled && setupMode.data) {
+    if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
       // We want to create a seamless experience for the user by merging in the setup data
       // and the node data from monitoring indices in the likely scenario where some instances
       // are using MB collection and some are using no collection

x-pack/plugins/monitoring/public/components/logstash/listing/listing.js

@@ -17,6 +17,8 @@ import { SetupModeBadge } from '../../setup_mode/badge';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { AlertsStatus } from '../../../alerts/status';
+import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
+import { SetupModeFeature } from '../../../../common/enums';
 
 export class Listing extends PureComponent {
   getColumns() {
@@ -32,7 +34,7 @@ export class Listing extends PureComponent {
         sortable: true,
         render: (name, node) => {
           let setupModeStatus = null;
-          if (setupMode && setupMode.enabled) {
+          if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
             const list = get(setupMode, 'data.byUuid', {});
             const uuid = get(node, 'logstash.uuid');
             const status = list[uuid] || {};
@@ -159,7 +161,7 @@ export class Listing extends PureComponent {
     }));
 
     let setupModeCallOut = null;
-    if (setupMode.enabled && setupMode.data) {
+    if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
       setupModeCallOut = (
         <ListingCallOut
           setupModeData={setupMode.data}