Skip to content

Commit 51f2ed3

Browse files
KrumTyKrumTy
committed
RI-7194: init Create Vector Search wizard
1 parent e3f0b73 commit 51f2ed3

File tree

15 files changed

+286
-0
lines changed

15 files changed

+286
-0
lines changed

‎redisinsight/ui/src/components/base/layout/flex/flex.styles.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,7 @@ export type FlexItemProps = React.HTMLAttributes<HTMLDivElement> &
373373
grow?: (typeof VALID_GROW_VALUES)[number]
374374
$direction?: (typeof dirValues)[number]
375375
$padding?: (typeof VALID_PADDING_VALUES)[number]
376+
$gap?: GapSizeType
376377
}
377378

378379
export const StyledFlexItem = styled.div<FlexItemProps>`
@@ -393,6 +394,7 @@ export const StyledFlexItem = styled.div<FlexItemProps>`
393394
return 'column-reverse'
394395
}
395396
}};
397+
${({ $gap = 'none' }) => ($gap ? flexGroupStyles.gapSizes[$gap] : '')}
396398
${({ grow }) => {
397399
if (!grow) {
398400
return flexItemStyles.growZero

‎redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { lazy } from 'react'
22
import { IRoute, FeatureFlags, PageNames, Pages } from 'uiSrc/constants'
33
import {
44
BrowserPage,
5+
VectorSearchPage,
56
HomePage,
67
InstancePage,
78
RedisCloudDatabasesPage,
@@ -22,6 +23,7 @@ import COMMON_ROUTES from './commonRoutes'
2223
import { getRouteIncludedByEnv, LAZY_LOAD } from '../config'
2324

2425
const LazyBrowserPage = lazy(() => import('uiSrc/pages/browser'))
26+
const LazyVectorSearchPage = lazy(() => import('uiSrc/pages/vector-search'))
2527
const LazyHomePage = lazy(() => import('uiSrc/pages/home'))
2628
const LazyWorkbenchPage = lazy(() => import('uiSrc/pages/workbench'))
2729
const LazyPubSubPage = lazy(() => import('uiSrc/pages/pub-sub'))
@@ -55,6 +57,11 @@ const INSTANCE_ROUTES: IRoute[] = [
5557
path: Pages.browser(':instanceId'),
5658
component: LAZY_LOAD ? LazyBrowserPage : BrowserPage,
5759
},
60+
{
61+
pageName: PageNames.vectorSearch,
62+
path: Pages.vectorSearch(':instanceId'),
63+
component: LAZY_LOAD ? LazyVectorSearchPage : VectorSearchPage,
64+
},
5865
{
5966
pageName: PageNames.workbench,
6067
path: Pages.workbench(':instanceId'),

‎redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import {
4444
SlowLogIcon,
4545
WorkbenchActiveIcon,
4646
WorkbenchIcon,
47+
SearchIcon,
4748
GithubIcon,
4849
} from 'uiSrc/components/base/icons'
4950
import { NavigationItemWrapper } from 'uiSrc/components/navigation-menu/NavigationItemWrapper'
@@ -162,6 +163,23 @@ const NavigationMenu = () => {
162163
},
163164
onboard: ONBOARDING_FEATURES.WORKBENCH_PAGE,
164165
},
166+
{
167+
tooltipText: 'Vector Search',
168+
pageName: PageNames.vectorSearch,
169+
ariaLabel: 'Vector Search',
170+
onClick: () => handleGoPage(Pages.vectorSearch(connectedInstanceId)),
171+
dataTestId: 'vector-search-page-btn',
172+
connectedInstanceId,
173+
isActivePage: activePage === `/${PageNames.vectorSearch}`,
174+
getClassName() {
175+
return cx(navigationButtonStyle, { [styles.active]: this.isActivePage })
176+
},
177+
getIconType() {
178+
// TODO: Icon or move to another menu
179+
// eslint-disable-next-line sonarjs/no-all-duplicated-branches
180+
return this.isActivePage ? SearchIcon : SearchIcon
181+
},
182+
},
165183
{
166184
tooltipText: 'Analysis Tools',
167185
pageName: PageNames.analytics,

‎redisinsight/ui/src/constants/pages.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface IRoute {
1515

1616
export enum PageNames {
1717
workbench = 'workbench',
18+
vectorSearch = 'vector-search',
1819
browser = 'browser',
1920
search = 'search',
2021
slowLog = 'slowlog',
@@ -49,6 +50,8 @@ export const Pages = {
4950
sentinelDatabases: `${sentinel}/databases`,
5051
sentinelDatabasesResult: `${sentinel}/databases-result`,
5152
browser: (instanceId: string) => `/${instanceId}/${PageNames.browser}`,
53+
vectorSearch: (instanceId: string) =>
54+
`/${instanceId}/${PageNames.vectorSearch}`,
5255
workbench: (instanceId: string) => `/${instanceId}/${PageNames.workbench}`,
5356
search: (instanceId: string) => `/${instanceId}/${PageNames.search}`,
5457
pubSub: (instanceId: string) => `/${instanceId}/${PageNames.pubSub}`,

‎redisinsight/ui/src/pages/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './instance'
44
export * from './home'
55
export * from './redis-cluster'
66
export * from './autodiscover-cloud'
7+
export * from './vector-search'

‎redisinsight/ui/src/pages/vector-search/VectorSearchPage.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
import { VectorSearchCreateIndex } from './create-index/VectorSearchCreateIndex'
4+
import { VectorSearchQuery } from './query/VectorSearchQuery'
5+
6+
export const VectorSearchPage = () => {
7+
const hasIndexes = false
8+
9+
if (!hasIndexes) {
10+
return <VectorSearchCreateIndex />
11+
}
12+
13+
// TODO: QueryScreen
14+
15+
return <VectorSearchQuery />
16+
}

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { useState } from 'react'
2+
import { useParams } from 'react-router-dom'
3+
4+
import { Stepper } from '@redis-ui/components'
5+
import { Title } from 'uiSrc/components/base/text'
6+
import { Button, SecondaryButton } from 'uiSrc/components/base/forms/buttons'
7+
import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
8+
9+
import { stepContents } from './steps'
10+
import {
11+
CreateIndexContent,
12+
CreateIndexFooter,
13+
CreateIndexHeader,
14+
CreateIndexWrapper,
15+
} from './styles'
16+
import {
17+
CreateSearchIndexParameters,
18+
SampleDataType,
19+
SearchIndexType,
20+
} from './types'
21+
22+
const stepNextButtonTexts = [
23+
'Proceed to adding data',
24+
'Proceed to index',
25+
'Create index',
26+
]
27+
28+
type VectorSearchCreateIndexProps = {
29+
initialStep?: number
30+
}
31+
32+
export const VectorSearchCreateIndex = ({
33+
initialStep = 1,
34+
}: VectorSearchCreateIndexProps) => {
35+
const { instanceId } = useParams<{ instanceId: string }>()
36+
const [step, setStep] = useState(initialStep)
37+
const [createSearchIndexParameters, setCreateSearchIndexParameters] =
38+
useState<CreateSearchIndexParameters>({
39+
instanceId,
40+
searchIndexType: SearchIndexType.REDIS_QUERY_ENGINE,
41+
sampleDataType: SampleDataType.PRESET_DATA,
42+
dataContent: '',
43+
usePresetVectorIndex: false,
44+
presetVectorIndexName: '',
45+
tags: [],
46+
})
47+
48+
const setParameters = (params: Partial<CreateSearchIndexParameters>) => {
49+
setCreateSearchIndexParameters((prev) => ({ ...prev, ...params }))
50+
}
51+
const showBackButton = step > initialStep
52+
const StepContent = stepContents[step]
53+
const onNextClick = () => {
54+
const isFinalStep = step === stepContents.length - 1
55+
if (isFinalStep) {
56+
alert(
57+
`TODO: trigger index creation for params: ${JSON.stringify(createSearchIndexParameters)}`,
58+
)
59+
return
60+
}
61+
62+
setStep(step + 1)
63+
}
64+
const onBackClick = () => {
65+
setStep(step - 1)
66+
}
67+
68+
return (
69+
<CreateIndexWrapper direction="column" justify="between">
70+
<CreateIndexHeader direction="row">
71+
<Title size="M" data-testid="title">
72+
New vector search
73+
</Title>
74+
<Stepper currentStep={step} title="test">
75+
<Stepper.Step>Select a database</Stepper.Step>
76+
<Stepper.Step>Adding data</Stepper.Step>
77+
<Stepper.Step>Create Index</Stepper.Step>
78+
</Stepper>
79+
</CreateIndexHeader>
80+
<CreateIndexContent direction="column" grow={1}>
81+
<StepContent setParameters={setParameters} />
82+
</CreateIndexContent>
83+
<CreateIndexFooter direction="row">
84+
{showBackButton && (
85+
<SecondaryButton
86+
iconSide="left"
87+
icon={ChevronLeftIcon}
88+
onClick={onBackClick}
89+
>
90+
Back
91+
</SecondaryButton>
92+
)}
93+
<div />
94+
<Button onClick={onNextClick}>{stepNextButtonTexts[step]}</Button>
95+
</CreateIndexFooter>
96+
</CreateIndexWrapper>
97+
)
98+
}

‎redisinsight/ui/src/pages/vector-search/create-index/steps/AddDataStep.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
3+
import { FlexItem } from 'uiSrc/components/base/layout/flex'
4+
import { Text } from 'uiSrc/components/base/text'
5+
import { IStepComponent } from '../types'
6+
7+
export const AddDataStep: IStepComponent = ({ setParameters }) => (
8+
<>
9+
<FlexItem direction="column" $gap="m">
10+
<FlexItem direction="row" $gap="m">
11+
<div>Box1</div>
12+
<div>Box2</div>
13+
</FlexItem>
14+
</FlexItem>
15+
<FlexItem direction="column" $gap="m">
16+
<Text>Select sample dataset</Text>
17+
</FlexItem>
18+
<FlexItem direction="column" $gap="m">
19+
<Text>Data content</Text>
20+
<FlexItem direction="row" $gap="m">
21+
<div>Box1</div>
22+
<div>Box2</div>
23+
<div>Box3</div>
24+
</FlexItem>
25+
</FlexItem>
26+
</>
27+
)

‎redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
3+
import { FlexItem } from 'uiSrc/components/base/layout/flex'
4+
import { Text } from 'uiSrc/components/base/text'
5+
import { IStepComponent } from '../types'
6+
7+
export const CreateIndexStep: IStepComponent = ({ setParameters }) => (
8+
<>
9+
<FlexItem direction="column" $gap="m">
10+
<Text>Vector index</Text>
11+
<Text size="S">
12+
Indexes tell Redis how to search your data. Creating an index enables
13+
fast, accurate retrieval across your dataset.
14+
</Text>
15+
</FlexItem>
16+
<FlexItem direction="column" $gap="m">
17+
<Text>Index name</Text>
18+
<Text>Bikes</Text>
19+
</FlexItem>
20+
<FlexItem direction="column" $gap="m">
21+
<FlexItem direction="row" $gap="m">
22+
<div>Box1</div>
23+
<div>Box2</div>
24+
<div>Box3</div>
25+
</FlexItem>
26+
</FlexItem>
27+
</>
28+
)

‎redisinsight/ui/src/pages/vector-search/create-index/steps/SelectDatabaseStep.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { IStepComponent } from '../types'
2+
3+
export const SelectDatabaseStep: IStepComponent = () => null

0 commit comments

Comments
 (0)