[Monitoring] Metricbeat Migration Wizard (last step!!)

x-pack/legacy/plugins/monitoring/common/constants.js

@@ -154,8 +154,11 @@ export const INDEX_PATTERN_FILEBEAT = 'filebeat-*';
 export const METRICBEAT_INDEX_NAME_UNIQUE_TOKEN = '-mb-';
 
 // We use this for metricbeat migration to identify specific products that we do not have constants for
-export const ELASTICSEARCH_CUSTOM_ID = 'elasticsearch';
-export const APM_CUSTOM_ID = 'apm';
+export const ELASTICSEARCH_SYSTEM_ID = 'elasticsearch';
+export const KIBANA_SYSTEM_ID = 'kibana';
+export const BEATS_SYSTEM_ID = 'beats';
+export const APM_SYSTEM_ID = 'apm';
+export const LOGSTASH_SYSTEM_ID = 'logstash';
 /**
  * The id of the infra source owned by the monitoring plugin.
  */

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

@@ -8,80 +8,111 @@ import React, { Fragment } from 'react';
 import moment from 'moment';
 import { uniq, get } from 'lodash';
 import { EuiMonitoringTable } from '../../table';
-import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiCallOut } from '@elastic/eui';
+import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer } from '@elastic/eui';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
 import { formatTimestampToDuration } from '../../../../common';
 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';
 
-const columns = [
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.nameTitle', {
-      defaultMessage: 'Name'
-    }),
-    field: 'name',
-    render: (name, instance) => (
-      <EuiLink
-        href={`#/apm/instances/${instance.uuid}`}
-        data-test-subj={`apmLink-${name}`}
-      >
-        {name}
-      </EuiLink>
-    )
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.outputEnabledTitle', {
-      defaultMessage: 'Output Enabled'
-    }),
-    field: 'output'
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.totalEventsRateTitle', {
-      defaultMessage: 'Total Events Rate'
-    }),
-    field: 'total_events_rate',
-    render: value => formatMetric(value, '', '/s')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', {
-      defaultMessage: 'Bytes Sent Rate'
-    }),
-    field: 'bytes_sent_rate',
-    render: value => formatMetric(value, 'byte', '/s')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', {
-      defaultMessage: 'Output Errors'
-    }),
-    field: 'errors',
-    render: value => formatMetric(value, '0')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', {
-      defaultMessage: 'Last Event'
-    }),
-    field: 'time_of_last_event',
-    render: value => i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
-      defaultMessage: '{timeOfLastEvent} ago',
-      values: {
-        timeOfLastEvent: formatTimestampToDuration(+moment(value), 'since')
+function getColumns(setupMode) {
+  return [
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.nameTitle', {
+        defaultMessage: 'Name'
+      }),
+      field: 'name',
+      render: (name, apm) => {
+        let setupModeStatus = null;
+        if (setupMode && setupMode.enabled) {
+          const list = get(setupMode, 'data.byUuid', {});
+          const status = list[apm.uuid] || {};
+          const instance = {
+            uuid: apm.uuid,
+            name: apm.name
+          };
+
+          setupModeStatus = (
+            <div className="monTableCell__setupModeStatus">
+              <SetupModeBadge
+                setupMode={setupMode}
+                status={status}
+                instance={instance}
+                productName={APM_SYSTEM_ID}
+              />
+            </div>
+          );
+        }
+
+        return (
+          <Fragment>
+            <EuiLink
+              href={`#/apm/instances/${apm.uuid}`}
+              data-test-subj={`apmLink-${name}`}
+            >
+              {name}
+            </EuiLink>
+            {setupModeStatus}
+          </Fragment>
+        );
       }
-    })
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
-      defaultMessage: 'Allocated Memory'
-    }),
-    field: 'memory',
-    render: value => formatMetric(value, 'byte')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.versionTitle', {
-      defaultMessage: 'Version'
-    }),
-    field: 'version'
-  },
-];
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.outputEnabledTitle', {
+        defaultMessage: 'Output Enabled'
+      }),
+      field: 'output'
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.totalEventsRateTitle', {
+        defaultMessage: 'Total Events Rate'
+      }),
+      field: 'total_events_rate',
+      render: value => formatMetric(value, '', '/s')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', {
+        defaultMessage: 'Bytes Sent Rate'
+      }),
+      field: 'bytes_sent_rate',
+      render: value => formatMetric(value, 'byte', '/s')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', {
+        defaultMessage: 'Output Errors'
+      }),
+      field: 'errors',
+      render: value => formatMetric(value, '0')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', {
+        defaultMessage: 'Last Event'
+      }),
+      field: 'time_of_last_event',
+      render: value => i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
+        defaultMessage: '{timeOfLastEvent} ago',
+        values: {
+          timeOfLastEvent: formatTimestampToDuration(+moment(value), 'since')
+        }
+      })
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
+        defaultMessage: 'Allocated Memory'
+      }),
+      field: 'memory',
+      render: value => formatMetric(value, 'byte')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.versionTitle', {
+        defaultMessage: 'Version'
+      }),
+      field: 'version'
+    },
+  ];
+}
 
 export function ApmServerInstances({ apms, setupMode }) {
   const {
@@ -91,26 +122,14 @@ export function ApmServerInstances({ apms, setupMode }) {
     data,
   } = apms;
 
-  let detectedInstanceMessage = null;
-  if (setupMode.enabled && setupMode.data && get(setupMode.data, 'detected.mightExist')) {
-    detectedInstanceMessage = (
-      <Fragment>
-        <EuiCallOut
-          title={i18n.translate('xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceTitle', {
-            defaultMessage: 'APM server detected',
-          })}
-          color="warning"
-          iconType="help"
-        >
-          <p>
-            {i18n.translate('xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceDescription', {
-              defaultMessage: `Based on your indices, we think you might have an APM server. Click the 'Setup monitoring'
-              button below to start monitoring this APM server.`
-            })}
-          </p>
-        </EuiCallOut>
-        <EuiSpacer size="m"/>
-      </Fragment>
+  let setupModeCallout = null;
+  if (setupMode.data) {
+    setupModeCallout = (
+      <ListingCallOut
+        setupModeData={setupMode.data}
+        useNodeIdentifier={false}
+        productName={APM_SYSTEM_ID}
+      />
     );
   }
 
@@ -124,19 +143,15 @@ export function ApmServerInstances({ apms, setupMode }) {
         <EuiPageContent>
           <Status stats={data.stats} />
           <EuiSpacer size="m"/>
-          {detectedInstanceMessage}
+          {setupModeCallout}
           <EuiMonitoringTable
             className="apmInstancesTable"
             rows={data.apms}
-            columns={columns}
+            columns={getColumns(setupMode)}
             sorting={sorting}
             pagination={pagination}
             setupMode={setupMode}
-            uuidField="uuid"
-            nameField="name"
-            setupNewButtonLabel={i18n.translate('xpack.monitoring.apm.metricbeatMigration.setupNewButtonLabel', {
-              defaultMessage: 'Setup monitoring for new APM server'
-            })}
+            productName={APM_SYSTEM_ID}
             search={{
               box: {
                 incremental: true,

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

@@ -4,34 +4,64 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import { uniq, get } from 'lodash';
-import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink, EuiCallOut } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink } from '@elastic/eui';
 import { Stats } from 'plugins/monitoring/components/beats';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { i18n } from '@kbn/i18n';
+import { BEATS_SYSTEM_ID } from '../../../../common/constants';
+import { ListingCallOut } from '../../setup_mode/listing_callout';
+import { SetupModeBadge } from '../../setup_mode/badge';
 
 export class Listing extends PureComponent {
   getColumns() {
     const { kbnUrl, scope } = this.props.angular;
+    const setupMode = this.props.setupMode;
 
     return [
       {
         name: i18n.translate('xpack.monitoring.beats.instances.nameTitle', { defaultMessage: 'Name' }),
         field: 'name',
-        render: (name, beat) => (
-          <EuiLink
-            onClick={() => {
-              scope.$evalAsync(() => {
-                kbnUrl.changePath(`/beats/beat/${beat.uuid}`);
-              });
-            }}
-            data-test-subj={`beatLink-${name}`}
-          >
-            {name}
-          </EuiLink>
-        )
+        render: (name, beat) => {
+          let setupModeStatus = null;
+          if (setupMode && setupMode.enabled) {
+            const list = get(setupMode, 'data.byUuid', {});
+            const status = list[beat.uuid] || {};
+            const instance = {
+              uuid: beat.uuid,
+              name: beat.name
+            };
+
+            setupModeStatus = (
+              <div className="monTableCell__setupModeStatus">
+                <SetupModeBadge
+                  setupMode={setupMode}
+                  status={status}
+                  instance={instance}
+                  productName={BEATS_SYSTEM_ID}
+                />
+              </div>
+            );
+          }
+
+          return (
+            <div>
+              <EuiLink
+                onClick={() => {
+                  scope.$evalAsync(() => {
+                    kbnUrl.changePath(`/beats/beat/${beat.uuid}`);
+                  });
+                }}
+                data-test-subj={`beatLink-${name}`}
+              >
+                {name}
+              </EuiLink>
+              {setupModeStatus}
+            </div>
+          );
+        }
       },
       {
         name: i18n.translate('xpack.monitoring.beats.instances.typeTitle', { defaultMessage: 'Type' }),
@@ -78,26 +108,14 @@ export class Listing extends PureComponent {
       setupMode
     } = this.props;
 
-    let detectedInstanceMessage = null;
-    if (setupMode.enabled && setupMode.data && get(setupMode.data, 'detected.mightExist')) {
-      detectedInstanceMessage = (
-        <Fragment>
-          <EuiCallOut
-            title={i18n.translate('xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceTitle', {
-              defaultMessage: 'Beats instance detected',
-            })}
-            color="warning"
-            iconType="help"
-          >
-            <p>
-              {i18n.translate('xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceDescription', {
-                defaultMessage: `Based on your indices, we think you might have a beats instance. Click the 'Setup monitoring'
-                button below to start monitoring this instance.`
-              })}
-            </p>
-          </EuiCallOut>
-          <EuiSpacer size="m"/>
-        </Fragment>
+    let setupModeCallOut = null;
+    if (setupMode.enabled && setupMode.data) {
+      setupModeCallOut = (
+        <ListingCallOut
+          setupModeData={setupMode.data}
+          useNodeIdentifier={false}
+          productName={BEATS_SYSTEM_ID}
+        />
       );
     }
 
@@ -115,16 +133,12 @@ export class Listing extends PureComponent {
           <EuiPageContent>
             <Stats stats={stats} />
             <EuiSpacer size="m"/>
-            {detectedInstanceMessage}
+            {setupModeCallOut}
             <EuiMonitoringTable
               className="beatsTable"
               rows={data}
               setupMode={setupMode}
-              uuidField="uuid"
-              nameField="name"
-              setupNewButtonLabel={i18n.translate('xpack.monitoring.beats.metricbeatMigration.setupNewButtonLabel', {
-                defaultMessage: 'Setup monitoring for new Beats instance'
-              })}
+              productName={BEATS_SYSTEM_ID}
               columns={this.getColumns()}
               sorting={sorting}
               pagination={pagination}