GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 06:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: move from trackEvent to logEvent (#5530)

Browse Source 
* chore: move from trackEvent to logEvent

* feat: update test cases
This commit is contained in:
Yunus M 2024-07-23 16:32:45 +05:30 committed by GitHub
parent ef8b50c19e
commit 6957bd71ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 71 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/AppRoutes/index.tsx
View File

@ -1,6 +1,7 @@
import { ConfigProvider } from 'antd'; import { ConfigProvider } from 'antd';
import getLocalStorageApi from 'api/browser/localstorage/get'; import getLocalStorageApi from 'api/browser/localstorage/get';
import setLocalStorageApi from 'api/browser/localstorage/set'; import setLocalStorageApi from 'api/browser/localstorage/set';
import logEvent from 'api/common/logEvent';
import NotFound from 'components/NotFound'; import NotFound from 'components/NotFound';
import Spinner from 'components/Spinner'; import Spinner from 'components/Spinner';
import { FeatureKeys } from 'constants/features'; import { FeatureKeys } from 'constants/features';
@ -48,7 +49,7 @@ function App(): JSX.Element {
const dispatch = useDispatch<Dispatch<AppActions>>(); const dispatch = useDispatch<Dispatch<AppActions>>();
const { trackPageView, trackEvent } = useAnalytics(); const { trackPageView } = useAnalytics();
const { hostname, pathname } = window.location; const { hostname, pathname } = window.location;
@ -199,7 +200,7 @@ function App(): JSX.Element {
LOCALSTORAGE.THEME_ANALYTICS_V1, LOCALSTORAGE.THEME_ANALYTICS_V1,
); );
if (!isThemeAnalyticsSent) { if (!isThemeAnalyticsSent) {
trackEvent('Theme Analytics', { logEvent('Theme Analytics', {
theme: isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT, theme: isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT,
user: pick(user, ['email', 'userId', 'name']), user: pick(user, ['email', 'userId', 'name']),
org, org,

8
frontend/src/container/BillingContainer/BillingContainer.tsx
View File

@ -19,10 +19,10 @@ import { ColumnsType } from 'antd/es/table';
import updateCreditCardApi from 'api/billing/checkout'; import updateCreditCardApi from 'api/billing/checkout';
import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage'; import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
import manageCreditCardApi from 'api/billing/manage'; import manageCreditCardApi from 'api/billing/manage';
import logEvent from 'api/common/logEvent';
import Spinner from 'components/Spinner'; import Spinner from 'components/Spinner';
import { SOMETHING_WENT_WRONG } from 'constants/api'; import { SOMETHING_WENT_WRONG } from 'constants/api';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import useAnalytics from 'hooks/analytics/useAnalytics';
import useAxiosError from 'hooks/useAxiosError'; import useAxiosError from 'hooks/useAxiosError';
import useLicense from 'hooks/useLicense'; import useLicense from 'hooks/useLicense';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
@ -137,8 +137,6 @@ export default function BillingContainer(): JSX.Element {
Partial<UsageResponsePayloadProps> Partial<UsageResponsePayloadProps>
>({}); >({});
const { trackEvent } = useAnalytics();
const { isFetching, data: licensesData, error: licenseError } = useLicense(); const { isFetching, data: licensesData, error: licenseError } = useLicense();
const { user, org } = useSelector<AppState, AppReducer>((state) => state.app); const { user, org } = useSelector<AppState, AppReducer>((state) => state.app);
@ -316,7 +314,7 @@ export default function BillingContainer(): JSX.Element {
const handleBilling = useCallback(async () => { const handleBilling = useCallback(async () => {
if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) { if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) {
trackEvent('Billing : Upgrade Plan', { logEvent('Billing : Upgrade Plan', {
user: pick(user, ['email', 'userId', 'name']), user: pick(user, ['email', 'userId', 'name']),
org, org,
}); });
@ -327,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
cancelURL: window.location.href, cancelURL: window.location.href,
}); });
} else { } else {
trackEvent('Billing : Manage Billing', { logEvent('Billing : Manage Billing', {
user: pick(user, ['email', 'userId', 'name']), user: pick(user, ['email', 'userId', 'name']),
org, org,
}); });

6
frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
View File

@ -11,7 +11,6 @@ import ROUTES from 'constants/routes';
import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader'; import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal'; import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal';
import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer'; import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer';
import useAnalytics from 'hooks/analytics/useAnalytics';
import history from 'lib/history'; import history from 'lib/history';
import { UserPlus } from 'lucide-react'; import { UserPlus } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
@ -104,7 +103,6 @@ export default function Onboarding(): JSX.Element {
const [selectedModuleSteps, setSelectedModuleSteps] = useState(APM_STEPS); const [selectedModuleSteps, setSelectedModuleSteps] = useState(APM_STEPS);
const [activeStep, setActiveStep] = useState(1); const [activeStep, setActiveStep] = useState(1);
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const { trackEvent } = useAnalytics();
const { location } = history; const { location } = history;
const { t } = useTranslation(['onboarding']); const { t } = useTranslation(['onboarding']);
@ -120,7 +118,7 @@ export default function Onboarding(): JSX.Element {
} = useOnboardingContext(); } = useOnboardingContext();
useEffectOnce(() => { useEffectOnce(() => {
trackEvent('Onboarding V2 Started'); logEvent('Onboarding V2 Started', {});
}); });
const { status, data: ingestionData } = useQuery({ const { status, data: ingestionData } = useQuery({
@ -231,7 +229,7 @@ export default function Onboarding(): JSX.Element {
const nextStep = activeStep + 1; const nextStep = activeStep + 1;
// on next // on next
trackEvent('Onboarding V2: Get Started', { logEvent('Onboarding V2: Get Started', {
selectedModule: selectedModule.id, selectedModule: selectedModule.id,
nextStepId: nextStep, nextStepId: nextStep,
}); });

8
frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx
View File

@ -5,9 +5,9 @@ import {
CloseCircleTwoTone, CloseCircleTwoTone,
LoadingOutlined, LoadingOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import logEvent from 'api/common/logEvent';
import Header from 'container/OnboardingContainer/common/Header/Header'; import Header from 'container/OnboardingContainer/common/Header/Header';
import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext'; import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useQueryService } from 'hooks/useQueryService'; import { useQueryService } from 'hooks/useQueryService';
import useResourceAttribute from 'hooks/useResourceAttribute'; import useResourceAttribute from 'hooks/useResourceAttribute';
import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils'; import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
@ -41,8 +41,6 @@ export default function ConnectionStatus(): JSX.Element {
[queries], [queries],
); );
const { trackEvent } = useAnalytics();
const [retryCount, setRetryCount] = useState(20); // Retry for 3 mins 20s const [retryCount, setRetryCount] = useState(20); // Retry for 3 mins 20s
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isReceivingData, setIsReceivingData] = useState(false); const [isReceivingData, setIsReceivingData] = useState(false);
@ -155,7 +153,7 @@ export default function ConnectionStatus(): JSX.Element {
if (data || isError) { if (data || isError) {
setRetryCount(retryCount - 1); setRetryCount(retryCount - 1);
if (retryCount < 0) { if (retryCount < 0) {
trackEvent('Onboarding V2: Connection Status', { logEvent('Onboarding V2: Connection Status', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,
@ -174,7 +172,7 @@ export default function ConnectionStatus(): JSX.Element {
setLoading(false); setLoading(false);
setIsReceivingData(true); setIsReceivingData(true);
trackEvent('Onboarding V2: Connection Status', { logEvent('Onboarding V2: Connection Status', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,

7
frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx
View File

@ -5,11 +5,11 @@ import {
CloseCircleTwoTone, CloseCircleTwoTone,
LoadingOutlined, LoadingOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import logEvent from 'api/common/logEvent';
import { DEFAULT_ENTITY_VERSION } from 'constants/app'; import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder'; import { PANEL_TYPES } from 'constants/queryBuilder';
import Header from 'container/OnboardingContainer/common/Header/Header'; import Header from 'container/OnboardingContainer/common/Header/Header';
import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext'; import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange'; import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { SuccessResponse } from 'types/api'; import { SuccessResponse } from 'types/api';
@ -32,7 +32,6 @@ export default function LogsConnectionStatus(): JSX.Element {
activeStep, activeStep,
selectedEnvironment, selectedEnvironment,
} = useOnboardingContext(); } = useOnboardingContext();
const { trackEvent } = useAnalytics();
const [isReceivingData, setIsReceivingData] = useState(false); const [isReceivingData, setIsReceivingData] = useState(false);
const [pollingInterval, setPollingInterval] = useState<number | false>(15000); // initial Polling interval of 15 secs , Set to false after 5 mins const [pollingInterval, setPollingInterval] = useState<number | false>(15000); // initial Polling interval of 15 secs , Set to false after 5 mins
const [retryCount, setRetryCount] = useState(20); // Retry for 5 mins const [retryCount, setRetryCount] = useState(20); // Retry for 5 mins
@ -105,7 +104,7 @@ export default function LogsConnectionStatus(): JSX.Element {
setRetryCount(retryCount - 1); setRetryCount(retryCount - 1);
if (retryCount < 0) { if (retryCount < 0) {
trackEvent('Onboarding V2: Connection Status', { logEvent('Onboarding V2: Connection Status', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
@ -141,7 +140,7 @@ export default function LogsConnectionStatus(): JSX.Element {
setRetryCount(-1); setRetryCount(-1);
setPollingInterval(false); setPollingInterval(false);
trackEvent('Onboarding V2: Connection Status', { logEvent('Onboarding V2: Connection Status', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,

46
frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
View File

@ -15,7 +15,6 @@ import ROUTES from 'constants/routes';
import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig'; import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig';
import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource'; import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource';
import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils'; import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils';
import useAnalytics from 'hooks/analytics/useAnalytics';
import history from 'lib/history'; import history from 'lib/history';
import { isEmpty, isNull } from 'lodash-es'; import { isEmpty, isNull } from 'lodash-es';
import { HelpCircle, UserPlus } from 'lucide-react'; import { HelpCircle, UserPlus } from 'lucide-react';
@ -79,7 +78,6 @@ export default function ModuleStepsContainer({
} = useOnboardingContext(); } = useOnboardingContext();
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const { trackEvent } = useAnalytics();
const [metaData, setMetaData] = useState<MetaDataProps[]>(defaultMetaData); const [metaData, setMetaData] = useState<MetaDataProps[]>(defaultMetaData);
const lastStepIndex = selectedModuleSteps.length - 1; const lastStepIndex = selectedModuleSteps.length - 1;
@ -143,7 +141,7 @@ export default function ModuleStepsContainer({
}; };
const redirectToModules = (): void => { const redirectToModules = (): void => {
trackEvent('Onboarding V2 Complete', { logEvent('Onboarding V2 Complete', {
module: selectedModule.id, module: selectedModule.id,
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
@ -186,14 +184,14 @@ export default function ModuleStepsContainer({
// on next step click track events // on next step click track events
switch (selectedModuleSteps[current].id) { switch (selectedModuleSteps[current].id) {
case stepsMap.dataSource: case stepsMap.dataSource:
trackEvent('Onboarding V2: Data Source Selected', { logEvent('Onboarding V2: Data Source Selected', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.environmentDetails: case stepsMap.environmentDetails:
trackEvent('Onboarding V2: Environment Selected', { logEvent('Onboarding V2: Environment Selected', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,
@ -201,7 +199,7 @@ export default function ModuleStepsContainer({
}); });
break; break;
case stepsMap.selectMethod: case stepsMap.selectMethod:
trackEvent('Onboarding V2: Method Selected', { logEvent('Onboarding V2: Method Selected', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,
@ -211,7 +209,7 @@ export default function ModuleStepsContainer({
break; break;
case stepsMap.setupOtelCollector: case stepsMap.setupOtelCollector:
trackEvent('Onboarding V2: Setup Otel Collector', { logEvent('Onboarding V2: Setup Otel Collector', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,
@ -220,7 +218,7 @@ export default function ModuleStepsContainer({
}); });
break; break;
case stepsMap.instrumentApplication: case stepsMap.instrumentApplication:
trackEvent('Onboarding V2: Instrument Application', { logEvent('Onboarding V2: Instrument Application', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,
@ -229,13 +227,13 @@ export default function ModuleStepsContainer({
}); });
break; break;
case stepsMap.cloneRepository: case stepsMap.cloneRepository:
trackEvent('Onboarding V2: Clone Repository', { logEvent('Onboarding V2: Clone Repository', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.runApplication: case stepsMap.runApplication:
trackEvent('Onboarding V2: Run Application', { logEvent('Onboarding V2: Run Application', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
framework: selectedFramework, framework: selectedFramework,
environment: selectedEnvironment, environment: selectedEnvironment,
@ -244,95 +242,95 @@ export default function ModuleStepsContainer({
}); });
break; break;
case stepsMap.addHttpDrain: case stepsMap.addHttpDrain:
trackEvent('Onboarding V2: Add HTTP Drain', { logEvent('Onboarding V2: Add HTTP Drain', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.startContainer: case stepsMap.startContainer:
trackEvent('Onboarding V2: Start Container', { logEvent('Onboarding V2: Start Container', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.setupLogDrains: case stepsMap.setupLogDrains:
trackEvent('Onboarding V2: Setup Log Drains', { logEvent('Onboarding V2: Setup Log Drains', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.configureReceiver: case stepsMap.configureReceiver:
trackEvent('Onboarding V2: Configure Receiver', { logEvent('Onboarding V2: Configure Receiver', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.configureAws: case stepsMap.configureAws:
trackEvent('Onboarding V2: Configure AWS', { logEvent('Onboarding V2: Configure AWS', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.sendLogsCloudwatch: case stepsMap.sendLogsCloudwatch:
trackEvent('Onboarding V2: Send Logs Cloudwatch', { logEvent('Onboarding V2: Send Logs Cloudwatch', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.setupDaemonService: case stepsMap.setupDaemonService:
trackEvent('Onboarding V2: Setup ECS Daemon Service', { logEvent('Onboarding V2: Setup ECS Daemon Service', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.createOtelConfig: case stepsMap.createOtelConfig:
trackEvent('Onboarding V2: Create ECS OTel Config', { logEvent('Onboarding V2: Create ECS OTel Config', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.createDaemonService: case stepsMap.createDaemonService:
trackEvent('Onboarding V2: Create ECS Daemon Service', { logEvent('Onboarding V2: Create ECS Daemon Service', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.ecsSendData: case stepsMap.ecsSendData:
trackEvent('Onboarding V2: ECS send traces data', { logEvent('Onboarding V2: ECS send traces data', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.createSidecarCollectorContainer: case stepsMap.createSidecarCollectorContainer:
trackEvent('Onboarding V2: ECS create Sidecar Container', { logEvent('Onboarding V2: ECS create Sidecar Container', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.deployTaskDefinition: case stepsMap.deployTaskDefinition:
trackEvent('Onboarding V2: ECS deploy task definition', { logEvent('Onboarding V2: ECS deploy task definition', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.ecsSendLogsData: case stepsMap.ecsSendLogsData:
trackEvent('Onboarding V2: ECS Fargate send logs data', { logEvent('Onboarding V2: ECS Fargate send logs data', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,
}); });
break; break;
case stepsMap.monitorDashboard: case stepsMap.monitorDashboard:
trackEvent('Onboarding V2: EKS monitor dashboard', { logEvent('Onboarding V2: EKS monitor dashboard', {
dataSource: selectedDataSource?.id, dataSource: selectedDataSource?.id,
environment: selectedEnvironment, environment: selectedEnvironment,
module: activeStep?.module?.id, module: activeStep?.module?.id,

7
frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
View File

@ -1,6 +1,6 @@
import { EditFilled, PlusOutlined } from '@ant-design/icons'; import { EditFilled, PlusOutlined } from '@ant-design/icons';
import logEvent from 'api/common/logEvent';
import TextToolTip from 'components/TextToolTip'; import TextToolTip from 'components/TextToolTip';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ActionMode, ActionType, Pipeline } from 'types/api/pipeline/def'; import { ActionMode, ActionType, Pipeline } from 'types/api/pipeline/def';
@ -15,7 +15,6 @@ function CreatePipelineButton({
pipelineData, pipelineData,
}: CreatePipelineButtonProps): JSX.Element { }: CreatePipelineButtonProps): JSX.Element {
const { t } = useTranslation(['pipeline']); const { t } = useTranslation(['pipeline']);
const { trackEvent } = useAnalytics();
const isAddNewPipelineVisible = useMemo( const isAddNewPipelineVisible = useMemo(
() => checkDataLength(pipelineData?.pipelines), () => checkDataLength(pipelineData?.pipelines),
@ -26,7 +25,7 @@ function CreatePipelineButton({
const onEnterEditMode = (): void => { const onEnterEditMode = (): void => {
setActionMode(ActionMode.Editing); setActionMode(ActionMode.Editing);
trackEvent('Logs: Pipelines: Entered Edit Mode', { logEvent('Logs: Pipelines: Entered Edit Mode', {
source: 'signoz-ui', source: 'signoz-ui',
}); });
}; };
@ -34,7 +33,7 @@ function CreatePipelineButton({
setActionMode(ActionMode.Editing); setActionMode(ActionMode.Editing);
setActionType(ActionType.AddPipeline); setActionType(ActionType.AddPipeline);
trackEvent('Logs: Pipelines: Clicked Add New Pipeline', { logEvent('Logs: Pipelines: Clicked Add New Pipeline', {
source: 'signoz-ui', source: 'signoz-ui',
}); });
}; };

5
frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx
View File

@ -1,6 +1,6 @@
import { PlusCircleOutlined } from '@ant-design/icons'; import { PlusCircleOutlined } from '@ant-design/icons';
import { TableLocale } from 'antd/es/table/interface'; 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 { useIsDarkMode } from 'hooks/useDarkMode';
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import { DndProvider } from 'react-dnd'; import { DndProvider } from 'react-dnd';
@ -39,7 +39,6 @@ function PipelineExpandView({
}: PipelineExpandViewProps): JSX.Element { }: PipelineExpandViewProps): JSX.Element {
const { t } = useTranslation(['pipeline']); const { t } = useTranslation(['pipeline']);
const isDarkMode = useIsDarkMode(); const isDarkMode = useIsDarkMode();
const { trackEvent } = useAnalytics();
const isEditingActionMode = isActionMode === ActionMode.Editing; const isEditingActionMode = isActionMode === ActionMode.Editing;
const deleteProcessorHandler = useCallback( const deleteProcessorHandler = useCallback(
@ -192,7 +191,7 @@ function PipelineExpandView({
const addNewProcessorHandler = useCallback((): void => { const addNewProcessorHandler = useCallback((): void => {
setActionType(ActionType.AddProcessor); setActionType(ActionType.AddProcessor);
trackEvent('Logs: Pipelines: Clicked Add New Processor', { logEvent('Logs: Pipelines: Clicked Add New Processor', {
source: 'signoz-ui', source: 'signoz-ui',
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

6
frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
View File

@ -5,7 +5,6 @@ import { Card, Modal, Table, Typography } from 'antd';
import { ExpandableConfig } from 'antd/es/table/interface'; import { ExpandableConfig } from 'antd/es/table/interface';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
import savePipeline from 'api/pipeline/post'; import savePipeline from 'api/pipeline/post';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import { isUndefined } from 'lodash-es'; import { isUndefined } from 'lodash-es';
import cloneDeep from 'lodash-es/cloneDeep'; import cloneDeep from 'lodash-es/cloneDeep';
@ -100,7 +99,6 @@ function PipelineListsView({
const [modal, contextHolder] = Modal.useModal(); const [modal, contextHolder] = Modal.useModal();
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const [pipelineSearchValue, setPipelineSearchValue] = useState<string>(''); const [pipelineSearchValue, setPipelineSearchValue] = useState<string>('');
const { trackEvent } = useAnalytics();
const [prevPipelineData, setPrevPipelineData] = useState<Array<PipelineData>>( const [prevPipelineData, setPrevPipelineData] = useState<Array<PipelineData>>(
cloneDeep(pipelineData?.pipelines || []), cloneDeep(pipelineData?.pipelines || []),
); );
@ -376,7 +374,7 @@ function PipelineListsView({
const addNewPipelineHandler = useCallback((): void => { const addNewPipelineHandler = useCallback((): void => {
setActionType(ActionType.AddPipeline); setActionType(ActionType.AddPipeline);
trackEvent('Logs: Pipelines: Clicked Add New Pipeline', { logEvent('Logs: Pipelines: Clicked Add New Pipeline', {
source: 'signoz-ui', source: 'signoz-ui',
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -415,7 +413,7 @@ function PipelineListsView({
setCurrPipelineData(pipelinesInDB); setCurrPipelineData(pipelinesInDB);
setPrevPipelineData(pipelinesInDB); setPrevPipelineData(pipelinesInDB);
trackEvent('Logs: Pipelines: Saved Pipelines', { logEvent('Logs: Pipelines: Saved Pipelines', {
count: pipelinesInDB.length, count: pipelinesInDB.length,
enabled: pipelinesInDB.filter((p) => p.enabled).length, enabled: pipelinesInDB.filter((p) => p.enabled).length,
source: 'signoz-ui', source: 'signoz-ui',

6
frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx
View File

@ -1,15 +1,13 @@
import { EyeFilled } from '@ant-design/icons'; import { EyeFilled } from '@ant-design/icons';
import { Divider, Modal } from 'antd'; import { Divider, Modal } from 'antd';
import logEvent from 'api/common/logEvent';
import PipelineProcessingPreview from 'container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview'; import PipelineProcessingPreview from 'container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useState } from 'react'; import { useState } from 'react';
import { PipelineData } from 'types/api/pipeline/def'; import { PipelineData } from 'types/api/pipeline/def';
import { iconStyle } from '../../../config'; import { iconStyle } from '../../../config';
function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null { function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null {
const { trackEvent } = useAnalytics();
const [previewKey, setPreviewKey] = useState<string | null>(null); const [previewKey, setPreviewKey] = useState<string | null>(null);
const isModalOpen = Boolean(previewKey); const isModalOpen = Boolean(previewKey);
@ -23,7 +21,7 @@ function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null {
const onOpenPreview = (): void => { const onOpenPreview = (): void => {
openModal(); openModal();
trackEvent('Logs: Pipelines: Clicked Preview Pipeline', { logEvent('Logs: Pipelines: Clicked Preview Pipeline', {
source: 'signoz-ui', source: 'signoz-ui',
}); });
}; };

21
frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx
View File

@ -1,5 +1,6 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import logEvent from 'api/common/logEvent';
import { I18nextProvider } from 'react-i18next'; import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
@ -9,14 +10,7 @@ import store from 'store';
import CreatePipelineButton from '../Layouts/Pipeline/CreatePipelineButton'; import CreatePipelineButton from '../Layouts/Pipeline/CreatePipelineButton';
import { pipelineApiResponseMockData } from '../mocks/pipeline'; import { pipelineApiResponseMockData } from '../mocks/pipeline';
const trackEventVar = jest.fn(); jest.mock('api/common/logEvent');
jest.mock('hooks/analytics/useAnalytics', () => ({
__esModule: true,
default: jest.fn().mockImplementation(() => ({
trackEvent: trackEventVar,
trackPageView: jest.fn(),
})),
}));
describe('PipelinePage container test', () => { describe('PipelinePage container test', () => {
it('should render CreatePipelineButton section', async () => { it('should render CreatePipelineButton section', async () => {
@ -58,7 +52,7 @@ describe('PipelinePage container test', () => {
expect(editButton).toBeInTheDocument(); expect(editButton).toBeInTheDocument();
await userEvent.click(editButton); await userEvent.click(editButton);
expect(trackEventVar).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', { expect(logEvent).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', {
source: 'signoz-ui', source: 'signoz-ui',
}); });
}); });
@ -83,11 +77,8 @@ describe('PipelinePage container test', () => {
expect(editButton).toBeInTheDocument(); expect(editButton).toBeInTheDocument();
await userEvent.click(editButton); await userEvent.click(editButton);
expect(trackEventVar).toBeCalledWith( expect(logEvent).toBeCalledWith('Logs: Pipelines: Clicked Add New Pipeline', {
'Logs: Pipelines: Clicked Add New Pipeline', source: 'signoz-ui',
{ });
source: 'signoz-ui',
},
);
}); });
}); });

5
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx
View File

@ -4,7 +4,6 @@ import { Button, Typography } from 'antd';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
import cx from 'classnames'; import cx from 'classnames';
import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils'; import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -18,8 +17,6 @@ function Configure(props: ConfigurationProps): JSX.Element {
const { configuration, integrationId } = props; const { configuration, integrationId } = props;
const [selectedConfigStep, setSelectedConfigStep] = useState(0); const [selectedConfigStep, setSelectedConfigStep] = useState(0);
const { trackEvent } = useAnalytics();
const handleMenuClick = (index: number, config: any): void => { const handleMenuClick = (index: number, config: any): void => {
setSelectedConfigStep(index); setSelectedConfigStep(index);
logEvent('Integrations Detail Page: Configure tab', { logEvent('Integrations Detail Page: Configure tab', {
@ -29,7 +26,7 @@ function Configure(props: ConfigurationProps): JSX.Element {
}; };
useEffect(() => { useEffect(() => {
trackEvent( logEvent(
INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION, INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION,
{ {
integration: integrationId, integration: integrationId,

8
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx
View File

@ -2,12 +2,12 @@
import './IntegrationDetailPage.styles.scss'; import './IntegrationDetailPage.styles.scss';
import { Button, Modal, Tooltip, Typography } from 'antd'; import { Button, Modal, Tooltip, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import installIntegration from 'api/Integrations/installIntegration'; import installIntegration from 'api/Integrations/installIntegration';
import ConfigureIcon from 'assets/Integrations/ConfigureIcon'; import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
import cx from 'classnames'; import cx from 'classnames';
import { SOMETHING_WENT_WRONG } from 'constants/api'; import { SOMETHING_WENT_WRONG } from 'constants/api';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import { ArrowLeftRight, Check } from 'lucide-react'; import { ArrowLeftRight, Check } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
@ -43,8 +43,6 @@ function IntegrationDetailHeader(
} = props; } = props;
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const { trackEvent } = useAnalytics();
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const showModal = (): void => { const showModal = (): void => {
@ -137,11 +135,11 @@ function IntegrationDetailHeader(
disabled={isInstallLoading} disabled={isInstallLoading}
onClick={(): void => { onClick={(): void => {
if (connectionState === ConnectionStates.NotInstalled) { if (connectionState === ConnectionStates.NotInstalled) {
trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, { logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, {
integration: id, integration: id,
}); });
} else { } else {
trackEvent( logEvent(
INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_TEST_CONNECTION, INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_TEST_CONNECTION,
{ {
integration: id, integration: id,

6
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx
View File

@ -1,9 +1,9 @@
import './IntegrationDetailPage.styles.scss'; import './IntegrationDetailPage.styles.scss';
import { Button, Modal, Typography } from 'antd'; import { Button, Modal, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import unInstallIntegration from 'api/Integrations/uninstallIntegration'; import unInstallIntegration from 'api/Integrations/uninstallIntegration';
import { SOMETHING_WENT_WRONG } from 'constants/api'; import { SOMETHING_WENT_WRONG } from 'constants/api';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import { X } from 'lucide-react'; import { X } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
@ -30,8 +30,6 @@ function IntergrationsUninstallBar(
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const { trackEvent } = useAnalytics();
const { const {
mutate: uninstallIntegration, mutate: uninstallIntegration,
isLoading: isUninstallLoading, isLoading: isUninstallLoading,
@ -52,7 +50,7 @@ function IntergrationsUninstallBar(
}; };
const handleOk = (): void => { const handleOk = (): void => {
trackEvent( logEvent(
INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_REMOVE_INTEGRATION, INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_REMOVE_INTEGRATION,
{ {
integration: integrationId, integration: integrationId,

10
frontend/src/pages/Integrations/Integrations.tsx
View File

@ -1,6 +1,6 @@
import './Integrations.styles.scss'; import './Integrations.styles.scss';
import useAnalytics from 'hooks/analytics/useAnalytics'; import logEvent from 'api/common/logEvent';
import useUrlQuery from 'hooks/useUrlQuery'; import useUrlQuery from 'hooks/useUrlQuery';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom'; import { useHistory, useLocation } from 'react-router-dom';
@ -16,8 +16,6 @@ function Integrations(): JSX.Element {
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
const { trackEvent } = useAnalytics();
const selectedIntegration = useMemo(() => urlQuery.get('integration'), [ const selectedIntegration = useMemo(() => urlQuery.get('integration'), [
urlQuery, urlQuery,
]); ]);
@ -25,7 +23,7 @@ function Integrations(): JSX.Element {
const setSelectedIntegration = useCallback( const setSelectedIntegration = useCallback(
(integration: string | null) => { (integration: string | null) => {
if (integration) { if (integration) {
trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, { logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, {
integration, integration,
}); });
urlQuery.set('integration', integration); urlQuery.set('integration', integration);
@ -35,7 +33,7 @@ function Integrations(): JSX.Element {
const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
history.push(generatedUrl); history.push(generatedUrl);
}, },
[history, location.pathname, trackEvent, urlQuery], [history, location.pathname, urlQuery],
); );
const [activeDetailTab, setActiveDetailTab] = useState<string | null>( const [activeDetailTab, setActiveDetailTab] = useState<string | null>(
@ -43,7 +41,7 @@ function Integrations(): JSX.Element {
); );
useEffect(() => { useEffect(() => {
trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED); logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED, {});
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);

9
frontend/src/pages/SignUp/SignUp.tsx
View File

@ -1,4 +1,5 @@
import { Button, Form, Input, Space, Switch, Typography } from 'antd'; import { Button, Form, Input, Space, Switch, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import editOrg from 'api/user/editOrg'; import editOrg from 'api/user/editOrg';
import getInviteDetails from 'api/user/getInviteDetails'; import getInviteDetails from 'api/user/getInviteDetails';
import loginApi from 'api/user/login'; import loginApi from 'api/user/login';
@ -7,7 +8,6 @@ import afterLogin from 'AppRoutes/utils';
import WelcomeLeftContainer from 'components/WelcomeLeftContainer'; import WelcomeLeftContainer from 'components/WelcomeLeftContainer';
import { FeatureKeys } from 'constants/features'; import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import useAnalytics from 'hooks/analytics/useAnalytics';
import useFeatureFlag from 'hooks/useFeatureFlag'; import useFeatureFlag from 'hooks/useFeatureFlag';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import history from 'lib/history'; import history from 'lib/history';
@ -57,7 +57,6 @@ function SignUp({ version }: SignUpProps): JSX.Element {
false, false,
); );
const { search } = useLocation(); const { search } = useLocation();
const { trackEvent } = useAnalytics();
const params = new URLSearchParams(search); const params = new URLSearchParams(search);
const token = params.get('token'); const token = params.get('token');
const [isDetailsDisable, setIsDetailsDisable] = useState<boolean>(false); const [isDetailsDisable, setIsDetailsDisable] = useState<boolean>(false);
@ -88,7 +87,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
form.setFieldValue('organizationName', responseDetails.organization); form.setFieldValue('organizationName', responseDetails.organization);
setIsDetailsDisable(true); setIsDetailsDisable(true);
trackEvent('Account Creation Page Visited', { logEvent('Account Creation Page Visited', {
email: responseDetails.email, email: responseDetails.email,
name: responseDetails.name, name: responseDetails.name,
company_name: responseDetails.organization, company_name: responseDetails.organization,
@ -241,7 +240,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
setLoading(true); setLoading(true);
if (!isPasswordValid(values.password)) { if (!isPasswordValid(values.password)) {
trackEvent('Account Creation Page - Invalid Password', { logEvent('Account Creation Page - Invalid Password', {
email: values.email, email: values.email,
name: values.firstName, name: values.firstName,
}); });
@ -253,7 +252,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
if (isPreferenceVisible) { if (isPreferenceVisible) {
await commonHandler(values, onAdminAfterLogin); await commonHandler(values, onAdminAfterLogin);
} else { } else {
trackEvent('Account Created Successfully', { logEvent('Account Created Successfully', {
email: values.email, email: values.email,
name: values.firstName, name: values.firstName,
}); });

7
frontend/src/pages/Support/Support.tsx
View File

@ -1,7 +1,7 @@
import './Support.styles.scss'; import './Support.styles.scss';
import { Button, Card, Typography } from 'antd'; import { Button, Card, Typography } from 'antd';
import useAnalytics from 'hooks/analytics/useAnalytics'; import logEvent from 'api/common/logEvent';
import { import {
Book, Book,
Cable, Cable,
@ -85,7 +85,6 @@ const supportChannels = [
]; ];
export default function Support(): JSX.Element { export default function Support(): JSX.Element {
const { trackEvent } = useAnalytics();
const history = useHistory(); const history = useHistory();
const handleChannelWithRedirects = (url: string): void => { const handleChannelWithRedirects = (url: string): void => {
@ -97,7 +96,7 @@ export default function Support(): JSX.Element {
const histroyState = history?.location?.state as any; const histroyState = history?.location?.state as any;
if (histroyState && histroyState?.from) { 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 => { const handleChannelClick = (channel: Channel): void => {
trackEvent(`Support : ${channel.name}`); logEvent(`Support : ${channel.name}`, {});
switch (channel.key) { switch (channel.key) {
case channelsMap.documentation: case channelsMap.documentation:

7
frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
View File

@ -8,10 +8,10 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Button, Card, Skeleton, Typography } from 'antd'; import { Button, Card, Skeleton, Typography } from 'antd';
import updateCreditCardApi from 'api/billing/checkout'; import updateCreditCardApi from 'api/billing/checkout';
import logEvent from 'api/common/logEvent';
import { SOMETHING_WENT_WRONG } from 'constants/api'; import { SOMETHING_WENT_WRONG } from 'constants/api';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader'; import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
import useAnalytics from 'hooks/analytics/useAnalytics';
import useLicense from 'hooks/useLicense'; import useLicense from 'hooks/useLicense';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import history from 'lib/history'; import history from 'lib/history';
@ -27,7 +27,6 @@ export default function WorkspaceBlocked(): JSX.Element {
const { role } = useSelector<AppState, AppReducer>((state) => state.app); const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const isAdmin = role === 'ADMIN'; const isAdmin = role === 'ADMIN';
const [activeLicense, setActiveLicense] = useState<License | null>(null); const [activeLicense, setActiveLicense] = useState<License | null>(null);
const { trackEvent } = useAnalytics();
const { notifications } = useNotifications(); const { notifications } = useNotifications();
@ -74,7 +73,7 @@ export default function WorkspaceBlocked(): JSX.Element {
); );
const handleUpdateCreditCard = useCallback(async () => { const handleUpdateCreditCard = useCallback(async () => {
trackEvent('Workspace Blocked: User Clicked Update Credit Card'); logEvent('Workspace Blocked: User Clicked Update Credit Card', {});
updateCreditCard({ updateCreditCard({
licenseKey: activeLicense?.key || '', licenseKey: activeLicense?.key || '',
@ -85,7 +84,7 @@ export default function WorkspaceBlocked(): JSX.Element {
}, [activeLicense?.key, updateCreditCard]); }, [activeLicense?.key, updateCreditCard]);
const handleExtendTrial = (): void => { const handleExtendTrial = (): void => {
trackEvent('Workspace Blocked: User Clicked Extend Trial'); logEvent('Workspace Blocked: User Clicked Extend Trial', {});
notifications.info({ notifications.info({
message: 'Extend Trial', message: 'Extend Trial',