fix(frontend): redis整机替换bug TencentBlueKing#7596

hLinx · Nov 8, 2024 · 0ddf4f7 · 0ddf4f7
1 parent 65f3594
commit 0ddf4f7
Show file tree

Hide file tree

Showing 24 changed files with 3,740 additions and 3,699 deletions.
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -287,6 +287,7 @@
       checkType: 'ip' | 'instance';
       checkKey: keyof IValue;
       activePanelId?: string;
+      fieldFormat?: Record<string, Record<string, string>>;
       checkInstances?: (params: any) => Promise<any[] | ListBase<any[]>>;
     };
     previewConfig?: {
@@ -369,7 +370,7 @@
             role: 'redis_master',
             field: 'ip',
           },
-          columnsChecked: ['ip', 'cloud_area', 'status', 'host_name', 'os_name'],
+          columnsChecked: ['ip', 'role', 'cloud_area', 'status', 'host_name', 'os_name'],
           statusFilter: (data: RedisHostModel) => !data.isMasterFailover,
           isRemotePagination: true,
         },
@@ -385,11 +386,11 @@
         tableConfig: {
           getTableList: getRedisMachineList,
           firsrColumn: {
-            label: 'master Ip',
+            label: 'IP',
             role: 'redis_master',
             field: 'ip',
           },
-          columnsChecked: ['ip', 'cloud_area', 'status', 'host_name', 'os_name'],
+          columnsChecked: ['ip', 'role', 'cloud_area', 'status', 'host_name', 'os_name'],
           statusFilter: (data: RedisHostModel) => !data.isMasterFailover,
           isRemotePagination: false,
         },
@@ -398,6 +399,15 @@
           checkType: 'ip',
           checkKey: 'ip',
           activePanelId: 'redis',
+          fieldFormat: {
+            // column绑定的field
+            role: {
+              // 接口返回值->展示值
+              master: 'redis_master',
+              slave: 'redis_slave',
+              proxy: 'proxy',
+            },
+          },
         },
         previewConfig: {
           displayKey: 'ip',

diff --git a/...nd/src/components/instance-selector/components/common/manual-content-host/table/Index.vue b/...nd/src/components/instance-selector/components/common/manual-content-host/table/Index.vue
@@ -43,8 +43,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -192,7 +190,7 @@
       {
         fixed: 'left',
         minWidth: 160,
-        label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+        label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
         field: firstColumnField,
       },
       {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/Index.vue
@@ -80,6 +80,7 @@
         <BkLoading :loading="inputState.isLoading">
           <RenderManualHost
             :active-panel-id="manualConfig.activePanelId"
+            :field-format="manualConfig.fieldFormat"
             :firsr-column="firsrColumn"
             is-manul
             :last-values="lastValues"
@@ -93,6 +94,7 @@
   </div>
 </template>
 <script setup lang="ts" generic="T extends IValue">
+  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
   import { useGlobalBizs } from '@stores';
@@ -131,7 +133,10 @@
 
   const inputState = reactive({
     values: '',
-    placeholder: t('请输入IP_Port_如_1_1_1_1_10000_多个可使用换行_空格或_分隔'),
+    placeholder:
+      props.manualConfig.checkType === 'instance'
+        ? t('请输入IP_Port_如_1_1_1_1_10000_多个可使用换行_空格或_分隔')
+        : t('请输入IP_如_1_1_1_1_多个可使用换行_空格或_分隔'),
     isLoading: false,
     tableData: [] as T[],
   });
@@ -222,12 +227,19 @@
       //   });
       // }
       const res = await (props.manualConfig.checkInstances as (params: any) => Promise<any[]>)(params);
+      // 去重
+      let uniqRes = _.uniqBy(res, props.manualConfig.checkKey);
+      if (props.manualConfig.checkType === 'instance') {
+        // 接口实例有两种字段
+        uniqRes = _.uniqBy(res, 'instance_address');
+      }
+
       const legalInstances = [];
       for (let i = lines.length - 1; i >= 0; i--) {
         const item = lines[i];
-        const infos = res[i];
+        const infos = uniqRes[i];
         const remove = lines.splice(i, 1);
-        const isExisted = res.find((existItem) => existItem[props.manualConfig.checkKey] === item);
+        const isExisted = uniqRes.find((existItem) => existItem[props.manualConfig.checkKey] === item);
         if (!isExisted) {
           newLines.push(...remove);
         } else {

diff --git a/...rontend/src/components/instance-selector/components/common/manual-content/table/Index.vue b/...rontend/src/components/instance-selector/components/common/manual-content/table/Index.vue
@@ -32,8 +32,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     type InstanceSelectorValues,
     type IValue,
@@ -42,6 +40,7 @@
   } from '../../../../Index.vue';
 
   type TableConfigType = Required<PanelListType[number]>['tableConfig'];
+  type ManualConfigType = Required<PanelListType[number]>['manualConfig'];
 
   interface DataRow {
     data: T,
@@ -55,6 +54,7 @@
     firsrColumn?: TableConfigType['firsrColumn'],
     roleFilterList?: TableConfigType['roleFilterList'],
     disabledRowConfig?: TableConfigType['disabledRowConfig'],
+    fieldFormat?: ManualConfigType['fieldFormat'];
     statusFilter?: TableConfigType['statusFilter'],
   }
 
@@ -68,6 +68,7 @@
     statusFilter: undefined,
     activePanelId: 'tendbcluster',
     disabledRowConfig: undefined,
+    fieldFormat: undefined,
     roleFilterList: undefined,
     getTableList: undefined,
   });
@@ -159,14 +160,15 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {
       label: t('角色'),
       field: 'role',
       showOverflowTooltip: true,
       filter: props.roleFilterList,
+      render: ({ data }: DataRow) => <span>{props.fieldFormat?.role ? props.fieldFormat.role[data.role] : data.role}</span>
     },
     {
       label: t('实例状态'),

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue
@@ -48,8 +48,6 @@
   } from '@components/instance-selector/Index.vue';
   import { activePanelInjectionKey } from '@components/instance-selector/Index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import { useTableData } from './useTableData';
 
   type TableConfigType = Required<PanelListType[number]>['tableConfig'];
@@ -191,7 +189,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue
@@ -47,8 +47,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -216,7 +214,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue
@@ -49,8 +49,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -211,7 +209,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue
@@ -49,8 +49,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -215,7 +213,7 @@
       fixed: 'left',
       minWidth: 160,
       label: props.firsrColumn?.label
-        ? firstLetterToUpper(props.firsrColumn.label)
+        ? props.firsrColumn.label
         : t('实例'),
       field: props.firsrColumn?.field
         ? props.firsrColumn.field

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/sqlserver/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/sqlserver/table/Index.vue
@@ -46,8 +46,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -190,7 +188,7 @@
     {
       fixed: 'left',
       width: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/...i/frontend/src/components/instance-selector/components/tendb-cluster-host/table/Index.vue b/...i/frontend/src/components/instance-selector/components/tendb-cluster-host/table/Index.vue
@@ -41,8 +41,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -184,7 +182,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-cluster/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-cluster/table/Index.vue
@@ -47,8 +47,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -216,7 +214,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
@@ -48,8 +48,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -208,7 +206,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {

diff --git a/...ui/frontend/src/components/instance-selector/components/tendb-single-host/table/Index.vue b/...ui/frontend/src/components/instance-selector/components/tendb-single-host/table/Index.vue
@@ -41,8 +41,6 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { firstLetterToUpper } from '@utils';
-
   import {
     activePanelInjectionKey,
     type InstanceSelectorValues,
@@ -183,7 +181,7 @@
     {
       fixed: 'left',
       minWidth: 160,
-      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
     {