From 5c15bfe5be32bfe28823159f15dcfdacea0d3880 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Mon, 7 Jun 2021 15:27:16 -0400 Subject: [PATCH 1/6] Add "Add Agent" button to package policy list - Add button to open enrollment flyout from package policy list screen - Move necessary components up into `public` in order to open enrollment flyout from within Integrations application --- .../applications/fleet/components/index.ts | 1 - .../agent_policy/components/actions_menu.tsx | 3 +- .../agent_details/agent_details_overview.tsx | 3 +- .../sections/agents/agent_list_page/index.tsx | 7 +- .../fleet_server_requirement_page.tsx | 13 ++- .../agent_reassign_policy_modal/index.tsx | 2 +- .../sections/agents/components/index.tsx | 1 - .../enrollment_token_list_page/index.tsx | 2 +- .../fleet/sections/agents/hooks/index.tsx | 8 -- .../detail/policies/package_policies.tsx | 90 +++++++++++++------ .../agent_policy_selection.tsx | 6 +- .../agent_enrollment_flyout/index.tsx | 9 +- .../managed_instructions.tsx | 15 ++-- .../standalone_instructions.tsx | 6 +- .../agent_enrollment_flyout/steps.tsx | 6 +- .../agent_policy_package_badges.tsx | 8 +- .../enrollment_instructions/index.tsx | 0 .../enrollment_instructions/manual/index.tsx | 4 +- .../plugins/fleet/public/components/index.ts | 3 + .../components/new_enrollment_key_modal.tsx | 4 +- x-pack/plugins/fleet/public/hooks/index.ts | 1 + .../agents => }/hooks/use_platform.tsx | 0 22 files changed, 116 insertions(+), 76 deletions(-) delete mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/index.tsx rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/components/agent_enrollment_flyout/agent_policy_selection.tsx (98%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/components/agent_enrollment_flyout/index.tsx (95%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/components/agent_enrollment_flyout/managed_instructions.tsx (91%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/components/agent_enrollment_flyout/standalone_instructions.tsx (98%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/components/agent_enrollment_flyout/steps.tsx (94%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/components/agent_policy_package_badges.tsx (94%) rename x-pack/plugins/fleet/public/{applications/fleet => }/components/enrollment_instructions/index.tsx (100%) rename x-pack/plugins/fleet/public/{applications/fleet => }/components/enrollment_instructions/manual/index.tsx (95%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents/enrollment_token_list_page => }/components/new_enrollment_key_modal.tsx (97%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agents => }/hooks/use_platform.tsx (100%) diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/index.ts b/x-pack/plugins/fleet/public/applications/fleet/components/index.ts index ac5a78a4ea709..5e927c5b0e3d6 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/index.ts +++ b/x-pack/plugins/fleet/public/applications/fleet/components/index.ts @@ -7,5 +7,4 @@ export * from '../../../components'; -export * from './enrollment_instructions'; export * from './search_bar'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx index bdf49f44f4397..798ed4f038156 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx @@ -11,8 +11,7 @@ import { EuiContextMenuItem, EuiPortal } from '@elastic/eui'; import type { AgentPolicy } from '../../../types'; import { useCapabilities } from '../../../hooks'; -import { ContextMenuActions } from '../../../components'; -import { AgentEnrollmentFlyout } from '../../agents/components'; +import { AgentEnrollmentFlyout, ContextMenuActions } from '../../../components'; import { AgentPolicyYamlFlyout } from './agent_policy_yaml_flyout'; import { AgentPolicyCopyProvider } from './agent_policy_copy_provider'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx index 540b06d7a9786..fb80611e5295c 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx @@ -23,8 +23,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import type { Agent, AgentPolicy } from '../../../../../types'; import { useKibanaVersion } from '../../../../../hooks'; import { isAgentUpgradeable } from '../../../../../services'; -import { AgentPolicyPackageBadges } from '../../../components/agent_policy_package_badges'; -import { AgentPolicySummaryLine } from '../../../../../components'; +import { AgentPolicyPackageBadges, AgentPolicySummaryLine } from '../../../../../components'; // Allows child text to be truncated const FlexItemWithMinWidth = styled(EuiFlexItem)` diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx index 70cb6cddad5fa..672b8718c9cbe 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx @@ -22,7 +22,6 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react'; -import { AgentEnrollmentFlyout } from '../components'; import type { Agent, AgentPolicy, SimplifiedAgentStatus } from '../../../types'; import { usePagination, @@ -37,7 +36,11 @@ import { useKibanaVersion, useStartServices, } from '../../../hooks'; -import { AgentPolicySummaryLine, ContextMenuActions } from '../../../components'; +import { + AgentEnrollmentFlyout, + AgentPolicySummaryLine, + ContextMenuActions, +} from '../../../components'; import { AgentStatusKueryHelper, isAgentUpgradeable } from '../../../services'; import { AGENT_SAVED_OBJECT_TYPE } from '../../../constants'; import { diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx index 83f09789a9414..20d366b01af2b 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx @@ -26,10 +26,15 @@ import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DownloadStep } from '../components/agent_enrollment_flyout/steps'; -import { useStartServices, useGetOutputs, sendGenerateServiceToken } from '../../../hooks'; -import { PLATFORM_OPTIONS, usePlatform } from '../hooks/use_platform'; -import type { PLATFORM_TYPE } from '../hooks/use_platform'; +import { DownloadStep } from '../../../components'; +import { + useStartServices, + useGetOutputs, + sendGenerateServiceToken, + usePlatform, + PLATFORM_OPTIONS, +} from '../../../hooks'; +import type { PLATFORM_TYPE } from '../../../hooks'; const FlexItemWithMinWidth = styled(EuiFlexItem)` min-width: 0px; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_modal/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_modal/index.tsx index 8ee401d3c4ddf..f15b58200ea88 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_modal/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_modal/index.tsx @@ -24,7 +24,7 @@ import { useStartServices, useGetAgentPolicies, } from '../../../../hooks'; -import { AgentPolicyPackageBadges } from '../agent_policy_package_badges'; +import { AgentPolicyPackageBadges } from '../../../../components'; interface Props { onClose: () => void; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/index.tsx index 45f09c79d5533..966a777941373 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/index.tsx @@ -7,7 +7,6 @@ export * from './loading'; export * from './agent_reassign_policy_modal'; -export * from './agent_enrollment_flyout'; export * from './agent_health'; export * from './agent_unenroll_modal'; export * from './agent_upgrade_modal'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx index 66e0c338dbbbc..8dc9ad33962e0 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx @@ -22,6 +22,7 @@ import { import { FormattedMessage, FormattedDate } from '@kbn/i18n/react'; import { ENROLLMENT_API_KEYS_INDEX } from '../../../constants'; +import { NewEnrollmentTokenModal } from '../../../components'; import { useBreadcrumbs, usePagination, @@ -34,7 +35,6 @@ import { import type { EnrollmentAPIKey, GetAgentPoliciesResponseItem } from '../../../types'; import { SearchBar } from '../../../components/search_bar'; -import { NewEnrollmentTokenModal } from './components/new_enrollment_key_modal'; import { ConfirmEnrollmentTokenDelete } from './components/confirm_delete_modal'; const ApiKeyField: React.FunctionComponent<{ apiKeyId: string }> = ({ apiKeyId }) => { diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/index.tsx deleted file mode 100644 index d9b3bcd80752d..0000000000000 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/* - * 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. - */ - -export * from './use_platform'; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index d5dce6334762c..7b48c9d03a1ed 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx @@ -5,23 +5,38 @@ * 2.0. */ -import React, { memo, useCallback, useMemo } from 'react'; +import React, { memo, useCallback, useMemo, useState } from 'react'; import { Redirect } from 'react-router-dom'; import type { CriteriaWithPagination, EuiTableFieldDataColumnType } from '@elastic/eui'; -import { EuiBasicTable, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { + EuiButtonIcon, + EuiBasicTable, + EuiLink, + EuiFlexGroup, + EuiFlexItem, + EuiToolTip, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedRelative, FormattedMessage } from '@kbn/i18n/react'; +import styled from 'styled-components'; import { InstallStatus } from '../../../../../types'; import { useLink, useUrlPagination, useGetPackageInstallStatus } from '../../../../../hooks'; import { PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../constants'; -import { AgentPolicySummaryLine } from '../../../../../components'; -import { LinkedAgentCount } from '../../../../../components'; +import { + AgentEnrollmentFlyout, + AgentPolicySummaryLine, + LinkedAgentCount, +} from '../../../../../components'; import type { PackagePolicyAndAgentPolicy } from './use_package_policies_with_agent_policy'; import { usePackagePoliciesWithAgentPolicy } from './use_package_policies_with_agent_policy'; import { Persona } from './persona'; +const AddAgentButton = styled(EuiButtonIcon)` + margin-left: ${(props) => props.theme.eui.euiSizeS}; +`; + const IntegrationDetailsLink = memo<{ packagePolicy: PackagePolicyAndAgentPolicy['packagePolicy']; }>(({ packagePolicy }) => { @@ -44,6 +59,7 @@ interface PackagePoliciesPanelProps { version: string; } export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps) => { + const [flyoutOpenForPolicyId, setFlyoutOpenForPolicyId] = useState(null); const { getPath } = useLink(); const getPackageInstallStatus = useGetPackageInstallStatus(); const packageInstallStatus = getPackageInstallStatus(name); @@ -97,16 +113,28 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps defaultMessage: 'Agents', }), truncateText: true, - align: 'right', - width: '8ch', + align: 'left', + width: '16ch', render({ packagePolicy, agentPolicy }: PackagePolicyAndAgentPolicy) { return ( - + <> + + + setFlyoutOpenForPolicyId(agentPolicy.id)} + /> + + ); }, }, @@ -165,19 +193,31 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps } return ( - - - - + + + + + + + {flyoutOpenForPolicyId && ( + setFlyoutOpenForPolicyId(null)} + agentPolicies={ + data?.items + .filter(({ agentPolicy }) => agentPolicy.id === flyoutOpenForPolicyId) + .map(({ agentPolicy }) => agentPolicy) ?? [] + } /> - - + )} + ); }; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/agent_policy_selection.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx similarity index 98% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/agent_policy_selection.tsx rename to x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx index 4edc1121b1091..dc239213baf36 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/agent_policy_selection.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx @@ -10,13 +10,13 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButtonEmpty, EuiButton, EuiCallOut, EuiSelect, EuiSpacer, EuiText } from '@elastic/eui'; -import { SO_SEARCH_LIMIT } from '../../../../constants'; -import type { AgentPolicy, GetEnrollmentAPIKeysResponse } from '../../../../types'; +import { SO_SEARCH_LIMIT } from '../../constants'; +import type { AgentPolicy, GetEnrollmentAPIKeysResponse } from '../../types'; import { sendGetEnrollmentAPIKeys, useStartServices, sendCreateEnrollmentAPIKey, -} from '../../../../hooks'; +} from '../../hooks'; import { AgentPolicyPackageBadges } from '../agent_policy_package_badges'; type Props = { diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/index.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx similarity index 95% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/index.tsx rename to x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx index 1aa88dcef4adc..84f881e8baa0c 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx @@ -26,8 +26,8 @@ import { import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { useGetSettings, useUrlModal } from '../../../../hooks'; -import type { AgentPolicy } from '../../../../types'; +import { useGetSettings, useUrlModal } from '../../hooks'; +import type { AgentPolicy } from '../../types'; import { ManagedInstructions } from './managed_instructions'; import { StandaloneInstructions } from './standalone_instructions'; @@ -37,6 +37,11 @@ interface Props { agentPolicies?: AgentPolicy[]; } +export * from './agent_policy_selection'; +export * from './managed_instructions'; +export * from './standalone_instructions'; +export * from './steps'; + const MissingFleetServerHostCallout: React.FunctionComponent = () => { const { setModal } = useUrlModal(); return ( diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx similarity index 91% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx rename to x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx index df1630abfab47..5f2e0d6e4c414 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx @@ -11,22 +11,17 @@ import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/st import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import type { AgentPolicy } from '../../../../types'; -import { - useGetOneEnrollmentAPIKey, - useGetSettings, - useLink, - useFleetStatus, -} from '../../../../hooks'; -import { NewEnrollmentTokenModal } from '../../enrollment_token_list_page/components/new_enrollment_key_modal'; +import type { AgentPolicy } from '../../types'; +import { NewEnrollmentTokenModal } from '../../components'; +import { useGetOneEnrollmentAPIKey, useGetSettings, useLink, useFleetStatus } from '../../hooks'; -import { ManualInstructions } from '../../../../components/enrollment_instructions'; +import { ManualInstructions } from '../../components/enrollment_instructions'; import { FleetServerRequirementPage, ServiceTokenStep, FleetServerCommandStep, useFleetServerInstructions, -} from '../../agent_requirements_page'; +} from '../../applications/fleet/sections/agents/agent_requirements_page'; import { DownloadStep, AgentPolicySelectionStep } from './steps'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/standalone_instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/standalone_instructions.tsx similarity index 98% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/standalone_instructions.tsx rename to x-pack/plugins/fleet/public/components/agent_enrollment_flyout/standalone_instructions.tsx index 1d830b2c578b1..0fd846b074f98 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/standalone_instructions.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/standalone_instructions.tsx @@ -22,9 +22,9 @@ import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/st import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import type { AgentPolicy } from '../../../../types'; -import { useStartServices, useLink, sendGetOneAgentPolicyFull } from '../../../../hooks'; -import { fullAgentPolicyToYaml, agentPolicyRouteService } from '../../../../services'; +import type { AgentPolicy } from '../../types'; +import { useStartServices, useLink, sendGetOneAgentPolicyFull } from '../../hooks'; +import { fullAgentPolicyToYaml, agentPolicyRouteService } from '../../services'; import { DownloadStep, AgentPolicySelectionStep } from './steps'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/steps.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx similarity index 94% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/steps.tsx rename to x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx index 8ba0098b3d277..fc22cbdd047c3 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/steps.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx @@ -10,9 +10,9 @@ import { EuiText, EuiButton, EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import type { AgentPolicy, PackagePolicy } from '../../../../types'; -import { sendGetOneAgentPolicy } from '../../../../hooks'; -import { FLEET_SERVER_PACKAGE } from '../../../../constants'; +import type { AgentPolicy, PackagePolicy } from '../../types'; +import { sendGetOneAgentPolicy } from '../../hooks'; +import { FLEET_SERVER_PACKAGE } from '../../constants'; import { EnrollmentStepAgentPolicy } from './agent_policy_selection'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx b/x-pack/plugins/fleet/public/components/agent_policy_package_badges.tsx similarity index 94% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx rename to x-pack/plugins/fleet/public/components/agent_policy_package_badges.tsx index 605888349ab4e..418e274022461 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx +++ b/x-pack/plugins/fleet/public/components/agent_policy_package_badges.tsx @@ -10,11 +10,11 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiSpacer, EuiText, EuiFlexGroup, EuiFlexItem, EuiBadge, EuiCallOut } from '@elastic/eui'; -import { FLEET_SERVER_PACKAGE } from '../../../../../../common/constants'; +import { FLEET_SERVER_PACKAGE } from '../../common/constants'; -import type { PackagePolicy, PackagePolicyPackage } from '../../../types'; -import { useGetOneAgentPolicy } from '../../../hooks'; -import { PackageIcon } from '../../../components'; +import type { PackagePolicy, PackagePolicyPackage } from '../types'; +import { useGetOneAgentPolicy } from '../hooks'; +import { PackageIcon } from '../components'; interface Props { agentPolicyId: string; diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/index.tsx b/x-pack/plugins/fleet/public/components/enrollment_instructions/index.tsx similarity index 100% rename from x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/index.tsx rename to x-pack/plugins/fleet/public/components/enrollment_instructions/index.tsx diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx b/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx similarity index 95% rename from x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx rename to x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx index c9f011c59504b..f746a1c914460 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx +++ b/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx @@ -12,8 +12,8 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import type { EnrollmentAPIKey } from '../../../types'; -import { PLATFORM_OPTIONS, usePlatform } from '../../../sections/agents/hooks/use_platform'; -import type { PLATFORM_TYPE } from '../../../sections/agents/hooks/use_platform'; +import { PLATFORM_OPTIONS, usePlatform } from '../../../hooks'; +import type { PLATFORM_TYPE } from '../../../hooks'; interface Props { fleetServerHosts: string[]; diff --git a/x-pack/plugins/fleet/public/components/index.ts b/x-pack/plugins/fleet/public/components/index.ts index 6db18c0e73a14..3c886cb03bc0f 100644 --- a/x-pack/plugins/fleet/public/components/index.ts +++ b/x-pack/plugins/fleet/public/components/index.ts @@ -13,5 +13,8 @@ export { ExtensionWrapper } from './extension_wrapper'; export { AlphaMessaging } from './alpha_messaging'; export { AlphaFlyout } from './alpha_flyout'; export { HeaderProps, Header } from './header'; +export { NewEnrollmentTokenModal } from './new_enrollment_key_modal'; +export { AgentPolicyPackageBadges } from './agent_policy_package_badges'; export * from './link_and_revision'; export * from './settings_flyout'; +export * from './agent_enrollment_flyout'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/components/new_enrollment_key_modal.tsx b/x-pack/plugins/fleet/public/components/new_enrollment_key_modal.tsx similarity index 97% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/components/new_enrollment_key_modal.tsx rename to x-pack/plugins/fleet/public/components/new_enrollment_key_modal.tsx index 29e130f5583ab..0752c1ab34889 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/components/new_enrollment_key_modal.tsx +++ b/x-pack/plugins/fleet/public/components/new_enrollment_key_modal.tsx @@ -9,8 +9,8 @@ import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiConfirmModal, EuiForm, EuiFormRow, EuiFieldText, EuiSelect } from '@elastic/eui'; -import type { AgentPolicy, EnrollmentAPIKey } from '../../../../types'; -import { useInput, useStartServices, sendCreateEnrollmentAPIKey } from '../../../../hooks'; +import type { AgentPolicy, EnrollmentAPIKey } from '../types'; +import { useInput, useStartServices, sendCreateEnrollmentAPIKey } from '../hooks'; function useCreateApiKeyForm( policyIdDefaultValue: string | undefined, diff --git a/x-pack/plugins/fleet/public/hooks/index.ts b/x-pack/plugins/fleet/public/hooks/index.ts index 0b413f72094d9..0398847ef00c3 100644 --- a/x-pack/plugins/fleet/public/hooks/index.ts +++ b/x-pack/plugins/fleet/public/hooks/index.ts @@ -24,3 +24,4 @@ export * from './use_url_params'; export * from './use_fleet_status'; export * from './use_ui_extension'; export * from './use_intra_app_state'; +export * from './use_platform'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_platform.tsx b/x-pack/plugins/fleet/public/hooks/use_platform.tsx similarity index 100% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_platform.tsx rename to x-pack/plugins/fleet/public/hooks/use_platform.tsx From cd0c4bb1aa0fc5f24a1ddc612d503b2ff6ded161 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Mon, 7 Jun 2021 16:54:17 -0400 Subject: [PATCH 2/6] Create initial package policy table actions --- .../sections/agent_policy/components/index.ts | 2 - .../package_policies_table.tsx | 11 ++- .../components/settings/index.tsx | 2 +- .../agent_policy/details_page/hooks/index.ts | 1 - .../agent_policy/details_page/index.tsx | 3 +- .../fleet/sections/overview/index.tsx | 2 +- .../screens/detail/policies/actions_menu.tsx | 85 +++++++++++++++++++ .../detail/policies/package_policies.tsx | 30 +++++-- .../use_package_policies_with_agent_policy.ts | 3 + .../danger_eui_context_menu_item.tsx | 0 .../plugins/fleet/public/components/index.ts | 2 + .../package_policy_delete_provider.tsx | 6 +- x-pack/plugins/fleet/public/hooks/index.ts | 1 + .../use_agent_policy_refresh.tsx} | 0 14 files changed, 130 insertions(+), 18 deletions(-) create mode 100644 x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx rename x-pack/plugins/fleet/public/{applications/fleet/sections/agent_policy => }/components/danger_eui_context_menu_item.tsx (100%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agent_policy => }/components/package_policy_delete_provider.tsx (98%) rename x-pack/plugins/fleet/public/{applications/fleet/sections/agent_policy/details_page/hooks/use_config.tsx => hooks/use_agent_policy_refresh.tsx} (100%) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/index.ts b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/index.ts index 09282a7de7cb9..439e474d416cb 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/index.ts +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/index.ts @@ -11,8 +11,6 @@ export { LinkedAgentCount } from '../../../components'; export { AgentPolicyForm, agentPolicyFormValidation } from './agent_policy_form'; export { AgentPolicyCopyProvider } from './agent_policy_copy_provider'; export { AgentPolicyDeleteProvider } from './agent_policy_delete_provider'; -export { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; export { AgentPolicyYamlFlyout } from './agent_policy_yaml_flyout'; export { ConfirmDeployAgentPolicyModal } from './confirm_deploy_modal'; -export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item'; export { AgentPolicyActionMenu } from './actions_menu'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx index 9e23fc775a213..95d87b087a399 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx @@ -20,10 +20,13 @@ import { } from '@elastic/eui'; import type { AgentPolicy, PackagePolicy } from '../../../../../types'; -import { PackageIcon, ContextMenuActions } from '../../../../../components'; -import { PackagePolicyDeleteProvider, DangerEuiContextMenuItem } from '../../../components'; -import { useCapabilities, useLink } from '../../../../../hooks'; -import { useAgentPolicyRefresh } from '../../hooks'; +import { + PackageIcon, + ContextMenuActions, + DangerEuiContextMenuItem, + PackagePolicyDeleteProvider, +} from '../../../../../components'; +import { useCapabilities, useLink, useAgentPolicyRefresh } from '../../../../../hooks'; interface InMemoryPackagePolicy extends PackagePolicy { packageName?: string; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx index e91d32a78ec96..1ea1a7de53b95 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx @@ -20,13 +20,13 @@ import { sendUpdateAgentPolicy, useConfig, sendGetAgentStatus, + useAgentPolicyRefresh, } from '../../../../../hooks'; import { AgentPolicyForm, agentPolicyFormValidation, ConfirmDeployAgentPolicyModal, } from '../../../components'; -import { useAgentPolicyRefresh } from '../../hooks'; const FormWrapper = styled.div` max-width: 800px; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/index.ts b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/index.ts index 07daef8bb2ced..fb269f95213d9 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/index.ts +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/index.ts @@ -6,4 +6,3 @@ */ export { useGetAgentStatus, AgentStatusRefreshContext } from './use_agent_status'; -export { AgentPolicyRefreshContext, useAgentPolicyRefresh } from './use_config'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index 7138abb081a77..9d3fe64b6639d 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -28,6 +28,7 @@ import styled from 'styled-components'; import type { AgentPolicy, AgentPolicyDetailsDeployAgentAction } from '../../../types'; import { FLEET_ROUTING_PATHS } from '../../../constants'; import { + AgentPolicyRefreshContext, useGetOneAgentPolicy, useLink, useBreadcrumbs, @@ -39,7 +40,7 @@ import { Loading, Error } from '../../../components'; import { WithHeaderLayout } from '../../../layouts'; import { LinkedAgentCount, AgentPolicyActionMenu } from '../components'; -import { AgentPolicyRefreshContext, useGetAgentStatus, AgentStatusRefreshContext } from './hooks'; +import { useGetAgentStatus, AgentStatusRefreshContext } from './hooks'; import { PackagePoliciesView, SettingsView } from './components'; const Divider = styled.div` diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx index 9da10c1de2be0..f905fd1c89da2 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx @@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n'; import { WithHeaderLayout } from '../../layouts'; import { useGetAgentPolicies, useBreadcrumbs } from '../../hooks'; -import { AgentEnrollmentFlyout } from '../agents/components'; +import { AgentEnrollmentFlyout } from '../../components'; import { OverviewAgentSection } from './components/agent_section'; import { OverviewPolicySection } from './components/agent_policy_section'; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx new file mode 100644 index 0000000000000..253e7d54ad900 --- /dev/null +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { memo, useState, useMemo } from 'react'; +import { EuiPortal, EuiContextMenuItem, EuiLink } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import type { AgentPolicy, PackagePolicy } from '../../../../../types'; +import { + AgentEnrollmentFlyout, + ContextMenuActions, + DangerEuiContextMenuItem, + PackagePolicyDeleteProvider, +} from '../../../../../components'; +import { useAgentPolicyRefresh, useLink } from '../../../../../hooks'; + +export const PackagePoliciesActionMenu: React.FunctionComponent<{ + agentPolicy: AgentPolicy; + packagePolicy: PackagePolicy; +}> = memo(({ agentPolicy, packagePolicy }) => { + const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false); + const { getHref } = useLink(); + + const onClose = useMemo(() => { + return () => setIsEnrollmentFlyoutOpen(false); + }, []); + + const refreshAgentPolicy = useAgentPolicyRefresh(); + + return ( + <> + {isEnrollmentFlyoutOpen && ( + + + + )} + + setIsEnrollmentFlyoutOpen(true)} + key="addAgent" + > + + , + null} key="editIntegration"> + + + + , + + {(deletePackagePoliciesPrompt) => ( + deletePackagePoliciesPrompt([packagePolicy.id], refreshAgentPolicy)} + key="deleteIntegration" + > + + + )} + , + ]} + /> + + ); +}); diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index 7b48c9d03a1ed..c3b864223eee6 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx @@ -21,7 +21,12 @@ import { FormattedRelative, FormattedMessage } from '@kbn/i18n/react'; import styled from 'styled-components'; import { InstallStatus } from '../../../../../types'; -import { useLink, useUrlPagination, useGetPackageInstallStatus } from '../../../../../hooks'; +import { + useLink, + useUrlPagination, + useGetPackageInstallStatus, + AgentPolicyRefreshContext, +} from '../../../../../hooks'; import { PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../constants'; import { AgentEnrollmentFlyout, @@ -32,6 +37,7 @@ import { import type { PackagePolicyAndAgentPolicy } from './use_package_policies_with_agent_policy'; import { usePackagePoliciesWithAgentPolicy } from './use_package_policies_with_agent_policy'; import { Persona } from './persona'; +import { PackagePoliciesActionMenu } from './actions_menu'; const AddAgentButton = styled(EuiButtonIcon)` margin-left: ${(props) => props.theme.eui.euiSizeS}; @@ -54,6 +60,7 @@ const IntegrationDetailsLink = memo<{ ); }); + interface PackagePoliciesPanelProps { name: string; version: string; @@ -64,7 +71,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps const getPackageInstallStatus = useGetPackageInstallStatus(); const packageInstallStatus = getPackageInstallStatus(name); const { pagination, pageSizeOptions, setPagination } = useUrlPagination(); - const { data, isLoading } = usePackagePoliciesWithAgentPolicy({ + const { data, isLoading, resendRequest: refreshPolicies } = usePackagePoliciesWithAgentPolicy({ page: pagination.currentPage, perPage: pagination.pageSize, kuery: `${PACKAGE_POLICY_SAVED_OBJECT_TYPE}.package.name: ${name}`, @@ -114,7 +121,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps }), truncateText: true, align: 'left', - width: '16ch', + width: '8ch', render({ packagePolicy, agentPolicy }: PackagePolicyAndAgentPolicy) { return ( <> @@ -162,6 +169,19 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps ); }, }, + { + field: '', + name: i18n.translate('xpack.fleet.epm.packageDetails.integrationList.actions', { + defaultMessage: 'Actions', + }), + width: '8ch', + align: 'right', + render({ agentPolicy, packagePolicy }) { + return ( + + ); + }, + }, ], [] ); @@ -193,7 +213,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps } return ( - <> + @@ -218,6 +238,6 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps } /> )} - + ); }; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/use_package_policies_with_agent_policy.ts b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/use_package_policies_with_agent_policy.ts index aae43a1acd568..33c1d3ff77302 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/use_package_policies_with_agent_policy.ts +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/use_package_policies_with_agent_policy.ts @@ -43,11 +43,13 @@ export const usePackagePoliciesWithAgentPolicy = ( isLoading: boolean; error: Error | null; data?: GetPackagePoliciesWithAgentPolicy; + resendRequest: () => void; } => { const { data: packagePoliciesData, error, isLoading: isLoadingPackagePolicies, + resendRequest, } = useGetPackagePolicies(query); const agentPoliciesFilter = useMemo(() => { @@ -124,5 +126,6 @@ export const usePackagePoliciesWithAgentPolicy = ( data: enrichedData, error, isLoading: isLoadingPackagePolicies || isLoadingAgentPolicies, + resendRequest, }; }; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx b/x-pack/plugins/fleet/public/components/danger_eui_context_menu_item.tsx similarity index 100% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx rename to x-pack/plugins/fleet/public/components/danger_eui_context_menu_item.tsx diff --git a/x-pack/plugins/fleet/public/components/index.ts b/x-pack/plugins/fleet/public/components/index.ts index 3c886cb03bc0f..81e420467cb97 100644 --- a/x-pack/plugins/fleet/public/components/index.ts +++ b/x-pack/plugins/fleet/public/components/index.ts @@ -15,6 +15,8 @@ export { AlphaFlyout } from './alpha_flyout'; export { HeaderProps, Header } from './header'; export { NewEnrollmentTokenModal } from './new_enrollment_key_modal'; export { AgentPolicyPackageBadges } from './agent_policy_package_badges'; +export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item'; +export { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; export * from './link_and_revision'; export * from './settings_flyout'; export * from './agent_enrollment_flyout'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/package_policy_delete_provider.tsx b/x-pack/plugins/fleet/public/components/package_policy_delete_provider.tsx similarity index 98% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/package_policy_delete_provider.tsx rename to x-pack/plugins/fleet/public/components/package_policy_delete_provider.tsx index 198886e9b9c7f..86f064405497b 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/package_policy_delete_provider.tsx +++ b/x-pack/plugins/fleet/public/components/package_policy_delete_provider.tsx @@ -10,9 +10,9 @@ import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { useStartServices, sendRequest, sendDeletePackagePolicy, useConfig } from '../../../hooks'; -import { AGENT_API_ROUTES, AGENT_SAVED_OBJECT_TYPE } from '../../../constants'; -import type { AgentPolicy } from '../../../types'; +import { useStartServices, sendRequest, sendDeletePackagePolicy, useConfig } from '../hooks'; +import { AGENT_API_ROUTES, AGENT_SAVED_OBJECT_TYPE } from '../../common/constants'; +import type { AgentPolicy } from '../types'; interface Props { agentPolicy: AgentPolicy; diff --git a/x-pack/plugins/fleet/public/hooks/index.ts b/x-pack/plugins/fleet/public/hooks/index.ts index 0398847ef00c3..9f41e5c7cc92b 100644 --- a/x-pack/plugins/fleet/public/hooks/index.ts +++ b/x-pack/plugins/fleet/public/hooks/index.ts @@ -25,3 +25,4 @@ export * from './use_fleet_status'; export * from './use_ui_extension'; export * from './use_intra_app_state'; export * from './use_platform'; +export * from './use_agent_policy_refresh'; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/use_config.tsx b/x-pack/plugins/fleet/public/hooks/use_agent_policy_refresh.tsx similarity index 100% rename from x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/use_config.tsx rename to x-pack/plugins/fleet/public/hooks/use_agent_policy_refresh.tsx From 6988e46a650fd2202726542de332668c7efcf632 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Tue, 8 Jun 2021 09:50:20 -0400 Subject: [PATCH 3/6] Fix context menu link + add a few tests --- .../epm/screens/detail/index.test.tsx | 18 +++++++++++ .../screens/detail/policies/actions_menu.tsx | 24 +++++++-------- .../detail/policies/package_policies.tsx | 30 ++++++++++++------- 3 files changed, 48 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx index 4063bc6371cbd..593d932d71510 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx @@ -204,12 +204,30 @@ describe('when on integration detail', () => { expect(firstRowAgentCount.tagName).not.toEqual('A'); }); + it('should show add agent button if agent count is zero', async () => { + await mockedApi.waitForApi(); + const firstRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[0]; + expect(firstRowAgentCount.textContent).toEqual('0'); + + const addAgentButton = renderResult.getAllByTestId('addAgentButton')[0]; + expect(addAgentButton).not.toBeNull(); + }); + it('should show link for agent count if greater than zero', async () => { await mockedApi.waitForApi(); const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1]; expect(secondRowAgentCount.textContent).toEqual('100'); expect(secondRowAgentCount.tagName).toEqual('A'); }); + + it('should NOW show add agent button if agent count is greater than zero', async () => { + await mockedApi.waitForApi(); + const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1]; + expect(secondRowAgentCount.textContent).toEqual('100'); + + const addAgentButton = renderResult.getAllByTestId('addAgentButton')[1]; + expect(addAgentButton).toBeUndefined(); + }); }); }); diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx index 253e7d54ad900..1ac2d1395db98 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx @@ -6,7 +6,7 @@ */ import React, { memo, useState, useMemo } from 'react'; -import { EuiPortal, EuiContextMenuItem, EuiLink } from '@elastic/eui'; +import { EuiPortal, EuiContextMenuItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import type { AgentPolicy, PackagePolicy } from '../../../../../types'; @@ -51,18 +51,16 @@ export const PackagePoliciesActionMenu: React.FunctionComponent<{ defaultMessage="Add Agent" /> , - null} key="editIntegration"> - - - + + , {(deletePackagePoliciesPrompt) => ( diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index c3b864223eee6..f1f9f811a15b6 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx @@ -123,24 +123,32 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps align: 'left', width: '8ch', render({ packagePolicy, agentPolicy }: PackagePolicyAndAgentPolicy) { + const count = agentPolicy?.agents ?? 0; + return ( <> - - setFlyoutOpenForPolicyId(agentPolicy.id)} - /> - + {count === 0 && ( + + setFlyoutOpenForPolicyId(agentPolicy.id)} + data-test-subj="addAgentButton" + /> + + )} ); }, From ee1beaf029a5fa33000612bbd8d4f19177e45639 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Tue, 8 Jun 2021 10:13:50 -0400 Subject: [PATCH 4/6] Fix import in list_layout --- .../fleet/sections/agents/components/list_layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx index 40642587c1a38..67758282521b7 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx @@ -14,7 +14,7 @@ import { useRouteMatch } from 'react-router-dom'; import { FLEET_ROUTING_PATHS } from '../../../constants'; import { WithHeaderLayout } from '../../../layouts'; import { useCapabilities, useLink, useGetAgentPolicies } from '../../../hooks'; -import { AgentEnrollmentFlyout } from '../components'; +import { AgentEnrollmentFlyout } from '../../../components'; export const ListLayout: React.FunctionComponent<{}> = ({ children }) => { const { getHref } = useLink(); From 88adc35e61f55aa57256ce878830c2bd2db63323 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Tue, 8 Jun 2021 11:41:12 -0400 Subject: [PATCH 5/6] Unify package policy actions menu in shared component --- .../package_policies_table.tsx | 75 +----------- .../screens/detail/policies/actions_menu.tsx | 83 ------------- .../detail/policies/package_policies.tsx | 4 +- .../plugins/fleet/public/components/index.ts | 1 + .../package_policy_actions_menu.tsx | 112 ++++++++++++++++++ 5 files changed, 121 insertions(+), 154 deletions(-) delete mode 100644 x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx create mode 100644 x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx index 95d87b087a399..2e6e7fb984ef0 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx @@ -12,7 +12,6 @@ import type { EuiInMemoryTableProps } from '@elastic/eui'; import { EuiInMemoryTable, EuiBadge, - EuiContextMenuItem, EuiButton, EuiFlexGroup, EuiFlexItem, @@ -20,13 +19,8 @@ import { } from '@elastic/eui'; import type { AgentPolicy, PackagePolicy } from '../../../../../types'; -import { - PackageIcon, - ContextMenuActions, - DangerEuiContextMenuItem, - PackagePolicyDeleteProvider, -} from '../../../../../components'; -import { useCapabilities, useLink, useAgentPolicyRefresh } from '../../../../../hooks'; +import { PackageIcon, PackagePolicyActionsMenu } from '../../../../../components'; +import { useCapabilities, useLink } from '../../../../../hooks'; interface InMemoryPackagePolicy extends PackagePolicy { packageName?: string; @@ -57,7 +51,6 @@ export const PackagePoliciesTable: React.FunctionComponent = ({ }) => { const { getHref } = useLink(); const hasWriteCapabilities = useCapabilities().write; - const refreshAgentPolicy = useAgentPolicyRefresh(); // With the package policies provided on input, generate the list of package policies // used in the InMemoryTable (flattens some values for search) as well as @@ -171,71 +164,15 @@ export const PackagePoliciesTable: React.FunctionComponent = ({ actions: [ { render: (packagePolicy: InMemoryPackagePolicy) => { - const menuItems = [ - // FIXME: implement View package policy action - // {}} - // key="packagePolicyView" - // > - // - // , - - - , - // FIXME: implement Copy package policy action - // {}} key="packagePolicyCopy"> - // - // , - ]; - - if (!agentPolicy.is_managed) { - menuItems.push( - - {(deletePackagePoliciesPrompt) => { - return ( - { - deletePackagePoliciesPrompt([packagePolicy.id], refreshAgentPolicy); - }} - > - - - ); - }} - - ); - } - return ; + return ( + + ); }, }, ], }, ], - [agentPolicy, getHref, hasWriteCapabilities, refreshAgentPolicy] + [agentPolicy] ); return ( diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx deleted file mode 100644 index 1ac2d1395db98..0000000000000 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/actions_menu.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/* - * 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, { memo, useState, useMemo } from 'react'; -import { EuiPortal, EuiContextMenuItem } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; - -import type { AgentPolicy, PackagePolicy } from '../../../../../types'; -import { - AgentEnrollmentFlyout, - ContextMenuActions, - DangerEuiContextMenuItem, - PackagePolicyDeleteProvider, -} from '../../../../../components'; -import { useAgentPolicyRefresh, useLink } from '../../../../../hooks'; - -export const PackagePoliciesActionMenu: React.FunctionComponent<{ - agentPolicy: AgentPolicy; - packagePolicy: PackagePolicy; -}> = memo(({ agentPolicy, packagePolicy }) => { - const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false); - const { getHref } = useLink(); - - const onClose = useMemo(() => { - return () => setIsEnrollmentFlyoutOpen(false); - }, []); - - const refreshAgentPolicy = useAgentPolicyRefresh(); - - return ( - <> - {isEnrollmentFlyoutOpen && ( - - - - )} - - setIsEnrollmentFlyoutOpen(true)} - key="addAgent" - > - - , - - - , - - {(deletePackagePoliciesPrompt) => ( - deletePackagePoliciesPrompt([packagePolicy.id], refreshAgentPolicy)} - key="deleteIntegration" - > - - - )} - , - ]} - /> - - ); -}); diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index f1f9f811a15b6..7da7328fdebbc 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx @@ -32,12 +32,12 @@ import { AgentEnrollmentFlyout, AgentPolicySummaryLine, LinkedAgentCount, + PackagePolicyActionsMenu, } from '../../../../../components'; import type { PackagePolicyAndAgentPolicy } from './use_package_policies_with_agent_policy'; import { usePackagePoliciesWithAgentPolicy } from './use_package_policies_with_agent_policy'; import { Persona } from './persona'; -import { PackagePoliciesActionMenu } from './actions_menu'; const AddAgentButton = styled(EuiButtonIcon)` margin-left: ${(props) => props.theme.eui.euiSizeS}; @@ -186,7 +186,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps align: 'right', render({ agentPolicy, packagePolicy }) { return ( - + ); }, }, diff --git a/x-pack/plugins/fleet/public/components/index.ts b/x-pack/plugins/fleet/public/components/index.ts index 81e420467cb97..d054b96ccb4c6 100644 --- a/x-pack/plugins/fleet/public/components/index.ts +++ b/x-pack/plugins/fleet/public/components/index.ts @@ -17,6 +17,7 @@ export { NewEnrollmentTokenModal } from './new_enrollment_key_modal'; export { AgentPolicyPackageBadges } from './agent_policy_package_badges'; export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item'; export { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; +export { PackagePolicyActionsMenu } from './package_policy_actions_menu'; export * from './link_and_revision'; export * from './settings_flyout'; export * from './agent_enrollment_flyout'; diff --git a/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx b/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx new file mode 100644 index 0000000000000..03bf2095f7f3e --- /dev/null +++ b/x-pack/plugins/fleet/public/components/package_policy_actions_menu.tsx @@ -0,0 +1,112 @@ +/* + * 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, { useMemo, useState } from 'react'; +import { EuiContextMenuItem, EuiPortal } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import type { AgentPolicy, PackagePolicy } from '../types'; + +import { useAgentPolicyRefresh, useCapabilities, useLink } from '../hooks'; + +import { AgentEnrollmentFlyout } from './agent_enrollment_flyout'; +import { ContextMenuActions } from './context_menu_actions'; +import { DangerEuiContextMenuItem } from './danger_eui_context_menu_item'; +import { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; + +export const PackagePolicyActionsMenu: React.FunctionComponent<{ + agentPolicy: AgentPolicy; + packagePolicy: PackagePolicy; +}> = ({ agentPolicy, packagePolicy }) => { + const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false); + const { getHref } = useLink(); + const hasWriteCapabilities = useCapabilities().write; + const refreshAgentPolicy = useAgentPolicyRefresh(); + + const onEnrollmentFlyoutClose = useMemo(() => { + return () => setIsEnrollmentFlyoutOpen(false); + }, []); + + const menuItems = [ + // FIXME: implement View package policy action + // {}} + // key="packagePolicyView" + // > + // + // , + setIsEnrollmentFlyoutOpen(true)} + key="addAgent" + > + + , + + + , + // FIXME: implement Copy package policy action + // {}} key="packagePolicyCopy"> + // + // , + ]; + + if (!agentPolicy.is_managed) { + menuItems.push( + + {(deletePackagePoliciesPrompt) => { + return ( + { + deletePackagePoliciesPrompt([packagePolicy.id], refreshAgentPolicy); + }} + > + + + ); + }} + + ); + } + return ( + <> + {isEnrollmentFlyoutOpen && ( + + + + )} + + + ); +}; From edb946045ed5a89c7c091a4465343bc398f150d1 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Wed, 9 Jun 2021 07:32:33 -0400 Subject: [PATCH 6/6] Update x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx Co-authored-by: Jean-Louis Leysens --- .../integrations/sections/epm/screens/detail/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx index 593d932d71510..e515644159393 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx @@ -220,7 +220,7 @@ describe('when on integration detail', () => { expect(secondRowAgentCount.tagName).toEqual('A'); }); - it('should NOW show add agent button if agent count is greater than zero', async () => { + it('should NOT show add agent button if agent count is greater than zero', async () => { await mockedApi.waitForApi(); const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1]; expect(secondRowAgentCount.textContent).toEqual('100');