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

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2020-12-09 13:43:17 +01:00 · 2020-12-09 13:43:17 +01:00 · f31e7c8591
parent 74bb155abc
commit f31e7c8591
6 changed files with 109 additions and 47 deletions
--- a/x-pack/plugins/infra/public/apps/common_providers.tsx
+++ b/x-pack/plugins/infra/public/apps/common_providers.tsx
@ -5,7 +5,7 @@
 */

 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';
@ -13,20 +13,24 @@ import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions
 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>
--- 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,7 +50,8 @@ 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 (
@ -52,6 +59,7 @@ const LogsApp: React.FC<{
      <CommonInfraProviders
        apolloClient={apolloClient}
        triggersActionsUI={plugins.triggersActionsUi}
+        setHeaderActionMenu={setHeaderActionMenu}
      >
        <Router history={history}>
          <Switch>
--- 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,7 +52,8 @@ 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 (
@ -54,6 +61,7 @@ const MetricsApp: React.FC<{
      <CommonInfraProviders
        apolloClient={apolloClient}
        triggersActionsUI={plugins.triggersActionsUi}
+        setHeaderActionMenu={setHeaderActionMenu}
      >
        <Router history={history}>
          <Switch>
--- 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>
--- 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" 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>

--- 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>
+  );
+};