fix(components): resolve several problems of the cluster creation (#112)

Author: Yuiham

src/components/CreateClusterPanel/SimpleForm.tsx

@@ -9,6 +9,7 @@ import {
   ProductsKnowledge,
   RegionKnowledge,
   useComponents,
+  useParamGroups,
   useProducts,
   useVendorsAndRegions,
 } from '@/components/CreateClusterPanel/helpers'
@@ -76,6 +77,9 @@ export function SimpleForm({
     arch
   )
 
+  // Get parameter groups with productId, productVersion
+  const { paramGroups } = useParamGroups(productId, productVersion)
+
   const setVendor = useCallback(
     (vendorId?: string) => {
       if (!vendorAndRegions) return
@@ -131,6 +135,15 @@ export function SimpleForm({
     setProduct()
   }, [products])
 
+  // set a default value of the parameterGroupID item
+  useEffect(() => {
+    if (paramGroups?.length) {
+      form.setFieldsValue({
+        parameterGroupID: paramGroups[0].id,
+      })
+    }
+  }, [paramGroups, form])
+
   const { t, i18n } = useI18n()
 
   const vendorSelector = useMemo(
@@ -173,9 +186,10 @@ export function SimpleForm({
           type={productId}
           arch={arch}
           products={products}
+          paramGroups={paramGroups}
         />
       ),
-    [productId, arch, vendorId, region, products, i18n.language]
+    [productId, arch, vendorId, region, products, paramGroups, i18n.language]
   )
 
   const nodeOptions = useMemo(
@@ -210,6 +224,7 @@ export function SimpleForm({
       <Form
         layout="horizontal"
         hideRequiredMark
+        scrollToFirstError
         colon={false}
         form={form}
         name="create"
@@ -243,6 +258,7 @@ function BasicOptions({
   type,
   arch,
   products,
+  paramGroups,
 }: {
   t: TFunction<''>
   onSelectProduct: (type: string) => void
@@ -252,6 +268,7 @@ function BasicOptions({
   type: string
   arch: string
   products: ProductsKnowledge
+  paramGroups: { id: string; name: string }[]
 }) {
   return (
     <Card title={t('basic.title')}>
@@ -269,6 +286,21 @@ function BasicOptions({
           ))}
         </Select>
       </Form.Item>
+      <Form.Item
+        name="cpuArchitecture"
+        label={t('basic.fields.arch')}
+        rules={[{ required: true }]}
+        initialValue={arch}
+      >
+        <Radio.Group onChange={(e) => onSelectArch(e.target.value)}>
+          {!!type &&
+            products.products[type]?._archs.map((a) => (
+              <Radio.Button value={a} key={a}>
+                {a}
+              </Radio.Button>
+            ))}
+        </Radio.Group>
+      </Form.Item>
       <Form.Item
         label={t('basic.fields.version')}
         name="clusterVersion"
@@ -285,19 +317,19 @@ function BasicOptions({
         </Select>
       </Form.Item>
       <Form.Item
-        name="cpuArchitecture"
-        label={t('basic.fields.arch')}
-        rules={[{ required: true }]}
-        initialValue={arch}
+        label={t('basic.fields.paramGroup')}
+        name="parameterGroupID"
+        rules={[
+          { required: true, message: t('basic.rules.paramGroup.require') },
+        ]}
       >
-        <Radio.Group onChange={(e) => onSelectArch(e.target.value)}>
-          {!!type &&
-            products.products[type]?._archs.map((a) => (
-              <Radio.Button value={a} key={a}>
-                {a}
-              </Radio.Button>
-            ))}
-        </Radio.Group>
+        <Select>
+          {paramGroups.map((item) => (
+            <Select.Option value={item.id} key={item.id}>
+              {item.name}
+            </Select.Option>
+          ))}
+        </Select>
       </Form.Item>
     </Card>
   )
@@ -354,7 +386,7 @@ function ComponentOptions({
             label={t('component.fields.copies')}
           >
             <Select>
-              {[1, 2, 3, 4, 5].map((count) => (
+              {[1, 3, 5, 7].map((count) => (
                 <Select.Option key={count} value={count}>
                   {count}
                 </Select.Option>
@@ -365,15 +397,14 @@ function ComponentOptions({
         <Row
           gutter={20}
           style={{
-            lineHeight: '12px',
             fontSize: 16,
           }}
         >
           <Col span={8}>{t('component.fields.zone')}</Col>
           <Col span={8}>{t('component.fields.spec')}</Col>
           <Col span={8}>{t('component.fields.amount')}</Col>
         </Row>
-        <Divider style={{ margin: '16px 0' }} />
+        <Divider style={{ margin: '12px 0' }} />
         {component.zones.map((zone, i) => {
           if (!zone) return undefined
           return (
@@ -475,6 +506,9 @@ function ClusterOptions() {
           dropdownStyle={{ display: 'none' }}
         />
       </Form.Item>
+      <Form.Item label={t('cluster.fields.user')}>
+        <span>root</span>
+      </Form.Item>
       <Form.Item
         name="dbPassword"
         label={t('cluster.fields.password')}

src/components/CreateClusterPanel/helpers.ts

@@ -1,4 +1,8 @@
-import { ProductStatus, RequestClusterCreate } from '@/api/model'
+import {
+  ParamGroupDBType,
+  ProductStatus,
+  RequestClusterCreate,
+} from '@/api/model'
 import { useMemo } from 'react'
 import { message } from 'antd'
 import { TFunction } from 'react-i18next'
@@ -7,6 +11,7 @@ import {
   useQueryProducts,
   useQueryZones,
 } from '@/api/hooks/platform'
+import { useQueryParamGroupList } from '@/api/hooks/param-group'
 import { mapObj } from '@/utils/obj'
 
 export function processCreateRequest(
@@ -64,6 +69,19 @@ export function processCreateRequest(
         )
         return false
       }
+
+      // FIXME: remove hard-coded validation for TiKV
+      if (
+        node.componentType === 'TiKV' &&
+        node.totalNodeCount! < value.copies!
+      ) {
+        message.error(
+          t('create.validation.storage.instanceLimit', {
+            name: comp.name,
+          })
+        )
+        return false
+      }
     }
   }
   return true
@@ -115,7 +133,7 @@ export function useProducts(vendorId?: string, regionId?: string) {
   )
   return useMemo<ProductsKnowledge>(() => {
     const rawRegions = data?.data.data?.products // region => product => arch => version
-    if (!rawRegions || !regionId)
+    if (!rawRegions || !regionId || !rawRegions[regionId])
       return {
         _products: [],
         products: {},
@@ -199,6 +217,47 @@ export function useComponents(
   }, [data, vendorId, regionId])
 }
 
+/**
+ * Hook for getting parameter groups for the cluster
+ * @param productType database type. e.g. TiDB
+ * @param productVersion database version. e.g. v5.2.2
+ */
+export function useParamGroups(productType?: string, productVersion?: string) {
+  const dbTypeHashmap: { [k: string]: ParamGroupDBType } = {
+    TiDB: ParamGroupDBType.tidb,
+    DM: ParamGroupDBType.dm,
+  }
+  const dbType = productType ? dbTypeHashmap[productType] : undefined
+
+  const dbVersion = productVersion?.match(/v\d+\.\d+/)?.[0]
+
+  const { data: response, isLoading } = useQueryParamGroupList(
+    {
+      dbType,
+      dbVersion,
+    },
+    {
+      enabled: !!dbType && !!dbVersion,
+      refetchOnWindowFocus: false,
+    }
+  )
+  const data = response?.data.data
+
+  const ret = useMemo(
+    () =>
+      data?.map((el) => ({
+        id: el.paramGroupId!,
+        name: el.name!,
+      })) || [],
+    [data]
+  )
+
+  return {
+    paramGroups: ret,
+    isLoading,
+  }
+}
+
 export type VendorKnowledge = {
   id: string
   name: string

src/components/CreateClusterPanel/index.module.less

@@ -13,7 +13,7 @@
   }
 
   :global(.ant-form-item-label) {
-    width: 120px;
+    width: 200px;
   }
 
   :global(.ant-card), :global(.ant-collapse) {

src/components/CreateClusterPanel/translations/en.yaml

@@ -1,32 +1,36 @@
 basic:
-  title: Basic Options
+  title: Database Basic Information
   fields:
-    type: Cluster Type
-    arch: Arch
-    version: Version
+    type: Database Type
+    arch: CPU Architecture
+    version: Database Version
+    paramGroup: Parameter Group
   rules:
     type:
-      require: Please select the cluster type
+      require: Please select a database type
     version:
-      require: Please select the cluster version
+      require: Please select a database version
+    paramGroup:
+      require: Please select a parameter group
 component:
   title: '{{ name }} Options'
   optional: Optional
   allocator:
     title: Quick Allocate
     items: '{{ count }} Nodes'
   fields:
-    copies: Copies
+    copies: Number of Storage Replicas
     nodes: Nodes
     zone: Available Zone
-    spec: Spec
-    amount: Amount
+    spec: Specification Code
+    amount: Number of Instances
 cluster:
-  title: Cluster Options
+  title: Cluster Basic Information
   fields:
     name: Cluster Name
-    tags: Cluster Tags
-    password: DB Password
+    tags: Cluster Labels
+    user: Database User
+    password: Database Password
     exclusive: Exclusive
   tooltip:
     name: Upper and lower case letters, numbers and hyphens, starting with a letter, and with length between 8-32
@@ -51,6 +55,8 @@ create:
     miss: 'The {{ name }} node cannot be missing！'
     minZone: '{{ name }} requires at least {{ count }} nodes'
     maxZone: '{{ name }} requires no more than {{ count }} nodes'
+    storage:
+      instanceLimit: 'The number of {{ name }} instance cannot be less then the number of storage replicas'
   name: Create Cluster
 
 message:
@@ -85,8 +91,8 @@ preview:
   columns:
     component: Component
     zone: Zone
-    spec: Spec
-    amount: Amount
+    spec: Specification Code
+    amount: Number of Instances
     status: Status
   status:
     normal: Normal

src/components/CreateClusterPanel/translations/zh.yaml

@@ -1,31 +1,35 @@
 basic:
-  title: 基础配置
+  title: 数据库基础信息
   fields:
-    type: 集群类型
-    arch: 体系架构
-    version: 集群版本
+    type: 数据库类型
+    arch: CPU 体系架构
+    version: 数据库版本
+    paramGroup: 参数组
   rules:
     type:
-      require: 请选择集群类型
+      require: 请选择数据库类型
     version:
-      require: 请选择集群版本
+      require: 请选择数据库版本
+    paramGroup:
+      require: 请选择参数组
 component:
   title: '{{ name }} 配置'
   optional: 可选
   allocator:
     title: 快速分配
     items: '{{ count }} 节点'
   fields:
-    copies: 副本数
+    copies: 存储副本数
     nodes: 节点
     zone: 可用区
-    spec: 规格
+    spec: 规格代码
     amount: 数量
 cluster:
-  title: 集群信息
+  title: 集群基础信息
   fields:
     name: 集群名称
     tags: 集群标签
+    user: 数据库用户
     password: 数据库密码
     exclusive: 独占部署
   tooltip:
@@ -51,6 +55,8 @@ create:
     miss: '不能缺失 {{ name }} 节点！'
     minZone: '{{ name }} 至少需要 {{ count }} 个节点!'
     maxZone: '{{ name }} 至多拥有 {{ count }} 个节点!'
+    storage:
+      instanceLimit: '{{ name }} 实例数不能少于存储副本数'
   name: 创建集群
 
 message: