particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: add segment tracking

Browse source
This commit is contained in:
Katarina Sieklova 2025-03-26 16:30:38 +01:00 • committed by Klara Simickova
parent c99157216f
commit d18f25e331
9 changed files with 344 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import {
DropdownList,
@ -11,6 +11,7 @@ import {
Button,
} from '@patternfly/react-core';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
import { ChromeUser } from '@redhat-cloud-services/types';
import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
import { useCreateBlueprintMutation } from '../../../../../store/backendApi';
@ -21,6 +22,7 @@ import {
useComposeBlueprintMutation,
} from '../../../../../store/imageBuilderApi';
import { selectPackages } from '../../../../../store/wizardSlice';
import { createAnalytics } from '../../../../../Utilities/analytics';
import { useGetEnvironment } from '../../../../../Utilities/useGetEnvironment';
type CreateDropdownProps = {
@ -34,7 +36,15 @@ export const CreateSaveAndBuildBtn = ({
setIsOpen,
isDisabled,
}: CreateDropdownProps) => {
const { analytics, isBeta } = useChrome();
const [userData, setUserData] = useState<ChromeUser | void>(undefined);
const { analytics, auth, isBeta } = useChrome();
useEffect(() => {
(async () => {
const data = await auth?.getUser();
setUserData(data);
})();
}, [auth]);
const packages = useAppSelector(selectPackages);
const [buildBlueprint] = useComposeBlueprintMutation();
@ -47,15 +57,21 @@ export const CreateSaveAndBuildBtn = ({
const requestBody = await getBlueprintPayload();
setIsOpen(false);
if (!process.env.IS_ON_PREMISE && !isFedoraEnv) {
analytics.track(`${AMPLITUDE_MODULE_NAME}-blueprintCreated`, {
module: AMPLITUDE_MODULE_NAME,
isPreview: isBeta(),
if (!process.env.IS_ON_PREMISE && !isFedoraEnv && requestBody) {
const analyticsData = createAnalytics(requestBody, packages, isBeta);
analytics.track(`${AMPLITUDE_MODULE_NAME} - Blueprint Created`, {
...analyticsData,
type: 'createBlueprintAndBuildImages',
packages: packages.map((pkg) => pkg.name),
account_id: userData?.identity.internal?.account_id || 'Not found',
});
analytics.track(`${AMPLITUDE_MODULE_NAME} - Image Requested`, {
module: AMPLITUDE_MODULE_NAME,
trigger: 'blueprint_created',
image_request_types: requestBody.image_requests.map(
(req) => req.image_type
),
});
}
const blueprint =
requestBody &&
(await createBlueprint({
@ -86,7 +102,15 @@ export const CreateSaveButton = ({
getBlueprintPayload,
isDisabled,
}: CreateDropdownProps) => {
const { analytics, isBeta } = useChrome();
const { analytics, auth, isBeta } = useChrome();
const [userData, setUserData] = useState<ChromeUser | void>(undefined);
useEffect(() => {
(async () => {
const data = await auth?.getUser();
setUserData(data);
})();
}, [auth]);
const packages = useAppSelector(selectPackages);
const { isFedoraEnv } = useGetEnvironment();
@ -141,12 +165,12 @@ export const CreateSaveButton = ({
const requestBody = await getBlueprintPayload();
setIsOpen(false);
if (!process.env.IS_ON_PREMISE && !isFedoraEnv) {
analytics.track(`${AMPLITUDE_MODULE_NAME}-blueprintCreated`, {
module: AMPLITUDE_MODULE_NAME,
isPreview: isBeta(),
if (!process.env.IS_ON_PREMISE && !isFedoraEnv && requestBody) {
const analyticsData = createAnalytics(requestBody, packages, isBeta);
analytics.track(`${AMPLITUDE_MODULE_NAME} - Blueprint Created`, {
...analyticsData,
type: 'createBlueprint',
packages: packages.map((pkg) => pkg.name),
account_id: userData?.identity.internal?.account_id || 'Not found',
});
}
const blueprint =

55
src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import {
DropdownList,
@ -8,12 +8,18 @@ import {
Flex,
FlexItem,
} from '@patternfly/react-core';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
import { ChromeUser } from '@redhat-cloud-services/types';
import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
import { useUpdateBlueprintMutation } from '../../../../../store/backendApi';
import { useAppSelector } from '../../../../../store/hooks';
import {
CreateBlueprintRequest,
useComposeBlueprintMutation,
} from '../../../../../store/imageBuilderApi';
import { selectPackages } from '../../../../../store/wizardSlice';
import { createAnalytics } from '../../../../../Utilities/analytics';
type EditDropdownProps = {
getBlueprintPayload: () => Promise<'' | CreateBlueprintRequest | undefined>;
@ -28,13 +34,40 @@ export const EditSaveAndBuildBtn = ({
blueprintId,
isDisabled,
}: EditDropdownProps) => {
const [userData, setUserData] = useState<ChromeUser | void>(undefined);
const { analytics, auth, isBeta } = useChrome();
useEffect(() => {
(async () => {
const data = await auth?.getUser();
setUserData(data);
})();
}, [auth]);
const [buildBlueprint] = useComposeBlueprintMutation();
const packages = useAppSelector(selectPackages);
const [updateBlueprint] = useUpdateBlueprintMutation({
fixedCacheKey: 'updateBlueprintKey',
});
const onSaveAndBuild = async () => {
const requestBody = await getBlueprintPayload();
if (!process.env.IS_ON_PREMISE && requestBody) {
const analyticsData = createAnalytics(requestBody, packages, isBeta);
analytics.track(`${AMPLITUDE_MODULE_NAME} - Blueprint Updated`, {
...analyticsData,
type: 'editBlueprintAndBuildImages',
account_id: userData?.identity.internal?.account_id || 'Not found',
});
analytics.track(`${AMPLITUDE_MODULE_NAME} - Image Requested`, {
module: AMPLITUDE_MODULE_NAME,
trigger: 'blueprint_updated',
image_request_types: requestBody.image_requests.map(
(req) => req.image_type
),
});
}
setIsOpen(false);
if (requestBody) {
await updateBlueprint({
@ -64,11 +97,31 @@ export const EditSaveButton = ({
blueprintId,
isDisabled,
}: EditDropdownProps) => {
const [userData, setUserData] = useState<ChromeUser | void>(undefined);
const { analytics, auth, isBeta } = useChrome();
useEffect(() => {
(async () => {
const data = await auth?.getUser();
setUserData(data);
})();
}, [auth]);
const packages = useAppSelector(selectPackages);
const [updateBlueprint, { isLoading }] = useUpdateBlueprintMutation({
fixedCacheKey: 'updateBlueprintKey',
});
const onSave = async () => {
const requestBody = await getBlueprintPayload();
if (!process.env.IS_ON_PREMISE && requestBody) {
const analyticsData = createAnalytics(requestBody, packages, isBeta);
analytics.track(`${AMPLITUDE_MODULE_NAME} - Blueprint Updated`, {
...analyticsData,
type: 'editBlueprint',
account_id: userData?.identity.internal?.account_id || 'Not found',
});
}
setIsOpen(false);
if (requestBody) {
updateBlueprint({ id: blueprintId, createBlueprintRequest: requestBody });