feat(ldp): add tracking base implementation

ref: MANAGER-15360

Signed-off-by: Vincent BONMARCHAND <[email protected]>

packages/manager/apps/key-management-service/src/pages/dashboard/logs/Logs.page.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import LogsToCustomerModule from '@ovh-ux/logs-to-customer/src/LogsToCustomer.module';
 import { Description } from '@ovh-ux/manager-react-components';
 import { useOKMSById } from '@/data/hooks/useOKMS';
+import { trackClickMap } from './LogsTracking.constant';
 
 export default function KmsLogs() {
   const { t } = useTranslation('key-management-service/logs');
@@ -26,6 +27,7 @@ export default function KmsLogs() {
           deleteSubscription: ['okms:apiovh:log/subscription/delete'],
         }}
         resourceURN={okms.data.iam.urn}
+        trackingOptions={{ trackClickMap }}
       />
     </div>
   );

packages/manager/apps/key-management-service/src/pages/dashboard/logs/LogsTracking.constant.ts

@@ -0,0 +1,17 @@
+import { LogsActionName } from '@ovh-ux/logs-to-customer/src/types/logsTracking';
+
+export const trackClickMap: Record<LogsActionName, string[]> = {
+  subscribe_logs_access: ['subscribe_logs_access_kms'],
+  unsubscribe_logs_access: ['unsubscribe_logs_access_kms'],
+  add_account_logs_access: ['add_account_logs_access_kms'],
+  add_datastream_logs_access: ['add_datastream_logs_access_kms'],
+  clear_session_logs_access: ['clear_session_logs_access_kms'],
+  pause_logs_access: ['pause_logs_access_kms'],
+  subscribe_other_account_logs_access: [
+    'subscribe_other_account_logs_access_kms',
+  ],
+  graylog_observe_logs_access: ['graylog_observe_logs_access_kms'],
+  select_kind_logs_access: ['select_kind_logs_access_kms'],
+  go_back_logs_access: ['go_back_logs_access_kms'],
+  go_to_detail_logs_access: ['go_to_detail_logs_access_kms'],
+};

packages/manager/modules/logs-to-customer/src/LogsToCustomer.context.tsx

@@ -2,13 +2,17 @@ import { createContext } from 'react';
 import { LogKind } from './data/types/dbaas/logs';
 import { ApiUrls, LogIamActions } from './LogsToCustomer.module';
 import { LogApiVersion } from './data/types/apiVersion';
+import { LogsActionName } from './types/logsTracking';
 
 export interface LogProviderProps {
   currentLogKind?: LogKind;
   logApiUrls: Pick<ApiUrls, 'logSubscription' | 'logUrl'>;
   logApiVersion: LogApiVersion;
   logIamActions?: LogIamActions;
   resourceURN?: string;
+  trackingOptions?: {
+    trackClickMap: Record<LogsActionName, string[]>;
+  };
 }
 
 export const LogsContext = createContext<LogProviderProps>({
@@ -17,4 +21,5 @@ export const LogsContext = createContext<LogProviderProps>({
     logUrl: '',
   },
   logApiVersion: 'v2',
+  trackingOptions: null,
 });

packages/manager/modules/logs-to-customer/src/LogsToCustomer.module.tsx

@@ -9,13 +9,19 @@ import {
 } from '@ovhcloud/ods-components/react';
 import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
 import { Description } from '@ovh-ux/manager-react-components';
+import {
+  PageLocation,
+  ButtonType,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { getLogKindsQueryKey, useLogKinds } from './data/hooks/useLogKinds';
 import { LogKind } from './data/types/dbaas/logs';
 import { LogApiVersion } from './data/types/apiVersion';
 import { LogsContext } from './LogsToCustomer.context';
 import ApiError from './components/apiError/ApiError.component';
 import './translations';
 import { ZoomedInOutProvider } from './hooks/useZoomedInOut';
+import { LogsActionName } from './types/logsTracking';
 
 export type ApiUrls = {
   logKind: string;
@@ -33,18 +39,22 @@ export interface ILogsToCustomerModule {
   logApiVersion: LogApiVersion;
   logIamActions: LogIamActions;
   resourceURN: string;
+  trackingOptions?: {
+    trackClickMap: Record<LogsActionName, string[]>;
+  };
 }
 
 export default function LogsToCustomerModule({
   logApiUrls,
   logApiVersion,
   logIamActions,
   resourceURN,
+  trackingOptions,
 }: Readonly<ILogsToCustomerModule>) {
   const queryClient = useQueryClient();
   const [currentLogKind, setCurrentLogKind] = useState<LogKind>();
   const { t } = useTranslation('logKind');
-
+  const { trackClick } = useOvhTracking();
   const { data: logKinds, error, isPending } = useLogKinds({
     logKindUrl: logApiUrls.logKind,
     apiVersion: logApiVersion,
@@ -61,8 +71,16 @@ export default function LogsToCustomerModule({
       logApiVersion,
       logIamActions,
       resourceURN,
+      trackingOptions,
     }),
-    [currentLogKind, logApiUrls, logApiVersion, logIamActions, resourceURN],
+    [
+      currentLogKind,
+      logApiUrls,
+      logApiVersion,
+      logIamActions,
+      resourceURN,
+      trackingOptions,
+    ],
   );
 
   if (isPending)
@@ -106,7 +124,16 @@ export default function LogsToCustomerModule({
               const newLogKind = logKinds.find(
                 (k) => k.kindId === event.detail.value,
               );
-              if (newLogKind) setCurrentLogKind(newLogKind);
+              if (newLogKind) {
+                setCurrentLogKind(newLogKind);
+                trackClick({
+                  location: PageLocation.page,
+                  buttonType: ButtonType.button,
+                  actionType: 'action',
+                  actions:
+                    trackingOptions?.trackClickMap.select_kind_logs_access,
+                });
+              }
             }}
             data-testid={'logKindSelect'}
           >

packages/manager/modules/logs-to-customer/src/components/data-streams/DataStreamActions.spec.tsx

@@ -57,6 +57,7 @@ const shellContext = {
   environment: {
     getUser: vi.fn(),
     getUserLocale: vi.fn().mockReturnValue('fr_FR'),
+    getRegion: vi.fn(),
   },
 };
 

packages/manager/modules/logs-to-customer/src/components/data-streams/DataStreamRetention.spec.tsx

@@ -33,6 +33,7 @@ const shellContext = {
   environment: {
     getUser: vi.fn(),
     getUserLocale: vi.fn().mockReturnValue('fr_FR'),
+    getRegion: vi.fn(),
   },
 };
 

packages/manager/modules/logs-to-customer/src/components/logTail/logMessages/LogMessages.component.tsx

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  useContext,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -21,10 +22,16 @@ import {
   ODS_INPUT_TYPE,
 } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { useLogTailMessages } from '../../../data/hooks/useLogTailMessages';
 import { Log } from './log/Log.component';
 import { TemporaryLogsLink } from '../../../data/types/dbaas/logs';
 import { useZoomedInOut } from '../../../hooks/useZoomedInOut';
+import { LogsContext } from '../../../LogsToCustomer.context';
 
 interface ISearchContext {
   query: string;
@@ -51,6 +58,8 @@ export const LogMessages = ({ logTailMessageUrl }: ILogTailMessageUrl) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [autoScroll, setAutoScroll] = useState(true);
   const { isZoomedIn, toggleZoom } = useZoomedInOut();
+  const { trackingOptions } = useContext(LogsContext);
+  const { trackClick } = useOvhTracking();
   const {
     messages,
     error,
@@ -74,6 +83,12 @@ export const LogMessages = ({ logTailMessageUrl }: ILogTailMessageUrl) => {
   const resetSession = async () => {
     setAutoScroll(true);
     clearLogs();
+    trackClick({
+      location: PageLocation.page,
+      buttonType: ButtonType.button,
+      actionType: 'action',
+      actions: trackingOptions?.trackClickMap.clear_session_logs_access,
+    });
   };
 
   useEffect(() => {

packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionEmpty.component.tsx

@@ -8,13 +8,21 @@ import {
 } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { OsdsTile, OsdsText, OsdsButton } from '@ovhcloud/ods-components/react';
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
+import { LogsContext } from '../../LogsToCustomer.context';
 
 const SubscriptionEmpty = () => {
   const navigate = useNavigate();
   const { t } = useTranslation('logSubscription');
+  const { trackingOptions } = useContext(LogsContext);
+  const { trackClick } = useOvhTracking();
 
   return (
     <OsdsTile rounded inline className="flex flex-col">
@@ -36,7 +44,15 @@ const SubscriptionEmpty = () => {
           variant={ODS_BUTTON_VARIANT.stroked}
           color={ODS_THEME_COLOR_INTENT.primary}
           size={ODS_BUTTON_SIZE.sm}
-          onClick={() => navigate('streams')}
+          onClick={() => {
+            trackClick({
+              location: PageLocation.page,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: trackingOptions?.trackClickMap.subscribe_logs_access,
+            });
+            navigate('streams');
+          }}
         >
           {t('log_subscription_empty_tile_button_subscribe')}
         </OsdsButton>

packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ODS_BUTTON_VARIANT,
@@ -15,12 +15,18 @@ import {
 } from '@ovhcloud/ods-components/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import {
   getLogStreamUrlQueryKey,
   useLogStreamUrl,
 } from '../../data/hooks/useLogStreamUrl';
 import { LogSubscription } from '../../data/types/dbaas/logs';
 import ApiError from '../apiError/ApiError.component';
+import { LogsContext } from '../../LogsToCustomer.context';
 
 type SubscriptionStreamItemProps = {
   subscription: LogSubscription;
@@ -37,6 +43,8 @@ const SubscriptionStreamActions = ({
     subscription.serviceName,
     subscription.streamId,
   );
+  const { trackingOptions } = useContext(LogsContext);
+  const { trackClick } = useOvhTracking();
 
   if (isLoading || isPending) {
     return (
@@ -75,6 +83,14 @@ const SubscriptionStreamActions = ({
         color={ODS_THEME_COLOR_INTENT.primary}
         variant={ODS_BUTTON_VARIANT.stroked}
         target={OdsHTMLAnchorElementTarget._blank}
+        onClick={() => {
+          trackClick({
+            location: PageLocation.page,
+            buttonType: ButtonType.button,
+            actionType: 'action',
+            actions: trackingOptions?.trackClickMap.graylog_observe_logs_access,
+          });
+        }}
       >
         {t('log_stream_button_graylog_watch_label')}
         <span slot="end">
@@ -90,6 +106,12 @@ const SubscriptionStreamActions = ({
         variant={ODS_BUTTON_VARIANT.ghost}
         color={ODS_THEME_COLOR_INTENT.primary}
         onClick={() => {
+          trackClick({
+            location: PageLocation.page,
+            buttonType: ButtonType.button,
+            actionType: 'action',
+            actions: trackingOptions?.trackClickMap.unsubscribe_logs_access,
+          });
           navigate(`subscription/${subscription.subscriptionId}/terminate`);
         }}
       >

packages/manager/modules/logs-to-customer/src/data/hooks/useLogTailMessages.ts

@@ -1,5 +1,10 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { TemporaryLogsLink } from '../types/dbaas/logs';
 import { getLogTailMessages, Tmessage } from '../api/logTailMessages';
 import { LogsContext } from '../../LogsToCustomer.context';
@@ -11,12 +16,12 @@ export const getLogTailMessageQueryKey = (
 export const useLogTailMessages = (
   logTailMessageUrl: TemporaryLogsLink['url'],
 ) => {
-  const { currentLogKind } = useContext(LogsContext);
+  const { currentLogKind, trackingOptions } = useContext(LogsContext);
+  const { trackClick } = useOvhTracking();
   const [messages, setMessages] = useState<Tmessage[]>([]);
   const messageIds = useRef(new Set());
   const [isPolling, setIsPolling] = useState(true);
   const queryClient = useQueryClient();
-
   const { data, error, isPending } = useQuery({
     queryKey: getLogTailMessageQueryKey(logTailMessageUrl),
     queryFn: () => getLogTailMessages({ logTailMessageUrl }),
@@ -31,6 +36,12 @@ export const useLogTailMessages = (
         queryKey: getLogTailMessageQueryKey(logTailMessageUrl),
       });
       setIsPolling(false);
+      trackClick({
+        location: PageLocation.page,
+        buttonType: ButtonType.button,
+        actionType: 'action',
+        actions: trackingOptions?.trackClickMap.pause_logs_access,
+      });
       return;
     }
     setIsPolling(true);

packages/manager/modules/logs-to-customer/src/pages/data-streams/DataStreams.page.tsx

@@ -28,7 +28,6 @@ export default function DataStreams() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { t } = useTranslation('logStreams');
-
   const [currentService, setCurrentService] = useState<Service>();
 
   const { data: logsServices, isPending, error } = useLogServices();

packages/manager/modules/logs-to-customer/src/pages/data-streams/DataStreams.spec.tsx

@@ -1,29 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
-import React from 'react';
-import { vi } from 'vitest';
 import { logStreamsMock } from '../../data/mocks/logStream.mock';
 import { renderTest } from '../../test-utils';
 
-vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => {
-  const mod = await importOriginal<
-    typeof import('@ovh-ux/manager-react-shell-client')
-  >();
-  const navigateTo = vi.fn();
-  return {
-    ...mod,
-    ShellContext: React.createContext({
-      shell: {
-        navigation: {
-          getURL: vi.fn().mockResolvedValue('mocked-url'),
-        },
-      },
-    }),
-    useNavigation: () => ({
-      navigateTo,
-    }),
-  };
-});
-
 describe('dataStreams page test suite', () => {
   it('should display an error if /log/services api is KO', async () => {
     await renderTest({ initialRoute: '/streams', isLogServicesKO: true });

packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Outlet } from 'react-router-dom';
 import LogTail from '../../components/logTail/LogTail.component';
 import LogsSubscriptions from '../../components/subscriptions/Subscriptions.component';