From 6957bd71cae970fbfcef95be6e546429350a2afd Mon Sep 17 00:00:00 2001 From: Yunus M Date: Tue, 23 Jul 2024 16:32:45 +0530 Subject: [PATCH] chore: move from trackEvent to logEvent (#5530) * chore: move from trackEvent to logEvent * feat: update test cases --- frontend/src/AppRoutes/index.tsx | 5 +- .../BillingContainer/BillingContainer.tsx | 8 ++-- .../OnboardingContainer.tsx | 6 +-- .../ConnectionStatus/ConnectionStatus.tsx | 8 ++-- .../LogsConnectionStatus.tsx | 7 ++- .../ModuleStepsContainer.tsx | 46 +++++++++---------- .../Layouts/Pipeline/CreatePipelineButton.tsx | 7 ++- .../PipelineListsView/PipelineExpandView.tsx | 5 +- .../PipelineListsView/PipelineListsView.tsx | 6 +-- .../components/PreviewAction.tsx | 6 +-- .../tests/CreatePipelineButton.test.tsx | 21 +++------ .../Configure.tsx | 5 +- .../IntegrationDetailHeader.tsx | 8 ++-- .../IntegrationsUninstallBar.tsx | 6 +-- .../src/pages/Integrations/Integrations.tsx | 10 ++-- frontend/src/pages/SignUp/SignUp.tsx | 9 ++-- frontend/src/pages/Support/Support.tsx | 7 ++- .../pages/WorkspaceLocked/WorkspaceLocked.tsx | 7 ++- 18 files changed, 71 insertions(+), 106 deletions(-) diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index bc2b02d842..ac225db25a 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/frontend/src/AppRoutes/index.tsx @@ -1,6 +1,7 @@ import { ConfigProvider } from 'antd'; import getLocalStorageApi from 'api/browser/localstorage/get'; import setLocalStorageApi from 'api/browser/localstorage/set'; +import logEvent from 'api/common/logEvent'; import NotFound from 'components/NotFound'; import Spinner from 'components/Spinner'; import { FeatureKeys } from 'constants/features'; @@ -48,7 +49,7 @@ function App(): JSX.Element { const dispatch = useDispatch>(); - const { trackPageView, trackEvent } = useAnalytics(); + const { trackPageView } = useAnalytics(); const { hostname, pathname } = window.location; @@ -199,7 +200,7 @@ function App(): JSX.Element { LOCALSTORAGE.THEME_ANALYTICS_V1, ); if (!isThemeAnalyticsSent) { - trackEvent('Theme Analytics', { + logEvent('Theme Analytics', { theme: isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT, user: pick(user, ['email', 'userId', 'name']), org, diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx index 248819723c..e366f068b2 100644 --- a/frontend/src/container/BillingContainer/BillingContainer.tsx +++ b/frontend/src/container/BillingContainer/BillingContainer.tsx @@ -19,10 +19,10 @@ import { ColumnsType } from 'antd/es/table'; import updateCreditCardApi from 'api/billing/checkout'; import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage'; import manageCreditCardApi from 'api/billing/manage'; +import logEvent from 'api/common/logEvent'; import Spinner from 'components/Spinner'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import useAxiosError from 'hooks/useAxiosError'; import useLicense from 'hooks/useLicense'; import { useNotifications } from 'hooks/useNotifications'; @@ -137,8 +137,6 @@ export default function BillingContainer(): JSX.Element { Partial >({}); - const { trackEvent } = useAnalytics(); - const { isFetching, data: licensesData, error: licenseError } = useLicense(); const { user, org } = useSelector((state) => state.app); @@ -316,7 +314,7 @@ export default function BillingContainer(): JSX.Element { const handleBilling = useCallback(async () => { if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) { - trackEvent('Billing : Upgrade Plan', { + logEvent('Billing : Upgrade Plan', { user: pick(user, ['email', 'userId', 'name']), org, }); @@ -327,7 +325,7 @@ export default function BillingContainer(): JSX.Element { cancelURL: window.location.href, }); } else { - trackEvent('Billing : Manage Billing', { + logEvent('Billing : Manage Billing', { user: pick(user, ['email', 'userId', 'name']), org, }); diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx index d1f89b0762..3129d76c8e 100644 --- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx +++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx @@ -11,7 +11,6 @@ import ROUTES from 'constants/routes'; import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader'; import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal'; import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import history from 'lib/history'; import { UserPlus } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; @@ -104,7 +103,6 @@ export default function Onboarding(): JSX.Element { const [selectedModuleSteps, setSelectedModuleSteps] = useState(APM_STEPS); const [activeStep, setActiveStep] = useState(1); const [current, setCurrent] = useState(0); - const { trackEvent } = useAnalytics(); const { location } = history; const { t } = useTranslation(['onboarding']); @@ -120,7 +118,7 @@ export default function Onboarding(): JSX.Element { } = useOnboardingContext(); useEffectOnce(() => { - trackEvent('Onboarding V2 Started'); + logEvent('Onboarding V2 Started', {}); }); const { status, data: ingestionData } = useQuery({ @@ -231,7 +229,7 @@ export default function Onboarding(): JSX.Element { const nextStep = activeStep + 1; // on next - trackEvent('Onboarding V2: Get Started', { + logEvent('Onboarding V2: Get Started', { selectedModule: selectedModule.id, nextStepId: nextStep, }); diff --git a/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx b/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx index 785e73d610..4cbdb39414 100644 --- a/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx +++ b/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx @@ -5,9 +5,9 @@ import { CloseCircleTwoTone, LoadingOutlined, } from '@ant-design/icons'; +import logEvent from 'api/common/logEvent'; import Header from 'container/OnboardingContainer/common/Header/Header'; import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useQueryService } from 'hooks/useQueryService'; import useResourceAttribute from 'hooks/useResourceAttribute'; import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils'; @@ -41,8 +41,6 @@ export default function ConnectionStatus(): JSX.Element { [queries], ); - const { trackEvent } = useAnalytics(); - const [retryCount, setRetryCount] = useState(20); // Retry for 3 mins 20s const [loading, setLoading] = useState(true); const [isReceivingData, setIsReceivingData] = useState(false); @@ -155,7 +153,7 @@ export default function ConnectionStatus(): JSX.Element { if (data || isError) { setRetryCount(retryCount - 1); if (retryCount < 0) { - trackEvent('Onboarding V2: Connection Status', { + logEvent('Onboarding V2: Connection Status', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, @@ -174,7 +172,7 @@ export default function ConnectionStatus(): JSX.Element { setLoading(false); setIsReceivingData(true); - trackEvent('Onboarding V2: Connection Status', { + logEvent('Onboarding V2: Connection Status', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, diff --git a/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx b/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx index 9695721ef1..f418c4bb41 100644 --- a/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx +++ b/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx @@ -5,11 +5,11 @@ import { CloseCircleTwoTone, LoadingOutlined, } from '@ant-design/icons'; +import logEvent from 'api/common/logEvent'; import { DEFAULT_ENTITY_VERSION } from 'constants/app'; import { PANEL_TYPES } from 'constants/queryBuilder'; import Header from 'container/OnboardingContainer/common/Header/Header'; import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange'; import { useEffect, useState } from 'react'; import { SuccessResponse } from 'types/api'; @@ -32,7 +32,6 @@ export default function LogsConnectionStatus(): JSX.Element { activeStep, selectedEnvironment, } = useOnboardingContext(); - const { trackEvent } = useAnalytics(); const [isReceivingData, setIsReceivingData] = useState(false); const [pollingInterval, setPollingInterval] = useState(15000); // initial Polling interval of 15 secs , Set to false after 5 mins const [retryCount, setRetryCount] = useState(20); // Retry for 5 mins @@ -105,7 +104,7 @@ export default function LogsConnectionStatus(): JSX.Element { setRetryCount(retryCount - 1); if (retryCount < 0) { - trackEvent('Onboarding V2: Connection Status', { + logEvent('Onboarding V2: Connection Status', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, @@ -141,7 +140,7 @@ export default function LogsConnectionStatus(): JSX.Element { setRetryCount(-1); setPollingInterval(false); - trackEvent('Onboarding V2: Connection Status', { + logEvent('Onboarding V2: Connection Status', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, diff --git a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx index 28890e4d5a..ae74930d57 100644 --- a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx +++ b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx @@ -15,7 +15,6 @@ import ROUTES from 'constants/routes'; import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig'; import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource'; import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import history from 'lib/history'; import { isEmpty, isNull } from 'lodash-es'; import { HelpCircle, UserPlus } from 'lucide-react'; @@ -79,7 +78,6 @@ export default function ModuleStepsContainer({ } = useOnboardingContext(); const [current, setCurrent] = useState(0); - const { trackEvent } = useAnalytics(); const [metaData, setMetaData] = useState(defaultMetaData); const lastStepIndex = selectedModuleSteps.length - 1; @@ -143,7 +141,7 @@ export default function ModuleStepsContainer({ }; const redirectToModules = (): void => { - trackEvent('Onboarding V2 Complete', { + logEvent('Onboarding V2 Complete', { module: selectedModule.id, dataSource: selectedDataSource?.id, framework: selectedFramework, @@ -186,14 +184,14 @@ export default function ModuleStepsContainer({ // on next step click track events switch (selectedModuleSteps[current].id) { case stepsMap.dataSource: - trackEvent('Onboarding V2: Data Source Selected', { + logEvent('Onboarding V2: Data Source Selected', { dataSource: selectedDataSource?.id, framework: selectedFramework, module: activeStep?.module?.id, }); break; case stepsMap.environmentDetails: - trackEvent('Onboarding V2: Environment Selected', { + logEvent('Onboarding V2: Environment Selected', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, @@ -201,7 +199,7 @@ export default function ModuleStepsContainer({ }); break; case stepsMap.selectMethod: - trackEvent('Onboarding V2: Method Selected', { + logEvent('Onboarding V2: Method Selected', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, @@ -211,7 +209,7 @@ export default function ModuleStepsContainer({ break; case stepsMap.setupOtelCollector: - trackEvent('Onboarding V2: Setup Otel Collector', { + logEvent('Onboarding V2: Setup Otel Collector', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, @@ -220,7 +218,7 @@ export default function ModuleStepsContainer({ }); break; case stepsMap.instrumentApplication: - trackEvent('Onboarding V2: Instrument Application', { + logEvent('Onboarding V2: Instrument Application', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, @@ -229,13 +227,13 @@ export default function ModuleStepsContainer({ }); break; case stepsMap.cloneRepository: - trackEvent('Onboarding V2: Clone Repository', { + logEvent('Onboarding V2: Clone Repository', { dataSource: selectedDataSource?.id, module: activeStep?.module?.id, }); break; case stepsMap.runApplication: - trackEvent('Onboarding V2: Run Application', { + logEvent('Onboarding V2: Run Application', { dataSource: selectedDataSource?.id, framework: selectedFramework, environment: selectedEnvironment, @@ -244,95 +242,95 @@ export default function ModuleStepsContainer({ }); break; case stepsMap.addHttpDrain: - trackEvent('Onboarding V2: Add HTTP Drain', { + logEvent('Onboarding V2: Add HTTP Drain', { dataSource: selectedDataSource?.id, module: activeStep?.module?.id, }); break; case stepsMap.startContainer: - trackEvent('Onboarding V2: Start Container', { + logEvent('Onboarding V2: Start Container', { dataSource: selectedDataSource?.id, module: activeStep?.module?.id, }); break; case stepsMap.setupLogDrains: - trackEvent('Onboarding V2: Setup Log Drains', { + logEvent('Onboarding V2: Setup Log Drains', { dataSource: selectedDataSource?.id, module: activeStep?.module?.id, }); break; case stepsMap.configureReceiver: - trackEvent('Onboarding V2: Configure Receiver', { + logEvent('Onboarding V2: Configure Receiver', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.configureAws: - trackEvent('Onboarding V2: Configure AWS', { + logEvent('Onboarding V2: Configure AWS', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.sendLogsCloudwatch: - trackEvent('Onboarding V2: Send Logs Cloudwatch', { + logEvent('Onboarding V2: Send Logs Cloudwatch', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.setupDaemonService: - trackEvent('Onboarding V2: Setup ECS Daemon Service', { + logEvent('Onboarding V2: Setup ECS Daemon Service', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.createOtelConfig: - trackEvent('Onboarding V2: Create ECS OTel Config', { + logEvent('Onboarding V2: Create ECS OTel Config', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.createDaemonService: - trackEvent('Onboarding V2: Create ECS Daemon Service', { + logEvent('Onboarding V2: Create ECS Daemon Service', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.ecsSendData: - trackEvent('Onboarding V2: ECS send traces data', { + logEvent('Onboarding V2: ECS send traces data', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.createSidecarCollectorContainer: - trackEvent('Onboarding V2: ECS create Sidecar Container', { + logEvent('Onboarding V2: ECS create Sidecar Container', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.deployTaskDefinition: - trackEvent('Onboarding V2: ECS deploy task definition', { + logEvent('Onboarding V2: ECS deploy task definition', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.ecsSendLogsData: - trackEvent('Onboarding V2: ECS Fargate send logs data', { + logEvent('Onboarding V2: ECS Fargate send logs data', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, }); break; case stepsMap.monitorDashboard: - trackEvent('Onboarding V2: EKS monitor dashboard', { + logEvent('Onboarding V2: EKS monitor dashboard', { dataSource: selectedDataSource?.id, environment: selectedEnvironment, module: activeStep?.module?.id, diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx index 23eaf335fe..e703e46a7e 100644 --- a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx +++ b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx @@ -1,6 +1,6 @@ import { EditFilled, PlusOutlined } from '@ant-design/icons'; +import logEvent from 'api/common/logEvent'; import TextToolTip from 'components/TextToolTip'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { ActionMode, ActionType, Pipeline } from 'types/api/pipeline/def'; @@ -15,7 +15,6 @@ function CreatePipelineButton({ pipelineData, }: CreatePipelineButtonProps): JSX.Element { const { t } = useTranslation(['pipeline']); - const { trackEvent } = useAnalytics(); const isAddNewPipelineVisible = useMemo( () => checkDataLength(pipelineData?.pipelines), @@ -26,7 +25,7 @@ function CreatePipelineButton({ const onEnterEditMode = (): void => { setActionMode(ActionMode.Editing); - trackEvent('Logs: Pipelines: Entered Edit Mode', { + logEvent('Logs: Pipelines: Entered Edit Mode', { source: 'signoz-ui', }); }; @@ -34,7 +33,7 @@ function CreatePipelineButton({ setActionMode(ActionMode.Editing); setActionType(ActionType.AddPipeline); - trackEvent('Logs: Pipelines: Clicked Add New Pipeline', { + logEvent('Logs: Pipelines: Clicked Add New Pipeline', { source: 'signoz-ui', }); }; diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx index 71a2ed9014..17761ad99f 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx @@ -1,6 +1,6 @@ import { PlusCircleOutlined } from '@ant-design/icons'; import { TableLocale } from 'antd/es/table/interface'; -import useAnalytics from 'hooks/analytics/useAnalytics'; +import logEvent from 'api/common/logEvent'; import { useIsDarkMode } from 'hooks/useDarkMode'; import React, { useCallback, useMemo } from 'react'; import { DndProvider } from 'react-dnd'; @@ -39,7 +39,6 @@ function PipelineExpandView({ }: PipelineExpandViewProps): JSX.Element { const { t } = useTranslation(['pipeline']); const isDarkMode = useIsDarkMode(); - const { trackEvent } = useAnalytics(); const isEditingActionMode = isActionMode === ActionMode.Editing; const deleteProcessorHandler = useCallback( @@ -192,7 +191,7 @@ function PipelineExpandView({ const addNewProcessorHandler = useCallback((): void => { setActionType(ActionType.AddProcessor); - trackEvent('Logs: Pipelines: Clicked Add New Processor', { + logEvent('Logs: Pipelines: Clicked Add New Processor', { source: 'signoz-ui', }); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx index 4e8def2e0c..aa39c9e2aa 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx @@ -5,7 +5,6 @@ import { Card, Modal, Table, Typography } from 'antd'; import { ExpandableConfig } from 'antd/es/table/interface'; import logEvent from 'api/common/logEvent'; import savePipeline from 'api/pipeline/post'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useNotifications } from 'hooks/useNotifications'; import { isUndefined } from 'lodash-es'; import cloneDeep from 'lodash-es/cloneDeep'; @@ -100,7 +99,6 @@ function PipelineListsView({ const [modal, contextHolder] = Modal.useModal(); const { notifications } = useNotifications(); const [pipelineSearchValue, setPipelineSearchValue] = useState(''); - const { trackEvent } = useAnalytics(); const [prevPipelineData, setPrevPipelineData] = useState>( cloneDeep(pipelineData?.pipelines || []), ); @@ -376,7 +374,7 @@ function PipelineListsView({ const addNewPipelineHandler = useCallback((): void => { setActionType(ActionType.AddPipeline); - trackEvent('Logs: Pipelines: Clicked Add New Pipeline', { + logEvent('Logs: Pipelines: Clicked Add New Pipeline', { source: 'signoz-ui', }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -415,7 +413,7 @@ function PipelineListsView({ setCurrPipelineData(pipelinesInDB); setPrevPipelineData(pipelinesInDB); - trackEvent('Logs: Pipelines: Saved Pipelines', { + logEvent('Logs: Pipelines: Saved Pipelines', { count: pipelinesInDB.length, enabled: pipelinesInDB.filter((p) => p.enabled).length, source: 'signoz-ui', diff --git a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx index d4796b3609..8aaa4a092b 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx @@ -1,15 +1,13 @@ import { EyeFilled } from '@ant-design/icons'; import { Divider, Modal } from 'antd'; +import logEvent from 'api/common/logEvent'; import PipelineProcessingPreview from 'container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useState } from 'react'; import { PipelineData } from 'types/api/pipeline/def'; import { iconStyle } from '../../../config'; function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null { - const { trackEvent } = useAnalytics(); - const [previewKey, setPreviewKey] = useState(null); const isModalOpen = Boolean(previewKey); @@ -23,7 +21,7 @@ function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null { const onOpenPreview = (): void => { openModal(); - trackEvent('Logs: Pipelines: Clicked Preview Pipeline', { + logEvent('Logs: Pipelines: Clicked Preview Pipeline', { source: 'signoz-ui', }); }; diff --git a/frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx b/frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx index 49d0a132ea..33ec54e3a0 100644 --- a/frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx +++ b/frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx @@ -1,5 +1,6 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import logEvent from 'api/common/logEvent'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { MemoryRouter } from 'react-router-dom'; @@ -9,14 +10,7 @@ import store from 'store'; import CreatePipelineButton from '../Layouts/Pipeline/CreatePipelineButton'; import { pipelineApiResponseMockData } from '../mocks/pipeline'; -const trackEventVar = jest.fn(); -jest.mock('hooks/analytics/useAnalytics', () => ({ - __esModule: true, - default: jest.fn().mockImplementation(() => ({ - trackEvent: trackEventVar, - trackPageView: jest.fn(), - })), -})); +jest.mock('api/common/logEvent'); describe('PipelinePage container test', () => { it('should render CreatePipelineButton section', async () => { @@ -58,7 +52,7 @@ describe('PipelinePage container test', () => { expect(editButton).toBeInTheDocument(); await userEvent.click(editButton); - expect(trackEventVar).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', { + expect(logEvent).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', { source: 'signoz-ui', }); }); @@ -83,11 +77,8 @@ describe('PipelinePage container test', () => { expect(editButton).toBeInTheDocument(); await userEvent.click(editButton); - expect(trackEventVar).toBeCalledWith( - 'Logs: Pipelines: Clicked Add New Pipeline', - { - source: 'signoz-ui', - }, - ); + expect(logEvent).toBeCalledWith('Logs: Pipelines: Clicked Add New Pipeline', { + source: 'signoz-ui', + }); }); }); diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx index f645653883..07955018bf 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx @@ -4,7 +4,6 @@ import { Button, Typography } from 'antd'; import logEvent from 'api/common/logEvent'; import cx from 'classnames'; import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils'; import { useEffect, useState } from 'react'; @@ -18,8 +17,6 @@ function Configure(props: ConfigurationProps): JSX.Element { const { configuration, integrationId } = props; const [selectedConfigStep, setSelectedConfigStep] = useState(0); - const { trackEvent } = useAnalytics(); - const handleMenuClick = (index: number, config: any): void => { setSelectedConfigStep(index); logEvent('Integrations Detail Page: Configure tab', { @@ -29,7 +26,7 @@ function Configure(props: ConfigurationProps): JSX.Element { }; useEffect(() => { - trackEvent( + logEvent( INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION, { integration: integrationId, diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx index 6d15fc8694..97ac3e11c8 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx @@ -2,12 +2,12 @@ import './IntegrationDetailPage.styles.scss'; import { Button, Modal, Tooltip, Typography } from 'antd'; +import logEvent from 'api/common/logEvent'; import installIntegration from 'api/Integrations/installIntegration'; import ConfigureIcon from 'assets/Integrations/ConfigureIcon'; import cx from 'classnames'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import dayjs from 'dayjs'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useNotifications } from 'hooks/useNotifications'; import { ArrowLeftRight, Check } from 'lucide-react'; import { useState } from 'react'; @@ -43,8 +43,6 @@ function IntegrationDetailHeader( } = props; const [isModalOpen, setIsModalOpen] = useState(false); - const { trackEvent } = useAnalytics(); - const { notifications } = useNotifications(); const showModal = (): void => { @@ -137,11 +135,11 @@ function IntegrationDetailHeader( disabled={isInstallLoading} onClick={(): void => { if (connectionState === ConnectionStates.NotInstalled) { - trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, { + logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, { integration: id, }); } else { - trackEvent( + logEvent( INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_TEST_CONNECTION, { integration: id, diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx index a1ad762ec6..557327a19b 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx @@ -1,9 +1,9 @@ import './IntegrationDetailPage.styles.scss'; import { Button, Modal, Typography } from 'antd'; +import logEvent from 'api/common/logEvent'; import unInstallIntegration from 'api/Integrations/uninstallIntegration'; import { SOMETHING_WENT_WRONG } from 'constants/api'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import { useNotifications } from 'hooks/useNotifications'; import { X } from 'lucide-react'; import { useState } from 'react'; @@ -30,8 +30,6 @@ function IntergrationsUninstallBar( const { notifications } = useNotifications(); const [isModalOpen, setIsModalOpen] = useState(false); - const { trackEvent } = useAnalytics(); - const { mutate: uninstallIntegration, isLoading: isUninstallLoading, @@ -52,7 +50,7 @@ function IntergrationsUninstallBar( }; const handleOk = (): void => { - trackEvent( + logEvent( INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_REMOVE_INTEGRATION, { integration: integrationId, diff --git a/frontend/src/pages/Integrations/Integrations.tsx b/frontend/src/pages/Integrations/Integrations.tsx index 8fdc943f77..d8bd318ae5 100644 --- a/frontend/src/pages/Integrations/Integrations.tsx +++ b/frontend/src/pages/Integrations/Integrations.tsx @@ -1,6 +1,6 @@ import './Integrations.styles.scss'; -import useAnalytics from 'hooks/analytics/useAnalytics'; +import logEvent from 'api/common/logEvent'; import useUrlQuery from 'hooks/useUrlQuery'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; @@ -16,8 +16,6 @@ function Integrations(): JSX.Element { const history = useHistory(); const location = useLocation(); - const { trackEvent } = useAnalytics(); - const selectedIntegration = useMemo(() => urlQuery.get('integration'), [ urlQuery, ]); @@ -25,7 +23,7 @@ function Integrations(): JSX.Element { const setSelectedIntegration = useCallback( (integration: string | null) => { if (integration) { - trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, { + logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, { integration, }); urlQuery.set('integration', integration); @@ -35,7 +33,7 @@ function Integrations(): JSX.Element { const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; history.push(generatedUrl); }, - [history, location.pathname, trackEvent, urlQuery], + [history, location.pathname, urlQuery], ); const [activeDetailTab, setActiveDetailTab] = useState( @@ -43,7 +41,7 @@ function Integrations(): JSX.Element { ); useEffect(() => { - trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED); + logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED, {}); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx index 35cca11603..84329a1626 100644 --- a/frontend/src/pages/SignUp/SignUp.tsx +++ b/frontend/src/pages/SignUp/SignUp.tsx @@ -1,4 +1,5 @@ import { Button, Form, Input, Space, Switch, Typography } from 'antd'; +import logEvent from 'api/common/logEvent'; import editOrg from 'api/user/editOrg'; import getInviteDetails from 'api/user/getInviteDetails'; import loginApi from 'api/user/login'; @@ -7,7 +8,6 @@ import afterLogin from 'AppRoutes/utils'; import WelcomeLeftContainer from 'components/WelcomeLeftContainer'; import { FeatureKeys } from 'constants/features'; import ROUTES from 'constants/routes'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import useFeatureFlag from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; @@ -57,7 +57,6 @@ function SignUp({ version }: SignUpProps): JSX.Element { false, ); const { search } = useLocation(); - const { trackEvent } = useAnalytics(); const params = new URLSearchParams(search); const token = params.get('token'); const [isDetailsDisable, setIsDetailsDisable] = useState(false); @@ -88,7 +87,7 @@ function SignUp({ version }: SignUpProps): JSX.Element { form.setFieldValue('organizationName', responseDetails.organization); setIsDetailsDisable(true); - trackEvent('Account Creation Page Visited', { + logEvent('Account Creation Page Visited', { email: responseDetails.email, name: responseDetails.name, company_name: responseDetails.organization, @@ -241,7 +240,7 @@ function SignUp({ version }: SignUpProps): JSX.Element { setLoading(true); if (!isPasswordValid(values.password)) { - trackEvent('Account Creation Page - Invalid Password', { + logEvent('Account Creation Page - Invalid Password', { email: values.email, name: values.firstName, }); @@ -253,7 +252,7 @@ function SignUp({ version }: SignUpProps): JSX.Element { if (isPreferenceVisible) { await commonHandler(values, onAdminAfterLogin); } else { - trackEvent('Account Created Successfully', { + logEvent('Account Created Successfully', { email: values.email, name: values.firstName, }); diff --git a/frontend/src/pages/Support/Support.tsx b/frontend/src/pages/Support/Support.tsx index 2d156a3816..08a8b4602a 100644 --- a/frontend/src/pages/Support/Support.tsx +++ b/frontend/src/pages/Support/Support.tsx @@ -1,7 +1,7 @@ import './Support.styles.scss'; import { Button, Card, Typography } from 'antd'; -import useAnalytics from 'hooks/analytics/useAnalytics'; +import logEvent from 'api/common/logEvent'; import { Book, Cable, @@ -85,7 +85,6 @@ const supportChannels = [ ]; export default function Support(): JSX.Element { - const { trackEvent } = useAnalytics(); const history = useHistory(); const handleChannelWithRedirects = (url: string): void => { @@ -97,7 +96,7 @@ export default function Support(): JSX.Element { const histroyState = history?.location?.state as any; if (histroyState && histroyState?.from) { - trackEvent(`Support : From URL : ${histroyState.from}`); + logEvent(`Support : From URL : ${histroyState.from}`, {}); } } @@ -129,7 +128,7 @@ export default function Support(): JSX.Element { }; const handleChannelClick = (channel: Channel): void => { - trackEvent(`Support : ${channel.name}`); + logEvent(`Support : ${channel.name}`, {}); switch (channel.key) { case channelsMap.documentation: diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx index 4dcc055235..0cc3990af7 100644 --- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx +++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx @@ -8,10 +8,10 @@ import { } from '@ant-design/icons'; import { Button, Card, Skeleton, Typography } from 'antd'; import updateCreditCardApi from 'api/billing/checkout'; +import logEvent from 'api/common/logEvent'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import ROUTES from 'constants/routes'; import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader'; -import useAnalytics from 'hooks/analytics/useAnalytics'; import useLicense from 'hooks/useLicense'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; @@ -27,7 +27,6 @@ export default function WorkspaceBlocked(): JSX.Element { const { role } = useSelector((state) => state.app); const isAdmin = role === 'ADMIN'; const [activeLicense, setActiveLicense] = useState(null); - const { trackEvent } = useAnalytics(); const { notifications } = useNotifications(); @@ -74,7 +73,7 @@ export default function WorkspaceBlocked(): JSX.Element { ); const handleUpdateCreditCard = useCallback(async () => { - trackEvent('Workspace Blocked: User Clicked Update Credit Card'); + logEvent('Workspace Blocked: User Clicked Update Credit Card', {}); updateCreditCard({ licenseKey: activeLicense?.key || '', @@ -85,7 +84,7 @@ export default function WorkspaceBlocked(): JSX.Element { }, [activeLicense?.key, updateCreditCard]); const handleExtendTrial = (): void => { - trackEvent('Workspace Blocked: User Clicked Extend Trial'); + logEvent('Workspace Blocked: User Clicked Extend Trial', {}); notifications.info({ message: 'Extend Trial',