diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx new file mode 100644 index 0000000000000..0a8ba34677499 --- /dev/null +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/experimental_datastream_settings.tsx @@ -0,0 +1,170 @@ +/* + * 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, { useCallback } from 'react'; + +import { FormattedMessage } from '@kbn/i18n-react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiSwitch, + EuiText, + EuiSpacer, + EuiTitle, + EuiToolTip, +} from '@elastic/eui'; + +import type { + ExperimentalDataStreamFeature, + RegistryStreamWithDataStream, +} from '../../../../../../../../../common/types'; +import { getRegistryDataStreamAssetBaseName } from '../../../../../../../../../common/services'; +import type { ExperimentalIndexingFeature } from '../../../../../../../../../common/types/models/epm'; + +interface Props { + registryDataStream: RegistryStreamWithDataStream['data_stream']; + experimentalDataFeatures?: ExperimentalDataStreamFeature[]; + setNewExperimentalDataFeatures: ( + experimentalDataFeatures: ExperimentalDataStreamFeature[] + ) => void; +} + +export const ExperimentDatastreamSettings: React.FunctionComponent = ({ + registryDataStream, + experimentalDataFeatures, + setNewExperimentalDataFeatures, +}) => { + const getExperimentalFeatureValue = useCallback( + (feature: ExperimentalIndexingFeature) => { + return experimentalDataFeatures?.find( + ({ data_stream: dataStream, features }) => + dataStream === getRegistryDataStreamAssetBaseName(registryDataStream) && + typeof features[feature] !== 'undefined' + )?.features?.[feature]; + }, + [experimentalDataFeatures, registryDataStream] + ); + + const isSyntheticSourceEditable = registryDataStream.elasticsearch?.source_mode !== 'default'; + + const syntheticSourceExperimentalValue = getExperimentalFeatureValue('synthetic_source'); + const isSyntheticSourceEnabledByDefault = + registryDataStream.elasticsearch?.source_mode === 'synthetic'; + + const newExperimentalIndexingFeature = { + synthetic_source: + typeof syntheticSourceExperimentalValue !== 'undefined' + ? syntheticSourceExperimentalValue + : isSyntheticSourceEnabledByDefault, + tsdb: getExperimentalFeatureValue('tsdb') ?? false, + }; + + const onIndexingSettingChange = ( + features: Partial> + ) => { + const newExperimentalDataStreamFeatures = [...(experimentalDataFeatures ?? [])]; + + const dataStream = getRegistryDataStreamAssetBaseName(registryDataStream); + + const existingSettingRecord = newExperimentalDataStreamFeatures.find( + (x) => x.data_stream === dataStream + ); + + if (existingSettingRecord) { + existingSettingRecord.features = { + ...existingSettingRecord.features, + ...features, + }; + } else { + newExperimentalDataStreamFeatures.push({ + data_stream: dataStream, + features: { ...newExperimentalIndexingFeature, ...features }, + }); + } + + setNewExperimentalDataFeatures(newExperimentalDataStreamFeatures); + }; + + return ( + + + + +
+ +
+
+
+ + + + + + ), + }} + /> + + + + + + } + onChange={(e) => { + onIndexingSettingChange({ + synthetic_source: e.target.checked, + }); + }} + /> + + + + } + > + + } + onChange={(e) => { + onIndexingSettingChange({ + tsdb: e.target.checked, + }); + }} + /> + + +
+
+ ); +}; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx index 49cf3b3665029..7a9c991c686cc 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx @@ -17,15 +17,12 @@ import { EuiText, EuiSpacer, EuiButtonEmpty, - EuiTitle, - EuiToolTip, } from '@elastic/eui'; import { useRouteMatch } from 'react-router-dom'; import { mapPackageReleaseToIntegrationCardRelease } from '../../../../../../../../services/package_prerelease'; +import type { ExperimentalDataStreamFeature } from '../../../../../../../../../common/types/models/epm'; -import { getRegistryDataStreamAssetBaseName } from '../../../../../../../../../common/services'; -import type { ExperimentalIndexingFeature } from '../../../../../../../../../common/types/models/epm'; import type { NewPackagePolicy, NewPackagePolicyInputStream, @@ -39,6 +36,7 @@ import { isAdvancedVar, validationHasErrors } from '../../../services'; import { PackagePolicyEditorDatastreamPipelines } from '../../datastream_pipelines'; import { PackagePolicyEditorDatastreamMappings } from '../../datastream_mappings'; +import { ExperimentDatastreamSettings } from './experimental_datastream_settings'; import { PackagePolicyInputVarField } from './package_policy_input_var_field'; import { useDataStreamId } from './hooks'; @@ -119,74 +117,21 @@ export const PackagePolicyInputStreamConfig = memo( [advancedVars, inputStreamValidationResults?.vars] ); - const getExperimentalFeatureValue = useCallback( - (feature: ExperimentalIndexingFeature, defaultToFalse = true) => { - return packagePolicy.package?.experimental_data_stream_features?.find( - ({ data_stream: dataStream, features }) => - dataStream === - getRegistryDataStreamAssetBaseName(packagePolicyInputStream.data_stream) && - typeof features[feature] !== 'undefined' - )?.features ?? defaultToFalse - ? false - : undefined; - }, - [ - packagePolicy.package?.experimental_data_stream_features, - packagePolicyInputStream.data_stream, - ] - ); - - const isSyntheticSourceEditable = - packageInputStream.data_stream.elasticsearch?.source_mode !== 'default'; - - const syntheticSourceExperimentalValue = getExperimentalFeatureValue('synthetic_source', false); - const isSyntheticSourceEnabledByDefault = - packageInputStream.data_stream.elasticsearch?.source_mode === 'synthetic'; - - const newExperimentalIndexingFeature = { - synthetic_source: - typeof syntheticSourceExperimentalValue !== 'undefined' - ? syntheticSourceExperimentalValue - : isSyntheticSourceEnabledByDefault, - tsdb: getExperimentalFeatureValue('tsdb') ?? false, - }; - - const onIndexingSettingChange = ( - features: Partial> - ) => { - if (!packagePolicy.package) { - return; - } + const setNewExperimentalDataFeatures = useCallback( + (newFeatures: ExperimentalDataStreamFeature[]) => { + if (!packagePolicy.package) { + return; + } - const newExperimentalDataStreamFeatures = [ - ...(packagePolicy.package.experimental_data_stream_features ?? []), - ]; - - const dataStream = getRegistryDataStreamAssetBaseName(packagePolicyInputStream.data_stream); - - const existingSettingRecord = newExperimentalDataStreamFeatures.find( - (x) => x.data_stream === dataStream - ); - - if (existingSettingRecord) { - existingSettingRecord.features = { - ...existingSettingRecord.features, - ...features, - }; - } else { - newExperimentalDataStreamFeatures.push({ - data_stream: dataStream, - features: { ...newExperimentalIndexingFeature, ...features }, + updatePackagePolicy({ + package: { + ...packagePolicy.package, + experimental_data_stream_features: newFeatures, + }, }); - } - - updatePackagePolicy({ - package: { - ...packagePolicy.package, - experimental_data_stream_features: newExperimentalDataStreamFeatures, - }, - }); - }; + }, + [updatePackagePolicy, packagePolicy] + ); return ( <> @@ -347,82 +292,13 @@ export const PackagePolicyInputStreamConfig = memo( )} {/* Experimental index/datastream settings e.g. synthetic source */} - - - - -
- -
-
-
- - - - - - ), - }} - /> - - - - - - } - onChange={(e) => { - onIndexingSettingChange({ - synthetic_source: e.target.checked, - }); - }} - /> - - - - } - > - - } - onChange={(e) => { - onIndexingSettingChange({ - tsdb: e.target.checked, - }); - }} - /> - - -
-
+ ) : null}