From c5375ef1b1b8cdab4e10bc94db10bde0ec1e0a6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <antarticonorte@gmail.com>
Date: Tue, 1 Dec 2020 14:59:48 +0100
Subject: [PATCH] Move the Metrics' actions to the kibana header

---
 .../infra/public/pages/metrics/index.tsx      | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index 022c62b6bb06b..338d7d4db202b 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -40,6 +40,8 @@ import { SourceConfigurationFields } from '../../graphql/types';
 import { AlertPrefillProvider } from '../../alerting/use_alert_prefill';
 import { InfraMLCapabilitiesProvider } from '../../containers/ml/infra_ml_capabilities';
 import { AnomalyDetectionFlyout } from './inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout';
+import { HeaderMenuPortal } from '../../../../observability/public';
+import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
 
 const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLabel', {
   defaultMessage: 'Add data',
@@ -47,6 +49,7 @@ const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLab
 
 export const InfrastructurePage = ({ match }: RouteComponentProps) => {
   const uiCapabilities = useKibana().services.application?.capabilities;
+  const { setHeaderActionMenu } = useContext(HeaderActionMenuContext);
 
   const kibana = useKibana();
 
@@ -72,6 +75,32 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                       })}
                     />
 
+                    {setHeaderActionMenu && (
+                      <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+                        <EuiFlexGroup alignItems="center" gutterSize="none">
+                          <EuiFlexItem grow={false}>
+                            <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={false}>
+                            <Route path={'/explorer'} component={MetricsAlertDropdown} />
+                            <Route path={'/inventory'} component={InventoryAlertDropdown} />
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={false}>
+                            <EuiButtonEmpty
+                              href={kibana.services?.application?.getUrlForApp(
+                                '/home#/tutorial_directory/metrics'
+                              )}
+                              size="s"
+                              color="primary"
+                              iconType="plusInCircle"
+                            >
+                              {ADD_DATA_LABEL}
+                            </EuiButtonEmpty>
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      </HeaderMenuPortal>
+                    )}
+
                     <Header
                       breadcrumbs={[
                         {
@@ -121,30 +150,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                             ]}
                           />
                         </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                          style={{ flexDirection: 'row', alignItems: 'center' }}
-                        >
-                          <EuiFlexItem grow={false}>
-                            <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
-                          </EuiFlexItem>
-                          <EuiFlexItem grow={false}>
-                            <Route path={'/explorer'} component={MetricsAlertDropdown} />
-                            <Route path={'/inventory'} component={InventoryAlertDropdown} />
-                          </EuiFlexItem>
-                          <EuiFlexItem grow={false}>
-                            <EuiButtonEmpty
-                              href={kibana.services?.application?.getUrlForApp(
-                                '/home#/tutorial_directory/metrics'
-                              )}
-                              size="s"
-                              color="primary"
-                              iconType="plusInCircle"
-                            >
-                              {ADD_DATA_LABEL}
-                            </EuiButtonEmpty>
-                          </EuiFlexItem>
-                        </EuiFlexItem>
                       </EuiFlexGroup>
                     </AppNavigation>