fix(frontend): tendbcluster、doris的tab缺失 #8175

# Reviewed, transaction id: 26295
TencentBlueKing · Dec 10, 2024 · 284ba15 · 284ba15
1 parent 8c51920
commit 284ba15
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 22 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3677,7 +3677,6 @@
   "不允许使用特殊账号名称n": "不允许使用特殊账号名称 {n}",
   "密码不符合要求": "密码不符合要求",
   "错误日志": "错误日志",
-  "实际内存分配比率": "实际内存分配比率",
   "迁移提交成功": "迁移提交成功",
   "集群架构：将集群的部分实例迁移到新机器，迁移保持规格、版本不变；主从架构：主从实例成对迁移到新机器上，可选择部分实例迁移，也可整机所有实例一起迁移。": "集群架构：将集群的部分实例迁移到新机器，迁移保持规格、版本不变；主从架构：主从实例成对迁移到新机器上，可选择部分实例迁移，也可整机所有实例一起迁移。",
   "迁移": "迁移",
@@ -3706,6 +3705,6 @@
   "请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，以字母开头，支持字母，数字，下划线。多个使用英文逗号、分号或换行分隔",
   "单据协助设置": "单据协助设置",
   "主域名，从域名，单节点必须分开查询": "主域名，从域名，单节点必须分开查询",
+  "实际内存分配比率": "实际内存分配比率",
   "这行勿动！新增翻译请在上一行添加！": ""
-
 }
diff --git a/dbm-ui/frontend/src/views/db-configure/business/Detail.vue b/dbm-ui/frontend/src/views/db-configure/business/Detail.vue
@@ -118,6 +118,9 @@
       if (!route.query.form) {
         router.push({
           name: 'DbConfigureList',
+          params: {
+            clusterType: props.clusterType,
+          },
         });
         return;
       }

diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/Content.vue b/dbm-ui/frontend/src/views/db-configure/business/list/components/Content.vue
@@ -197,6 +197,10 @@
           type: ticketTypeMap[clusterType.value],
           bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         },
+        query: {
+          from: String(route.name),
+          clusterType: clusterType.value,
+        },
       });
     } else if ([ClusterTypes.SQLSERVER_SINGLE, ClusterTypes.SQLSERVER_HA].includes(clusterType.value)) {
       router.push({
@@ -205,13 +209,21 @@
           ticketType: ticketTypeMap[clusterType.value],
           bizId: window.PROJECT_CONFIG.BIZ_ID,
         },
+        query: {
+          from: String(route.name),
+          clusterType: clusterType.value,
+        },
       });
     } else {
       router.push({
         name: 'createSpiderModule',
         params: {
           bizId: window.PROJECT_CONFIG.BIZ_ID,
         },
+        query: {
+          from: String(route.name),
+          clusterType: clusterType.value,
+        },
       });
     }
   };

diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts b/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts
@@ -21,17 +21,20 @@ import { notModuleClusters } from '@views/db-configure/common/const';
 
 import type { TreeData } from '../types';
 
+type LevelConfigDetail = ServiceReturnType<typeof getLevelConfig> & { charset?: string };
+
 interface State {
   loading: boolean;
   loadingDetails: boolean;
   isEmpty: boolean;
   version: string;
-  data: ServiceReturnType<typeof getLevelConfig> & { charset?: string };
+  data: LevelConfigDetail;
+  deployInfo: LevelConfigDetail;
 }
 /**
  * 获取参数管理基本信息
  */
-export const useBaseDetails = (immediateFetch = true) => {
+export const useBaseDetails = (immediateFetch = true, confName = 'db_version') => {
   const getFetchParams = (versionKey: 'version' | 'proxy_version', confType = 'dbconf') => {
     if (treeNode === undefined) {
       return {} as ServiceParameters<typeof getLevelConfig>;
@@ -77,6 +80,13 @@ export const useBaseDetails = (immediateFetch = true) => {
       description: '',
       charset: '',
     },
+    deployInfo: {
+      conf_items: [],
+      version: '',
+      name: '',
+      description: '',
+      charset: '',
+    },
   });
 
   const fetchParams = computed(() => getFetchParams('version'));
@@ -113,9 +123,10 @@ export const useBaseDetails = (immediateFetch = true) => {
 
     state.loading = true;
     getLevelConfig(params)
-      .then((res) => {
-        res.conf_items.forEach((item) => {
-          if (item.conf_name === 'db_version') {
+      .then((result) => {
+        state.deployInfo = result;
+        result.conf_items.forEach((item) => {
+          if (item.conf_name === confName) {
             state.version = item.conf_value ?? '';
           } else if (item.conf_name === 'charset') {
             state.data.charset = item.conf_value ?? '';

diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/module/ConfigDetails.vue b/dbm-ui/frontend/src/views/db-configure/business/list/components/module/ConfigDetails.vue
@@ -20,6 +20,7 @@
       <DetailsBase
         class="config-details-content"
         :data="data"
+        :deploy-info="deployInfo"
         :fetch-params="fetchParams"
         :level="ConfLevels.MODULE"
         :loading="false"
@@ -38,20 +39,24 @@
   import DetailsBase from '@views/db-configure/components/DetailsBase.vue';
 
   type PlatConfDetailsParams = ServiceParameters<typeof getConfigBaseDetails>;
+  type DetailData = ServiceReturnType<typeof getLevelConfig>;
 
   interface Props {
-    data?: ServiceReturnType<typeof getLevelConfig>;
+    data?: Partial<DetailData>;
+    deployInfo?: Partial<DetailData>;
     loading?: boolean;
     fetchParams?: PlatConfDetailsParams | ServiceParameters<typeof getLevelConfig>;
   }
 
   const props = withDefaults(defineProps<Props>(), {
-    data: () =>
-      ({
-        conf_items: [] as NonNullable<Props['data']>['conf_items'],
-      }) as NonNullable<Props['data']>,
+    data: () => ({
+      conf_items: [] as DetailData['conf_items'],
+    }),
     loading: false,
     fetchParams: () => ({}) as PlatConfDetailsParams,
+    deployInfo: () => ({
+      conf_items: [] as DetailData['conf_items'],
+    }),
   });
 
   const route = useRoute();

diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/module/Index.vue b/dbm-ui/frontend/src/views/db-configure/business/list/components/module/Index.vue
@@ -33,6 +33,7 @@
           <template v-if="tab.name !== 'publish' && configParams !== null">
             <ConfigDetails
               :data="state.data"
+              :deploy-info="state.deployInfo"
               :fetch-params="configParams"
               :loading="state.loadingDetails" />
           </template>

diff --git a/dbm-ui/frontend/src/views/db-configure/components/DetailsBase.vue b/dbm-ui/frontend/src/views/db-configure/components/DetailsBase.vue
@@ -23,7 +23,7 @@
         :title="$t('基础信息')">
         <EditInfo
           :columns="baseInfoColumns"
-          :data="data"
+          :data="detailData"
           @save="handleSaveEditInfo" />
       </DbCard>
       <DbCard
@@ -39,7 +39,23 @@
           class="details-base__table"
           :data="configItems"
           :level="level"
-          :sticky-top="stickyTop" />
+          :sticky-top="stickyTop">
+          <template
+            v-if="tabs.length > 1"
+            #prefix>
+            <BkRadioGroup
+              v-model="clusterType"
+              type="capsule">
+              <BkRadioButton
+                v-for="tab of tabs"
+                :key="tab"
+                :label="tab"
+                style="width: 200px">
+                {{ tab }} {{ t('参数配置') }}
+              </BkRadioButton>
+            </BkRadioGroup>
+          </template>
+        </ReadonlyTable>
       </DbCard>
       <DbCard
         v-for="card of extraParametersCards"
@@ -62,7 +78,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
   import {
@@ -72,25 +88,28 @@
     updatePlatformConfig,
   } from '@services/source/configs';
 
-  import { ConfLevels, type ConfLevelValues } from '@common/const';
+  import { ClusterTypes, ConfLevels, type ConfLevelValues } from '@common/const';
 
   import EditInfo, { type EditEmitData } from '@components/editable-info/index.vue';
 
+  import { useBaseDetails } from '../business/list/components/hooks/useBaseDetails';
   import type { ExtraConfListItem } from '../common/types';
 
   import ReadonlyTable from './ReadonlyTable.vue';
 
   type PlatConfDetailsParams = ServiceParameters<typeof getConfigBaseDetails>;
+  type DetailData = ServiceReturnType<typeof getLevelConfig> & { charset?: string };
 
   interface Props {
-    data?: ServiceReturnType<typeof getLevelConfig> & { charset?: string };
+    data?: Partial<DetailData>;
     loading?: boolean;
     fetchParams?: PlatConfDetailsParams | ServiceParameters<typeof getLevelConfig>;
     stickyTop?: number;
     level?: ConfLevelValues;
     title?: string;
     extraParametersCards?: ExtraConfListItem[];
     routeParams?: Record<string, any>;
+    deployInfo?: Partial<DetailData>;
   }
 
   interface Emits {
@@ -110,18 +129,39 @@
     title: '',
     extraParametersCards: () => [],
     routeParams: () => ({}),
+    deployInfo: () =>
+    ({
+      conf_items: [] as DetailData['conf_items'],
+    }),
   });
 
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const router = useRouter();
   const route = useRoute();
+  const { state } = useBaseDetails(true, 'spider_version');
 
+  const clusterType = ref(props.data.version);
+
+  const isSqlServer = computed(() =>
+    [ClusterTypes.SQLSERVER_SINGLE, ClusterTypes.SQLSERVER_HA].includes(props.routeParams.clusterType),
+  );
+  const tabs = computed(() => {
+    if (!state.version) {
+      return [props.data.version];
+    }
+    return [props.data.version, state.data.version];
+  });
   const cardTitle = computed(() => props.title || t('参数配置'));
   // 是否为平台级别配置
   const isPlat = computed(() => ConfLevels.PLAT === props.level);
-  const configItems = computed(() => props.data?.conf_items || []);
+  const configItems = computed(() => {
+    if (clusterType.value === props.data.version) {
+      return props.data.conf_items;
+    }
+    return state.data.conf_items;
+  });
   const isShowCharset = computed(() => !!props.data.charset);
   const baseInfoColumns = computed(() => {
     const baseColumns = [
@@ -158,8 +198,65 @@
         key: 'charset',
       });
     }
+    if (isSqlServer.value) {
+      baseColumns[0].push(
+        ...[
+          {
+            label: t('实际内存分配比率'),
+            key: 'buffer_percent',
+          },
+          {
+            label: t('主从方式'),
+            key: 'sync_type',
+            render: () => <span> {
+              detailData.value.sync_type === 'mirroring'
+                ? t('镜像')
+                : detailData.value.sync_type
+            } </span>
+          },
+        ],
+      );
+      baseColumns[1].push(
+        ...[
+          {
+            label: t('最大系统保留内存'),
+            key: 'max_remain_mem_gb',
+          },
+          {
+            label: t('操作系统版本'),
+            key: 'system_version',
+          },
+        ],
+      );
+    }
+    if (state.version) {
+      baseColumns[0].push({
+        label: t('Spider版本'),
+        render: () => state.data.version,
+      });
+    }
     return baseColumns;
   });
+  const detailData = computed(() => {
+    if (isSqlServer.value) {
+      return {
+        ...props.data,
+        ...props.deployInfo.conf_items!.reduce<Record<string, string>>((acc, item) => {
+          acc[item.conf_name] = item.conf_value!;
+          return acc;
+        }, {}),
+      };
+    }
+    return props.data;
+  });
+
+  watch(
+    () => props.data.version,
+    () => {
+      clusterType.value = props.data.version;
+    },
+    { immediate: true },
+  );
 
   /**
    * 基础信息编辑
@@ -193,7 +290,12 @@
     const name = isPlat.value ? 'PlatformDbConfigureEdit' : 'DbConfigureEdit';
     router.push({
       name,
-      params: { ...route.params, ...props.routeParams, ...extra },
+      params: {
+        ...route.params,
+        ...props.routeParams,
+        ...extra,
+        version: clusterType.value,
+      },
     });
   };
 </script>

diff --git a/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue b/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue
@@ -13,9 +13,11 @@
 
 <template>
   <div class="db-configure-readonly-parameters-table">
-    <div class="mb-16">
+    <div class="mb-16 operation-box">
+      <slot name="prefix" />
       <BkInput
         v-model="search"
+        class="search-input"
         clearable
         :placeholder="$t('请输入参数项')"
         style="width: 320px" />
@@ -161,6 +163,14 @@
   .db-configure-readonly-parameters-table {
     width: 100%;
 
+    .operation-box {
+      display: flex;
+
+      .search-input {
+        margin-left: auto;
+      }
+    }
+
     .config-name-box {
       display: inline-block;
       max-width: calc(100% - 18px);

diff --git a/dbm-ui/frontend/src/views/db-configure/routes.ts b/dbm-ui/frontend/src/views/db-configure/routes.ts
@@ -80,6 +80,14 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import('@views/db-manage/tendb-cluster/apply/CreateModule.vue'),
       },
+      {
+        name: 'SqlServerCreateDbModule',
+        path: 'sqlserver-create-db-module/:ticketType/:bizId/',
+        meta: {
+          navName: t('新建模块'),
+        },
+        component: () => import('@views/service-apply/create-db-module/SqlServerCreateDbModule.vue'),
+      },
     ],
   },
 ];