feat(pci-load-balancer): tracking

ref: DTCORE-2668 Signed-off-by: Mohammed Hamdoune <[email protected]>
ovh · Oct 18, 2024 · c76e0bd · c76e0bd
1 parent cd8413f
commit c76e0bd
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 31 deletions.
diff --git a/packages/manager/apps/pci-load-balancer/package.json b/packages/manager/apps/pci-load-balancer/package.json
@@ -42,6 +42,7 @@
     "react-i18next": "^14.1.2",
     "react-router-dom": "^6.24.1",
     "react-use": "^17.5.0",
+    "uuid": "^10.0.0",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

diff --git a/packages/manager/apps/pci-load-balancer/src/api/data/flavors.ts b/packages/manager/apps/pci-load-balancer/src/api/data/flavors.ts
@@ -1,17 +1,17 @@
 import { v6 } from '@ovh-ux/manager-core-api';
-import { TPlan } from '@/pages/create/store';
+import { TAddon } from '@/pages/create/store';
 import { TFlavor } from '@/api/data/load-balancer';
 
 export const getFlavor = async (
   projectId: string,
   regionName: string,
-  size: TPlan,
+  addon: TAddon,
 ): Promise<TFlavor> => {
   const { data } = await v6.get<TFlavor[]>(
     `/cloud/project/${projectId}/region/${regionName}/loadbalancing/flavor`,
   );
 
   return data.find(
-    (regionalizedFlavors) => regionalizedFlavors.name === size.technicalName,
+    (regionalizedFlavors) => regionalizedFlavors.name === addon.technicalName,
   );
 };
diff --git a/packages/manager/apps/pci-load-balancer/src/api/data/load-balancer.ts b/packages/manager/apps/pci-load-balancer/src/api/data/load-balancer.ts
@@ -5,10 +5,10 @@ import {
   FLOATING_IP_TYPE,
   PROTOCOLS,
 } from '@/constants';
-import { TRegion } from '@/api/hook/usePlans';
 import { TPrivateNetwork, TSubnet } from '@/api/data/network';
 import { ListenerConfiguration } from '@/components/create/InstanceTable.component';
 import { TFloatingIp } from '@/api/data/floating-ips';
+import { TRegion } from '@/api/hook/useRegions';
 
 export enum LoadBalancerOperatingStatusEnum {
   ONLINE = 'online',

diff --git a/packages/manager/apps/pci-load-balancer/src/api/hook/useFlavors.ts b/packages/manager/apps/pci-load-balancer/src/api/hook/useFlavors.ts
@@ -1,11 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
-import { TPlan } from '@/pages/create/store';
 import { getFlavor } from '@/api/data/flavors';
+import { TAddon } from '@/pages/create/store';
 
 export const useGetFlavor = (
   projectId: string,
   regionName: string,
-  size: TPlan,
+  addon: TAddon,
 ) =>
   useQuery({
     queryKey: [
@@ -14,10 +14,10 @@ export const useGetFlavor = (
       'region',
       regionName,
       'size',
-      size?.code,
+      addon?.code,
       'flavor',
     ],
-    queryFn: () => getFlavor(projectId, regionName, size),
-    enabled: !!projectId && !!regionName && !!size,
+    queryFn: () => getFlavor(projectId, regionName, addon),
+    enabled: !!projectId && !!regionName && !!addon,
     throwOnError: true,
   });
diff --git a/packages/manager/apps/pci-load-balancer/src/constants.ts b/packages/manager/apps/pci-load-balancer/src/constants.ts
@@ -216,6 +216,28 @@ export const FLOATING_IP_CREATE_DESCRIPTION =
   'FIP created by OVHCloud Control Panel (Manager) for Load Balancer';
 export const AGORA_GATEWAY_REGEX = /gateway.s.hour.consumption/;
 
+export const TRACKING_NAME =
+  'pci::projects::project::octavia-loadbalancer::add';
+const TRACKING_ROOT = `PublicCloud::${TRACKING_NAME}`;
+export const LOAD_BALANCER_CREATION_TRACKING = {
+  ROOT: TRACKING_ROOT,
+  GO_TO_PRODUCT_PAGE: `${TRACKING_ROOT}::goto-product-page`,
+  GO_TO_REGION_AVAILABILITY: `${TRACKING_ROOT}::goto-region-availability`,
+  CREATE_PRIVATE_NETWORK: `${TRACKING_ROOT}::create-private-network`,
+  GO_TO_INSTANCE_DOCUMENTATION: `${TRACKING_ROOT}::goto-documentation`,
+  CANCEL: `${TRACKING_ROOT}::cancel`,
+  SUBMIT: `${TRACKING_ROOT}::confirm`,
+  CONFIRM: `octavia-loadbalancer::confirm-creation`,
+  ERROR: `${TRACKING_ROOT}-error`,
+  SUCCESS: `${TRACKING_ROOT}-success`,
+  FINISH_STEP_1: 'loadbalancer_octavia_add_size',
+  FINISH_STEP_2: 'loadbalancer_octavia_add_region',
+  FINISH_STEP_3: 'loadbalancer_octavia_add_ip',
+  FINISH_STEP_4: 'loadbalancer_octavia_add_network',
+  FINISH_STEP_5: 'loadbalancer_octavia_add_instances',
+  SKIP_STEP_5: 'loadbalancer_octavia_add_instances_skip',
+};
+
 export const RULE_TYPES = {
   COOKIE: 'cookie',
   FILE_TYPE: 'fileType',

diff --git a/packages/manager/apps/pci-load-balancer/src/hooks/useTranslatedLinkReference.ts b/packages/manager/apps/pci-load-balancer/src/hooks/useTranslatedLinkReference.ts
@@ -0,0 +1,36 @@
+import { useContext, useEffect, useRef } from 'react';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+
+export const useTranslatedLinkReference = () => {
+  const { tracking } = useContext(ShellContext).shell;
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const anchors = ref.current.querySelectorAll<HTMLAnchorElement>('a');
+      anchors.forEach((anchor) => {
+        const { trackName, trackOn, trackType, handled } = anchor.dataset;
+        if (!handled) {
+          anchor.classList.add(
+            'font-bold',
+            'no-underline',
+            'text-blue-600',
+            'hover:underline',
+          );
+
+          anchor.setAttribute('data-handled', 'true');
+          if (trackOn === 'click') {
+            anchor.addEventListener('click', () => {
+              tracking.trackClick({
+                name: trackName,
+                type: trackType || 'action',
+              });
+            });
+          }
+        }
+      });
+    }
+  }, [ref.current]);
+
+  return ref;
+};