From c8709d06af28f5e538c8dbafee8d409eba7f5452 Mon Sep 17 00:00:00 2001 From: Arthur Bullet Date: Mon, 13 Jan 2025 12:01:29 +0100 Subject: [PATCH] feat(pci.ai.dashboard): add tracking auto REF:DATATR-1297 Signed-off-by: Arthur Bullet --- .../src/configuration/project.ts | 4 - .../src/configuration/tracking.constants.ts | 2 + .../pci-ai-dashboard/src/hooks/useTracking.ts | 88 +++++++++++++++++++ .../src/pages/Root.layout.tsx | 5 ++ .../_components/DashboardHeader.component.tsx | 2 +- .../src/pages/dashboard/auth/Auth.page.tsx | 2 +- .../pci-ai-dashboard/src/routes/routes.tsx | 6 ++ 7 files changed, 103 insertions(+), 6 deletions(-) delete mode 100644 packages/manager/apps/pci-ai-dashboard/src/configuration/project.ts create mode 100644 packages/manager/apps/pci-ai-dashboard/src/configuration/tracking.constants.ts create mode 100644 packages/manager/apps/pci-ai-dashboard/src/hooks/useTracking.ts diff --git a/packages/manager/apps/pci-ai-dashboard/src/configuration/project.ts b/packages/manager/apps/pci-ai-dashboard/src/configuration/project.ts deleted file mode 100644 index 947457b9a819..000000000000 --- a/packages/manager/apps/pci-ai-dashboard/src/configuration/project.ts +++ /dev/null @@ -1,4 +0,0 @@ -export enum PlanCode { - DISCOVERY = 'project.discovery', - STANDARD = 'project.2018', -} diff --git a/packages/manager/apps/pci-ai-dashboard/src/configuration/tracking.constants.ts b/packages/manager/apps/pci-ai-dashboard/src/configuration/tracking.constants.ts new file mode 100644 index 000000000000..6c46d0d8b0b5 --- /dev/null +++ b/packages/manager/apps/pci-ai-dashboard/src/configuration/tracking.constants.ts @@ -0,0 +1,2 @@ +export const APP_TRACKING_PREFIX = 'PublicCloud::ai::dashboard'; +export const PCI_LEVEL2 = '86'; diff --git a/packages/manager/apps/pci-ai-dashboard/src/hooks/useTracking.ts b/packages/manager/apps/pci-ai-dashboard/src/hooks/useTracking.ts new file mode 100644 index 000000000000..663cdf6c250f --- /dev/null +++ b/packages/manager/apps/pci-ai-dashboard/src/hooks/useTracking.ts @@ -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]); +} diff --git a/packages/manager/apps/pci-ai-dashboard/src/pages/Root.layout.tsx b/packages/manager/apps/pci-ai-dashboard/src/pages/Root.layout.tsx index 5e7d8aaddd1c..570816dda615 100644 --- a/packages/manager/apps/pci-ai-dashboard/src/pages/Root.layout.tsx +++ b/packages/manager/apps/pci-ai-dashboard/src/pages/Root.layout.tsx @@ -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 <>; } diff --git a/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/_components/DashboardHeader.component.tsx b/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/_components/DashboardHeader.component.tsx index b0fa55af476b..082924119483 100644 --- a/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/_components/DashboardHeader.component.tsx +++ b/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/_components/DashboardHeader.component.tsx @@ -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'); diff --git a/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/auth/Auth.page.tsx b/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/auth/Auth.page.tsx index 5c4ee76efe7c..4d77acf4871c 100644 --- a/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/auth/Auth.page.tsx +++ b/packages/manager/apps/pci-ai-dashboard/src/pages/dashboard/auth/Auth.page.tsx @@ -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'); diff --git a/packages/manager/apps/pci-ai-dashboard/src/routes/routes.tsx b/packages/manager/apps/pci-ai-dashboard/src/routes/routes.tsx index 8654a0f3437e..5e0f3ee131d2 100644 --- a/packages/manager/apps/pci-ai-dashboard/src/routes/routes.tsx +++ b/packages/manager/apps/pci-ai-dashboard/src/routes/routes.tsx @@ -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'), ),