forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Fleet] Agent details page UI (elastic#64983)
* Fix empty host name column in agent list * Fix empty version column in agent list * Consolidate page header styling inconsistencies * Add tabs to agent details * Add right-side header content and actions menu * Give headers more spacing when there are tabs present * Add details tab * Use ECS formatted metadata * Make activity log table pretty * Return agent event SO id from list API * Fix i18n * Add types for new agent events and differentiate from stored agent events * Adjust test Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
1 parent
90a4a5e
commit 6d78606
Showing
26 changed files
with
694 additions
and
351 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
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
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
83 changes: 83 additions & 0 deletions
83
...applications/ingest_manager/sections/fleet/agent_details_page/components/actions_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,83 @@ | ||
| /* | ||
| * 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, { memo, useState, useCallback } from 'react'; | ||
| import { EuiButton, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
| import { Agent } from '../../../../types'; | ||
| import { useCapabilities } from '../../../../hooks'; | ||
| import { useAgentRefresh } from '../hooks'; | ||
| import { AgentUnenrollProvider, AgentReassignConfigFlyout } from '../../components'; | ||
|
|
||
| export const AgentDetailsActionMenu: React.FunctionComponent<{ | ||
| agent: Agent; | ||
| }> = memo(({ agent }) => { | ||
| const hasWriteCapabilites = useCapabilities().write; | ||
| const refreshAgent = useAgentRefresh(); | ||
| const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState<boolean>(false); | ||
| const handleCloseMenu = useCallback(() => setIsActionsPopoverOpen(false), [ | ||
| setIsActionsPopoverOpen, | ||
| ]); | ||
| const handleToggleMenu = useCallback(() => setIsActionsPopoverOpen(!isActionsPopoverOpen), [ | ||
| isActionsPopoverOpen, | ||
| ]); | ||
| const [isReassignFlyoutOpen, setIsReassignFlyoutOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| {isReassignFlyoutOpen && ( | ||
| <AgentReassignConfigFlyout agent={agent} onClose={() => setIsReassignFlyoutOpen(false)} /> | ||
| )} | ||
| <EuiPopover | ||
| anchorPosition="downRight" | ||
| panelPaddingSize="none" | ||
| button={ | ||
| <EuiButton onClick={handleToggleMenu} iconType="arrowDown" iconSide="right"> | ||
| <FormattedMessage | ||
| id="xpack.ingestManager.agentDetails.actionsButton" | ||
| defaultMessage="Actions" | ||
| /> | ||
| </EuiButton> | ||
| } | ||
| isOpen={isActionsPopoverOpen} | ||
| closePopover={handleCloseMenu} | ||
| > | ||
| <EuiContextMenuPanel | ||
| items={[ | ||
| <EuiContextMenuItem | ||
| icon="pencil" | ||
| onClick={() => { | ||
| handleCloseMenu(); | ||
| setIsReassignFlyoutOpen(true); | ||
| }} | ||
| key="reassignConfig" | ||
| > | ||
| <FormattedMessage | ||
| id="xpack.ingestManager.agentList.reassignActionText" | ||
| defaultMessage="Assign new agent config" | ||
| /> | ||
| </EuiContextMenuItem>, | ||
| <AgentUnenrollProvider key="unenrollAgent"> | ||
| {unenrollAgentsPrompt => ( | ||
| <EuiContextMenuItem | ||
| icon="cross" | ||
| disabled={!hasWriteCapabilites || !agent.active} | ||
| onClick={() => { | ||
| unenrollAgentsPrompt([agent.id], 1, refreshAgent); | ||
| }} | ||
| > | ||
| <FormattedMessage | ||
| id="xpack.ingestManager.agentList.unenrollOneButton" | ||
| defaultMessage="Unenroll" | ||
| /> | ||
| </EuiContextMenuItem> | ||
| )} | ||
| </AgentUnenrollProvider>, | ||
| ]} | ||
| /> | ||
| </EuiPopover> | ||
| </> | ||
| ); | ||
| }); |
85 changes: 85 additions & 0 deletions
85
...pplications/ingest_manager/sections/fleet/agent_details_page/components/agent_details.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,85 @@ | ||
| /* | ||
| * 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, { memo } from 'react'; | ||
| import { | ||
| EuiDescriptionList, | ||
| EuiDescriptionListTitle, | ||
| EuiDescriptionListDescription, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiLink, | ||
| } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { Agent, AgentConfig } from '../../../../types'; | ||
| import { AGENT_CONFIG_DETAILS_PATH } from '../../../../constants'; | ||
| import { useLink } from '../../../../hooks'; | ||
| import { AgentHealth } from '../../components'; | ||
|
|
||
| export const AgentDetailsContent: React.FunctionComponent<{ | ||
| agent: Agent; | ||
| agentConfig?: AgentConfig; | ||
| }> = memo(({ agent, agentConfig }) => { | ||
| const agentConfigUrl = useLink(AGENT_CONFIG_DETAILS_PATH); | ||
| return ( | ||
| <EuiDescriptionList> | ||
| {[ | ||
| { | ||
| title: i18n.translate('xpack.ingestManager.agentDetails.hostNameLabel', { | ||
| defaultMessage: 'Host name', | ||
| }), | ||
| description: agent.local_metadata['host.hostname'], | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.ingestManager.agentDetails.hostIdLabel', { | ||
| defaultMessage: 'Host ID', | ||
| }), | ||
| description: agent.id, | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.ingestManager.agentDetails.statusLabel', { | ||
| defaultMessage: 'Status', | ||
| }), | ||
| description: <AgentHealth agent={agent} />, | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.ingestManager.agentDetails.agentConfigurationLabel', { | ||
| defaultMessage: 'Agent configuration', | ||
| }), | ||
| description: agentConfig ? ( | ||
| <EuiLink href={`${agentConfigUrl}${agent.config_id}`}> | ||
| {agentConfig.name || agent.config_id} | ||
| </EuiLink> | ||
| ) : ( | ||
| agent.config_id || '-' | ||
| ), | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.ingestManager.agentDetails.versionLabel', { | ||
| defaultMessage: 'Agent version', | ||
| }), | ||
| description: agent.local_metadata['agent.version'], | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.ingestManager.agentDetails.platformLabel', { | ||
| defaultMessage: 'Platform', | ||
| }), | ||
| description: agent.local_metadata['os.platform'], | ||
| }, | ||
| ].map(({ title, description }) => { | ||
| return ( | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem grow={3}> | ||
| <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={7}> | ||
| <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| })} | ||
| </EuiDescriptionList> | ||
| ); | ||
| }); |
Oops, something went wrong.