[Fleet] UI to edit custom pipeline|mappings

x-pack/plugins/fleet/common/services/datastream_es_name.test.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { getCustomPipelineNameForDatastream } from './datastream_es_name';
+
+describe('getCustomPipelineNameForDatastream', () => {
+  it('return the correct custom pipeline for datastream', () => {
+    const res = getCustomPipelineNameForDatastream({
+      type: 'logs',
+      dataset: 'test',
+    } as any);
+
+    expect(res).toBe('logs-test@custom');
+  });
+});

x-pack/plugins/fleet/common/services/datastream_es_name.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 type { RegistryDataStream } from '../types';
+
+/**
+ * Return the ingest pipeline name for a datastream
+ */
+export const getPipelineNameForDatastream = ({
+  dataStream,
+  packageVersion,
+}: {
+  dataStream: { dataset: string; type: string };
+  packageVersion: string;
+}): string => {
+  return `${dataStream.type}-${dataStream.dataset}-${packageVersion}`;
+};
+
+/**
+ * Return the custom user ingest pipeline name for a datastream
+ */
+export const getCustomPipelineNameForDatastream = (dataStream: RegistryDataStream): string => {
+  return `${dataStream.type}-${dataStream.dataset}@custom`;
+};

x-pack/plugins/fleet/common/services/index.ts

@@ -36,3 +36,7 @@ export { normalizeHostsForAgents } from './hosts_utils';
 export { splitPkgKey } from './split_pkg_key';
 export { getMaxPackageName } from './max_package_name';
 export { getMinVersion, getMaxVersion } from './get_min_max_version';
+export {
+  getPipelineNameForDatastream,
+  getCustomPipelineNameForDatastream,
+} from './datastream_es_name';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/datastream_mappings.tsx

@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiBasicTable,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+  EuiSpacer,
+  EuiLink,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import type { RegistryStream, PackageInfo } from '../../../../../../types';
+import { getPipelineNameForDatastream } from '../../../../../../../../../common';
+
+interface Props {
+  packagePolicyId?: string;
+  packageInfo: PackageInfo;
+  packageInputStream: RegistryStream & { data_stream: { dataset: string; type: string } };
+}
+
+export const DatastreamMappings: React.FunctionComponent<Props> = ({
+  packagePolicyId,
+  packageInputStream,
+  packageInfo,
+}) => {
+  if (!packageInputStream.data_stream) {
+    return null;
+  }
+
+  const defaultPipelineName = getPipelineNameForDatastream({
+    dataStream: packageInputStream.data_stream,
+    packageVersion: packageInfo.version,
+  });
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="xs" alignItems="flexStart">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xxxs">
+          <h5>
+            <FormattedMessage
+              id="xpack.fleet.packagePolicyEditor.datastreamMappings.title"
+              defaultMessage={'Mappings'}
+            />
+          </h5>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText color="subdued" size="xs">
+          <FormattedMessage
+            id="xpack.fleet.packagePolicyEditor.datastreamMappings.description"
+            defaultMessage={
+              'Mapping is the process of defining how a document, and the fields it contains, are stored and indexed. If you are adding new fields through custom ingest pipeline, we recommend addition of a mapping for those in the component template. {learnMoreLink}'
+            }
+            values={{
+              learnMoreLink: (
+                <EuiLink href="#TODO" external={true}>
+                  <FormattedMessage
+                    id="xpack.fleet.packagePolicyEditor.datastreamMappings.learnMoreLink"
+                    defaultMessage={'Learn more'}
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiBasicTable
+          items={[{ label: defaultPipelineName + '@mappings' }]}
+          columns={[
+            // @ts-ignore
+            {
+              field: 'label',
+            },
+            {
+              width: '60px',
+              actions: [
+                {
+                  icon: 'inspect',
+                  type: 'icon',
+                  description: 'test',
+                  name: 'inspect',
+                  isPrimary: true,
+                  onClick: () => {},
+                },
+              ],
+            },
+          ]}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="xs" />
+        <EuiButtonEmpty size="xs" flush="left" iconType="plusInCircle">
+          <FormattedMessage
+            id="xpack.fleet.packagePolicyEditor.datastreamMappings.addCustomButn"
+            defaultMessage={'Add custom mappings'}
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/datastream_pipelines.tsx

@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiBasicTable,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+  EuiSpacer,
+  EuiLink,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import type { RegistryStream, PackageInfo } from '../../../../../../types';
+import { getPipelineNameForDatastream } from '../../../../../../../../../common';
+
+interface Props {
+  packagePolicyId?: string;
+  packageInfo: PackageInfo;
+  packageInputStream: RegistryStream & { data_stream: { dataset: string; type: string } };
+}
+
+export const DatastreamPipeline: React.FunctionComponent<Props> = ({
+  packagePolicyId,
+  packageInputStream,
+  packageInfo,
+}) => {
+  if (!packageInputStream.data_stream) {
+    return null;
+  }
+
+  const defaultPipelineName = getPipelineNameForDatastream({
+    dataStream: packageInputStream.data_stream,
+    packageVersion: packageInfo.version,
+  });
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="xs" alignItems="flexStart">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xxxs">
+          <h5>
+            <FormattedMessage
+              id="xpack.fleet.createPackagePolicy.datastreamIngestPipelinesTitle"
+              defaultMessage={'Ingest pipelines'}
+            />
+          </h5>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText color="subdued" size="xs">
+          <FormattedMessage
+            id="xpack.fleet.createPackagePolicy.datastreamIngestPipelinesLabel"
+            defaultMessage={
+              'Ingest pipelines perform common transformations on the ingested data. We recommend modifying only the custom ingest pipeline. These pipelines are shared between integration policies of the same integration type. Hence, any modifications tot he ingest pipelines would affect all the integration policies. {learnMoreLink}'
+            }
+            values={{
+              learnMoreLink: (
+                <EuiLink href="#TODO" external={true}>
+                  <FormattedMessage
+                    id="xpack.fleet.packagePolicyEdotpr.datastreamIngestPipelines.learnMoreLink"
+                    defaultMessage={'Learn more'}
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiBasicTable
+          items={[{ label: defaultPipelineName }]}
+          columns={[
+            // @ts-ignore
+            {
+              field: 'label',
+            },
+            {
+              width: '60px',
+              actions: [
+                {
+                  icon: 'inspect',
+                  type: 'icon',
+                  description: 'test',
+                  name: 'inspect',
+                  isPrimary: true,
+                  onClick: () => {},
+                },
+              ],
+            },
+          ]}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="xs" />
+        <EuiButtonEmpty size="xs" flush="left" iconType="plusInCircle">
+          <FormattedMessage
+            id="xpack.fleet.packagePolicyEdotpr.datastreamIngestPipelines.addCustomButn"
+            defaultMessage={'Add custom pipeline'}
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/index.ts

@@ -7,3 +7,5 @@
 
 export { PackagePolicyInputPanel } from './package_policy_input_panel';
 export { PackagePolicyInputVarField } from './package_policy_input_var_field';
+export { DatastreamPipeline } from './datastream_pipelines';
+export { DatastreamMappings } from './datastream_mappings';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx

@@ -21,6 +21,7 @@ import {
 
 import type {
   NewPackagePolicyInput,
+  PackageInfo,
   PackagePolicyInputStream,
   RegistryInput,
   RegistryStream,
@@ -63,6 +64,7 @@ const shouldShowStreamsByDefault = (
 
 export const PackagePolicyInputPanel: React.FunctionComponent<{
   packageInput: RegistryInput;
+  packageInfo: PackageInfo;
   packageInputStreams: Array<RegistryStream & { data_stream: { dataset: string } }>;
   packagePolicyInput: NewPackagePolicyInput;
   updatePackagePolicyInput: (updatedInput: Partial<NewPackagePolicyInput>) => void;
@@ -71,6 +73,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
 }> = memo(
   ({
     packageInput,
+    packageInfo,
     packageInputStreams,
     packagePolicyInput,
     updatePackagePolicyInput,
@@ -214,6 +217,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
             {inputStreams.map(({ packageInputStream, packagePolicyInputStream }, index) => (
               <EuiFlexItem key={index}>
                 <PackagePolicyInputStreamConfig
+                  packageInfo={packageInfo}
                   packageInputStream={packageInputStream}
                   packagePolicyInputStream={packagePolicyInputStream!}
                   updatePackagePolicyInputStream={(