feat(frontend): redis集群支持自定义方案 TencentBlueKing#7272

3octaves · Oct 14, 2024 · 62803ad · 62803ad
1 parent d5d59dc
commit 62803ad
Show file tree

Hide file tree

Showing 17 changed files with 854 additions and 401 deletions.
diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
@@ -1,60 +1,19 @@
 {
-  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
-  "eslint.alwaysShowStatus": true,
+  "files.eol": "\n",
+  "editor.unfoldOnClickAfterEndOfLine": true,
+  "editor.tabSize": 2,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.fontLigatures": false,
+  "editor.fontVariations": false,
+  "i18n-lazyer.defaultFolder": "\\src\\locales",
+  "search.smartCase": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
+  // "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-  "css.validate": false,
-  "stylelint.enable": true,
-  "scss.validate": false,
-  "stylelint.validate": ["css", "scss", "vue"],
-  "preCI.localCodeCheck.filter.whitePath": "",
-  "preCI.localCodeCheck.filter.skipPath": "",
-  "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
-  "peacock.remoteColor": "#45e35f",
-  "bk-code-ai.enable": false,
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#71ea85",
-    "activityBar.background": "#71ea85",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#8874ea",
-    "activityBarBadge.foreground": "#15202b",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#71ea85",
-    "statusBar.background": "#45e35f",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#20d53e",
-    "statusBarItem.remoteBackground": "#45e35f",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#45e35f",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#45e35f99",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/dbm-ui/frontend/src/locales/en.json b/dbm-ui/frontend/src/locales/en.json
@@ -1594,5 +1594,7 @@
   "主机资源不足_等待管理员users补货_补货完成后可以前往place重试": "Host resources are insufficient. Wait for the administrator ({users}) to replenish the inventory. After the replenishment is complete, you can go to \"{place}\" and try again",
   "可用主机数": "Number of available hosts",
   "版本日志": "Release Notes",
-  "这行勿动！新增翻译请在上一行添加！": ""
+  "这行勿动！新增翻译请在上一行添加！": "",
+  "必须要能除尽总分片数": "",
+  "必须要能除尽总分片数": ""
 }
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3457,5 +3457,7 @@
     "资源分布统计(地域 + 规格)": "资源分布统计(地域 + 规格)",
     "资源分布统计(地域 + 机型)": "资源分布统计(地域 + 机型)",
     "主机数量 - 按DB类型统计": "主机数量 - 按DB类型统计",
-    "这行勿动！新增翻译请在上一行添加！": ""
+    "这行勿动！新增翻译请在上一行添加！": "",
+  "必须要能除尽总分片数": "必须要能除尽总分片数",
+  "必须要能除尽总分片数": "必须要能除尽总分片数"
 }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
@@ -286,7 +286,16 @@ export interface RedisDetails extends DetailBase {
       affinity: string;
       count: number;
       spec_id: number;
-      spec_info: SpecInfo;
+      spec_info: {
+        spec_name: string;
+        machine_pair: number;
+        cluster_shard_num: number;
+        cluster_capacity: number;
+        qps?: {
+          max: number;
+          min: number;
+        };
+      };
       location_spec: {
         city: string;
         sub_zone_ids: number[];

diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendSpec.vue b/dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendSpec.vue
@@ -1,58 +1,69 @@
 <template>
   <div class="redis-backend-spec">
-    <BkFormItem
-      :label="targetCapacityTitle"
-      property="details.resource_spec.backend_group.capacity"
-      required>
-      <BkInput
-        :min="1"
-        :model-value="modelValue.capacity"
-        style="width: 314px"
-        type="number"
-        @change="handleChangeCapacity" />
-      <span class="input-desc">G</span>
-    </BkFormItem>
-    <BkFormItem
-      :label="futureCapacityTitle"
-      property="details.resource_spec.backend_group.future_capacity"
-      required>
-      <BkInput
-        :min="Number(modelValue.capacity)"
-        :model-value="modelValue.future_capacity"
-        style="width: 314px"
-        type="number"
-        @change="handleChangeFutureCapacity" />
-      <span class="input-desc">G</span>
-    </BkFormItem>
-    <BkFormItem
-      ref="specRef"
-      :label="t('集群部署方案')"
-      property="details.resource_spec.backend_group.spec_id"
-      required>
-      <DbOriginalTable
-        v-bkloading="{ loading: isLoading }"
-        class="custom-edit-table"
-        :columns="columns"
-        :data="specs"
-        @row-click="handleRowClick">
-        <template #empty>
-          <p
-            v-if="!modelValue.capacity || !modelValue.future_capacity"
-            style="width: 100%; line-height: 128px; text-align: center">
-            <DbIcon
-              class="mr-4"
-              type="attention" />
-            <span>{{ t('请先设置容量') }}</span>
-          </p>
-          <BkException
-            v-else
-            :description="t('无匹配的资源规格_请先修改容量设置')"
-            scene="part"
-            style="font-size: 12px"
-            type="empty" />
-        </template>
-      </DbOriginalTable>
-    </BkFormItem>
+    <ApplySchema v-model="applySchema" />
+    <template v-if="applySchema === APPLY_SCHEME.AUTO">
+      <BkFormItem
+        :label="targetCapacityTitle"
+        property="details.resource_spec.backend_group.capacity"
+        required>
+        <BkInput
+          :min="1"
+          :model-value="modelValue.capacity"
+          style="width: 314px"
+          type="number"
+          @change="handleChangeCapacity" />
+        <span class="input-desc">G</span>
+      </BkFormItem>
+      <BkFormItem
+        :label="futureCapacityTitle"
+        property="details.resource_spec.backend_group.future_capacity"
+        required>
+        <BkInput
+          :min="Number(modelValue.capacity)"
+          :model-value="modelValue.future_capacity"
+          style="width: 314px"
+          type="number"
+          @change="handleChangeFutureCapacity" />
+        <span class="input-desc">G</span>
+      </BkFormItem>
+      <BkFormItem
+        ref="specRef"
+        :label="t('集群部署方案')"
+        property="details.resource_spec.backend_group.spec_id"
+        required>
+        <DbOriginalTable
+          v-bkloading="{ loading: isLoading }"
+          class="custom-edit-table"
+          :columns="columns"
+          :data="specs"
+          @row-click="handleRowClick">
+          <template #empty>
+            <p
+              v-if="!modelValue.capacity || !modelValue.future_capacity"
+              style="width: 100%; line-height: 128px; text-align: center">
+              <DbIcon
+                class="mr-4"
+                type="attention" />
+              <span>{{ t('请先设置容量') }}</span>
+            </p>
+            <BkException
+              v-else
+              :description="t('无匹配的资源规格_请先修改容量设置')"
+              scene="part"
+              style="font-size: 12px"
+              type="empty" />
+          </template>
+        </DbOriginalTable>
+      </BkFormItem>
+    </template>
+    <CustomSchema
+      v-else
+      ref="customSchemaRef"
+      v-model="modelValue"
+      :biz-id="bizId"
+      :cloud-id="cloudId"
+      :cluster-type="clusterType"
+      :machine-type="machineType" />
   </div>
 </template>
 
@@ -68,8 +79,12 @@
 
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
+  import CustomSchema from '@views/db-manage/common/apply-schema/CustomSchema.vue';
+  import ApplySchema, { APPLY_SCHEME } from '@views/db-manage/common/apply-schema/Index.vue';
+
   interface ModelValue {
     spec_id: number | '',
+    count: number,
     capacity: number | string,
     future_capacity: number | string,
   }
@@ -86,10 +101,12 @@
 
   const { t } = useI18n();
 
-
   const specRef = ref();
-  const specs = shallowRef<ClusterSpecModel[]>([]);
+  const customSchemaRef = ref<InstanceType<typeof CustomSchema>>()
   const isLoading = ref(false);
+  const applySchema = ref(APPLY_SCHEME.AUTO)
+
+  const specs = shallowRef<ClusterSpecModel[]>([]);
   const countMap = shallowRef({} as Record<number, number>)
 
   const isTendisCache = computed(() => props.clusterType === ClusterTypes.TWEMPROXY_REDIS_INSTANCE);
@@ -154,7 +171,7 @@
 
   watch(() => modelValue.value.spec_id, () => {
     if (modelValue.value.spec_id) {
-      specRef.value.clearValidate();
+      specRef.value?.clearValidate();
     }
   });
 
@@ -266,8 +283,21 @@
 
   defineExpose({
     getData() {
-      const item = specs.value.find(item => item.spec_id === Number(modelValue.value.spec_id));
-      return item ?? {};
+      if (applySchema.value === APPLY_SCHEME.AUTO) {
+        const item = specs.value.find(item => item.spec_id === Number(modelValue.value.spec_id));
+        if (item) {
+          return {
+            spec_name: item.spec_name,
+            machine_pair: item.machine_pair,
+            cluster_shard_num: item.cluster_shard_num,
+            cluster_capacity: item.cluster_capacity,
+            qps: item.qps
+          }
+        }
+        return {}
+      }
+
+      return customSchemaRef.value!.getInfo()
     },
   });
 </script>