[Logs UI][Metrics UI] Move actions to the kibana header (#84648)

Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 9, 2020 · f31e7c8 · f31e7c8
1 parent 74bb155
commit f31e7c8
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 47 deletions.
diff --git a/x-pack/plugins/infra/public/apps/common_providers.tsx b/x-pack/plugins/infra/public/apps/common_providers.tsx
@@ -5,28 +5,32 @@
  */
 
 import { ApolloClient } from 'apollo-client';
-import { CoreStart } from 'kibana/public';
+import { AppMountParameters, CoreStart } from 'kibana/public';
 import React, { useMemo } from 'react';
 import { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../observability/public';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions_ui/public';
 import { createKibanaContextForPlugin } from '../hooks/use_kibana';
 import { InfraClientStartDeps } from '../types';
 import { ApolloClientContext } from '../utils/apollo_context';
+import { HeaderActionMenuProvider } from '../utils/header_action_menu_provider';
 import { NavigationWarningPromptProvider } from '../utils/navigation_warning_prompt';
 import { TriggersActionsProvider } from '../utils/triggers_actions_context';
 
 export const CommonInfraProviders: React.FC<{
   apolloClient: ApolloClient<{}>;
   triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
-}> = ({ apolloClient, children, triggersActionsUI }) => {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+}> = ({ apolloClient, children, triggersActionsUI, setHeaderActionMenu }) => {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
       <ApolloClientContext.Provider value={apolloClient}>
         <EuiThemeProvider darkMode={darkMode}>
-          <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
+          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
+            <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
+          </HeaderActionMenuProvider>
         </EuiThemeProvider>
       </ApolloClientContext.Provider>
     </TriggersActionsProvider>

diff --git a/x-pack/plugins/infra/public/apps/logs_app.tsx b/x-pack/plugins/infra/public/apps/logs_app.tsx
@@ -23,14 +23,20 @@ import { prepareMountElement } from './common_styles';
 export const renderApp = (
   core: CoreStart,
   plugins: InfraClientStartDeps,
-  { element, history }: AppMountParameters
+  { element, history, setHeaderActionMenu }: AppMountParameters
 ) => {
   const apolloClient = createApolloClient(core.http.fetch);
 
   prepareMountElement(element);
 
   ReactDOM.render(
-    <LogsApp apolloClient={apolloClient} core={core} history={history} plugins={plugins} />,
+    <LogsApp
+      apolloClient={apolloClient}
+      core={core}
+      history={history}
+      plugins={plugins}
+      setHeaderActionMenu={setHeaderActionMenu}
+    />,
     element
   );
 
@@ -44,14 +50,16 @@ const LogsApp: React.FC<{
   core: CoreStart;
   history: History<unknown>;
   plugins: InfraClientStartDeps;
-}> = ({ apolloClient, core, history, plugins }) => {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
   const uiCapabilities = core.application.capabilities;
 
   return (
     <CoreProviders core={core} plugins={plugins}>
       <CommonInfraProviders
         apolloClient={apolloClient}
         triggersActionsUI={plugins.triggersActionsUi}
+        setHeaderActionMenu={setHeaderActionMenu}
       >
         <Router history={history}>
           <Switch>

diff --git a/x-pack/plugins/infra/public/apps/metrics_app.tsx b/x-pack/plugins/infra/public/apps/metrics_app.tsx
@@ -25,14 +25,20 @@ import { prepareMountElement } from './common_styles';
 export const renderApp = (
   core: CoreStart,
   plugins: InfraClientStartDeps,
-  { element, history }: AppMountParameters
+  { element, history, setHeaderActionMenu }: AppMountParameters
 ) => {
   const apolloClient = createApolloClient(core.http.fetch);
 
   prepareMountElement(element);
 
   ReactDOM.render(
-    <MetricsApp apolloClient={apolloClient} core={core} history={history} plugins={plugins} />,
+    <MetricsApp
+      apolloClient={apolloClient}
+      core={core}
+      history={history}
+      plugins={plugins}
+      setHeaderActionMenu={setHeaderActionMenu}
+    />,
     element
   );
 
@@ -46,14 +52,16 @@ const MetricsApp: React.FC<{
   core: CoreStart;
   history: History<unknown>;
   plugins: InfraClientStartDeps;
-}> = ({ apolloClient, core, history, plugins }) => {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
   const uiCapabilities = core.application.capabilities;
 
   return (
     <CoreProviders core={core} plugins={plugins}>
       <CommonInfraProviders
         apolloClient={apolloClient}
         triggersActionsUI={plugins.triggersActionsUi}
+        setHeaderActionMenu={setHeaderActionMenu}
       >
         <Router history={history}>
           <Switch>

diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -6,7 +6,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useContext } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import useMount from 'react-use/lib/useMount';
 
@@ -24,9 +24,12 @@ import { LogEntryCategoriesPage } from './log_entry_categories';
 import { LogEntryRatePage } from './log_entry_rate';
 import { LogsSettingsPage } from './settings';
 import { StreamPage } from './stream';
+import { HeaderMenuPortal } from '../../../../observability/public';
+import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
 
 export const LogsPageContent: React.FunctionComponent = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
+  const { setHeaderActionMenu } = useContext(HeaderActionMenuContext);
 
   const { initialize } = useLogSourceContext();
 
@@ -66,6 +69,28 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
       <HelpCenterContent feedbackLink={feedbackLinkUrl} appName={pageTitle} />
 
+      {setHeaderActionMenu && (
+        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
+          <EuiFlexGroup gutterSize={'none'} alignItems={'center'} responsive={false}>
+            <EuiFlexItem grow={false}>
+              <AlertDropdown />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                href={kibana.services?.application?.getUrlForApp(
+                  '/home#/tutorial_directory/logging'
+                )}
+                size="s"
+                color="primary"
+                iconType="plusInCircle"
+              >
+                {ADD_DATA_LABEL}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </HeaderMenuPortal>
+      )}
+
       <Header
         breadcrumbs={[
           {
@@ -79,19 +104,6 @@ export const LogsPageContent: React.FunctionComponent = () => {
           <EuiFlexItem>
             <RoutedTabs tabs={[streamTab, anomaliesTab, logCategoriesTab, settingsTab]} />
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <AlertDropdown />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              href={kibana.services?.application?.getUrlForApp('/home#/tutorial_directory/logging')}
-              size="s"
-              color="primary"
-              iconType="plusInCircle"
-            >
-              {ADD_DATA_LABEL}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
         </EuiFlexGroup>
       </AppNavigation>
       <Switch>

diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -40,13 +40,16 @@ 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',
 });
 
 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" responsive={false}>
+                          <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>
 

diff --git a/x-pack/plugins/infra/public/utils/header_action_menu_provider.tsx b/x-pack/plugins/infra/public/utils/header_action_menu_provider.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { AppMountParameters } from 'kibana/public';
+
+interface ContextProps {
+  setHeaderActionMenu?: AppMountParameters['setHeaderActionMenu'];
+}
+
+export const HeaderActionMenuContext = React.createContext<ContextProps>({});
+
+export const HeaderActionMenuProvider: React.FC<Required<ContextProps>> = ({
+  setHeaderActionMenu,
+  children,
+}) => {
+  return (
+    <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu }}>
+      {children}
+    </HeaderActionMenuContext.Provider>
+  );
+};