-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Inventory][ECO] Create header action menu (#193398)
closes [#192326](#192326) ## Summary This PR introduces the "Add data" item to the header menu: https://github.com/user-attachments/assets/78ea3667-4ef1-4f02-a513-76e7ca896e67 <img width="600" alt="image" src="https://github.com/user-attachments/assets/afd21f2d-da66-4d10-83c0-29500591cf3c"> >[!NOTE] >I have refactored` plugin.ts`, moving the `ReactDOM.render` call to `application.tsx`. I've also created a new component to render the context providers. > >`useKibana` and `InventoryKibanaContext` were simplified. > >Besides, the analytics events created for the EEM Service Inventory 'Add data' button were replicated for this button. ### How to test - Add `xpack.inventory.enabled: true` to kibana.dev.yml - Start ES and Kibana locally - Navigate to Observability -> Inventory --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 1a192bc)
- Loading branch information
1 parent
9c641cb
commit d5566c6
Showing
19 changed files
with
462 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 120 additions & 0 deletions
120
...solution/inventory/public/components/app_root/header_action_menu/add_data_action_menu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React, { useState } from 'react'; | ||
| import { | ||
| EuiContextMenu, | ||
| EuiContextMenuPanelDescriptor, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiHeaderLink, | ||
| EuiIcon, | ||
| EuiPopover, | ||
| } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { | ||
| OBSERVABILITY_ONBOARDING_LOCATOR, | ||
| ObservabilityOnboardingLocatorParams, | ||
| } from '@kbn/deeplinks-observability'; | ||
| import { useKibana } from '../../../hooks/use_kibana'; | ||
| import type { InventoryAddDataParams } from '../../../services/telemetry/types'; | ||
|
|
||
| const addDataTitle = i18n.translate('xpack.inventory.addDataContextMenu.link', { | ||
| defaultMessage: 'Add data', | ||
| }); | ||
| const addDataItem = i18n.translate('xpack.inventory.add.apm.agent.button.', { | ||
| defaultMessage: 'Add data', | ||
| }); | ||
|
|
||
| const associateServiceLogsItem = i18n.translate('xpack.inventory.associate.service.logs.button', { | ||
| defaultMessage: 'Associate existing service logs', | ||
| }); | ||
|
|
||
| const ASSOCIATE_LOGS_LINK = 'https://ela.st/new-experience-associate-service-logs'; | ||
|
|
||
| export function AddDataContextMenu() { | ||
| const [popoverOpen, setPopoverOpen] = useState(false); | ||
| const { | ||
| services: { share, telemetry }, | ||
| } = useKibana(); | ||
|
|
||
| const onboardingLocator = share.url.locators.get<ObservabilityOnboardingLocatorParams>( | ||
| OBSERVABILITY_ONBOARDING_LOCATOR | ||
| ); | ||
|
|
||
| const button = ( | ||
| <EuiHeaderLink | ||
| color="primary" | ||
| iconType="indexOpen" | ||
| onClick={() => setPopoverOpen((prevState) => !prevState)} | ||
| data-test-subj="inventoryAddDataHeaderContextMenu" | ||
| > | ||
| <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}> | ||
| <EuiFlexItem grow={false}>{addDataTitle}</EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiIcon type="arrowDown" /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiHeaderLink> | ||
| ); | ||
|
|
||
| function reportButtonClick(journey: InventoryAddDataParams['journey']) { | ||
| telemetry.reportInventoryAddData({ | ||
| view: 'add_data_button', | ||
| journey, | ||
| }); | ||
| } | ||
|
|
||
| const panels: EuiContextMenuPanelDescriptor[] = [ | ||
| { | ||
| id: 0, | ||
| title: addDataTitle, | ||
| items: [ | ||
| { | ||
| name: ( | ||
| <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}> | ||
| <EuiFlexItem grow={false}>{associateServiceLogsItem}</EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiIcon type="popout" /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ), | ||
| key: 'associateServiceLogs', | ||
| href: ASSOCIATE_LOGS_LINK, | ||
| 'data-test-subj': 'inventoryHeaderMenuAddDataAssociateServiceLogs', | ||
| target: '_blank', | ||
| onClick: () => { | ||
| reportButtonClick('associate_existing_service_logs'); | ||
| }, | ||
| }, | ||
| { | ||
| name: addDataItem, | ||
| key: 'addData', | ||
| href: onboardingLocator?.getRedirectUrl({ category: '' }), | ||
| icon: 'plusInCircle', | ||
| 'data-test-subj': 'inventoryHeaderMenuAddData', | ||
| onClick: () => { | ||
| reportButtonClick('add_data'); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <EuiPopover | ||
| id="inventoryHeaderMenuAddDataPopover" | ||
| button={button} | ||
| isOpen={popoverOpen} | ||
| closePopover={() => setPopoverOpen(false)} | ||
| panelPaddingSize="none" | ||
| anchorPosition="downCenter" | ||
| > | ||
| <EuiContextMenu initialPanelId={0} panels={panels} /> | ||
| </EuiPopover> | ||
| ); | ||
| } |
18 changes: 18 additions & 0 deletions
18
.../observability_solution/inventory/public/components/app_root/header_action_menu/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiHeaderLinks } from '@elastic/eui'; | ||
| import { AddDataContextMenu } from './add_data_action_menu'; | ||
|
|
||
| export function HeaderActionMenuItems() { | ||
| return ( | ||
| <EuiHeaderLinks gutterSize="xs"> | ||
| <AddDataContextMenu /> | ||
| </EuiHeaderLinks> | ||
| ); | ||
| } |
66 changes: 66 additions & 0 deletions
66
x-pack/plugins/observability_solution/inventory/public/components/app_root/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; | ||
| import React from 'react'; | ||
| import { type AppMountParameters, type CoreStart } from '@kbn/core/public'; | ||
| import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config'; | ||
| import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public'; | ||
| import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; | ||
| import { InventoryContextProvider } from '../inventory_context_provider'; | ||
| import { inventoryRouter } from '../../routes/config'; | ||
| import { HeaderActionMenuItems } from './header_action_menu'; | ||
| import { InventoryStartDependencies } from '../../types'; | ||
| import { InventoryServices } from '../../services/types'; | ||
|
|
||
| export function AppRoot({ | ||
| coreStart, | ||
| pluginsStart, | ||
| services, | ||
| appMountParameters, | ||
| }: { | ||
| coreStart: CoreStart; | ||
| pluginsStart: InventoryStartDependencies; | ||
| services: InventoryServices; | ||
| } & { appMountParameters: AppMountParameters }) { | ||
| const { history } = appMountParameters; | ||
|
|
||
| const context = { | ||
| ...coreStart, | ||
| ...pluginsStart, | ||
| ...services, | ||
| }; | ||
|
|
||
| return ( | ||
| <InventoryContextProvider context={context}> | ||
| <RedirectAppLinks coreStart={coreStart}> | ||
| <RouterProvider history={history} router={inventoryRouter}> | ||
| <RouteRenderer /> | ||
| <InventoryHeaderActionMenu appMountParameters={appMountParameters} /> | ||
| </RouterProvider> | ||
| </RedirectAppLinks> | ||
| </InventoryContextProvider> | ||
| ); | ||
| } | ||
|
|
||
| export function InventoryHeaderActionMenu({ | ||
| appMountParameters, | ||
| }: { | ||
| appMountParameters: AppMountParameters; | ||
| }) { | ||
| const { setHeaderActionMenu, theme$ } = appMountParameters; | ||
|
|
||
| return ( | ||
| <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}> | ||
| <EuiFlexGroup responsive={false} gutterSize="s"> | ||
| <EuiFlexItem> | ||
| <HeaderActionMenuItems /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </HeaderMenuPortal> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.