diff --git a/src/pages/tools/sizing.tsx b/src/pages/tools/sizing.tsx
index f7e85aea8..79bdc2b5c 100644
--- a/src/pages/tools/sizing.tsx
+++ b/src/pages/tools/sizing.tsx
@@ -1,458 +1,126 @@
import React, { useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
import Layout from '@/components/layout/commonLayout';
import classes from '@/styles/sizingTool.module.less';
import pageClasses from '@/styles/responsive.module.less';
-import { InfoFilled, DownloadIcon } from '@/components/icons';
-import SizingToolCard from '@/components/card/sizingToolCard';
-import SizingConfigCard from '@/components/card/sizingToolCard/sizingConfigCard';
import clsx from 'clsx';
-import Slider from '@mui/material/Slider';
-import TextField from '@mui/material/TextField';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
import Head from 'next/head';
-import CustomButton from '@/components/customButton';
-
-import {
- memorySizeCalculator,
- rawFileSizeCalculator,
- commonCoordCalculator,
- unitBYTE2Any,
- indexNodeCalculator,
- queryNodeCalculator,
- isBetween,
- rootCoordCalculator,
- dataNodeCalculator,
- proxyCalculator,
- helmYmlGenerator,
- operatorYmlGenerator,
- etcdCalculator,
- minioCalculator,
- pulsarCalculator,
- kafkaCalculator,
- mixCoordCalculator,
- unitAny2BYTE,
-} from '@/utils/sizingTool';
-import { CustomizedContentDialogs } from '@/components/dialog/Dialog';
-import HighlightBlock from '@/components/card/sizingToolCard/codeBlock';
-import {
- HELM_CONFIG_FILE_NAME,
- OPERATOR_CONFIG_FILE_NAME,
- REQUIRE_MORE,
- INDEX_TYPE_OPTIONS,
- SEGMENT_SIZE_OPTIONS,
- IndexTypeEnum,
-} from '@/components/card/sizingToolCard/constants';
import { ABSOLUTE_BASE_URL } from '@/consts';
-
-// one million
-const $1M = Math.pow(10, 6);
-
-const defaultSizeContent = {
- size: REQUIRE_MORE,
+import FormSection from '@/parts/sizing/formSection';
+import ResultSection from '@/parts/sizing/resultSection';
+import {
+ DependencyComponentEnum,
+ ICalculateResult,
+ ModeEnum,
+} from '@/types/sizing';
+import { InfoFilled } from '@/components/icons';
+import ZillizAdv from '@/parts/blogs/zillizAdv';
+
+const etcdBaseValue = {
cpu: 0,
memory: 0,
- amount: 0,
+ pvc: 0,
+ count: 0,
+};
+const minioBaseValue = {
+ cpu: 0,
+ memory: 0,
+ pvc: 0,
+ count: 0,
+};
+const pulsarBaseValue = {
+ bookie: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ journal: 0,
+ ledgers: 0,
+ },
+ broker: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ },
+ proxy: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ },
+ zookeeper: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ pvc: 0,
+ },
+};
+const kafkaBaseValue = {
+ broker: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ pvc: 0,
+ },
+ zookeeper: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ pvc: 0,
+ },
};
-
-enum FromKeysEnum {
- Nb = 'nb',
- D = 'd',
- IndexType = 'indexType',
- M = 'm',
- Nlist = 'nlist',
- SegmentSize = 'segmentSize',
- aApacheType = 'apacheType',
-}
export default function SizingTool() {
- const { t } = useTranslation('sizingTool');
-
- const [dialogState, setDialogState] = useState({
- open: false,
- title: '',
- children: <>,
- });
- const [form, setForm] = useState<{ [key in FromKeysEnum]: any }>({
- // number of vectors
- nb: {
- value: 1,
- showError: false,
- helpText: '',
- placeholder: `[1, 10000]`,
- validation: {
- validate: isBetween,
- params: { min: 1, max: 10000 },
- errorMsg: 'Number of vectors should be an integer between [1, 10000]',
+ const { t } = useTranslation('sizingToolV2');
+ const [calculatedResult, setCalculatedResult] = useState
({
+ rawDataSize: 0,
+ memorySize: 0,
+ localDiskSize: 0,
+ nodeConfig: {
+ queryNode: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
},
- },
- // dimensions
- d: {
- value: 128,
- showError: false,
- helpText: '',
- placeholder: '[1, 10000]',
- validation: {
- validate: isBetween,
- params: { min: 1, max: 10000 },
- errorMsg: 'Dimensions should be an integer between [1, 10000]',
+ proxy: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
},
- },
- // index type
- indexType: {
- value: INDEX_TYPE_OPTIONS[0].value,
- showError: false,
- },
- // index parameters
- m: {
- value: 8,
- showError: false,
- },
- // ivf parameters
- nlist: {
- value: 1024,
- showError: false,
- helpText: '',
- placeholder: '[1, 10000]',
- validation: {
- validate: isBetween,
- params: { min: 1, max: 10000 },
- errorMsg: 'nList should be an integer between [1, 10000]',
+ mixCoord: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ },
+ dataNode: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
+ },
+ indexNode: {
+ cpu: 0,
+ memory: 0,
+ count: 0,
},
},
- // segment size
- segmentSize: {
- value: SEGMENT_SIZE_OPTIONS[0].value,
- showError: false,
+ dependencyConfig: {
+ etcd: {
+ ...etcdBaseValue,
+ },
+ minio: {
+ ...minioBaseValue,
+ },
+ pulsar: {
+ ...pulsarBaseValue,
+ },
+ kafka: {
+ ...kafkaBaseValue,
+ },
},
- apacheType: 'pulsar',
+ mode: ModeEnum.Standalone,
+ dependency: DependencyComponentEnum.Pulsar,
});
- const handleFormValueChange = (val: any, key: FromKeysEnum) => {
- const { validation } = form[key];
-
- if (!validation) {
- setForm(v => ({
- ...v,
- [key]: {
- ...v[key],
- value: val,
- },
- }));
- return;
- }
-
- const isValidated = validation.validate(val, validation.params);
- if (isValidated) {
- setForm(v => ({
- ...v,
- [key]: {
- ...v[key],
- value: val,
- showError: false,
- helpText: '',
- },
- }));
- } else {
- setForm(v => ({
- ...v,
- [key]: {
- ...v[key],
- value: val,
- showError: true,
- helpText: validation.errorMsg,
- },
- }));
- }
- };
-
- const hanldeRemovePromot = key => {
- if (!form[key].showError) {
- return;
- }
- setForm(v => ({
- ...v,
- [key]: {
- ...v[key],
- value: '',
- showError: false,
- helpText: '',
- },
- }));
- };
-
- const handleApacheChange = (e, value) => {
- setForm(v => ({
- ...v,
- apacheType: value,
- }));
- };
-
- const calcResult = useMemo(() => {
- const { nb, d, indexType, nlist, m, segmentSize } = form;
-
- const nbVal = Number(nb.value) * $1M || 0;
- const dVal = Number(d.value) || 0;
- const nlistVal = Number(nlist.value) || 0;
- const mVal = Number(m.value) || 0;
- const sVal = Number(segmentSize.value) || 0;
-
- const isErrorParameters = Object.values(form).some(
- v => v.showError || v.value === ''
- );
-
- if (isErrorParameters) {
- const etcdData = etcdCalculator();
- const minioData = minioCalculator();
- const pulsarData = pulsarCalculator();
- const kafkaData = kafkaCalculator();
- return {
- memorySize: { size: 0, unit: 'B' },
- rawFileSize: { size: 0, unit: 'B' },
- dataNode: defaultSizeContent,
- queryNode: defaultSizeContent,
- indexNode: defaultSizeContent,
- proxy: defaultSizeContent,
- mixCoord: defaultSizeContent,
- commonCoord: defaultSizeContent,
- etcdData,
- minioData,
- pulsarData,
- kafkaData,
- };
- }
-
- const { memorySize, theorySize } = memorySizeCalculator({
- nb: nbVal,
- d: dVal,
- nlist: nlistVal,
- M: mVal,
- indexType: indexType.value,
- });
-
- const rawFileSize = rawFileSizeCalculator({ d: dVal, nb: nbVal });
- const dataNode = dataNodeCalculator(nbVal);
- const indexNode = indexNodeCalculator(theorySize, sVal);
- const proxy = proxyCalculator(memorySize);
- const queryNode = queryNodeCalculator(memorySize);
- const commonCoord = commonCoordCalculator(memorySize);
- const mixCoord = mixCoordCalculator(nbVal);
- const etcdData = etcdCalculator(rawFileSize);
- const minioData = minioCalculator(rawFileSize, theorySize);
- const pulsarData = pulsarCalculator(rawFileSize);
- const kafkaData = kafkaCalculator(rawFileSize);
- return {
- memorySize: unitBYTE2Any(memorySize),
- rawFileSizeByte: rawFileSize,
- rawFileSize: unitBYTE2Any(rawFileSize),
- mixCoord,
- indexNode,
- dataNode,
- queryNode,
- proxy,
- commonCoord,
- etcdData,
- minioData,
- pulsarData,
- kafkaData,
- };
- }, [form]);
- const { milvusData, dependencyData, totalData, queryNodeDiskData } =
- useMemo(() => {
- const calculateList = [
- calcResult.proxy,
- calcResult.mixCoord,
- calcResult.indexNode,
- calcResult.dataNode,
- calcResult.queryNode,
- ];
-
- const milvusData = {
- core: calculateList.reduce((acc, cur) => {
- acc += cur.cpu * cur.amount;
- return acc;
- }, 0),
- memory: calculateList.reduce((acc, cur) => {
- acc += cur.memory * cur.amount;
- return acc;
- }, 0),
- };
-
- const secondPartData = {
- core:
- calcResult.etcdData.cpu * calcResult.etcdData.podNumber +
- calcResult.minioData.cpu * calcResult.minioData.podNumber,
- memory:
- calcResult.etcdData.memory * calcResult.etcdData.podNumber +
- calcResult.minioData.memory * calcResult.minioData.podNumber,
- ssd:
- calcResult.etcdData.pvcPerPodUnit === 'G'
- ? calcResult.etcdData.pvcPerPodSize * calcResult.etcdData.podNumber
- : (calcResult.etcdData.pvcPerPodSize *
- calcResult.etcdData.podNumber) /
- 1024,
- disk:
- calcResult.minioData.pvcPerPodUnit === 'G'
- ? calcResult.minioData.pvcPerPodSize *
- calcResult.minioData.podNumber
- : (calcResult.minioData.pvcPerPodSize *
- calcResult.minioData.podNumber) /
- 1024,
- };
-
- const pulsarBookieData =
- calcResult.pulsarData.bookie.ledgers.unit === 'G'
- ? calcResult.pulsarData.bookie.ledgers.size *
- calcResult.pulsarData.bookie.podNum.value
- : (calcResult.pulsarData.bookie.ledgers.size *
- calcResult.pulsarData.bookie.podNum.value) /
- 1024;
- const pulsarZookeeperData =
- calcResult.pulsarData.zookeeper.pvc.unit === 'G'
- ? calcResult.pulsarData.zookeeper.pvc.size *
- calcResult.pulsarData.zookeeper.podNum.value
- : (calcResult.pulsarData.zookeeper.pvc.size *
- calcResult.pulsarData.zookeeper.podNum.value) /
- 1024;
- const pulsarData = {
- core: Object.values(calcResult.pulsarData).reduce((acc, cur) => {
- acc += cur.cpu.size * cur.podNum.value;
- return acc;
- }, 0),
- memory: Object.values(calcResult.pulsarData).reduce((acc, cur) => {
- acc += cur.memory.size * cur.podNum.value;
- return acc;
- }, 0),
- ssd: pulsarBookieData + pulsarZookeeperData,
- disk:
- calcResult.pulsarData.bookie.journal.unit === 'G'
- ? calcResult.pulsarData.bookie.journal.size *
- calcResult.pulsarData.bookie.podNum.value
- : (calcResult.pulsarData.bookie.journal.size *
- calcResult.pulsarData.bookie.podNum.value) /
- 1024,
- };
-
- const kafkaData = {
- core: Object.values(calcResult.kafkaData).reduce((acc, cur) => {
- acc += cur.cpu.size * cur.podNum.value;
- return acc;
- }, 0),
- memory: Object.values(calcResult.kafkaData).reduce((acc, cur) => {
- acc += cur.memory.size * cur.podNum.value;
- return acc;
- }, 0),
- ssd: Object.values(calcResult.kafkaData).reduce((acc, cur) => {
- if (cur.pvc?.isSSD) {
- if (cur.pvc.unit === 'G') {
- acc += cur.pvc.size * cur.podNum.value;
- } else {
- acc += (cur.pvc.size * cur.podNum.value) / 1024;
- }
- }
- return acc;
- }, 0),
- disk: Object.values(calcResult.kafkaData).reduce((acc, cur) => {
- if (!cur.pvc?.isSSD) {
- if (cur.pvc.unit === 'G') {
- acc += cur.pvc.size * cur.podNum.value;
- } else {
- acc += (cur.pvc.size * cur.podNum.value) / 1024;
- }
- }
- return acc;
- }, 0),
- };
-
- const thirdPartData =
- form.apacheType === 'pulsar' ? pulsarData : kafkaData;
-
- let queryNodeDiskData = undefined;
-
- if (form.indexType.value === IndexTypeEnum.DISKANN) {
- const rawFileSizeValue = unitBYTE2Any(calcResult.rawFileSizeByte, 'GB');
- queryNodeDiskData = {
- totalQueryNodeDisk: Math.ceil(rawFileSizeValue.size * 10) / 10,
- key: 'SSD',
- value: `${
- Math.ceil(
- (rawFileSizeValue.size / calcResult.queryNode.amount) * 10
- ) / 10
- } GB`,
- };
- }
-
- const totalData = {
- core: milvusData.core + secondPartData.core + thirdPartData.core,
- memory:
- milvusData.memory + secondPartData.memory + thirdPartData.memory,
- ssd: queryNodeDiskData
- ? Math.ceil(secondPartData.ssd + thirdPartData.ssd) +
- queryNodeDiskData.totalQueryNodeDisk
- : Math.ceil(secondPartData.ssd + thirdPartData.ssd),
- disk: Math.ceil(secondPartData.disk + thirdPartData.disk),
- };
-
- const dependencyData = {
- core: secondPartData.core + thirdPartData.core,
- memory: secondPartData.memory + thirdPartData.memory,
- ssd: Math.ceil(secondPartData.ssd + thirdPartData.ssd),
- disk: Math.ceil(secondPartData.disk + thirdPartData.disk),
- };
-
- return {
- milvusData,
- dependencyData,
- totalData,
- queryNodeDiskData,
- };
- }, [calcResult, form.apacheType]);
-
- const handleDownloadYmlFile = (content, fileName) => {
- if (typeof window !== 'undefined') {
- const blob = new Blob([content], {
- type: 'text/plain',
- });
-
- const url = URL.createObjectURL(blob);
-
- const a = document.createElement('a');
- a.href = url;
- a.download = `${fileName}.yml`;
- a.click();
- }
- };
-
- const handleDownloadHelm = () => {
- const content = helmYmlGenerator(calcResult, form.apacheType);
- handleDownloadYmlFile(content, HELM_CONFIG_FILE_NAME);
- };
- const handleDownloadOperator = () => {
- const content = operatorYmlGenerator(calcResult, form.apacheType);
- handleDownloadYmlFile(content, OPERATOR_CONFIG_FILE_NAME);
- };
-
- const handleCloseDialog = () => {
- setDialogState(v => ({
- ...v,
- open: false,
- }));
- };
-
- const handleOpenInstallGuide = type => {
- const title = type === 'helm' ? t('buttons.helm') : t('buttons.operator');
-
- setDialogState({
- open: true,
- title,
- children: ,
- });
+ const updateCalculatedResult = (result: ICalculateResult) => {
+ setCalculatedResult(result);
};
return (
@@ -470,434 +138,46 @@ export default function SizingTool() {
hrefLang="en"
/>
-
-
{t('title')}
-
+
+
+
{t('title')}
+
{t('content')}
+
-
{t('subTitle')}
-
-
-
-
-
{t('labels.dataSize')}
-
-
-
{t('labels.vector')}
-
hanldeRemovePromot('nb')}
- onChange={e => {
- handleFormValueChange(e.target.value, FromKeysEnum.Nb);
- }}
- />
-
-
-
-
{t('labels.dimension')}
-
hanldeRemovePromot('d')}
- onChange={e => {
- handleFormValueChange(e.target.value, FromKeysEnum.D);
- }}
- />
-
-
-
{t('labels.indexType')}
-
-
-
- {t('labels.index')}
-
-
-
-
-
- {form.indexType.value === 'FLAT' ? null : form.indexType
- .value === 'HNSW' ? (
- <>
-
- {t('labels.indexParam')}
-
-
- {t('labels.m')}
-
-
- {
- handleFormValueChange(value, FromKeysEnum.M);
- }}
- marks={[
- { label: '4', value: 4 },
- { label: '64', value: 64 },
- ]}
- />
-
-
- ) : (
- <>
-
{t('labels.m')}
-
hanldeRemovePromot('nlist')}
- onChange={e => {
- handleFormValueChange(
- e.target.value,
- FromKeysEnum.Nlist
- );
- }}
- />
-
- )}
-
-
-
-
{t('labels.segmentSize')}
-
- {t('labels.segment')}
-
-
-
-
-
- }
- label="Pulsar"
- />
- }
- label="Kafka"
- />
-
-
-
-
-
-
-
{t('capacity')}
-
-
-
-
-
-
-
{t('setups.title')}
-
-
-
-
-
{t('total')}
-
- {t('coreInfo', {
- core: totalData.core,
- memory: totalData.memory,
- })}
-
-
-
-
-
-
{t('ssd')}
-
- {t('sizeInfo', { size: totalData.ssd })}
-
-
-
-
{t('disk')}
-
- {t('sizeInfo', { size: totalData.disk })}
-
-
-
-
-
-
-
{t('milvus')}
-
-
-
{t('total')}:
-
- {t('coreInfo', {
- core: milvusData.core,
- memory: milvusData.memory,
- })}
-
-
- {queryNodeDiskData && (
-
-
SSD:
-
- {queryNodeDiskData.totalQueryNodeDisk} GB
-
-
- )}
-
-
-
-
-
-
-
{t('dependency')}
-
-
-
{t('total')}:
-
- {t('coreInfo', {
- core: dependencyData.core,
- memory: dependencyData.memory,
- })}
-
-
-
-
{t('ssd')}:
-
- {t('sizeInfo', { size: dependencyData.ssd })}
-
-
-
-
{t('disk')}:
-
- {t('sizeInfo', { size: dependencyData.disk })}
-
-
-
-
-
-
-
-
-
- {t('dependencyNote')}
-
-
-
-
- {/* Minio */}
-
-
-
- {/* pulsar or kafka */}
-
- {form.apacheType === 'pulsar' ? (
-
- ) : (
-
- )}
-
-
-
- }
- >
- {t('buttons.helm')}
-
- handleOpenInstallGuide('helm')}
- variant="outlined"
- >
- {t('buttons.guide')}
-
-
-
- }
- >
- {t('buttons.operator')}
-
- handleOpenInstallGuide('operator')}
- variant="outlined"
- >
- {t('buttons.guide')}
-
-
-
+
+ ,
+ ]}
+ />
+
+
+
+
+
+
+
-
);
}
diff --git a/src/parts/blogs/zillizAdv/index.module.less b/src/parts/blogs/zillizAdv/index.module.less
new file mode 100644
index 000000000..16aeccdb9
--- /dev/null
+++ b/src/parts/blogs/zillizAdv/index.module.less
@@ -0,0 +1,96 @@
+@import url('@/styles/global.module.less');
+
+.zilliz-adv {
+ border-radius: 16px;
+ border: 1px solid @color-black4;
+ background: @color-white;
+ padding: 30px 60px;
+ display: flex;
+ align-items: center;
+ gap: 50px;
+ min-height: 392px;
+
+ @media @phone, @tablet {
+ flex-wrap: wrap;
+ padding: 30px;
+ gap: 20px;
+ }
+
+ &-main {
+ flex: 1 1 50%;
+ }
+
+ &-small-title {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 1.5;
+ text-transform: uppercase;
+ font-family: 'Geist Mono';
+ }
+
+ &-title {
+ font-size: 32px;
+ font-weight: 600;
+ line-height: 1.4;
+ }
+
+ &-features {
+ margin-top: 12px;
+
+ &-item {
+ color: @color-black2;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.5;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ font-family: 'Geist Mono';
+
+ &:not(:first-of-type) {
+ margin-top: 8px;
+ }
+
+ &-icon {
+ color: @color-blue1;
+ margin-right: 2px;
+ flex: 0 0 auto;
+ }
+ }
+ }
+
+ &-btn {
+ padding: 9.5px 28px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.5;
+ border-radius: 6px;
+ background-color: @color-black1;
+ color: @color-white;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 36px;
+
+ &:hover {
+ opacity: 0.7;
+ }
+
+ @media @phone, @tablet {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+
+ &-logo {
+ min-height: 230px;
+ flex: 1 1 50%;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+
+ @media @tablet {
+ margin-top: 30px;
+ }
+ }
+}
diff --git a/src/parts/blogs/zillizAdv/index.tsx b/src/parts/blogs/zillizAdv/index.tsx
new file mode 100644
index 000000000..da2518436
--- /dev/null
+++ b/src/parts/blogs/zillizAdv/index.tsx
@@ -0,0 +1,47 @@
+import { ListItemTickIcon, RightTopArrowIcon } from '@/components/icons';
+import styles from './index.module.less';
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+const CTA_LINK =
+ 'https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-12-19_blog_overview-page_milvusio';
+
+export default function ZillizAdv(props: { className?: string }) {
+ const { t } = useTranslation('blog');
+ const { className = '' } = props;
+ const features = [t('blog:zillizAdv.feature1'), t('blog:zillizAdv.feature2')];
+
+ const featureItems = features.map(f => (
+
+
+ {f}
+
+ ));
+
+ return (
+
+
+
+ {t('blog:zillizAdv.smallTitle')}
+
+
+ {t('blog:zillizAdv.title')}
+
+
+
+ {t('blog:zillizAdv.btn')}
+
+
+
+ );
+}
diff --git a/src/parts/sizing/dependencyComponent.tsx b/src/parts/sizing/dependencyComponent.tsx
new file mode 100644
index 000000000..16b2d82d1
--- /dev/null
+++ b/src/parts/sizing/dependencyComponent.tsx
@@ -0,0 +1,348 @@
+import {
+ ModeEnum,
+ DependencyComponentEnum,
+ DependencyConfigType,
+} from '@/types/sizing';
+import classes from './index.module.less';
+import { Trans, useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+
+export const DependencyComponent = (props: {
+ data: DependencyConfigType;
+ mode: ModeEnum;
+ dependency: DependencyComponentEnum;
+}) => {
+ const { t } = useTranslation('sizingToolV2');
+ const { data, mode, dependency } = props;
+
+ const { etcd, minio, pulsar, kafka } = data;
+
+ const PulsarInfo = (props: Pick
) => {
+ const { pulsar } = props;
+
+ return (
+
+
{t('setup.dependency.pulsar')}
+
+ -
+
+ ,
+ ]}
+ />
+
+
+ -
+
+ {t('setup.basic.cpu')}:
+
+
+ {t('setup.basic.core', { cpu: pulsar.bookie.cpu })}
+
+
+ -
+
+ {t('setup.basic.memory')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.bookie.memory })}
+
+
+ -
+
+ {t('setup.basic.journal')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.bookie.journal })}
+
+
+ -
+
+ {t('setup.basic.ledger')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.bookie.ledgers })}
+
+
+
+
+ -
+
+ ,
+ ]}
+ />
+
+
+ -
+
+ {t('setup.basic.cpu')}:
+
+
+ {t('setup.basic.core', { cpu: pulsar.broker.cpu })}
+
+
+ -
+
+ {t('setup.basic.memory')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.broker.memory })}
+
+
+
+
+ -
+
+ ,
+ ]}
+ />
+
+
+ -
+
+ {t('setup.basic.cpu')}:
+
+
+ {t('setup.basic.core', { cpu: pulsar.proxy.cpu })}
+
+
+ -
+
+ {t('setup.basic.memory')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.proxy.memory })}
+
+
+
+
+ -
+
+ ,
+ ]}
+ />
+
+
+ -
+
+ {t('setup.basic.cpu')}:
+
+
+ {t('setup.basic.core', { cpu: pulsar.zookeeper.cpu })}
+
+
+ -
+
+ {t('setup.basic.memory')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.zookeeper.memory })}
+
+
+ -
+
+ {t('setup.basic.pvcLabel')}:
+
+
+ {t('setup.basic.gb', { memory: pulsar.zookeeper.pvc })}
+
+
+
+
+
+
+
{t('setup.dependency.pulsar')}
+
+ -
+
+ ,
+ ]}
+ />
+
+
+ -
+
+ {t('setup.basic.cpu')}:
+
+
+ {t('setup.basic.core', { cpu: kafka.broker.cpu })}
+
+
+ -
+
+ {t('setup.basic.memory')}:
+
+
+ {t('setup.basic.gb', { memory: kafka.broker.memory })}
+
+
+ -
+
+ {t('setup.basic.pvcLabel')}:
+
+
+ {t('setup.basic.gb', { memory: kafka.broker.pvc })}
+
+
+
+
+
+ -
+
+ ,
+ ]}
+ />
+
+
+ -
+
+ {t('setup.basic.cpu')}:
+
+
+ {t('setup.basic.core', { cpu: kafka.zookeeper.cpu })}
+
+
+ -
+
+ {t('setup.basic.memory')}:
+
+
+ {t('setup.basic.gb', { memory: kafka.zookeeper.memory })}
+
+
+ -
+
+ {t('setup.basic.pvcLabel')}:
+
+
+ {t('setup.basic.gb', { memory: kafka.zookeeper.pvc })}
+
+
+
+
+
+
+
+
+ ]}
+ />
+
+ }
+ classname={classes.card}
+ />
+
+ ]}
+ />
+
+ }
+ classname={classes.card}
+ />
+
+ {mode === ModeEnum.Cluster && (
+
+ <>
+ {dependency === DependencyComponentEnum.Pulsar ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+ {name}
+
+
+ {data}
+
+ {desc &&
{desc}
}
+ {count &&
x{count}
}
+
+
+ {
+ handleFormChange('vector', val);
+ }}
+ value={form.vector}
+ unit="Million"
+ />
+
+
+ {
+ handleFormChange('dimension', val);
+ }}
+ value={form.dimension}
+ />
+
+
+
+
{t('form.withScalar')}
+
{
+ handleFormChange('widthScalar', value);
+ }}
+ />
+
+
+
+
+
+
+ some test tooltip sad dsdsadasd dadsadsa dssad d dasd
+
+
+ {t('form.averageLength')}
+
+
+
+ }
+ unit={t('setup.basic.byte')}
+ value={form.scalarData.average}
+ onChange={handleAverageLengthChange}
+ fullWidth
+ classes={{
+ root: classes.marginBtm20,
+ }}
+ />
+
+
+
+
{t('form.offloading')}
+
+
+ ]}
+ />
+
+
+
+
+
+
{t('form.indexType')}
+
+
+
+
+
+
+
{t('form.segmentSize')}
+
+
+
+
{t('dependencyComp')}
+
+ {dependencyOptions.map(v => (
+
+ ))}
+
+
+
+
+
+
+
+ {t('form.mode')}
+
+
+ ]}
+ />
+
+
+
+
+
+ {modeOptions.map(v => (
+
+ ))}
+
+
+
+
Index Parameters
+
With_raw_data
+
{
+ onChange('widthRawData', val === 'true');
+ }}
+ className={classes.radioGroup}
+ >
+
+
+
+
+
Index Parameters
+
+ M(Maximum degree of the node)
+
+
{
+ onChange('m', value);
+ }}
+ placeholder={`[${M_RANGE_CONFIG.min}, ${M_RANGE_CONFIG.max}]`}
+ />
+
+
Index Parameters
+
nlist
+
{
+ onChange('maxDegree', value);
+ }}
+ placeholder={`[${MAX_NODE_DEGREE_RANGE_CONFIG.min}, ${MAX_NODE_DEGREE_RANGE_CONFIG.max}]`}
+ />
+
+
Index Parameters
+
nlist
+
{
+ onChange('flatNList', value);
+ }}
+ placeholder={`[${N_LIST_RANGE_CONFIG.min}, ${N_LIST_RANGE_CONFIG.max}]`}
+ />
+
+
Index Parameters
+
nlist
+
{
+ onChange('sq8NList', value);
+ }}
+ placeholder={`[${N_LIST_RANGE_CONFIG.min}, ${N_LIST_RANGE_CONFIG.max}]`}
+ />
+
+
{t('overview.title')}
+
+
+
+
+ {t('overview.raw')}
+
+
+ {t('overview.rawTooltip')}
+
+
+
+ }
+ data={`${totalRawDataSize} ${rawDataUnit}`}
+ />
+
+
+
+ {t('overview.memory')}
+
+
+ {t('overview.memoryTooltip')}
+
+
+
+ }
+ data={`${totalMemorySize} ${memoryUnit}`}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ setIsMilvusOpen(isOpen);
+ }}
+ >
+
+
+
{t('setup.milvus.title')}
+
+
+ ,
+ ]}
+ />
+
+
+ ,
+ ]}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ setIsDependencyOpen(isOpen);
+ }}
+ >
+
+
+
+ {t('setup.dependency.title')}
+
+
+
+ ,
+ ]}
+ />
+
+
+ ,
+ ]}
+ />
+
+
+
+
+
+
+
+
{t('install.title')}
+
+
}
+ classes={{
+ root: classes.installButton,
+ }}
+ >
+ {t('install.helm')}
+
+
+ {helmCodeExample}
+
+
+
+
+
}
+ classes={{
+ root: classes.installButton,
+ }}
+ >
+ {t('install.operator')}
+
+
+ {operatorCodeExample}
+
+
+
+
+
+
+