From 8b5f46ba21fe9da572b247d402d4916edc9e3513 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Tue, 7 Dec 2021 16:45:11 -0500 Subject: [PATCH] [APM] Auto attachment for java agent beta in APM integration settings (#119131) * wip * wip * wip * wip * wip * wip * wip * wip * adds initial discovery rule for `include-vmargs elastic.apm.attach=true` * adds support for type descriptions * adding java_attacher_agent_version field * fixing some stuff * adding link to doc * adding internationalization * updating user description * fixing default version * setting to null when disabled * - fixes encoding and decoding discovery rules yaml - adds workaround for extra 'elasticsearch' field on integration policy updates - updates migration package version from 7.16.0 to 8.0.0-dev4 * addressing pr comments * fixing ci * fixing elements not visible while dragging * addressing PR changes * beta * adding tooltip back * addressing pr comments Co-authored-by: cauemarcondes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- x-pack/plugins/apm/common/fleet.ts | 2 +- .../agent_instructions_accordion.tsx | 219 +++++--- .../apm_agents/agent_instructions_mappings.ts | 15 + .../fleet_integration/apm_agents/index.tsx | 15 +- ...template_strings.ts => render_mustache.ts} | 17 +- .../default_discovery_rule.tsx | 30 ++ .../runtime_attachment/discovery_rule.tsx | 125 +++++ .../edit_discovery_rule.tsx | 181 +++++++ .../apm_agents/runtime_attachment/index.tsx | 327 ++++++++++++ .../runtime_attachment.stories.tsx | 484 ++++++++++++++++++ .../runtime_attachment/runtime_attachment.tsx | 235 +++++++++ .../java_runtime_attachment.tsx | 276 ++++++++++ .../edit_package_policy_page/index.tsx | 3 +- 13 files changed, 1853 insertions(+), 76 deletions(-) rename x-pack/plugins/apm/public/components/fleet_integration/apm_agents/{replace_template_strings.ts => render_mustache.ts} (65%) create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/default_discovery_rule.tsx create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/edit_discovery_rule.tsx create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/index.tsx create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.stories.tsx create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.tsx create mode 100644 x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/supported_agents/java_runtime_attachment.tsx diff --git a/x-pack/plugins/apm/common/fleet.ts b/x-pack/plugins/apm/common/fleet.ts index 00a958952d2de..bd8c6cf2653c2 100644 --- a/x-pack/plugins/apm/common/fleet.ts +++ b/x-pack/plugins/apm/common/fleet.ts @@ -8,7 +8,7 @@ import semverParse from 'semver/functions/parse'; export const POLICY_ELASTIC_AGENT_ON_CLOUD = 'policy-elastic-agent-on-cloud'; -export const SUPPORTED_APM_PACKAGE_VERSION = '7.16.0'; +export const SUPPORTED_APM_PACKAGE_VERSION = '8.0.0-dev4'; // TODO update to just '8.0.0' once published export function isPrereleaseVersion(version: string) { return semverParse(version)?.prerelease?.length ?? 0 > 0; diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx index 8f66658785b97..a82fa3121bb3b 100644 --- a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx @@ -12,19 +12,29 @@ import { EuiSpacer, EuiText, EuiCodeBlock, + EuiTabbedContent, + EuiBetaBadge, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React from 'react'; -import { CreateAgentInstructions } from './agent_instructions_mappings'; +import React, { ComponentType } from 'react'; +import styled from 'styled-components'; +import { + AgentRuntimeAttachmentProps, + CreateAgentInstructions, +} from './agent_instructions_mappings'; import { Markdown, useKibana, } from '../../../../../../../src/plugins/kibana_react/public'; import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent'; import { AgentIcon } from '../../shared/agent_icon'; -import { NewPackagePolicy } from '../apm_policy_form/typings'; +import type { + NewPackagePolicy, + PackagePolicy, + PackagePolicyEditExtensionComponentProps, +} from '../apm_policy_form/typings'; import { getCommands } from '../../../tutorial/config_agent/commands/get_commands'; -import { replaceTemplateStrings } from './replace_template_strings'; +import { renderMustache } from './render_mustache'; function AccordionButtonContent({ agentName, @@ -97,96 +107,175 @@ function TutorialConfigAgent({ } interface Props { + policy: PackagePolicy; newPolicy: NewPackagePolicy; + onChange: PackagePolicyEditExtensionComponentProps['onChange']; agentName: AgentName; title: string; variantId: string; createAgentInstructions: CreateAgentInstructions; + AgentRuntimeAttachment?: ComponentType; } +const StyledEuiAccordion = styled(EuiAccordion)` + // This is an alternative fix suggested by the EUI team to fix drag elements inside EuiAccordion + // This Issue tracks the fix on the Eui side https://github.com/elastic/eui/issues/3548#issuecomment-639041283 + .euiAccordion__childWrapper { + transform: none; + } +`; + export function AgentInstructionsAccordion({ + policy, newPolicy, + onChange, agentName, title, createAgentInstructions, variantId, + AgentRuntimeAttachment, }: Props) { const docLinks = useKibana().services.docLinks; const vars = newPolicy?.inputs?.[0]?.vars; const apmServerUrl = vars?.url.value; const secretToken = vars?.secret_token.value; const steps = createAgentInstructions(apmServerUrl, secretToken); + const stepsElements = steps.map( + ( + { title: stepTitle, textPre, textPost, customComponentName, commands }, + index + ) => { + const commandBlock = commands + ? renderMustache({ + text: commands, + docLinks, + }) + : ''; + + return ( +
+ +

{stepTitle}

+ + + + {textPre && ( + + )} + {commandBlock && ( + <> + + + {commandBlock} + + + )} + {customComponentName === 'TutorialConfigAgent' && ( + + )} + {customComponentName === 'TutorialConfigAgentRumScript' && ( + + )} + {textPost && ( + <> + + + + )} + + +
+ ); + } + ); + + const manualInstrumentationContent = ( + <> + + {stepsElements} + + ); + return ( - } > - - {steps.map( - ( - { - title: stepTitle, - textPre, - textPost, - customComponentName, - commands, - }, - index - ) => { - const commandBlock = replaceTemplateStrings( - Array.isArray(commands) ? commands.join('\n') : commands || '', - docLinks - ); - return ( -
- -

{stepTitle}

- - - - {textPre && ( - - )} - {commandBlock && ( - <> - - - {commandBlock} - - - )} - {customComponentName === 'TutorialConfigAgent' && ( - - )} - {customComponentName === 'TutorialConfigAgentRumScript' && ( - - )} - {textPost && ( + {AgentRuntimeAttachment ? ( + <> + + + + {i18n.translate( + 'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.autoAttachment', + { defaultMessage: 'Auto-Attachment' } + )} + + + + + + ), + content: ( <> - - )} - - -
- ); - } + ), + }, + ]} + /> + + ) : ( + manualInstrumentationContent )} - + ); } diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_mappings.ts b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_mappings.ts index 8bfdafe61d44e..5e992094ac64c 100644 --- a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_mappings.ts +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_mappings.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { ComponentType } from 'react'; import { createDotNetAgentInstructions, createDjangoAgentInstructions, @@ -18,6 +19,18 @@ import { createRackAgentInstructions, } from '../../../../common/tutorial/instructions/apm_agent_instructions'; import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent'; +import { JavaRuntimeAttachment } from './runtime_attachment/supported_agents/java_runtime_attachment'; +import { + NewPackagePolicy, + PackagePolicy, + PackagePolicyEditExtensionComponentProps, +} from '../apm_policy_form/typings'; + +export interface AgentRuntimeAttachmentProps { + policy: PackagePolicy; + newPolicy: NewPackagePolicy; + onChange: PackagePolicyEditExtensionComponentProps['onChange']; +} export type CreateAgentInstructions = ( apmServerUrl?: string, @@ -35,12 +48,14 @@ export const ApmAgentInstructionsMappings: Array<{ title: string; variantId: string; createAgentInstructions: CreateAgentInstructions; + AgentRuntimeAttachment?: ComponentType; }> = [ { agentName: 'java', title: 'Java', variantId: 'java', createAgentInstructions: createJavaAgentInstructions, + AgentRuntimeAttachment: JavaRuntimeAttachment, }, { agentName: 'rum-js', diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/index.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/index.tsx index d6a43a1e1268a..09b638fb184df 100644 --- a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/index.tsx +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/index.tsx @@ -21,19 +21,28 @@ interface Props { onChange: PackagePolicyEditExtensionComponentProps['onChange']; } -export function ApmAgents({ newPolicy }: Props) { +export function ApmAgents({ policy, newPolicy, onChange }: Props) { return (
{ApmAgentInstructionsMappings.map( - ({ agentName, title, createAgentInstructions, variantId }) => ( + ({ + agentName, + title, + createAgentInstructions, + variantId, + AgentRuntimeAttachment, + }) => ( diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/replace_template_strings.ts b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/render_mustache.ts similarity index 65% rename from x-pack/plugins/apm/public/components/fleet_integration/apm_agents/replace_template_strings.ts rename to x-pack/plugins/apm/public/components/fleet_integration/apm_agents/render_mustache.ts index d36d76d466308..ebf5fea7f2b85 100644 --- a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/replace_template_strings.ts +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/render_mustache.ts @@ -10,12 +10,17 @@ import Mustache from 'mustache'; const TEMPLATE_TAGS = ['{', '}']; -export function replaceTemplateStrings( - text: string, - docLinks?: CoreStart['docLinks'] -) { - Mustache.parse(text, TEMPLATE_TAGS); - return Mustache.render(text, { +export function renderMustache({ + text, + docLinks, +}: { + text: string | string[]; + docLinks?: CoreStart['docLinks']; +}) { + const template = Array.isArray(text) ? text.join('\n') : text; + + Mustache.parse(template, TEMPLATE_TAGS); + return Mustache.render(template, { config: { docs: { base_url: docLinks?.ELASTIC_WEBSITE_URL, diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/default_discovery_rule.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/default_discovery_rule.tsx new file mode 100644 index 0000000000000..848582bb3feb6 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/default_discovery_rule.tsx @@ -0,0 +1,30 @@ +/* + * 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 { + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiBadge, +} from '@elastic/eui'; +import React from 'react'; + +export function DefaultDiscoveryRule() { + return ( + + + + Exclude + + + Everything else + + + + ); +} diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx new file mode 100644 index 0000000000000..f7b1b3db3a4c4 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx @@ -0,0 +1,125 @@ +/* + * 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 { i18n } from '@kbn/i18n'; +import { + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiBadge, + EuiPanel, + DraggableProvidedDragHandleProps, + EuiButtonIcon, +} from '@elastic/eui'; +import React, { useMemo } from 'react'; +import { Operation } from '.'; + +interface Props { + id: string; + order: number; + operation: string; + type: string; + probe: string; + providedDragHandleProps?: DraggableProvidedDragHandleProps; + onDelete: (discoveryItemId: string) => void; + onEdit: (discoveryItemId: string) => void; + operationTypes: Operation[]; +} + +export function DiscoveryRule({ + id, + order, + operation, + type, + probe, + providedDragHandleProps, + onDelete, + onEdit, + operationTypes, +}: Props) { + const operationTypesLabels = useMemo(() => { + return operationTypes.reduce<{ + [operationValue: string]: { + label: string; + types: { [typeValue: string]: string }; + }; + }>((acc, current) => { + return { + ...acc, + [current.operation.value]: { + label: current.operation.label, + types: current.types.reduce((memo, { value, label }) => { + return { ...memo, [value]: label }; + }, {}), + }, + }; + }, {}); + }, [operationTypes]); + return ( + + + +
+ +
+ + + + + {order} + + + + {operationTypesLabels[operation].label} + + + + + + +

{operationTypesLabels[operation].types[type]}

+ + + + {probe} + + + + + + + { + onEdit(id); + }} + /> + + + { + onDelete(id); + }} + /> + + + + + + + + ); +} diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/edit_discovery_rule.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/edit_discovery_rule.tsx new file mode 100644 index 0000000000000..5059bbabfce91 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/edit_discovery_rule.tsx @@ -0,0 +1,181 @@ +/* + * 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 { + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiButton, + EuiButtonEmpty, + EuiFormFieldset, + EuiSelect, + EuiFieldText, + EuiFormRow, + EuiSuperSelect, + EuiText, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { + Operation, + DISCOVERY_RULE_TYPE_ALL, + STAGED_DISCOVERY_RULE_ID, +} from '.'; + +interface Props { + id: string; + onChangeOperation: (discoveryItemId: string) => void; + operation: string; + onChangeType: (discoveryItemId: string) => void; + type: string; + onChangeProbe: (discoveryItemId: string) => void; + probe: string; + onCancel: () => void; + onSubmit: () => void; + operationTypes: Operation[]; +} + +export function EditDiscoveryRule({ + id, + onChangeOperation, + operation, + onChangeType, + type, + onChangeProbe, + probe, + onCancel, + onSubmit, + operationTypes, +}: Props) { + return ( + + + + + ({ + text: item.operation.label, + value: item.operation.value, + }))} + value={operation} + onChange={(e) => { + onChangeOperation(e.target.value); + }} + /> + + + + + + + + + definedOperation.value === operation + ) + ?.types.map((item) => ({ + inputDisplay: item.label, + value: item.value, + dropdownDisplay: ( + <> + {item.label} + +

{item.description}

+ + + ), + })) ?? [] + } + valueOfSelected={type} + onChange={onChangeType} + /> + + + + + {type !== DISCOVERY_RULE_TYPE_ALL && ( + + + + + onChangeProbe(e.target.value)} + /> + + + + + )} + + + Cancel + + + + {id === STAGED_DISCOVERY_RULE_ID + ? i18n.translate( + 'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.editRule.add', + { defaultMessage: 'Add' } + ) + : i18n.translate( + 'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.editRule.save', + { defaultMessage: 'Save' } + )} + + + + + ); +} diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/index.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/index.tsx new file mode 100644 index 0000000000000..8f2a1d3d1dea1 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/index.tsx @@ -0,0 +1,327 @@ +/* + * 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 { + htmlIdGenerator, + euiDragDropReorder, + DropResult, + EuiComboBoxOptionOption, +} from '@elastic/eui'; +import React, { useState, useCallback, ReactNode } from 'react'; +import { RuntimeAttachment as RuntimeAttachmentStateless } from './runtime_attachment'; + +export const STAGED_DISCOVERY_RULE_ID = 'STAGED_DISCOVERY_RULE_ID'; +export const DISCOVERY_RULE_TYPE_ALL = 'all'; + +export interface IDiscoveryRule { + operation: string; + type: string; + probe: string; +} + +export type IDiscoveryRuleList = Array<{ + id: string; + discoveryRule: IDiscoveryRule; +}>; + +export interface RuntimeAttachmentSettings { + enabled: boolean; + discoveryRules: IDiscoveryRule[]; + version: string | null; +} + +interface Props { + onChange?: (runtimeAttachmentSettings: RuntimeAttachmentSettings) => void; + toggleDescription: ReactNode; + discoveryRulesDescription: ReactNode; + showUnsavedWarning?: boolean; + initialIsEnabled?: boolean; + initialDiscoveryRules?: IDiscoveryRule[]; + operationTypes: Operation[]; + selectedVersion: string; + versions: string[]; +} + +interface Option { + value: string; + label: string; + description?: string; +} + +export interface Operation { + operation: Option; + types: Option[]; +} + +const versionRegex = new RegExp(/^\d+\.\d+\.\d+$/); +function validateVersion(version: string) { + return versionRegex.test(version); +} + +export function RuntimeAttachment(props: Props) { + const { initialDiscoveryRules = [], onChange = () => {} } = props; + const [isEnabled, setIsEnabled] = useState(Boolean(props.initialIsEnabled)); + const [discoveryRuleList, setDiscoveryRuleList] = + useState( + initialDiscoveryRules.map((discoveryRule) => ({ + id: generateId(), + discoveryRule, + })) + ); + const [editDiscoveryRuleId, setEditDiscoveryRuleId] = useState( + null + ); + const [version, setVersion] = useState(props.selectedVersion); + const [versions, setVersions] = useState(props.versions); + const [isValidVersion, setIsValidVersion] = useState( + validateVersion(version) + ); + + const onToggleEnable = useCallback(() => { + const nextIsEnabled = !isEnabled; + setIsEnabled(nextIsEnabled); + onChange({ + enabled: nextIsEnabled, + discoveryRules: nextIsEnabled + ? discoveryRuleList.map(({ discoveryRule }) => discoveryRule) + : [], + version: nextIsEnabled ? version : null, + }); + }, [isEnabled, onChange, discoveryRuleList, version]); + + const onDelete = useCallback( + (discoveryRuleId: string) => { + const filteredDiscoveryRuleList = discoveryRuleList.filter( + ({ id }) => id !== discoveryRuleId + ); + setDiscoveryRuleList(filteredDiscoveryRuleList); + onChange({ + enabled: isEnabled, + discoveryRules: filteredDiscoveryRuleList.map( + ({ discoveryRule }) => discoveryRule + ), + version, + }); + }, + [isEnabled, discoveryRuleList, onChange, version] + ); + + const onEdit = useCallback( + (discoveryRuleId: string) => { + const editingDiscoveryRule = discoveryRuleList.find( + ({ id }) => id === discoveryRuleId + ); + if (editingDiscoveryRule) { + const { + discoveryRule: { operation, type, probe }, + } = editingDiscoveryRule; + setStagedOperationText(operation); + setStagedTypeText(type); + setStagedProbeText(probe); + setEditDiscoveryRuleId(discoveryRuleId); + } + }, + [discoveryRuleList] + ); + + const [stagedOperationText, setStagedOperationText] = useState(''); + const [stagedTypeText, setStagedTypeText] = useState(''); + const [stagedProbeText, setStagedProbeText] = useState(''); + + const onChangeOperation = useCallback( + (operationText: string) => { + setStagedOperationText(operationText); + const selectedOperationTypes = props.operationTypes.find( + ({ operation }) => operationText === operation.value + ); + const selectedTypeAvailable = selectedOperationTypes?.types.some( + ({ value }) => stagedTypeText === value + ); + if (!selectedTypeAvailable) { + setStagedTypeText(selectedOperationTypes?.types[0].value ?? ''); + } + }, + [props.operationTypes, stagedTypeText] + ); + + const onChangeType = useCallback((operationText: string) => { + setStagedTypeText(operationText); + if (operationText === DISCOVERY_RULE_TYPE_ALL) { + setStagedProbeText(''); + } + }, []); + + const onChangeProbe = useCallback((operationText: string) => { + setStagedProbeText(operationText); + }, []); + + const onCancel = useCallback(() => { + if (editDiscoveryRuleId === STAGED_DISCOVERY_RULE_ID) { + onDelete(STAGED_DISCOVERY_RULE_ID); + } + setEditDiscoveryRuleId(null); + }, [editDiscoveryRuleId, onDelete]); + + const onSubmit = useCallback(() => { + const editDiscoveryRuleIndex = discoveryRuleList.findIndex( + ({ id }) => id === editDiscoveryRuleId + ); + const editDiscoveryRule = discoveryRuleList[editDiscoveryRuleIndex]; + const nextDiscoveryRuleList = [ + ...discoveryRuleList.slice(0, editDiscoveryRuleIndex), + { + id: + editDiscoveryRule.id === STAGED_DISCOVERY_RULE_ID + ? generateId() + : editDiscoveryRule.id, + discoveryRule: { + operation: stagedOperationText, + type: stagedTypeText, + probe: stagedProbeText, + }, + }, + ...discoveryRuleList.slice(editDiscoveryRuleIndex + 1), + ]; + setDiscoveryRuleList(nextDiscoveryRuleList); + setEditDiscoveryRuleId(null); + onChange({ + enabled: isEnabled, + discoveryRules: nextDiscoveryRuleList.map( + ({ discoveryRule }) => discoveryRule + ), + version, + }); + }, [ + isEnabled, + editDiscoveryRuleId, + stagedOperationText, + stagedTypeText, + stagedProbeText, + discoveryRuleList, + onChange, + version, + ]); + + const onAddRule = useCallback(() => { + const firstOperationType = props.operationTypes[0]; + const operationText = firstOperationType.operation.value; + const typeText = firstOperationType.types[0].value; + const valueText = ''; + setStagedOperationText(operationText); + setStagedTypeText(typeText); + setStagedProbeText(valueText); + const nextDiscoveryRuleList = [ + { + id: STAGED_DISCOVERY_RULE_ID, + discoveryRule: { + operation: operationText, + type: typeText, + probe: valueText, + }, + }, + ...discoveryRuleList, + ]; + setDiscoveryRuleList(nextDiscoveryRuleList); + setEditDiscoveryRuleId(STAGED_DISCOVERY_RULE_ID); + }, [discoveryRuleList, props.operationTypes]); + + const onDragEnd = useCallback( + ({ source, destination }: DropResult) => { + if (source && destination) { + const nextDiscoveryRuleList = euiDragDropReorder( + discoveryRuleList, + source.index, + destination.index + ); + setDiscoveryRuleList(nextDiscoveryRuleList); + onChange({ + enabled: isEnabled, + discoveryRules: nextDiscoveryRuleList.map( + ({ discoveryRule }) => discoveryRule + ), + version, + }); + } + }, + [isEnabled, discoveryRuleList, onChange, version] + ); + + function onChangeVersion(nextVersion?: string) { + if (!nextVersion) { + return; + } + setVersion(nextVersion); + onChange({ + enabled: isEnabled, + discoveryRules: isEnabled + ? discoveryRuleList.map(({ discoveryRule }) => discoveryRule) + : [], + version: nextVersion, + }); + } + + function onCreateNewVersion( + newVersion: string, + flattenedOptions: Array> + ) { + const normalizedNewVersion = newVersion.trim().toLowerCase(); + const isNextVersionValid = validateVersion(normalizedNewVersion); + setIsValidVersion(isNextVersionValid); + if (!normalizedNewVersion || !isNextVersionValid) { + return; + } + + // Create the option if it doesn't exist. + if ( + flattenedOptions.findIndex( + (option) => option.label.trim().toLowerCase() === normalizedNewVersion + ) === -1 + ) { + setVersions([...versions, newVersion]); + } + + onChangeVersion(newVersion); + } + + return ( + { + const nextVersion: string | undefined = selectedVersions[0]?.label; + const isNextVersionValid = validateVersion(nextVersion); + setIsValidVersion(isNextVersionValid); + onChangeVersion(nextVersion); + }} + onCreateNewVersion={onCreateNewVersion} + isValidVersion={isValidVersion} + /> + ); +} + +const generateId = htmlIdGenerator(); diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.stories.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.stories.tsx new file mode 100644 index 0000000000000..12f6705284ff9 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.stories.tsx @@ -0,0 +1,484 @@ +/* + * 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 { Meta, Story } from '@storybook/react'; +import React, { useState } from 'react'; +import { RuntimeAttachment } from '.'; +import { JavaRuntimeAttachment } from './supported_agents/java_runtime_attachment'; + +const stories: Meta<{}> = { + title: 'fleet/Runtime agent attachment', + component: RuntimeAttachment, + decorators: [ + (StoryComponent) => { + return ( +
+ +
+ ); + }, + ], +}; +export default stories; + +const excludeOptions = [ + { value: 'main', label: 'main class / jar name' }, + { value: 'vmarg', label: 'vmarg' }, + { value: 'user', label: 'user' }, +]; +const includeOptions = [{ value: 'all', label: 'All' }, ...excludeOptions]; + +const versions = ['1.27.1', '1.27.0', '1.26.0', '1.25.0']; + +export const RuntimeAttachmentExample: Story = () => { + const [runtimeAttachmentSettings, setRuntimeAttachmentSettings] = useState( + {} + ); + return ( + <> + { + setRuntimeAttachmentSettings(settings); + }} + toggleDescription="Attach the Java agent to running and starting Java applications." + discoveryRulesDescription="For every running JVM, the discovery rules are evaluated in the order they are provided. The first matching rule determines the outcome. Learn more in the docs" + showUnsavedWarning={true} + initialIsEnabled={true} + initialDiscoveryRules={[ + { + operation: 'include', + type: 'main', + probe: 'java-opbeans-10010', + }, + { + operation: 'exclude', + type: 'vmarg', + probe: '10948653898867', + }, + ]} + versions={versions} + selectedVersion={versions[0]} + /> +
+ 
{JSON.stringify(runtimeAttachmentSettings, null, 4)}
+ + ); +}; + +export const JavaRuntimeAttachmentExample: Story = () => { + return ( + {}} + /> + ); +}; + +const policy = { + id: 'cc380ec5-d84e-40e1-885a-d706edbdc968', + version: 'WzM0MzA2LDJd', + name: 'apm-1', + description: '', + namespace: 'default', + policy_id: 'policy-elastic-agent-on-cloud', + enabled: true, + output_id: '', + inputs: [ + { + type: 'apm', + policy_template: 'apmserver', + enabled: true, + streams: [], + vars: { + host: { + value: 'localhost:8200', + type: 'text', + }, + url: { + value: 'http://localhost:8200', + type: 'text', + }, + secret_token: { + type: 'text', + }, + api_key_enabled: { + value: false, + type: 'bool', + }, + enable_rum: { + value: true, + type: 'bool', + }, + anonymous_enabled: { + value: true, + type: 'bool', + }, + anonymous_allow_agent: { + value: ['rum-js', 'js-base', 'iOS/swift'], + type: 'text', + }, + anonymous_allow_service: { + value: [], + type: 'text', + }, + anonymous_rate_limit_event_limit: { + value: 10, + type: 'integer', + }, + anonymous_rate_limit_ip_limit: { + value: 10000, + type: 'integer', + }, + default_service_environment: { + type: 'text', + }, + rum_allow_origins: { + value: ['"*"'], + type: 'text', + }, + rum_allow_headers: { + value: [], + type: 'text', + }, + rum_response_headers: { + type: 'yaml', + }, + rum_library_pattern: { + value: '"node_modules|bower_components|~"', + type: 'text', + }, + rum_exclude_from_grouping: { + value: '"^/webpack"', + type: 'text', + }, + api_key_limit: { + value: 100, + type: 'integer', + }, + max_event_bytes: { + value: 307200, + type: 'integer', + }, + capture_personal_data: { + value: true, + type: 'bool', + }, + max_header_bytes: { + value: 1048576, + type: 'integer', + }, + idle_timeout: { + value: '45s', + type: 'text', + }, + read_timeout: { + value: '3600s', + type: 'text', + }, + shutdown_timeout: { + value: '30s', + type: 'text', + }, + write_timeout: { + value: '30s', + type: 'text', + }, + max_connections: { + value: 0, + type: 'integer', + }, + response_headers: { + type: 'yaml', + }, + expvar_enabled: { + value: false, + type: 'bool', + }, + tls_enabled: { + value: false, + type: 'bool', + }, + tls_certificate: { + type: 'text', + }, + tls_key: { + type: 'text', + }, + tls_supported_protocols: { + value: ['TLSv1.0', 'TLSv1.1', 'TLSv1.2'], + type: 'text', + }, + tls_cipher_suites: { + value: [], + type: 'text', + }, + tls_curve_types: { + value: [], + type: 'text', + }, + tail_sampling_policies: { + type: 'yaml', + }, + tail_sampling_interval: { + type: 'text', + }, + }, + config: { + 'apm-server': { + value: { + rum: { + source_mapping: { + metadata: [], + }, + }, + agent_config: [], + }, + }, + }, + compiled_input: { + 'apm-server': { + auth: { + anonymous: { + allow_agent: ['rum-js', 'js-base', 'iOS/swift'], + allow_service: null, + enabled: true, + rate_limit: { + event_limit: 10, + ip_limit: 10000, + }, + }, + api_key: { + enabled: false, + limit: 100, + }, + secret_token: null, + }, + capture_personal_data: true, + idle_timeout: '45s', + default_service_environment: null, + 'expvar.enabled': false, + host: 'localhost:8200', + max_connections: 0, + max_event_size: 307200, + max_header_size: 1048576, + read_timeout: '3600s', + response_headers: null, + rum: { + allow_headers: null, + allow_origins: ['*'], + enabled: true, + exclude_from_grouping: '^/webpack', + library_pattern: 'node_modules|bower_components|~', + response_headers: null, + }, + shutdown_timeout: '30s', + write_timeout: '30s', + }, + }, + }, + ], + package: { + name: 'apm', + title: 'Elastic APM', + version: '7.16.0', + }, + elasticsearch: { + privileges: { + cluster: ['cluster:monitor/main'], + }, + }, + revision: 1, + created_at: '2021-11-18T02:14:55.758Z', + created_by: 'admin', + updated_at: '2021-11-18T02:14:55.758Z', + updated_by: 'admin', +}; + +const newPolicy = { + version: 'WzM0MzA2LDJd', + name: 'apm-1', + description: '', + namespace: 'default', + policy_id: 'policy-elastic-agent-on-cloud', + enabled: true, + output_id: '', + package: { + name: 'apm', + title: 'Elastic APM', + version: '8.0.0-dev2', + }, + elasticsearch: { + privileges: { + cluster: ['cluster:monitor/main'], + }, + }, + inputs: [ + { + type: 'apm', + policy_template: 'apmserver', + enabled: true, + vars: { + host: { + value: 'localhost:8200', + type: 'text', + }, + url: { + value: 'http://localhost:8200', + type: 'text', + }, + secret_token: { + type: 'text', + }, + api_key_enabled: { + value: false, + type: 'bool', + }, + enable_rum: { + value: true, + type: 'bool', + }, + anonymous_enabled: { + value: true, + type: 'bool', + }, + anonymous_allow_agent: { + value: ['rum-js', 'js-base', 'iOS/swift'], + type: 'text', + }, + anonymous_allow_service: { + value: [], + type: 'text', + }, + anonymous_rate_limit_event_limit: { + value: 10, + type: 'integer', + }, + anonymous_rate_limit_ip_limit: { + value: 10000, + type: 'integer', + }, + default_service_environment: { + type: 'text', + }, + rum_allow_origins: { + value: ['"*"'], + type: 'text', + }, + rum_allow_headers: { + value: [], + type: 'text', + }, + rum_response_headers: { + type: 'yaml', + }, + rum_library_pattern: { + value: '"node_modules|bower_components|~"', + type: 'text', + }, + rum_exclude_from_grouping: { + value: '"^/webpack"', + type: 'text', + }, + api_key_limit: { + value: 100, + type: 'integer', + }, + max_event_bytes: { + value: 307200, + type: 'integer', + }, + capture_personal_data: { + value: true, + type: 'bool', + }, + max_header_bytes: { + value: 1048576, + type: 'integer', + }, + idle_timeout: { + value: '45s', + type: 'text', + }, + read_timeout: { + value: '3600s', + type: 'text', + }, + shutdown_timeout: { + value: '30s', + type: 'text', + }, + write_timeout: { + value: '30s', + type: 'text', + }, + max_connections: { + value: 0, + type: 'integer', + }, + response_headers: { + type: 'yaml', + }, + expvar_enabled: { + value: false, + type: 'bool', + }, + tls_enabled: { + value: false, + type: 'bool', + }, + tls_certificate: { + type: 'text', + }, + tls_key: { + type: 'text', + }, + tls_supported_protocols: { + value: ['TLSv1.0', 'TLSv1.1', 'TLSv1.2'], + type: 'text', + }, + tls_cipher_suites: { + value: [], + type: 'text', + }, + tls_curve_types: { + value: [], + type: 'text', + }, + tail_sampling_policies: { + type: 'yaml', + }, + tail_sampling_interval: { + type: 'text', + }, + }, + config: { + 'apm-server': { + value: { + rum: { + source_mapping: { + metadata: [], + }, + }, + agent_config: [], + }, + }, + }, + streams: [], + }, + ], +}; diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.tsx new file mode 100644 index 0000000000000..3592eb4f04745 --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/runtime_attachment.tsx @@ -0,0 +1,235 @@ +/* + * 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 { + EuiCallOut, + EuiSpacer, + EuiSwitch, + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiButton, + EuiDragDropContext, + EuiDroppable, + EuiDraggable, + EuiIcon, + DropResult, + EuiComboBox, + EuiComboBoxProps, + EuiFormRow, +} from '@elastic/eui'; +import React, { ReactNode } from 'react'; +import { i18n } from '@kbn/i18n'; +import { DiscoveryRule } from './discovery_rule'; +import { DefaultDiscoveryRule } from './default_discovery_rule'; +import { EditDiscoveryRule } from './edit_discovery_rule'; +import { IDiscoveryRuleList, Operation } from '.'; + +interface Props { + isEnabled: boolean; + onToggleEnable: () => void; + discoveryRuleList: IDiscoveryRuleList; + setDiscoveryRuleList: (discoveryRuleItems: IDiscoveryRuleList) => void; + onDelete: (discoveryItemId: string) => void; + editDiscoveryRuleId: null | string; + onEdit: (discoveryItemId: string) => void; + onChangeOperation: (operationText: string) => void; + stagedOperationText: string; + onChangeType: (typeText: string) => void; + stagedTypeText: string; + onChangeProbe: (probeText: string) => void; + stagedProbeText: string; + onCancel: () => void; + onSubmit: () => void; + onAddRule: () => void; + operationTypes: Operation[]; + toggleDescription: ReactNode; + discoveryRulesDescription: ReactNode; + showUnsavedWarning?: boolean; + onDragEnd: (dropResult: DropResult) => void; + selectedVersion: string; + versions: string[]; + onChangeVersion: EuiComboBoxProps['onChange']; + onCreateNewVersion: EuiComboBoxProps['onCreateOption']; + isValidVersion: boolean; +} + +export function RuntimeAttachment({ + isEnabled, + onToggleEnable, + discoveryRuleList, + setDiscoveryRuleList, + onDelete, + editDiscoveryRuleId, + onEdit, + onChangeOperation, + stagedOperationText, + onChangeType, + stagedTypeText, + onChangeProbe, + stagedProbeText, + onCancel, + onSubmit, + onAddRule, + operationTypes, + toggleDescription, + discoveryRulesDescription, + showUnsavedWarning, + onDragEnd, + selectedVersion, + versions, + onChangeVersion, + onCreateNewVersion, + isValidVersion, +}: Props) { + return ( +
+ {showUnsavedWarning && ( + <> + + + + )} + + + + + +

{toggleDescription}

+ + + {isEnabled && versions && ( + + + ({ label: _version }))} + onChange={onChangeVersion} + onCreateOption={onCreateNewVersion} + singleSelection + isClearable={false} + /> + + + )} + + {isEnabled && ( + <> + + +

+ {i18n.translate( + 'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.discoveryRules', + { defaultMessage: 'Discovery rules' } + )} +

+ + + + + + + + +

{discoveryRulesDescription}

+ + + + + {i18n.translate( + 'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.addRule', + { defaultMessage: 'Add rule' } + )} + + + + + + + {discoveryRuleList.map(({ discoveryRule, id }, idx) => ( + + {(provided) => + id === editDiscoveryRuleId ? ( + + ) : ( + + ) + } + + ))} + + + + + )} + +
+ ); +} diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/supported_agents/java_runtime_attachment.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/supported_agents/java_runtime_attachment.tsx new file mode 100644 index 0000000000000..2284315d4a6ba --- /dev/null +++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/supported_agents/java_runtime_attachment.tsx @@ -0,0 +1,276 @@ +/* + * 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 yaml from 'js-yaml'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n-react'; +import React, { useCallback, useState, useMemo } from 'react'; +import { + RuntimeAttachment, + RuntimeAttachmentSettings, + IDiscoveryRule, +} from '..'; +import type { + NewPackagePolicy, + PackagePolicy, + PackagePolicyEditExtensionComponentProps, +} from '../../../apm_policy_form/typings'; + +interface Props { + policy: PackagePolicy; + newPolicy: NewPackagePolicy; + onChange: PackagePolicyEditExtensionComponentProps['onChange']; +} + +const excludeOptions = [ + { + value: 'main', + label: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.exclude.options.main', + { defaultMessage: 'main' } + ), + description: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.exclude.options.mainDescription', + { + defaultMessage: + 'A regular expression of fully qualified main class names or paths to JARs of applications the java agent should be attached to. Performs a partial match so that foo matches /bin/foo.jar.', + } + ), + }, + { + value: 'vmarg', + label: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.exclude.options.vmarg', + { defaultMessage: 'vmarg' } + ), + description: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.exclude.options.vmargDescription', + { + defaultMessage: + 'A regular expression matched against the arguments passed to the JVM, such as system properties. Performs a partial match so that attach=true matches the system property -Dattach=true.', + } + ), + }, + { + value: 'user', + label: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.exclude.options.user', + { defaultMessage: 'user' } + ), + description: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.exclude.options.userDescription', + { + defaultMessage: + 'A username that is matched against the operating system user that runs the JVM.', + } + ), + }, +]; +const includeOptions = [ + { + value: 'all', + label: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.include.options.all', + { defaultMessage: 'All' } + ), + description: i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.operationType.include.options.allDescription', + { defaultMessage: 'Includes all JVMs for attachment.' } + ), + }, + ...excludeOptions, +]; + +const versions = [ + '1.27.1', + '1.27.0', + '1.26.0', + '1.25.0', + '1.24.0', + '1.23.0', + '1.22.0', + '1.21.0', + '1.20.0', + '1.19.0', + '1.18.1', + '1.18.0', + '1.18.0.RC1', + '1.17.0', + '1.16.0', + '1.15.0', + '1.14.0', + '1.13.0', + '1.12.0', + '1.11.0', + '1.10.0', + '1.9.0', + '1.8.0', + '1.7.0', + '1.6.1', + '1.6.0', + '1.5.0', + '1.4.0', + '1.3.0', + '1.2.0', +]; + +function getApmVars(newPolicy: NewPackagePolicy) { + return newPolicy.inputs.find(({ type }) => type === 'apm')?.vars; +} + +export function JavaRuntimeAttachment({ newPolicy, onChange }: Props) { + const [isDirty, setIsDirty] = useState(false); + const onChangePolicy = useCallback( + (runtimeAttachmentSettings: RuntimeAttachmentSettings) => { + const apmInputIdx = newPolicy.inputs.findIndex( + ({ type }) => type === 'apm' + ); + onChange({ + isValid: true, + updatedPolicy: { + ...newPolicy, + inputs: [ + ...newPolicy.inputs.slice(0, apmInputIdx), + { + ...newPolicy.inputs[apmInputIdx], + vars: { + ...newPolicy.inputs[apmInputIdx].vars, + java_attacher_enabled: { + value: runtimeAttachmentSettings.enabled, + type: 'bool', + }, + java_attacher_discovery_rules: { + type: 'yaml', + value: encodeDiscoveryRulesYaml( + runtimeAttachmentSettings.discoveryRules + ), + }, + java_attacher_agent_version: { + type: 'text', + value: runtimeAttachmentSettings.version, + }, + }, + }, + ...newPolicy.inputs.slice(apmInputIdx + 1), + ], + }, + }); + setIsDirty(true); + }, + [newPolicy, onChange] + ); + + const apmVars = useMemo(() => getApmVars(newPolicy), [newPolicy]); + + return ( + + {i18n.translate( + 'xpack.apm.fleetIntegration.javaRuntime.discoveryRulesDescription.docLink', + { defaultMessage: 'docs' } + )} + + ), + }} + /> + } + showUnsavedWarning={isDirty} + initialIsEnabled={apmVars?.java_attacher_enabled?.value} + initialDiscoveryRules={decodeDiscoveryRulesYaml( + apmVars?.java_attacher_discovery_rules?.value ?? '[]\n', + [initialDiscoveryRule] + )} + selectedVersion={ + apmVars?.java_attacher_agent_version?.value || versions[0] + } + versions={versions} + /> + ); +} + +const initialDiscoveryRule = { + operation: 'include', + type: 'vmarg', + probe: 'elastic.apm.attach=true', +}; + +type DiscoveryRulesParsedYaml = Array<{ [operationType: string]: string }>; + +function decodeDiscoveryRulesYaml( + discoveryRulesYaml: string, + defaultDiscoveryRules: IDiscoveryRule[] = [] +): IDiscoveryRule[] { + try { + const parsedYaml: DiscoveryRulesParsedYaml = + yaml.load(discoveryRulesYaml) ?? []; + + if (parsedYaml.length === 0) { + return defaultDiscoveryRules; + } + + // transform into array of discovery rules + return parsedYaml.map((discoveryRuleMap) => { + const [operationType, probe] = Object.entries(discoveryRuleMap)[0]; + return { + operation: operationType.split('-')[0], + type: operationType.split('-')[1], + probe, + }; + }); + } catch (error) { + return defaultDiscoveryRules; + } +} + +function encodeDiscoveryRulesYaml(discoveryRules: IDiscoveryRule[]): string { + // transform into list of key,value objects for expected yaml result + const mappedDiscoveryRules: DiscoveryRulesParsedYaml = discoveryRules.map( + ({ operation, type, probe }) => ({ + [`${operation}-${type}`]: probe, + }) + ); + return yaml.dump(mappedDiscoveryRules); +} diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx index c0914e41872b1..a7dd682384748 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx @@ -348,7 +348,8 @@ export const EditPackagePolicyForm = memo<{ const [formState, setFormState] = useState('INVALID'); const savePackagePolicy = async () => { setFormState('LOADING'); - const result = await sendUpdatePackagePolicy(packagePolicyId, packagePolicy); + const { elasticsearch, ...restPackagePolicy } = packagePolicy; // ignore 'elasticsearch' property since it fails route validation + const result = await sendUpdatePackagePolicy(packagePolicyId, restPackagePolicy); setFormState('SUBMITTED'); return result; };