[Monitoring] Metricbeat migration net new user experience (#39832)

* ES net new user experience * Adding sorting support * WIP * Progress on the ES nodes listing page * Fix the loading page * Kibana net new user experience * Remove unnecessary files * Remove this one too * Add this file back in * Add a way to add the cluster uuid to global state once monitoring is enabled on a stack product * Ensure this PR can be merged to master by hiding the functionality behind direct links * Add messaging for net new user experience on Kibana instances page * Ensure we poll for more data as soon as they are done in the flyout * PR feedback * Fix api tests * Add `skipLiveData` flag to avoid fetching data from the running stack products * Add comment
elastic · Jul 22, 2019 · 6356088 · 6356088
1 parent e9c1ce9
commit 6356088
Show file tree

Hide file tree

Showing 46 changed files with 956 additions and 313 deletions.
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
@@ -139,6 +139,7 @@ export function ElasticsearchPanel(props) {
   const clusterStats = props.cluster_stats || {};
   const nodes = clusterStats.nodes;
   const indices = clusterStats.indices;
+  const setupMode = props.setupMode;
 
   const goToElasticsearch = () => props.changeUrl('elasticsearch');
   const goToNodes = () => props.changeUrl('elasticsearch/nodes');
@@ -175,6 +176,34 @@ export function ElasticsearchPanel(props) {
 
   const licenseText = <LicenseText license={props.license} showLicenseExpiration={props.showLicenseExpiration} />;
 
+  let setupModeNodesData = null;
+  if (setupMode.enabled && setupMode.data) {
+    const elasticsearchData = get(setupMode.data, 'elasticsearch.byUuid');
+    const migratedNodesCount = Object.values(elasticsearchData).filter(node => node.isFullyMigrated).length;
+    const totalNodesCount = Object.values(elasticsearchData).length;
+
+    const badgeColor = migratedNodesCount === totalNodesCount
+      ? 'secondary'
+      : 'danger';
+
+    setupModeNodesData = (
+      <EuiFlexItem grow={false}>
+        <EuiToolTip
+          position="top"
+          content={i18n.translate('xpack.monitoring.cluster.overview.esPanel.setupModeNodesTooltip', {
+            defaultMessage: `These numbers indicate how many detected monitored nodes versus how many
+            detected total nodes. If there are more detected nodes than monitored nodes, click the Nodes
+            link and you will be guided in how to setup monitoring for the missing node.`
+          })}
+        >
+          <EuiBadge color={badgeColor}>
+            {formatNumber(migratedNodesCount, 'int_commas')}/{formatNumber(totalNodesCount, 'int_commas')}
+          </EuiBadge>
+        </EuiToolTip>
+      </EuiFlexItem>
+    );
+  }
+
   return (
     <ClusterItemContainer
       {...props}
@@ -235,20 +264,25 @@ export function ElasticsearchPanel(props) {
 
         <EuiFlexItem>
           <EuiPanel paddingSize="m">
-            <EuiTitle size="s">
-              <h3>
-                <EuiLink
-                  data-test-subj="esNumberOfNodes"
-                  onClick={goToNodes}
-                >
-                  <FormattedMessage
-                    id="xpack.monitoring.cluster.overview.esPanel.nodesTotalLinkLabel"
-                    defaultMessage="Nodes: {nodesTotal}"
-                    values={{ nodesTotal: formatNumber(get(nodes, 'count.total'), 'int_commas') }}
-                  />
-                </EuiLink>
-              </h3>
-            </EuiTitle>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="s">
+                  <h3>
+                    <EuiLink
+                      data-test-subj="esNumberOfNodes"
+                      onClick={goToNodes}
+                    >
+                      <FormattedMessage
+                        id="xpack.monitoring.cluster.overview.esPanel.nodesTotalLinkLabel"
+                        defaultMessage="Nodes: {nodesTotal}"
+                        values={{ nodesTotal: formatNumber(get(nodes, 'count.total'), 'int_commas') }}
+                      />
+                    </EuiLink>
+                  </h3>
+                </EuiTitle>
+              </EuiFlexItem>
+              {setupModeNodesData}
+            </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
               <EuiDescriptionListTitle>

diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/helpers.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/helpers.js
@@ -26,14 +26,14 @@ export function HealthStatusIndicator(props) {
     red: 'danger'
   };
 
-  const statusColor = statusColorMap[props.status];
+  const statusColor = statusColorMap[props.status] || 'n/a';
 
   return (
     <EuiHealth color={statusColor} data-test-subj="statusIcon">
       <FormattedMessage
         id="xpack.monitoring.cluster.overview.healthStatusDescription"
         defaultMessage="Health is {status}"
-        values={{ status: props.status }}
+        values={{ status: props.status || 'n/a' }}
       />
     </EuiHealth>
   );

diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/index.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/index.js
@@ -32,9 +32,14 @@ export function Overview(props) {
                 ml={props.cluster.ml}
                 changeUrl={props.changeUrl}
                 license={props.cluster.license}
+                setupMode={props.setupMode}
                 showLicenseExpiration={props.showLicenseExpiration}
               />
-              <KibanaPanel {...props.cluster.kibana} changeUrl={props.changeUrl} />
+              <KibanaPanel
+                {...props.cluster.kibana}
+                setupMode={props.setupMode}
+                changeUrl={props.changeUrl}
+              />
             </Fragment>
           )
           : null

diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js
@@ -7,9 +7,10 @@
 import React from 'react';
 import { formatNumber } from 'plugins/monitoring/lib/format_number';
 import { ClusterItemContainer, HealthStatusIndicator, BytesPercentageUsage } from './helpers';
-
+import { get } from 'lodash';
 import {
   EuiFlexGrid,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
   EuiTitle,
@@ -18,12 +19,16 @@ import {
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
   EuiHorizontalRule,
+  EuiBadge,
+  EuiToolTip
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 export function KibanaPanel(props) {
-  if (!props.count) {
+  const setupMode = props.setupMode;
+  const showDetectedKibanas = setupMode.enabled && get(setupMode.data, 'kibana.detected.doesExist', false);
+  if (!props.count && !showDetectedKibanas) {
     return null;
   }
 
@@ -34,6 +39,34 @@ export function KibanaPanel(props) {
   const goToKibana = () => props.changeUrl('kibana');
   const goToInstances = () => props.changeUrl('kibana/instances');
 
+  let setupModeInstancesData = null;
+  if (setupMode.enabled && setupMode.data) {
+    const kibanaData = get(setupMode.data, 'kibana.byUuid');
+    const migratedNodesCount = Object.values(kibanaData).filter(node => node.isFullyMigrated).length;
+    const totalNodesCount = Object.values(kibanaData).length;
+
+    const badgeColor = migratedNodesCount === totalNodesCount
+      ? 'secondary'
+      : 'danger';
+
+    setupModeInstancesData = (
+      <EuiFlexItem grow={false}>
+        <EuiToolTip
+          position="top"
+          content={i18n.translate('xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip', {
+            defaultMessage: `These numbers indicate how many detected monitored instances versus how many
+            detected total instances. If there are more detected instances than monitored instances, click
+            the instances link and you will be guided in how to setup monitoring for the missing node.`
+          })}
+        >
+          <EuiBadge color={badgeColor}>
+            {formatNumber(migratedNodesCount, 'int_commas')}/{formatNumber(totalNodesCount, 'int_commas')}
+          </EuiBadge>
+        </EuiToolTip>
+      </EuiFlexItem>
+    );
+  }
+
   return (
     <ClusterItemContainer
       {...props}
@@ -91,27 +124,32 @@ export function KibanaPanel(props) {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiPanel paddingSize="m">
-            <EuiTitle size="s">
-              <h3>
-                <EuiLink
-                  onClick={goToInstances}
-                  data-test-subj="kbnInstances"
-                  aria-label={i18n.translate(
-                    'xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkAriaLabel',
-                    {
-                      defaultMessage: 'Kibana Instances: {instancesCount}',
-                      values: { instancesCount: props.count }
-                    }
-                  )}
-                >
-                  <FormattedMessage
-                    id="xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkLabel"
-                    defaultMessage="Instances: {instancesCount}"
-                    values={{ instancesCount: (<span data-test-subj="number_of_kibana_instances">{ props.count }</span>) }}
-                  />
-                </EuiLink>
-              </h3>
-            </EuiTitle>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="s">
+                  <h3>
+                    <EuiLink
+                      onClick={goToInstances}
+                      data-test-subj="kbnInstances"
+                      aria-label={i18n.translate(
+                        'xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkAriaLabel',
+                        {
+                          defaultMessage: 'Kibana Instances: {instancesCount}',
+                          values: { instancesCount: props.count }
+                        }
+                      )}
+                    >
+                      <FormattedMessage
+                        id="xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkLabel"
+                        defaultMessage="Instances: {instancesCount}"
+                        values={{ instancesCount: (<span data-test-subj="number_of_kibana_instances">{ props.count }</span>) }}
+                      />
+                    </EuiLink>
+                  </h3>
+                </EuiTitle>
+              </EuiFlexItem>
+              {setupModeInstancesData}
+            </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
               <EuiDescriptionListTitle>