[Monitoring] Metricbeat Migration Wizard Tests (#47139) (#47216)

* Enable setup mode UI toggles

* We want to keep the no data page but update the copy

* More updated copy

* Remove manual checks for logstash, beats, apm and kibana

* Hide the setup mode controls on the no data page. There is nothing different in setup mode

* Setup mode test

* Fix bug with disabling internal collection for ES

* First steps towards the redesign of setup mode

* Consolidate UI code, design changes, use constants defined in our plugin

* Fix tooltips

* Design/copy feedback

* Use badge and onClick

* Tests!

* Set up mode renderer tests

* More feedback

* Only detect usage on the live cluster

* Update tests

* Fix existing tests, remove test that will be added in other PR

* Undo accidential change

* Fix failing test

* Fix issue with wrong callout showing

* Ensure we check for live nodes if no cluster uuid is provided

* We need a custom listing callout for ES

* Custom callout for kibana instances

* More space from the bottom bar

* Disable switching if they enabled internal collection

* Copy updates

* Fix broken tests

* Fix more tests

* Fix i18n

* Update copy

* Fix a couple i18n issues

* Fixing a couple of missing scenarios

* Fix translations

* Update snapshots

* PR feedback

* PR feedback

* We also need totalUniqueInternallyCollectedCount to identify when we have detected products but they are not monitored (thinking ES and Kibana)

* Remove why documentation link until we have the resource available

* Ensure tabs are properly disabled

* Address issue with the ES nodes callout not working at times

* Ensure we check if setup mode is enabled

* Change internal collection to self monitoring, and remove the word 'collection' usage

* Only show Enter setup mode on pages with valid setup mode options

* Copy updates

* Copy updates

* Fix up some tests

* Ensure we update the top nav item when we toggle setup mode on or off

* Update snapshot

* Update tests

* Remove console.log

* Update copy

x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.test.js

@@ -0,0 +1,183 @@
+/*
+ * 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';
+import { shallow } from 'enzyme';
+import { Flyout } from './flyout';
+import { INSTRUCTION_STEP_ENABLE_METRICBEAT } from '../constants';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../../common/constants';
+
+jest.mock('ui/documentation_links', () => ({
+  ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+  DOC_LINK_VERSION: 'current'
+}));
+
+jest.mock('../../../../common', () => ({
+  formatTimestampToDuration: () => `0 seconds`,
+}));
+
+const PRODUCTS = [
+  {
+    name: ELASTICSEARCH_SYSTEM_ID
+  },
+  {
+    name: KIBANA_SYSTEM_ID
+  },
+  {
+    name: LOGSTASH_SYSTEM_ID
+  },
+  {
+    name: BEATS_SYSTEM_ID
+  },
+  {
+    name: APM_SYSTEM_ID
+  }
+];
+
+describe('Flyout', () => {
+  for (const { name } of PRODUCTS) {
+    describe(`${name}`, () => {
+      describe('part one', () => {
+        it('should render normally', () => {
+          const component = shallow(
+            <Flyout
+              onClose={() => {}}
+              product={{}}
+              productName={name}
+            />
+          );
+          expect(component).toMatchSnapshot();
+        });
+      });
+
+      describe('part two', () => {
+        it('should show instructions to migrate to metricbeat', () => {
+          const component = shallow(
+            <Flyout
+              onClose={() => {}}
+              product={{
+                isInternalCollector: true
+              }}
+              productName={name}
+            />
+          );
+          component.find('EuiButton').simulate('click');
+          component.update();
+          expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+        });
+
+        it('should show instructions to disable internal collection', () => {
+          const component = shallow(
+            <Flyout
+              onClose={() => {}}
+              product={{
+                isPartiallyMigrated: true,
+                lastInternallyCollectedTimestamp: 0,
+              }}
+              meta={{
+                secondsAgo: 30
+              }}
+              productName={name}
+            />
+          );
+          component.find('EuiButton').simulate('click');
+          component.update();
+          expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+        });
+      });
+    });
+  }
+
+  it('should render a consistent completion state for all products', () => {
+    let template = null;
+    for (const { name } of PRODUCTS) {
+      const component = shallow(
+        <Flyout
+          onClose={() => {}}
+          product={{
+            isPartiallyMigrated: true
+          }}
+          meta={{
+            secondsAgo: 10
+          }}
+          productName={name}
+        />
+      );
+      component.setState({
+        activeStep: INSTRUCTION_STEP_ENABLE_METRICBEAT,
+      });
+      component.update();
+      const steps = component.find('EuiSteps').prop('steps');
+      const step = steps[steps.length - 1];
+      if (!template) {
+        template = step;
+        expect(template).toMatchSnapshot();
+      } else {
+        expect(template).toEqual(step);
+      }
+    }
+  });
+
+  it('should render the beat type for beats for the enabling metricbeat step', () => {
+    const component = shallow(
+      <Flyout
+        onClose={() => {}}
+        product={{
+          isInternalCollector: true,
+          beatType: 'filebeat'
+        }}
+        productName={BEATS_SYSTEM_ID}
+      />
+    );
+    component.find('EuiButton').simulate('click');
+    component.update();
+    expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+  });
+
+  it('should render the beat type for beats for the disabling internal collection step', () => {
+    const component = shallow(
+      <Flyout
+        onClose={() => {}}
+        product={{
+          isPartiallyMigrated: true,
+          beatType: 'filebeat'
+        }}
+        meta={{
+          secondsAgo: 30
+        }}
+        productName={BEATS_SYSTEM_ID}
+      />
+    );
+    component.find('EuiButton').simulate('click');
+    component.update();
+    expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+  });
+
+  it('should show a restart warning for restarting the primary Kibana', () => {
+    const component = shallow(
+      <Flyout
+        onClose={() => {}}
+        product={{
+          isPartiallyMigrated: true,
+          isPrimary: true
+        }}
+        meta={{
+          secondsAgo: 30
+        }}
+        productName={KIBANA_SYSTEM_ID}
+      />
+    );
+    component.find('EuiButton').simulate('click');
+    component.update();
+    expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+  });
+});

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

@@ -125,7 +125,7 @@ export class SetupModeRenderer extends React.Component {
       <Fragment>
         <EuiSpacer size="xxl"/>
         <EuiBottomBar>
-          <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="s">
                 <EuiFlexItem grow={false}>