From 5f39920d6993682e28bcd3ec9426294062735a06 Mon Sep 17 00:00:00 2001
From: ThyeeZz <jialian.ji@zilliz.com>
Date: Fri, 27 Dec 2024 18:40:27 +0800
Subject: [PATCH] update form label

---
 src/i18n/en/sizingTool.json             | 10 +++---
 src/parts/sizing/indexTypeComponent.tsx | 46 ++++++++++++++++++-------
 src/parts/sizing/resultSection.tsx      |  2 +-
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/i18n/en/sizingTool.json b/src/i18n/en/sizingTool.json
index b9050f8b..4484a164 100644
--- a/src/i18n/en/sizingTool.json
+++ b/src/i18n/en/sizingTool.json
@@ -10,10 +10,10 @@
     "offloading": "Offloading Fields to Disk",
     "mmp": "Milvus uses <0>Mmap</0> to enable direct memory access to large files on disk without reading the entire files into memory.",
     "indexType": "Index Type",
-    "withRawData": "With_raw_data",
-    "m": "M(Maximum degree of the node)",
+    "withRawData": "with_raw_data",
+    "m": "m(maximum degree of the node)",
     "nlist": "nlist",
-    "maxDegree": "Max Degree",
+    "maxDegree": "max_degree",
     "segmentSize": "Segment Size",
     "dependencyComp": "Dependency Component",
     "mode": "Mode",
@@ -71,8 +71,8 @@
       "disk": "Local Disk",
       "storage": "Storage",
       "podNum": "Pod Number",
-      "pvc": "Pcv per Pod: <0>{{pvc}} GB</0>",
-      "pvcLabel": "Pcv per Pod",
+      "pvc": "Pvc per Pod: <0>{{pvc}} GB</0>",
+      "pvcLabel": "Pvc per Pod",
       "journal": "Journal",
       "ledger": "Ledgers",
       "config": "{{cpu}} Core {{memory}} GB",
diff --git a/src/parts/sizing/indexTypeComponent.tsx b/src/parts/sizing/indexTypeComponent.tsx
index ad34af16..a3cd1cbe 100644
--- a/src/parts/sizing/indexTypeComponent.tsx
+++ b/src/parts/sizing/indexTypeComponent.tsx
@@ -8,6 +8,7 @@ import {
   N_LIST_RANGE_CONFIG,
   M_RANGE_CONFIG,
 } from '@/consts/sizing';
+import { useTranslation } from 'react-i18next';
 
 type IndexTypeComponentProps = {
   data: IIndexType;
@@ -16,11 +17,16 @@ type IndexTypeComponentProps = {
 
 const SCANNComponent = (props: IndexTypeComponentProps) => {
   const { data, onChange } = props;
+  const { t } = useTranslation('sizingTool');
 
   return (
     <div className="mt-[20px]">
-      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>Index Parameters</p>
-      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>With_raw_data</p>
+      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>
+        {t('form.indexType')}
+      </p>
+      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>
+        {t('form.withRawData')}
+      </p>
       <RadioGroup
         value={data.widthRawData.toString()}
         onValueChange={val => {
@@ -33,7 +39,7 @@ const SCANNComponent = (props: IndexTypeComponentProps) => {
           <p className="">True</p>
         </div>
         <div className={classes.flexRow}>
-          <RadioGroupItem value="false">False</RadioGroupItem>
+          <RadioGroupItem value="false"></RadioGroupItem>
           <p className="">False</p>
         </div>
       </RadioGroup>
@@ -42,13 +48,14 @@ const SCANNComponent = (props: IndexTypeComponentProps) => {
 };
 
 const HNSWComponent = (props: IndexTypeComponentProps) => {
+  const { t } = useTranslation('sizingTool');
   const { data, onChange } = props;
   return (
     <div className="mt-[20px]">
-      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>Index Parameters</p>
-      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>
-        M(Maximum degree of the node)
+      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>
+        {t('form.indexType')}
       </p>
+      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>{t('form.m')}</p>
       <SizingRange
         rangeConfig={M_RANGE_CONFIG}
         value={data.m}
@@ -62,11 +69,16 @@ const HNSWComponent = (props: IndexTypeComponentProps) => {
 };
 
 const DISKANNComponent = (props: IndexTypeComponentProps) => {
+  const { t } = useTranslation('sizingTool');
   const { data, onChange } = props;
   return (
     <div className="mt-[20px]">
-      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>Index Parameters</p>
-      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>nlist</p>
+      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>
+        {t('form.indexType')}
+      </p>
+      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>
+        {t('form.maxDegree')}
+      </p>
       <SizingRange
         rangeConfig={MAX_NODE_DEGREE_RANGE_CONFIG}
         value={data.maxDegree}
@@ -80,11 +92,16 @@ const DISKANNComponent = (props: IndexTypeComponentProps) => {
 };
 
 const IVFFlatComponent = (props: IndexTypeComponentProps) => {
+  const { t } = useTranslation('sizingTool');
   const { data, onChange } = props;
   return (
     <div className="mt-[20px]">
-      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>Index Parameters</p>
-      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>nlist</p>
+      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>
+        {t('form.indexType')}
+      </p>
+      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>
+        {t('form.nlist')}
+      </p>
       <SizingRange
         rangeConfig={N_LIST_RANGE_CONFIG}
         value={data.flatNList}
@@ -98,11 +115,16 @@ const IVFFlatComponent = (props: IndexTypeComponentProps) => {
 };
 
 const IVFSQ8Component = (props: IndexTypeComponentProps) => {
+  const { t } = useTranslation('sizingTool');
   const { data, onChange } = props;
   return (
     <div className="mt-[20px]">
-      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>Index Parameters</p>
-      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>nlist</p>
+      <p className={clsx(classes.smallerLabel, 'mb-[8px]')}>
+        {t('form.indexType')}
+      </p>
+      <p className={clsx(classes.indexParamLabel, 'mb-[8px]')}>
+        {t('form.nlist')}
+      </p>
       <SizingRange
         rangeConfig={N_LIST_RANGE_CONFIG}
         value={data.sq8NList}
diff --git a/src/parts/sizing/resultSection.tsx b/src/parts/sizing/resultSection.tsx
index 54e341f3..3804248e 100644
--- a/src/parts/sizing/resultSection.tsx
+++ b/src/parts/sizing/resultSection.tsx
@@ -58,7 +58,7 @@ export default function ResultSection(props: {
   // milvus data
   const { milvusCpu, milvusMemory } = milvusOverviewDataCalculator(nodeConfig);
   const milvusCpuData = formatNumber(milvusCpu);
-  const milvusMemoryData = unitBYTE2Any(milvusMemory);
+  const milvusMemoryData = unitBYTE2Any(milvusMemory * 1024 * 1024 * 1024);
 
   // dependency data
   const { dependencyCpu, dependencyMemory, dependencyStorage } =