[Streams] Add stream type to click telemetry events in Processing

x-pack/platform/plugins/shared/streams_app/public/components/data_management/management_bottom_bar/index.tsx

@@ -23,6 +23,7 @@ interface ManagementBottomBarProps {
   insufficientPrivileges?: boolean;
   isLoading?: boolean;
   isInvalid?: boolean;
+  streamType?: 'classic' | 'wired' | 'unknown';
   onCancel: () => void;
   onConfirm: () => void;
   onViewCodeClick?: () => void;
@@ -34,6 +35,7 @@ export function ManagementBottomBar({
   isLoading = false,
   insufficientPrivileges = false,
   isInvalid = false,
+  streamType,
   onCancel,
   onConfirm,
   onViewCodeClick,
@@ -56,6 +58,7 @@ export function ManagementBottomBar({
         {onViewCodeClick && (
           <EuiButtonEmpty
             data-test-subj="streamsAppManagementBottomBarViewRequestButton"
+            data-stream-type={streamType}
             color="text"
             size="s"
             iconType="editorCodeBlock"
@@ -74,6 +77,7 @@ export function ManagementBottomBar({
           >
             <EuiButtonEmpty
               data-test-subj="streamsAppManagementBottomBarCancelChangesButton"
+              data-stream-type={streamType}
               disabled={disabled}
               color="text"
               size="s"
@@ -105,6 +109,7 @@ export function ManagementBottomBar({
             >
               <EuiButton
                 data-test-subj="streamsAppManagementBottomBarButton"
+                data-stream-type={streamType}
                 disabled={disabled || insufficientPrivileges || isInvalid}
                 color="primary"
                 fill

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/create_step_button.tsx

@@ -21,6 +21,7 @@ import {
   useStreamEnrichmentEvents,
   useStreamEnrichmentSelector,
 } from './state_management/stream_enrichment_state_machine';
+import { selectStreamType } from './state_management/stream_enrichment_state_machine/selectors';
 
 const createConditionText = i18n.translate(
   'xpack.streams.streamDetailView.managementTab.enrichment.createConditionButtonText',
@@ -67,6 +68,8 @@ export const CreateStepButton: React.FC<AddStepProps> = ({
     (state) => state.can({ type: 'step.addProcessor' }) || state.can({ type: 'step.addCondition' })
   );
 
+  const streamType = useStreamEnrichmentSelector((snapshot) => selectStreamType(snapshot.context));
+
   const [isPopoverOpen, togglePopover] = useToggle(false);
 
   const menuPopoverId = useGeneratedHtmlId({
@@ -76,6 +79,7 @@ export const CreateStepButton: React.FC<AddStepProps> = ({
   const items = [
     <EuiContextMenuItem
       data-test-subj="streamsAppStreamDetailEnrichmentCreateStepButtonAddCondition"
+      data-stream-type={streamType}
       key="addCondition"
       icon="timeline"
       disabled={nestingDisabled}
@@ -88,6 +92,7 @@ export const CreateStepButton: React.FC<AddStepProps> = ({
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       data-test-subj="streamsAppStreamDetailEnrichmentCreateStepButtonAddProcessor"
+      data-stream-type={streamType}
       key="addProcessor"
       icon="compute"
       onClick={() => {
@@ -104,6 +109,7 @@ export const CreateStepButton: React.FC<AddStepProps> = ({
       size="s"
       onClick={togglePopover}
       data-test-subj="streamsAppStreamDetailEnrichmentCreateStepButton"
+      data-stream-type={streamType}
     >
       {mode === 'prominent' ? createTextProminent : createText}
       {mode === 'prominent' || mode === 'subdued' ? <EuiIcon type="arrowDown" /> : null}
@@ -113,6 +119,7 @@ export const CreateStepButton: React.FC<AddStepProps> = ({
   const inlineButton = (
     <EuiButtonIcon
       data-test-subj="streamsAppStreamDetailEnrichmentCreateStepButtonInline"
+      data-stream-type={streamType}
       size="xs"
       iconType="plusInCircle"
       onClick={togglePopover}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/page_content.tsx

@@ -37,6 +37,7 @@ import {
 } from './state_management/stream_enrichment_state_machine/utils';
 import { StepsEditor } from './steps_editor';
 import { buildUpsertStreamRequestPayload } from './utils';
+import { selectStreamType } from './state_management/stream_enrichment_state_machine/selectors';
 
 const MemoSimulationPlayground = React.memo(SimulationPlayground);
 
@@ -152,6 +153,8 @@ export function StreamDetailEnrichmentContentImpl() {
     state.matches({ ready: { stream: 'updating' } })
   );
 
+  const streamType = useStreamEnrichmentSelector((snapshot) => selectStreamType(snapshot.context));
+
   const hasChanges = canUpdate && !isSimulating;
   const isLoadingSuggestion = useStreamEnrichmentSelector((snapshot) =>
     snapshot.matches({ ready: { enrichment: { pipelineSuggestion: 'generatingSuggestion' } } })
@@ -265,6 +268,7 @@ export function StreamDetailEnrichmentContentImpl() {
           insufficientPrivileges={!canManage}
           isInvalid={hasDefinitionError}
           onViewCodeClick={onBottomBarViewCodeClick}
+          streamType={streamType}
         />
       )}
       {isRequestPreviewFlyoutOpen && (

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/state_management/stream_enrichment_state_machine/selectors.ts

@@ -7,6 +7,7 @@
 
 import { createSelector } from 'reselect';
 import { isActionBlock } from '@kbn/streamlang';
+import { getStreamTypeFromDefinition } from '../../../../../util/get_stream_type_from_definition';
 import type { StreamEnrichmentContextType } from './types';
 import { isStepUnderEdit } from '../steps_state_machine';
 
@@ -55,3 +56,10 @@ export const selectWhetherAnyProcessorBeforePersisted = createSelector(
       });
   }
 );
+
+export const selectStreamType = createSelector(
+  [(context: StreamEnrichmentContextType) => context.definition],
+  (definition) => {
+    return getStreamTypeFromDefinition(definition.stream);
+  }
+);

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/steps/blocks/action/editor.tsx

@@ -50,6 +50,7 @@ import { deleteProcessorPromptOptions, discardChangesPromptOptions } from './pro
 import { ConvertProcessorForm } from './convert';
 import { ReplaceProcessorForm } from './replace';
 import { DropProcessorForm } from './drop_document';
+import { selectStreamType } from '../../../state_management/stream_enrichment_state_machine/selectors';
 
 export const ActionBlockEditor = forwardRef<HTMLDivElement, ActionBlockProps>((props, ref) => {
   const { processorMetrics, stepRef } = props;
@@ -101,6 +102,8 @@ export const ActionBlockEditor = forwardRef<HTMLDivElement, ActionBlockProps>((p
     (snapshot) => !isEqual(snapshot.context.previousStep, snapshot.context.step)
   );
 
+  const streamType = useStreamEnrichmentSelector((snapshot) => selectStreamType(snapshot.context));
+
   const type = useWatch({ control: methods.control, name: 'action' });
 
   useUnsavedChangesPrompt({
@@ -155,6 +158,7 @@ export const ActionBlockEditor = forwardRef<HTMLDivElement, ActionBlockProps>((p
                 {canDelete && (
                   <EuiButton
                     data-test-subj="streamsAppProcessorConfigurationButton"
+                    data-stream-type={streamType}
                     color="danger"
                     onClick={handleDelete}
                     size="s"
@@ -171,6 +175,7 @@ export const ActionBlockEditor = forwardRef<HTMLDivElement, ActionBlockProps>((p
                   <EuiFlexItem grow={false}>
                     <EuiButtonEmpty
                       data-test-subj="streamsAppProcessorConfigurationCancelButton"
+                      data-stream-type={streamType}
                       onClick={handleCancel}
                       size="s"
                     >
@@ -183,6 +188,7 @@ export const ActionBlockEditor = forwardRef<HTMLDivElement, ActionBlockProps>((p
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       data-test-subj="streamsAppProcessorConfigurationSaveProcessorButton"
+                      data-stream-type={streamType}
                       size="s"
                       fill
                       onClick={methods.handleSubmit(handleSubmit)}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/steps/blocks/action/index.tsx

@@ -10,13 +10,17 @@ import React, { useEffect, useRef } from 'react';
 import { EuiPanel, useEuiTheme } from '@elastic/eui';
 import { useFirstMountState } from 'react-use/lib/useFirstMountState';
 import { css } from '@emotion/react';
-import { useSimulatorSelector } from '../../../state_management/stream_enrichment_state_machine';
+import {
+  useSimulatorSelector,
+  useStreamEnrichmentSelector,
+} from '../../../state_management/stream_enrichment_state_machine';
 import { isRootStep, isStepUnderEdit } from '../../../state_management/steps_state_machine';
 import type { StepConfigurationProps } from '../../steps_list';
 import type { ProcessorMetrics } from '../../../state_management/simulation_state_machine';
 import { ActionBlockEditor } from './editor';
 import { ActionBlockListItem } from './list_item';
 import { getStepPanelColour } from '../../../utils';
+import { selectStreamType } from '../../../state_management/stream_enrichment_state_machine/selectors';
 
 export type ActionBlockProps = StepConfigurationProps & {
   processorMetrics?: ProcessorMetrics;
@@ -29,6 +33,8 @@ export function ActionBlock(props: StepConfigurationProps) {
 
   const simulation = useSimulatorSelector((snapshot) => snapshot.context.simulation);
 
+  const streamType = useStreamEnrichmentSelector((snapshot) => selectStreamType(snapshot.context));
+
   const panelColour = getStepPanelColour(level);
 
   const processorMetrics = simulation?.processors_metrics[stepRef.id];
@@ -49,6 +55,7 @@ export function ActionBlock(props: StepConfigurationProps) {
   return (
     <EuiPanel
       data-test-subj="streamsAppProcessorBlock"
+      data-stream-type={streamType}
       hasShadow={false}
       color={isUnderEdit && isRootStepValue ? undefined : panelColour}
       css={

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/steps/blocks/context_menu.tsx

@@ -32,6 +32,7 @@ import {
   REMOVE_DESCRIPTION_MENU_LABEL,
 } from './action/translations';
 import type { StepConfigurationProps } from '../steps_list';
+import { selectStreamType } from '../../state_management/stream_enrichment_state_machine/selectors';
 
 const moveUpItemText = i18n.translate(
   'xpack.streams.streamDetailView.managementTab.enrichment.moveUpItemButtonText',
@@ -97,6 +98,8 @@ export const StepContextMenu: React.FC<StepContextMenuProps> = ({
 
   const step = useSelector(stepRef, (snapshot) => snapshot.context.step);
 
+  const streamType = useStreamEnrichmentSelector((snapshot) => selectStreamType(snapshot.context));
+
   const isWhere = isWhereBlock(step);
   const hasCustomDescription =
     isActionBlock(step) &&
@@ -210,6 +213,7 @@ export const StepContextMenu: React.FC<StepContextMenuProps> = ({
       : []),
     <EuiContextMenuItem
       data-test-subj="stepContextMenuEditItem"
+      data-stream-type={streamType}
       key="editItem"
       icon="pencil"
       disabled={!canEdit}
@@ -224,6 +228,7 @@ export const StepContextMenu: React.FC<StepContextMenuProps> = ({
       ? [
           <EuiContextMenuItem
             data-test-subj="stepContextMenuDuplicateItem"
+            data-stream-type={streamType}
             key="duplicateStep"
             icon="copy"
             disabled={!canDuplicate}
@@ -238,6 +243,7 @@ export const StepContextMenu: React.FC<StepContextMenuProps> = ({
       : []),
     <EuiContextMenuItem
       data-test-subj="stepContextMenuDeleteItem"
+      data-stream-type={streamType}
       key="deleteStep"
       icon="trash"
       disabled={!canDelete}
@@ -259,6 +265,7 @@ export const StepContextMenu: React.FC<StepContextMenuProps> = ({
         }
       )}
       data-test-subj="streamsAppStreamDetailEnrichmentStepContextMenuButton"
+      data-stream-type={streamType}
       disabled={!!stepUnderEdit}
       size="xs"
       iconType="boxesVertical"

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/steps/blocks/where/configuration.tsx

@@ -23,14 +23,18 @@ import { useForm, FormProvider, useController } from 'react-hook-form';
 import type { DeepPartial } from 'utility-types';
 import { useSelector } from '@xstate5/react';
 import { useDiscardConfirm } from '../../../../../../hooks/use_discard_confirm';
-import type { StreamEnrichmentContextType } from '../../../state_management/stream_enrichment_state_machine';
+import {
+  useStreamEnrichmentSelector,
+  type StreamEnrichmentContextType,
+} from '../../../state_management/stream_enrichment_state_machine';
 import type { WhereBlockFormState } from '../../../types';
 import {
   getFormStateFromWhereStep,
   convertWhereBlockFormStateToConfiguration,
 } from '../../../utils';
 import { discardChangesPromptOptions, deleteConditionPromptOptions } from './prompt_options';
 import { ProcessorConditionEditorWrapper } from '../../../processor_condition_editor';
+import { selectStreamType } from '../../../state_management/stream_enrichment_state_machine/selectors';
 
 interface WhereBlockConfigurationProps {
   stepRef: StreamEnrichmentContextType['stepRefs'][number];
@@ -46,6 +50,10 @@ export const WhereBlockConfiguration = forwardRef<HTMLDivElement, WhereBlockConf
     const canDelete = useSelector(stepRef, (snapshot) => snapshot.can({ type: 'step.delete' }));
     const canSave = useSelector(stepRef, (snapshot) => snapshot.can({ type: 'step.save' }));
 
+    const streamType = useStreamEnrichmentSelector((snapshot) =>
+      selectStreamType(snapshot.context)
+    );
+
     const [defaultValues] = useState(() =>
       getFormStateFromWhereStep(step as StreamlangWhereBlockWithUIAttributes)
     );
@@ -103,6 +111,7 @@ export const WhereBlockConfiguration = forwardRef<HTMLDivElement, WhereBlockConf
               <div>
                 <EuiButton
                   data-test-subj="streamsAppWhereBlockConfigurationDeleteButton"
+                  data-stream-type={streamType}
                   color="danger"
                   onClick={handleDelete}
                   size="s"
@@ -120,6 +129,7 @@ export const WhereBlockConfiguration = forwardRef<HTMLDivElement, WhereBlockConf
               <div>
                 <EuiButtonEmpty
                   data-test-subj="streamsAppWhereBlockConfigurationCancelButton"
+                  data-stream-type={streamType}
                   onClick={handleCancel}
                   size="s"
                 >
@@ -132,6 +142,7 @@ export const WhereBlockConfiguration = forwardRef<HTMLDivElement, WhereBlockConf
               <div>
                 <EuiButton
                   data-test-subj="streamsAppConditionConfigurationSaveConditionButton"
+                  data-stream-type={streamType}
                   size="s"
                   fill
                   onClick={methods.handleSubmit(handleSubmit)}