feat(frontend): add additional test events (#3455)

kubeshop · Dec 19, 2023 · 1ae8bd5 · 1ae8bd5
1 parent b5f4c75
commit 1ae8bd5
Show file tree

Hide file tree

Showing 20 changed files with 158 additions and 88 deletions.
diff --git a/web/src/components/AnalyzerErrorsPopover/AnalyzerErrorsPopover.tsx b/web/src/components/AnalyzerErrorsPopover/AnalyzerErrorsPopover.tsx
@@ -1,4 +1,5 @@
 import {Popover} from 'antd';
+import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import {TAnalyzerError} from 'types/TestRun.types';
 import * as S from './AnalyzerErrorsPopover.styled';
 import Content from './Content';
@@ -14,7 +15,7 @@ const AnalyzerErrorsPopover = ({errors}: IProps) => (
       placement="right"
       title={<S.Title level={3}>Analyzer errors</S.Title>}
     >
-      <S.ErrorIcon />
+      <S.ErrorIcon onMouseEnter={() => TraceAnalyzerAnalytics.onSpanErrorsClick()} />
     </Popover>
   </S.Container>
 );

diff --git a/web/src/components/AnalyzerResult/Plugins.tsx b/web/src/components/AnalyzerResult/Plugins.tsx
@@ -2,11 +2,12 @@ import {Space, Switch, Typography} from 'antd';
 import {useState} from 'react';
 import {LinterResultPlugin} from 'models/LinterResult.model';
 import Trace from 'models/Trace.model';
+import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import AnalyzerService from 'services/Analyzer.service';
 import * as S from './AnalyzerResult.styled';
 import AnalyzerScore from '../AnalyzerScore/AnalyzerScore';
 import Rule from './Rule';
-import Collapse, { CollapsePanel } from '../Collapse';
+import Collapse, {CollapsePanel} from '../Collapse';
 
 interface IProps {
   plugins: LinterResultPlugin[];
@@ -24,7 +25,7 @@ const Plugins = ({plugins: rawPlugins, trace}: IProps) => {
         <label htmlFor="only_errors_enabled">Show only errors</label>
       </S.SwitchContainer>
 
-      <Collapse>
+      <Collapse onChange={() => TraceAnalyzerAnalytics.onPluginClick()}>
         {plugins.map(plugin => (
           <CollapsePanel
             header={

diff --git a/web/src/components/AnalyzerResult/Rule.tsx b/web/src/components/AnalyzerResult/Rule.tsx
@@ -7,6 +7,7 @@ import Span from 'models/Span.model';
 import {LinterRuleErrorLevel} from 'models/Linter.model';
 import {useAppDispatch} from 'redux/hooks';
 import {selectSpan} from 'redux/slices/Trace.slice';
+import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import * as S from './AnalyzerResult.styled';
 import RuleIcon from './RuleIcon';
 import RuleLink from './RuleLink';
@@ -29,6 +30,7 @@ const Rule = ({
 
   const onSpanResultClick = useCallback(
     (spanId: string) => {
+      TraceAnalyzerAnalytics.onSpanNameClick();
       dispatch(selectSpan({spanId}));
     },
     [dispatch]

diff --git a/web/src/components/AnalyzerResult/RuleLink.tsx b/web/src/components/AnalyzerResult/RuleLink.tsx
@@ -1,4 +1,5 @@
 import {ANALYZER_RULES_DOCUMENTATION_URL} from 'constants/Common.constants';
+import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import * as S from './AnalyzerResult.styled';
 
 interface IProps {
@@ -10,7 +11,11 @@ const RuleLink = ({id, isSmall = false}: IProps) => (
   <div>
     <S.RuleLinkText $isSmall={isSmall}>
       For more information, see{' '}
-      <a href={`${ANALYZER_RULES_DOCUMENTATION_URL}/${id}`} target="_blank">
+      <a
+        href={`${ANALYZER_RULES_DOCUMENTATION_URL}/${id}`}
+        onClick={() => TraceAnalyzerAnalytics.onDocsClick()}
+        target="_blank"
+      >
         analyzer({id})
       </a>
     </S.RuleLinkText>

diff --git a/web/src/components/Collapse/Collapse.tsx b/web/src/components/Collapse/Collapse.tsx
@@ -1,9 +1,14 @@
 import * as S from './Collapse.styled';
 import CollapseIcon from './CollapseIcon';
 
-const Collapse: React.FC = ({children}) => {
+interface IProps {
+  children: React.ReactNode;
+  onChange?(): void;
+}
+
+const Collapse = ({children, onChange}: IProps) => {
   return (
-    <S.StyledCollapse expandIcon={({isActive = false}) => <CollapseIcon isCollapsed={isActive} />}>
+    <S.StyledCollapse expandIcon={({isActive = false}) => <CollapseIcon isCollapsed={isActive} />} onChange={onChange}>
       {children}
     </S.StyledCollapse>
   );

diff --git a/web/src/components/CreateModal/CreateSteps/CreateStepFooter.tsx b/web/src/components/CreateModal/CreateSteps/CreateStepFooter.tsx
@@ -1,6 +1,6 @@
 import {Button} from 'antd';
 import {ICreateTestStep} from 'types/Plugins.types';
-import CreateTestAnalyticsService from '../../../services/Analytics/CreateTestAnalytics.service';
+import CreateTestSuiteAnalytics from 'services/Analytics/CreateTestSuite.service';
 import * as S from './CreateSteps.styled';
 
 interface IProps {
@@ -23,7 +23,7 @@ const CreateStepFooter = ({isValid, stepNumber, step, isLastStep, onPrev, isLoad
             type="primary"
             ghost
             onClick={() => {
-              CreateTestAnalyticsService.onPrevClick(step.name);
+              CreateTestSuiteAnalytics.onPrevClick(step.name);
               onPrev();
             }}
           >
@@ -39,15 +39,15 @@ const CreateStepFooter = ({isValid, stepNumber, step, isLastStep, onPrev, isLoad
             data-cy={`${mode}-create-next-button`}
             disabled={!isValid}
             type="primary"
-            onClick={() => CreateTestAnalyticsService.onNextClick(step.name)}
+            onClick={() => CreateTestSuiteAnalytics.onNextClick(step.name)}
           >
             Next
           </Button>
         ) : (
           <Button
             htmlType="submit"
             form={step.component}
-            onClick={() => CreateTestAnalyticsService.onCreateTestFormSubmit()}
+            onClick={() => CreateTestSuiteAnalytics.onFormSubmit()}
             data-cy={`${mode}-create-create-button`}
             disabled={!isValid}
             type="primary"

diff --git a/web/src/components/CreateTest/CreateTest.tsx b/web/src/components/CreateTest/CreateTest.tsx
@@ -2,6 +2,7 @@ import {Empty, Typography} from 'antd';
 import {TriggerTypes} from 'constants/Test.constants';
 import useShortcut from 'components/TestPlugins/hooks/useShortcut';
 import FormFactory from 'components/TestPlugins/FormFactory';
+import CreateTestAnalytics from 'services/Analytics/CreateTest.service';
 import * as S from './CreateTest.styled';
 import Header from './Header';
 
@@ -16,7 +17,12 @@ const CreateTest = ({isLoading, isValid, triggerType}: IProps) => {
 
   return (
     <S.Container>
-      <Header isLoading={isLoading} isValid={isValid} triggerType={triggerType} />
+      <Header
+        isLoading={isLoading}
+        isValid={isValid}
+        onRunTest={() => CreateTestAnalytics.onFormSubmit()}
+        triggerType={triggerType}
+      />
 
       <S.Body>
         <S.SectionLeft>

diff --git a/web/src/components/CreateTest/Header.tsx b/web/src/components/CreateTest/Header.tsx
@@ -9,10 +9,11 @@ import * as S from './CreateTest.styled';
 interface IProps {
   isLoading: boolean;
   isValid: boolean;
+  onRunTest?(): void;
   triggerType: TriggerTypes;
 }
 
-const Header = ({isLoading, isValid, triggerType}: IProps) => {
+const Header = ({isLoading, isValid, onRunTest, triggerType}: IProps) => {
   const form = Form.useFormInstance();
 
   return (
@@ -29,7 +30,10 @@ const Header = ({isLoading, isValid, triggerType}: IProps) => {
             data-cy="run-test-submit"
             disabled={!isValid}
             loading={isLoading}
-            onClick={() => form.submit()}
+            onClick={() => {
+              onRunTest?.();
+              form.submit();
+            }}
             operation={Operation.Edit}
             type="primary"
           >

diff --git a/web/src/components/DemoSelector/DemoSelector.tsx b/web/src/components/DemoSelector/DemoSelector.tsx
@@ -3,7 +3,7 @@ import {useCallback, useState} from 'react';
 import {Dropdown, Form, Menu} from 'antd';
 import {camelCase} from 'lodash';
 import {IBasicValues, TDraftTest} from 'types/Test.types';
-import CreateTestAnalyticsService from 'services/Analytics/CreateTestAnalytics.service';
+import CreateTestAnalytics from 'services/Analytics/CreateTest.service';
 import {TooltipQuestion} from 'components/TooltipQuestion/TooltipQuestion';
 import * as S from './DemoSelector.styled';
 
@@ -17,7 +17,7 @@ const BasicDetailsDemoHelper = ({demos}: IProps) => {
 
   const onSelectDemo = useCallback(
     ({key}: {key: string}) => {
-      CreateTestAnalyticsService.onDemoTestClick();
+      CreateTestAnalytics.onDemoClick();
       const demo = demos.find(({name}) => name === key)!;
       form.setFieldsValue(demo);
       setSelectedDemo(demo);

diff --git a/web/src/components/ImportModal/ImportModal.tsx b/web/src/components/ImportModal/ImportModal.tsx
@@ -7,6 +7,7 @@ import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import {useCreateTest} from 'providers/CreateTest/CreateTest.provider';
 import {ImportSelector} from 'components/Inputs';
 import ImportFactory from 'components/TestPlugins/ImportFactory';
+import CreateTestAnalytics from 'services/Analytics/CreateTest.service';
 import * as S from './ImportModal.styled';
 import Tip from './Tip';
 
@@ -34,6 +35,7 @@ const ImportModal = ({isOpen, onClose}: IProps) => {
 
   const handleImport = useCallback(
     async (values: TDraftTest) => {
+      CreateTestAnalytics.onImportSelect(type);
       const draft = await ImportService.getRequest(type, values);
       const plugin = await ImportService.getPlugin(type, values);
 

diff --git a/web/src/components/TriggerTypeModal/TriggerTypeModal.tsx b/web/src/components/TriggerTypeModal/TriggerTypeModal.tsx
@@ -1,6 +1,6 @@
 import {CreateTriggerTypeToPlugin} from 'constants/Plugins.constants';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
-import CreateTestAnalyticsService from 'services/Analytics/CreateTestAnalytics.service';
+import CreateTestAnalytics from 'services/Analytics/CreateTest.service';
 import TriggerTypeCard from './TriggerTypeCard';
 import * as S from './TriggerTypeModal.styled';
 
@@ -31,7 +31,7 @@ const TriggerTypeModal = ({isOpen, onClose}: IProps) => {
           <TriggerTypeCard
             key={plugin.name}
             onClick={selectedPlugin => {
-              CreateTestAnalyticsService.onPluginSelected(selectedPlugin.name);
+              CreateTestAnalytics.onTriggerSelect(selectedPlugin.type);
               navigate(`test/create/${selectedPlugin.type}`);
             }}
             plugin={plugin}

diff --git a/web/src/components/Visualization/components/DAG/TraceSpanNode/AnalyzerErrors.tsx b/web/src/components/Visualization/components/DAG/TraceSpanNode/AnalyzerErrors.tsx
@@ -1,5 +1,5 @@
 import {useState} from 'react';
-
+import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import {TAnalyzerError} from 'types/TestRun.types';
 import AnalyzerErrorsPopover from './AnalyzerErrorsPopover';
 import * as S from './AnalyzerErrors.styled';
@@ -13,7 +13,13 @@ const AnalyzerErrors = ({errors}: IProps) => {
 
   return (
     <>
-      <S.ErrorIcon onClick={() => setIsOpen(true)} $isClickable />
+      <S.ErrorIcon
+        onClick={() => {
+          TraceAnalyzerAnalytics.onSpanErrorsClick();
+          setIsOpen(true);
+        }}
+        $isClickable
+      />
       {isOpen && <AnalyzerErrorsPopover errors={errors} onClose={() => setIsOpen(false)} />}
     </>
   );

diff --git a/web/src/constants/Analytics.constants.ts b/web/src/constants/Analytics.constants.ts
@@ -3,6 +3,7 @@ export enum Categories {
   Test = 'test',
   TestRun = 'test-run',
   VariableSet = 'variable-set',
+  TraceAnalyzer = 'trace-analyzer',
   TraceDetail = 'trace-detail',
   TestResults = 'test-results',
   SpanDetail = 'span-detail',

diff --git a/web/src/pages/TestSuites/TestSuites.tsx b/web/src/pages/TestSuites/TestSuites.tsx
@@ -3,7 +3,7 @@ import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provide
 import CreateTestSuiteProvider from 'providers/CreateTestSuite';
 import Content from './Content';
 
-const Home = () => {
+const TestSuites = () => {
   const {isLoading, shouldDisplayConfigSetup, skipConfigSetup} = useSettingsValues();
 
   return (
@@ -17,4 +17,4 @@ const Home = () => {
   );
 };
 
-export default withAnalytics(Home, 'home');
+export default withAnalytics(TestSuites, 'test-suite');
diff --git a/web/src/services/Analytics/Analytics.service.ts b/web/src/services/Analytics/Analytics.service.ts
@@ -3,11 +3,17 @@ import {Categories} from 'constants/Analytics.constants';
 import Env from 'utils/Env';
 
 const isAnalyticsEnabled = () => Env.get('analyticsEnabled') && !Env.get('isTracetestDev');
+const getServerID = () => Env.get('serverID');
 const appVersion = Env.get('appVersion');
 const env = Env.get('env');
-const serverID = Env.get('serverID');
 const measurementId = Env.get('measurementId');
 
+const getTraits = () => ({
+  serverID: getServerID(),
+  ...(appVersion && {appVersion}),
+  ...(env && {env}),
+});
+
 export const analytics = new AnalyticsBrowser();
 
 type TAnalyticsService = {
@@ -21,28 +27,18 @@ const AnalyticsService = (): TAnalyticsService => ({
   event<A>(category: Categories, action: A, label: string) {
     if (!isAnalyticsEnabled()) return;
     analytics.track(String(action), {
-      serverID,
-      appVersion,
-      env,
+      ...getTraits(),
       label,
       category,
     });
   },
   page(name: string) {
     if (!isAnalyticsEnabled()) return;
-    analytics.page(name, {
-      serverID,
-      appVersion,
-      env,
-    });
+    analytics.page(name, getTraits());
   },
   identify() {
     if (!isAnalyticsEnabled()) return;
-    analytics.identify({
-      serverID,
-      appVersion,
-      env,
-    });
+    analytics.identify(getServerID(), getTraits());
   },
   load() {
     const isSegmentLoaded = Env.get('segmentLoaded');

diff --git a/web/src/services/Analytics/CreateTest.service.ts b/web/src/services/Analytics/CreateTest.service.ts
@@ -0,0 +1,33 @@
+import {Categories, Labels} from 'constants/Analytics.constants';
+import AnalyticsService from './Analytics.service';
+
+enum Actions {
+  FormSubmit = 'create-test-form-submit',
+  DemoClick = 'create-test-demo-click',
+  TriggerTypeSelect = 'create-test-trigger-type-select',
+  ImportTypeSelect = 'create-test-import-type-select',
+}
+
+type TCreateTestAnalytics = {
+  onFormSubmit(): void;
+  onDemoClick(): void;
+  onTriggerSelect(triggerType: string): void;
+  onImportSelect(importType: string): void;
+};
+
+const CreateTestAnalytics = (): TCreateTestAnalytics => ({
+  onFormSubmit() {
+    AnalyticsService.event(Categories.Home, Actions.FormSubmit, Labels.Form);
+  },
+  onDemoClick() {
+    AnalyticsService.event(Categories.Home, Actions.DemoClick, Labels.Button);
+  },
+  onTriggerSelect(triggerType: string) {
+    AnalyticsService.event(Categories.Home, Actions.TriggerTypeSelect, triggerType);
+  },
+  onImportSelect(importType: string) {
+    AnalyticsService.event(Categories.Home, Actions.ImportTypeSelect, importType);
+  },
+});
+
+export default CreateTestAnalytics();
diff --git a/web/src/services/Analytics/CreateTestAnalytics.service.ts b/web/src/services/Analytics/CreateTestAnalytics.service.ts