RI-7218 Add telemetry collection for Create Vector Search Index wizard (#4807)

* feat(ui): collect telemetry on step 1 of the create vector search index wizard
* feat(ui): collect telemetry on step 2 of the create vector search index wizard
* feat(ui): collect telemetry on step 3 of the create vector search index wizard
* feat(ui): collect telemetry on step 2 preview command of the create vector search index wizard

re #RI-7218

Author: valkirilov

jest.config.cjs

@@ -13,6 +13,7 @@ module.exports = {
     '\\.scss\\?inline$': '<rootDir>/redisinsight/__mocks__/scssRaw.js',
     'uiSrc/slices/store$': '<rootDir>/redisinsight/ui/src/utils/test-store.ts',
     'uiSrc/(.*)': '<rootDir>/redisinsight/ui/src/$1',
+    'apiSrc/(.*)': '<rootDir>/redisinsight/api/src/$1',
     '@redislabsdev/redis-ui-components': '@redis-ui/components',
     '@redislabsdev/redis-ui-styles': '@redis-ui/styles',
     '@redislabsdev/redis-ui-icons': '@redis-ui/icons',

redisinsight/api/src/modules/bulk-actions/interfaces/bulk-action-overview.interface.ts

@@ -11,8 +11,8 @@ export interface IBulkActionOverview {
   databaseId: string;
   duration: number;
   type: BulkActionType;
-  status: BulkActionStatus;
-  filter: IBulkActionFilterOverview;
+  status: BulkActionStatus; // Note: This can be null, according to the API response
+  filter: IBulkActionFilterOverview; // Note: This can be null, according to the API response
   progress: IBulkActionProgressOverview;
   summary: IBulkActionSummaryOverview;
 }

redisinsight/ui/src/mocks/factories/browser/bulkActions/bulkActionOverview.factory.ts

@@ -0,0 +1,45 @@
+import { Factory } from 'fishery'
+import { faker } from '@faker-js/faker'
+import { RedisDataType } from 'uiSrc/constants'
+import { IBulkActionOverview } from 'apiSrc/modules/bulk-actions/interfaces/bulk-action-overview.interface'
+import { IBulkActionFilterOverview } from 'apiSrc/modules/bulk-actions/interfaces/bulk-action-filter-overview.interface'
+import { IBulkActionProgressOverview } from 'apiSrc/modules/bulk-actions/interfaces/bulk-action-progress-overview.interface'
+import { IBulkActionSummaryOverview } from 'apiSrc/modules/bulk-actions/interfaces/bulk-action-summary-overview.interface'
+import {
+  BulkActionStatus,
+  BulkActionType,
+} from 'apiSrc/modules/bulk-actions/constants'
+
+export const bulkActionOverviewFactory = Factory.define<IBulkActionOverview>(
+  ({ sequence }) => ({
+    id: `bulk-action-${sequence}`,
+    databaseId: faker.string.ulid(),
+    type: faker.helpers.enumValue(BulkActionType),
+    summary: bulkActionSummaryOverviewFactory.build(),
+    progress: bulkActionProgressOverviewFactory.build(),
+    filter: bulkActionFilterOverviewFactory.build(),
+    status: faker.helpers.enumValue(BulkActionStatus),
+    duration: faker.number.int({ min: 10, max: 100 }),
+  }),
+)
+
+export const bulkActionSummaryOverviewFactory =
+  Factory.define<IBulkActionSummaryOverview>(() => ({
+    processed: faker.number.int({ min: 200, max: 299 }),
+    succeed: faker.number.int({ min: 300, max: 399 }),
+    failed: faker.number.int({ min: 400, max: 499 }),
+    errors: [],
+    keys: [],
+  }))
+
+export const bulkActionProgressOverviewFactory =
+  Factory.define<IBulkActionProgressOverview>(() => ({
+    total: faker.number.int({ min: 100, max: 1000 }),
+    scanned: faker.number.int({ min: 0, max: 1000 }),
+  }))
+
+export const bulkActionFilterOverviewFactory =
+  Factory.define<IBulkActionFilterOverview>(() => ({
+    type: faker.helpers.enumValue(RedisDataType),
+    match: faker.string.uuid(),
+  }))

redisinsight/ui/src/mocks/factories/workbench/commandExectution.factory.ts

@@ -0,0 +1,35 @@
+import { Factory } from 'fishery'
+import { faker } from '@faker-js/faker'
+import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
+
+// Note: Types are temporaryly not binded properly due to issues in the Jset setup
+// SyntaxError: redisinsight/api/src/modules/workbench/models/command-execution.ts: Support for the experimental syntax 'decorators' isn't currently enabled (32:3):
+
+// export const commandExecutionFactory = Factory.define<CommandExecution>(
+export const commandExecutionFactory = Factory.define(({ sequence }) => ({
+  id: sequence.toString() ?? faker.string.uuid(),
+  databaseId: faker.string.ulid(),
+  db: faker.number.int({ min: 0, max: 15 }),
+  type: faker.helpers.arrayElement(['WORKBENCH', 'SEARCH']), // faker.helpers.enumValue(CommandExecutionType),
+  mode: faker.helpers.arrayElement(['RAW', 'ASCII']), // faker.helpers.enumValue(RunQueryMode),
+  resultsMode: faker.helpers.arrayElement(['DEFAULT', 'GROUP_MODE', 'SILENT']), // faker.helpers.enumValue(ResultsMode),
+  command: faker.lorem.paragraph(),
+  result: commandExecutionResultFactory.buildList(1),
+  executionTime: faker.number.int({ min: 1000, max: 5000 }),
+  createdAt: faker.date.past(),
+}))
+
+// export const commandExecutionResultFactory = Factory.define<CommandExecutionResult>(() => {
+export const commandExecutionResultFactory = Factory.define(() => {
+  const includeSizeLimitExceeded = faker.datatype.boolean()
+
+  return {
+    status: faker.helpers.enumValue(CommandExecutionStatus),
+    response: faker.lorem.paragraph(),
+
+    // Optional properties
+    ...(includeSizeLimitExceeded && {
+      sizeLimitExceeded: faker.datatype.boolean(),
+    }),
+  }
+})

redisinsight/ui/src/mocks/handlers/browser/bulkActionsHandlers.ts

@@ -0,0 +1,22 @@
+import { rest, RestHandler } from 'msw'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { getMswURL } from 'uiSrc/utils/test-utils'
+import { getUrl } from 'uiSrc/utils'
+import { IBulkActionOverview } from 'uiSrc/slices/interfaces'
+import { bulkActionOverviewFactory } from 'uiSrc/mocks/factories/browser/bulkActions/bulkActionOverview.factory'
+import { INSTANCE_ID_MOCK } from '../instances/instancesHandlers'
+
+const handlers: RestHandler[] = [
+  rest.post<IBulkActionOverview>(
+    getMswURL(
+      getUrl(
+        INSTANCE_ID_MOCK,
+        ApiEndpoints.BULK_ACTIONS_IMPORT_VECTOR_COLLECTION,
+      ),
+    ),
+    async (_req, res, ctx) =>
+      res(ctx.status(200), ctx.json(bulkActionOverviewFactory.build())),
+  ),
+]
+
+export default handlers

redisinsight/ui/src/mocks/handlers/browser/index.ts

@@ -1,8 +1,10 @@
 import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
 
 import redisearch from './redisearchHandlers'
+import bulkActions from './bulkActionsHandlers'
 
 const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(
   redisearch,
+  bulkActions,
 )
 export default handlers

redisinsight/ui/src/mocks/handlers/index.ts

@@ -9,6 +9,7 @@ import cloud from './oauth'
 import tutorials from './tutorials'
 import rdi from './rdi'
 import user from './user'
+import workbench from './workbench'
 
 // @ts-ignore
 export const handlers: RestHandler<MockedRequest>[] = [].concat(
@@ -22,4 +23,5 @@ export const handlers: RestHandler<MockedRequest>[] = [].concat(
   tutorials,
   rdi,
   user,
+  workbench,
 )

redisinsight/ui/src/mocks/handlers/workbench/commands.ts

@@ -0,0 +1,19 @@
+import { rest, RestHandler } from 'msw'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { getMswURL } from 'uiSrc/utils/test-utils'
+import { getUrl } from 'uiSrc/utils'
+import { CommandExecution } from 'uiSrc/slices/interfaces'
+import { commandExecutionFactory } from 'uiSrc/mocks/factories/workbench/commandExectution.factory'
+import { INSTANCE_ID_MOCK } from '../instances/instancesHandlers'
+
+const handlers: RestHandler[] = [
+  rest.post<CommandExecution[]>(
+    getMswURL(
+      getUrl(INSTANCE_ID_MOCK, ApiEndpoints.WORKBENCH_COMMAND_EXECUTIONS),
+    ),
+    async (_req, res, ctx) =>
+      res(ctx.status(200), ctx.json(commandExecutionFactory.buildList(1))),
+  ),
+]
+
+export default handlers

redisinsight/ui/src/mocks/handlers/workbench/index.ts

@@ -0,0 +1,8 @@
+import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
+
+import commands from './commands'
+
+const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(
+  commands,
+)
+export default handlers

redisinsight/ui/src/pages/vector-search/create-index/VectorSearchCreateIndex.spec.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import {
+  render,
+  screen,
+  fireEvent,
+  initialStateDefault,
+  mockStore,
+} from 'uiSrc/utils/test-utils'
+import { RootState } from 'uiSrc/slices/store'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/dbAnalysisHistoryHandlers'
+import { VectorSearchCreateIndex } from './VectorSearchCreateIndex'
+import { SampleDataContent, SampleDataType, SearchIndexType } from './types'
+
+// Mock the telemetry module, so we don't send actual telemetry data during tests
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+const renderVectorSearchCreateIndexComponent = () => {
+  const testState: RootState = {
+    ...initialStateDefault,
+    connections: {
+      ...initialStateDefault.connections,
+      instances: {
+        ...initialStateDefault.connections.instances,
+        connectedInstance: {
+          ...initialStateDefault.connections.instances.connectedInstance,
+          id: INSTANCE_ID_MOCK,
+          name: 'test-instance',
+          host: 'localhost',
+          port: 6379,
+          modules: [],
+        },
+      },
+    },
+  }
+  const store = mockStore(testState)
+
+  return render(<VectorSearchCreateIndex />, { store })
+}
+
+describe('VectorSearchCreateIndex', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render correctly', () => {
+    const { container } = renderVectorSearchCreateIndexComponent()
+
+    expect(container).toBeInTheDocument()
+  })
+
+  describe('Telemetry', () => {
+    it('should send telemetry events on start step', () => {
+      renderVectorSearchCreateIndexComponent()
+
+      expect(sendEventTelemetry).toHaveBeenCalledTimes(1)
+      expect(sendEventTelemetry).toHaveBeenCalledWith({
+        event: TelemetryEvent.VECTOR_SEARCH_ONBOARDING_TRIGGERED,
+        eventData: { databaseId: INSTANCE_ID_MOCK },
+      })
+    })
+
+    it('should send telemetry events on index info step', () => {
+      renderVectorSearchCreateIndexComponent()
+
+      // Select the index type
+      const indexTypeRadio = screen.getByText('Redis Query Engine')
+      fireEvent.click(indexTypeRadio)
+
+      // Select the sample dataset
+      const sampleDataRadio = screen.getByText('Pre-set data')
+      fireEvent.click(sampleDataRadio)
+
+      // Select data content
+      const dataContentRadio = screen.getByText('E-commerce Discovery')
+      fireEvent.click(dataContentRadio)
+
+      // Simulate going to the index info step
+      const buttonNext = screen.getByText('Proceed to index')
+      fireEvent.click(buttonNext)
+
+      expect(sendEventTelemetry).toHaveBeenCalledTimes(2)
+      expect(sendEventTelemetry).toHaveBeenNthCalledWith(2, {
+        event: TelemetryEvent.VECTOR_SEARCH_ONBOARDING_PROCEED_TO_INDEX_INFO,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+          indexType: SearchIndexType.REDIS_QUERY_ENGINE,
+          sampleDataType: SampleDataType.PRESET_DATA,
+          dataContent: SampleDataContent.E_COMMERCE_DISCOVERY,
+        },
+      })
+    })
+
+    it('should send telemetry events on create index step', () => {
+      renderVectorSearchCreateIndexComponent()
+
+      // Simulate going to the index info step
+      const buttonNext = screen.getByText('Proceed to index')
+      fireEvent.click(buttonNext)
+
+      // Simulate creating the index
+      const buttonCreateIndex = screen.getByText('Create index')
+      fireEvent.click(buttonCreateIndex)
+
+      expect(sendEventTelemetry).toHaveBeenCalledTimes(3)
+      expect(sendEventTelemetry).toHaveBeenNthCalledWith(3, {
+        event: TelemetryEvent.VECTOR_SEARCH_ONBOARDING_PROCEED_TO_QUERIES,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+        },
+      })
+    })
+  })
+})