diff --git a/src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx b/src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx index 1fda0a60..fe8e3420 100644 --- a/src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx +++ b/src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx @@ -24,7 +24,7 @@ import { useDispatch } from 'react-redux'; import PackageRecommendationDescription from './components/PackageRecommendationDescription'; import { RedHatRepository } from './Packages'; -import { ContentOrigin } from '../../../../constants'; +import { AMPLITUDE_MODULE_NAME, ContentOrigin } from '../../../../constants'; import { useListRepositoriesQuery } from '../../../../store/contentSourcesApi'; import { useAppSelector } from '../../../../store/hooks'; import { useRecommendPackageMutation } from '../../../../store/imageBuilderApi'; @@ -78,10 +78,14 @@ const PackageRecommendations = () => { }); if (response && response.data && response.data.packages.length > 0) { - analytics.track('recommendationsShown', { - shownRecommendations: response.data.packages, - selectedPackages: packages.map((pkg) => pkg.name), - }); + analytics.track( + `${AMPLITUDE_MODULE_NAME}-packageRecommendationsShown`, + { + module: AMPLITUDE_MODULE_NAME, + shownRecommendations: response.data.packages, + selectedPackages: packages.map((pkg) => pkg.name), + } + ); } })(); } @@ -224,13 +228,17 @@ const PackageRecommendations = () => { variant="link" component="a" onClick={() => { - analytics.track('recommendedPackageAdded', { - packageName: pkg, - selectedPackages: packages.map( - (pkg) => pkg.name - ), - shownRecommendations: data.packages, - }); + analytics.track( + `${AMPLITUDE_MODULE_NAME}-recommendedPackageAdded`, + { + module: AMPLITUDE_MODULE_NAME, + packageName: pkg, + selectedPackages: packages.map( + (pkg) => pkg.name + ), + shownRecommendations: data.packages, + } + ); addRecommendedPackage(pkg); }} isInline diff --git a/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx b/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx index fbeefde2..1cd07107 100644 --- a/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx +++ b/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx @@ -10,7 +10,9 @@ import { Modal, Button, } from '@patternfly/react-core'; +import useChrome from '@redhat-cloud-services/frontend-components/useChrome'; +import { AMPLITUDE_MODULE_NAME } from '../../../../../constants'; import { setBlueprintId } from '../../../../../store/BlueprintSlice'; import { useAppDispatch } from '../../../../../store/hooks'; import { @@ -30,6 +32,8 @@ export const CreateSaveAndBuildBtn = ({ setIsOpen, isDisabled, }: CreateDropdownProps) => { + const { analytics } = useChrome(); + const [buildBlueprint] = useComposeBlueprintMutation(); const [createBlueprint] = useCreateBlueprintMutation({ fixedCacheKey: 'createBlueprintKey', @@ -38,6 +42,12 @@ export const CreateSaveAndBuildBtn = ({ const onSaveAndBuild = async () => { const requestBody = await getBlueprintPayload(); setIsOpen(false); + + analytics.track(`${AMPLITUDE_MODULE_NAME}-blueprintCreated`, { + module: AMPLITUDE_MODULE_NAME, + type: 'createBlueprintAndBuildImages', + }); + const blueprint = requestBody && (await createBlueprint({ @@ -68,6 +78,8 @@ export const CreateSaveButton = ({ getBlueprintPayload, isDisabled, }: CreateDropdownProps) => { + const { analytics } = useChrome(); + const [createBlueprint, { isLoading }] = useCreateBlueprintMutation({ fixedCacheKey: 'createBlueprintKey', }); @@ -120,11 +132,17 @@ export const CreateSaveButton = ({ setIsOpen(false); + analytics.track(`${AMPLITUDE_MODULE_NAME}-blueprintCreated`, { + module: AMPLITUDE_MODULE_NAME, + type: 'createBlueprint', + }); + const blueprint = requestBody && (await createBlueprint({ createBlueprintRequest: requestBody, }).unwrap()); + if (blueprint) { dispatch(setBlueprintId(blueprint?.id)); } diff --git a/src/constants.ts b/src/constants.ts index 1dd31c27..2d7eb949 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -227,3 +227,5 @@ export enum ContentOrigin { 'CUSTOM' = 'external,upload', 'ALL' = 'red_hat,external,upload', } + +export const AMPLITUDE_MODULE_NAME = 'imageBuilder';