From 474ec11d6673b7ee66b00e2b29f445b6927ebb82 Mon Sep 17 00:00:00 2001
From: royalpioneer <royalpioneer@foxmail.com>
Date: Fri, 29 Nov 2024 14:41:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20tendbcluster=E3=80=81doris?=
 =?UTF-8?q?=E7=9A=84tab=E7=BC=BA=E5=A4=B1=20#8175=20#=20Reviewed,=20transa?=
 =?UTF-8?q?ction=20id:=2025356?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/editable-info/index.vue    |  4 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |  1 +
 .../list/components/hooks/useBaseDetails.ts   | 13 ++++-
 .../list/components/module/ConfigDetails.vue  | 15 +++--
 .../business/list/components/module/Index.vue |  1 +
 .../db-configure/components/DetailsBase.vue   | 56 +++++++++++++++++--
 6 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/dbm-ui/frontend/src/components/editable-info/index.vue b/dbm-ui/frontend/src/components/editable-info/index.vue
index 408a20cfc5..2adb56f1ce 100644
--- a/dbm-ui/frontend/src/components/editable-info/index.vue
+++ b/dbm-ui/frontend/src/components/editable-info/index.vue
@@ -64,7 +64,7 @@
                 v-overflow-tips
                 class="base-info__value text-overflow">
                 <Component
-                  :is="config.render"
+                  :is="config.render(data)"
                   v-if="config.render" />
                 <template v-else>{{ data[config.key] || '--' }}</template>
               </span>
@@ -100,7 +100,7 @@
     isEdit?: boolean;
     isCopy?: boolean;
     isRequired?: boolean;
-    render?: () => VNode | string | null;
+    render?: (data: Record<string, any>) => VNode | string | null;
   };
 
   export type EditEmitData = {
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 6ede19b15e..5ece828998 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3680,5 +3680,6 @@
   "错误日志": "错误日志",
   "点击上传": "点击上传",
   "请选择本地 SQL 文件": "请选择本地 SQL 文件",
+  "实际内存分配比率": "实际内存分配比率",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
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
index 28981b0253..c215dc5b36 100644
--- 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
@@ -27,6 +27,7 @@ interface State {
   isEmpty: boolean;
   version: string;
   data: ServiceReturnType<typeof getLevelConfig> & { charset?: string };
+  deployInfo: ServiceReturnType<typeof getLevelConfig> & { charset?: string };
 }
 /**
  * 获取参数管理基本信息
@@ -77,6 +78,13 @@ export const useBaseDetails = (immediateFetch = true, confName = 'db_version') =
       description: '',
       charset: '',
     },
+    deployInfo: {
+      conf_items: [],
+      version: '',
+      name: '',
+      description: '',
+      charset: '',
+    },
   });
 
   const fetchParams = computed(() => getFetchParams('version'));
@@ -113,8 +121,9 @@ export const useBaseDetails = (immediateFetch = true, confName = 'db_version') =
 
     state.loading = true;
     getLevelConfig(params)
-      .then((res) => {
-        res.conf_items.forEach((item) => {
+      .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') {
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
index a941fcf639..7d7b5bf2ba 100644
--- 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
index 9e2c708247..dd30440122 100644
--- 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
index 78fb3645d3..e3034ac034 100644
--- 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
@@ -78,7 +78,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
   import {
@@ -88,7 +88,7 @@
     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';
 
@@ -98,9 +98,10 @@
   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;
@@ -108,6 +109,7 @@
     title?: string;
     extraParametersCards?: ExtraConfListItem[];
     routeParams?: Record<string, any>;
+    deployInfo?: Partial<DetailData>;
   }
 
   interface Emits {
@@ -127,6 +129,10 @@
     title: '',
     extraParametersCards: () => [],
     routeParams: () => ({}),
+    deployInfo: () =>
+      ({
+        conf_items: [] as DetailData['conf_items'],
+      }),
   });
 
   const emits = defineEmits<Emits>();
@@ -138,6 +144,9 @@
 
   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];
@@ -189,8 +198,47 @@
         key: 'charset',
       });
     }
+    if (isSqlServer.value) {
+      baseColumns[0].push(
+        ...[
+          {
+            label: t('实际内存分配比率'),
+            key: 'buffer_percent',
+          },
+          {
+            label: t('主从方式'),
+            key: 'sync_type',
+            render: (data) => <span> {data.sync_type === 'mirroring' ? t('镜像') : data.sync_type} </span>
+          },
+        ],
+      );
+      baseColumns[1].push(
+        ...[
+          {
+            label: t('最大系统保留内存'),
+            key: 'max_remain_mem_gb',
+          },
+          {
+            label: t('操作系统版本'),
+            key: 'system_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,