ovh · abullet33 · Jan 13, 2025
@@ -0,0 +1,2 @@
+export const APP_TRACKING_PREFIX = 'PublicCloud::ai::dashboard';
+export const PCI_LEVEL2 = '86';
@@ -0,0 +1,88 @@
+import { useLocation, useMatches, useParams } from 'react-router-dom';
+import { useContext, useEffect, useRef } from 'react';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  APP_TRACKING_PREFIX,
+  PCI_LEVEL2,
+} from '@/configuration/tracking.constants';
+import { PlanCode } from '@/types/cloud/Project';
+import usePciProject from './api/project/useGetProjects.hook';
+
+// Set the project mode, needed to track discovery actions
+function useProjectModeTracking() {
+  const { shell } = useContext(ShellContext);
+  const { setPciProjectMode } = shell.tracking;
+  const { data: project } = usePciProject();
+  useEffect(() => {
+    if (project) {
+      setPciProjectMode({
+        projectId: project.project_id,
+        isDiscoveryProject: project.planCode === PlanCode.DISCOVERY,
+      });
+    }
+  }, [project]);
+}
+
+// Provide a function to track actions with the correct
+// type and level
+export function useTrackAction() {
+  useProjectModeTracking();
+  const { shell } = useContext(ShellContext);
+  const { trackClick } = shell.tracking;
+
+  return (trackingName: string) => {
+    trackClick({
+      type: 'action',
+      name: trackingName,
+      level2: PCI_LEVEL2,
+    });
+  };
+}
+
+// Fire a page tracking event when landing on the page
+export function useTrackPage(pageTracking: string) {
+  useProjectModeTracking();
+  const { shell } = useContext(ShellContext);
+  const { trackPage } = shell.tracking;
+  useEffect(() => {
+    trackPage({
+      name: pageTracking,
+      level2: PCI_LEVEL2,
+    });
+  }, []);
+}
+
+export function useTrackPageAuto() {
+  useProjectModeTracking();
+  const { shell } = useContext(ShellContext);
+  const { trackPage } = shell.tracking;
+  const matches = useMatches();
+  const location = useLocation();
+  const params = useParams();
+  // Last match is the current route, we need it
+  // to get the tracking key associated with the route
+  const match = matches[matches.length - 1];
+  const hasTrackedRef = useRef(false);
+
+  useEffect(() => {
+    if (hasTrackedRef.current) return;
+    const prefix = APP_TRACKING_PREFIX;
+    const { id } = match;
+    const routerTrackingKey = (match?.handle as { tracking: string })?.tracking;
+    const suffix =
+      routerTrackingKey || id || location.pathname.split('/').pop();
+    let injectedTrackingKey = `${prefix}::${suffix}`;
+
+    // replace . by ::
+    injectedTrackingKey = injectedTrackingKey.replaceAll('.', '::');
+    trackPage({
+      name: injectedTrackingKey,
+      level2: PCI_LEVEL2,
+    });
+    hasTrackedRef.current = true;
+  }, [location.pathname, params.serviceId]);
+
+  useEffect(() => {
+    hasTrackedRef.current = false;
+  }, [location.pathname]);
+}
@@ -10,6 +10,7 @@ import PageLayout from '@/components/page-layout/PageLayout.component';
 
 import { UserActivityProvider } from '@/contexts/UserActivity.context';
 import { USER_INACTIVITY_TIMEOUT } from '@/configuration/polling';
+import { useTrackPageAuto } from '@/hooks/useTracking';
 
 export function breadcrumb() {
   return (
@@ -46,6 +47,7 @@ function RoutingSynchronisation() {
   const location = useLocation();
   const routing = useRouting();
   const shell = useShell();
+
   useEffect(() => {
     routing.stopListenForHashChange();
   }, []);
@@ -54,6 +56,9 @@ function RoutingSynchronisation() {
     setLoading(false);
     routing.onHashChange();
   }, [location]);
+
+  useTrackPageAuto();
+
   return <></>;
 }
 

@@ -5,8 +5,8 @@ import usePciProject from '@/hooks/api/project/useGetProjects.hook';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import OvhLink from '@/components/links/OvhLink.component';
-import { PlanCode } from '@/configuration/project';
 import A from '@/components/links/A.component';
+import { PlanCode } from '@/types/cloud/Project';
 
 export const DashboardHeader = () => {
   const { t } = useTranslation('pci-ai-dashboard');

@@ -10,7 +10,7 @@ import {
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import OvhLink from '@/components/links/OvhLink.component';
 import usePciProject from '@/hooks/api/project/useGetProjects.hook';
-import { PlanCode } from '@/configuration/project';
+import { PlanCode } from '@/types/cloud/Project';
 
 export default function Auth() {
   const { t } = useTranslation('pci-ai-dashboard/auth');

@@ -43,36 +43,42 @@ export default [
             children: [
               {
                 path: '',
+                id: 'dashboard.home',
                 ...lazyRouteConfig(() =>
                   import('@/pages/dashboard/home/Home.page'),
                 ),
               },
               {
                 path: 'users',
+                id: 'dashboard.users',
                 ...lazyRouteConfig(() =>
                   import('@/pages/dashboard/users/Users.page'),
                 ),
               },
               {
                 path: 'tokens',
+                id: 'dashboard.tokens',
                 ...lazyRouteConfig(() =>
                   import('@/pages/dashboard/tokens/Tokens.page'),
                 ),
               },
               {
                 path: 'docker-registries',
+                id: 'dashboard.docker-registries',
                 ...lazyRouteConfig(() =>
                   import('@/pages/dashboard/docker/Docker.page'),
                 ),
               },
               {
                 path: 'git-registries',
+                id: 'dashboard.git-registries',
                 ...lazyRouteConfig(() =>
                   import('@/pages/dashboard/git/Git.page'),
                 ),
               },
               {
                 path: 'datastore',
+                id: 'dashboard.datastores',
                 ...lazyRouteConfig(() =>
                   import('@/pages/dashboard/datastore/Datastore.page'),
                 ),
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const APP_TRACKING_PREFIX = 'PublicCloud::ai::dashboard';
		export const PCI_LEVEL2 = '86';