From e730aa95e44eeef46856503a90f22c9e7def6c70 Mon Sep 17 00:00:00 2001
From: Zacqary Xeper <zacqary.xeper@elastic.co>
Date: Tue, 23 Jun 2020 15:58:27 -0500
Subject: [PATCH] Fix bad merge and metrics explorer infinite loop

---
 .../use_metric_threshold_alert_prefill.ts     | 11 ++--
 .../infra/public/pages/metrics/index.tsx      | 61 +++----------------
 2 files changed, 15 insertions(+), 57 deletions(-)

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metric_threshold_alert_prefill.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metric_threshold_alert_prefill.ts
index a11a57b90e605..366d6aa7003e6 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metric_threshold_alert_prefill.ts
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metric_threshold_alert_prefill.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { isEqual } from 'lodash';
 import { useState } from 'react';
 import { MetricsExplorerMetric } from '../../../../common/http_api/metrics_explorer';
 
@@ -14,18 +15,20 @@ interface MetricThresholdPrefillOptions {
 }
 
 export const useMetricThresholdAlertPrefill = () => {
-  const [{ groupBy, filterQuery, metrics }, setPrefillOptions] = useState<
-    MetricThresholdPrefillOptions
-  >({
+  const [prefillOptionsState, setPrefillOptionsState] = useState<MetricThresholdPrefillOptions>({
     groupBy: undefined,
     filterQuery: undefined,
     metrics: [],
   });
 
+  const { groupBy, filterQuery, metrics } = prefillOptionsState;
+
   return {
     groupBy,
     filterQuery,
     metrics,
-    setPrefillOptions,
+    setPrefillOptions(newState: MetricThresholdPrefillOptions) {
+      if (!isEqual(newState, prefillOptionsState)) setPrefillOptionsState(newState);
+    },
   };
 };
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index 495c3f1febb60..fd30a10879441 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -11,6 +11,7 @@ import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 
 import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui';
 import { DocumentTitle } from '../../components/document_title';
+import { HelpCenterContent } from '../../components/help_center_content';
 import { RoutedTabs } from '../../components/navigation/routed_tabs';
 import { ColumnarPage } from '../../components/page';
 import { Header } from '../../components/header';
@@ -55,6 +56,13 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                     })}
                   />
 
+                  <HelpCenterContent
+                    feedbackLink="https://discuss.elastic.co/c/metrics"
+                    appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {
+                      defaultMessage: 'Metrics',
+                    })}
+                  />
+
                   <Header
                     breadcrumbs={[
                       {
@@ -120,59 +128,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                     </EuiFlexGroup>
                   </AppNavigation>
 
-                  <Header
-                    breadcrumbs={[
-                      {
-                        text: i18n.translate('xpack.infra.header.infrastructureTitle', {
-                          defaultMessage: 'Metrics',
-                        }),
-                      },
-                    ]}
-                    readOnlyBadge={!uiCapabilities?.infrastructure?.save}
-                  />
-                  <AppNavigation
-                    aria-label={i18n.translate('xpack.infra.header.infrastructureNavigationTitle', {
-                      defaultMessage: 'Metrics',
-                    })}
-                  >
-                    <EuiFlexGroup gutterSize={'none'} alignItems={'center'}>
-                      <EuiFlexItem>
-                        <RoutedTabs
-                          tabs={[
-                            {
-                              app: 'metrics',
-                              title: i18n.translate('xpack.infra.homePage.inventoryTabTitle', {
-                                defaultMessage: 'Inventory',
-                              }),
-                              pathname: '/inventory',
-                            },
-                            {
-                              app: 'metrics',
-                              title: i18n.translate(
-                                'xpack.infra.homePage.metricsExplorerTabTitle',
-                                {
-                                  defaultMessage: 'Metrics Explorer',
-                                }
-                              ),
-                              pathname: '/explorer',
-                            },
-                            {
-                              app: 'metrics',
-                              title: i18n.translate('xpack.infra.homePage.settingsTabTitle', {
-                                defaultMessage: 'Settings',
-                              }),
-                              pathname: '/settings',
-                            },
-                          ]}
-                        />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <Route path={'/explorer'} component={MetricsAlertDropdown} />
-                        <Route path={'/inventory'} component={InventoryAlertDropdown} />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </AppNavigation>
-
                   <Switch>
                     <Route path={'/inventory'} component={SnapshotPage} />
                     <Route